*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0b0e17;
--bg2:#121826;
--card:#161d2e;
--line:#232c42;
--txt:#e8ecf6;
--mut:#9aa6c2;
--gold:#f5c451;
--rose:#e94f6b;
--cyan:#4fd1c5;
--rad:14px;
--glass:rgba(22,29,46,.6);
--glassline:rgba(255,255,255,.08);
--shadow:0 18px 48px -18px rgba(0,0,0,.65);
--grad:linear-gradient(135deg,#1b2340 0%,#0b0e17 45%,#241326 100%);
--grad2:linear-gradient(120deg,rgba(245,196,81,.16),rgba(233,79,107,.14),rgba(79,209,197,.12));
}
body.light{
--bg:#f6f7fb;
--bg2:#ffffff;
--card:#ffffff;
--line:#e3e7f0;
--txt:#1a2233;
--mut:#5b6784;
--glass:rgba(255,255,255,.72);
--glassline:rgba(20,30,60,.08);
--shadow:0 18px 44px -20px rgba(30,45,90,.28);
--grad:linear-gradient(135deg,#eef2fb 0%,#ffffff 50%,#fdeef2 100%);
--grad2:linear-gradient(120deg,rgba(245,196,81,.22),rgba(233,79,107,.16),rgba(79,209,197,.16));
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--bg);
color:var(--txt);
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.85;
font-size:16px;
overflow-x:hidden;
transition:background .4s ease,color .4s ease;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .25s ease}
img,svg{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
::selection{background:var(--gold);color:#111}

header{
position:sticky;top:0;z-index:99;
background:var(--glass);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
border-bottom:1px solid var(--line);
transition:background .4s ease,border-color .4s ease;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.5px;white-space:nowrap;transition:transform .3s ease}
.logo:hover{transform:translateY(-1px)}
.logo b{color:var(--gold);background:linear-gradient(90deg,var(--gold),var(--rose));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu{display:flex;gap:22px;font-size:15px}
.menu a{color:var(--mut);position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--rose));transition:width .3s ease}
.menu a:hover{color:var(--gold)}
.menu a:hover::after{width:100%}
.tools{display:flex;align-items:center;gap:10px}
.search{
display:flex;align-items:center;gap:6px;
background:var(--card);
border:1px solid var(--line);
border-radius:30px;
padding:4px 12px;
transition:border-color .3s ease,box-shadow .3s ease;
}
.search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,81,.16)}
.search input{background:none;border:none;outline:none;color:var(--txt);width:120px;font-size:14px;font-family:inherit}
.search input::placeholder{color:var(--mut)}
.search button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:15px;line-height:1;padding:2px;transition:transform .25s ease}
.search button:hover{transform:scale(1.18)}
.icobtn{
background:var(--card);border:1px solid var(--line);color:var(--txt);
width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;
display:flex;align-items:center;justify-content:center;
transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.icobtn:hover{transform:rotate(-18deg) scale(1.06);border-color:var(--gold)}
.burger{
display:none;background:var(--card);border:1px solid var(--line);color:var(--txt);
width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer;
align-items:center;justify-content:center;
transition:border-color .3s ease;
}
.burger:hover{border-color:var(--gold)}
.mobmenu{
display:none;flex-direction:column;gap:2px;padding:10px 20px 18px;
border-top:1px solid var(--line);
background:var(--glass);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
animation:fade .35s ease;
}
.mobmenu a{padding:10px 0;color:var(--mut);border-bottom:1px solid var(--line);transition:color .25s ease,padding-left .25s ease}
.mobmenu a:hover{color:var(--gold);padding-left:6px}
.mobmenu.open{display:flex}

.banner{
position:relative;overflow:hidden;
border-bottom:1px solid var(--line);
background:var(--grad);
}
.banner::before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 12% 18%,rgba(245,196,81,.18),transparent 42%),
radial-gradient(circle at 88% 82%,rgba(233,79,107,.18),transparent 46%),
radial-gradient(circle at 60% 0%,rgba(79,209,197,.12),transparent 50%);
pointer-events:none;
}
.banner::after{
content:"";position:absolute;inset:0;
background:var(--grad2);
opacity:.5;pointer-events:none;
}
.slides{position:relative;height:auto;z-index:1}
.slide{display:none;padding:64px 0 76px;position:relative}
.slide.on{display:block;animation:fade .7s ease}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slide h1{font-size:clamp(26px,4vw,44px);line-height:1.3;margin-bottom:14px;letter-spacing:.3px}
.slide h1 em{
font-style:normal;
background:linear-gradient(90deg,var(--gold),var(--rose));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.slide p{color:var(--mut);max-width:760px;font-size:17px}
.tagrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tag{
background:var(--glass);
border:1px solid var(--glassline);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:6px 14px;border-radius:30px;font-size:13px;color:var(--mut);
transition:transform .3s ease,border-color .3s ease,color .3s ease;
}
.tag:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--txt)}
.tag b{color:var(--cyan)}
.dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;display:block;transition:width .35s ease,background .35s ease}
.dots i.on{background:var(--gold);width:26px;border-radius:6px}

section{padding:56px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(22px,3vw,30px);margin-bottom:8px;letter-spacing:.3px}
h2 span{background:linear-gradient(90deg,var(--gold),var(--rose));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--mut);margin-bottom:30px;font-size:15px}
h3{font-size:19px;margin:26px 0 8px;color:var(--gold)}
h4{font-size:16px;margin:16px 0 6px;color:var(--cyan)}
p{margin-bottom:14px;color:#cdd6ea}
body.light p{color:#39435c}
strong{color:var(--txt)}
body.light strong{color:#111a2e}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--rad);
padding:22px;
position:relative;
overflow:hidden;
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .4s ease;
}
.card::before{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(245,196,81,.1),transparent 55%);
opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card h4{margin-top:0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;margin-top:30px}
.stat{
padding:22px 12px;border-radius:var(--rad);
background:var(--card);border:1px solid var(--line);
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.stat:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow)}
.stat b{
display:block;font-size:34px;font-weight:800;
background:linear-gradient(90deg,var(--gold),var(--rose));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat span{color:var(--mut);font-size:14px}

.article{
display:flex;gap:16px;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--rad);
padding:18px;
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.article:hover{border-color:var(--cyan);transform:translateX(5px);box-shadow:var(--shadow)}
.article .thumb{flex:0 0 96px}
.article .thumb svg{border-radius:10px;transition:transform .35s ease}
.article:hover .thumb svg{transform:scale(1.05)}
.article h4{margin:0 0 6px;color:var(--txt);font-size:16.5px;transition:color .3s ease}
.article:hover h4{color:var(--gold)}
.article .meta{font-size:12.5px;color:var(--mut);margin-bottom:8px}
.article p{font-size:14px;margin:0 0 8px;color:var(--mut)}
.more{color:var(--gold);font-size:13.5px;display:inline-block;transition:transform .3s ease}
.article:hover .more{transform:translateX(4px)}

.faq{
border:1px solid var(--line);
border-radius:12px;
margin-bottom:12px;
overflow:hidden;
background:var(--card);
transition:border-color .35s ease,box-shadow .35s ease;
}
.faq:hover{border-color:var(--gold)}
.faq.open{border-color:var(--gold);box-shadow:var(--shadow)}
.faq h3{
margin:0;padding:16px 20px;font-size:16px;color:var(--txt);
cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;
transition:color .3s ease;
}
.faq h3:hover{color:var(--gold)}
.faq h3 i{color:var(--gold);font-style:normal;transition:transform .35s ease;flex:0 0 auto}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .45s ease;padding:0 20px}
.faq.open .ans{max-height:460px;padding-bottom:16px}
.faq.open h3 i{transform:rotate(45deg)}

.steps{counter-reset:s;list-style:none}
.steps li{
counter-increment:s;position:relative;
padding:14px 0 14px 54px;
border-bottom:1px dashed var(--line);
transition:padding-left .3s ease,color .3s ease;
}
.steps li:hover{padding-left:60px;color:var(--txt)}
.steps li::before{
content:counter(s);position:absolute;left:0;top:14px;
width:34px;height:34px;border-radius:50%;
background:linear-gradient(135deg,var(--gold),var(--rose));
color:#111;font-weight:800;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 16px -6px rgba(245,196,81,.7);
}
.steps li b{color:var(--gold)}

.quote{
background:linear-gradient(135deg,rgba(245,196,81,.12),rgba(233,79,107,.1));
border-left:3px solid var(--gold);
padding:16px 20px;border-radius:0 12px 12px 0;
margin:18px 0;color:#dbe3f5;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
body.light .quote{color:#2b3348}

.crumb{font-size:13px;color:var(--mut);padding:14px 0}
.crumb a{color:var(--cyan)}
.crumb a:hover{color:var(--gold)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

footer{padding:46px 0 26px;background:var(--bg2);transition:background .4s ease}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
footer h4{color:var(--gold);margin-bottom:10px}
footer a,footer p{color:var(--mut);font-size:14px;display:block;margin-bottom:7px;transition:color .25s ease,transform .25s ease}
footer a:hover{color:var(--gold);transform:translateX(4px)}
.copy{
border-top:1px solid var(--line);margin-top:26px;padding-top:18px;
color:var(--mut);font-size:13px;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

#top{
position:fixed;right:20px;bottom:24px;
width:46px;height:46px;border-radius:50%;
background:linear-gradient(135deg,var(--gold),var(--rose));
color:#111;border:none;font-size:20px;cursor:pointer;
display:none;z-index:98;
box-shadow:0 12px 28px -10px rgba(245,196,81,.75);
transition:transform .3s ease,box-shadow .3s ease;
}
#top:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 34px -10px rgba(233,79,107,.8)}

@media(max-width:960px){
.g4,.g3,.fcols{grid-template-columns:repeat(2,1fr)}
.menu,.search{display:none}
.burger{display:flex}
.stats{grid-template-columns:repeat(2,1fr)}
.slide{padding:52px 0 70px}
}
@media(max-width:600px){
.g4,.g3,.g2,.fcols{grid-template-columns:1fr}
.article{flex-direction:column}
.article .thumb{width:100%;flex:0 0 auto}
.article .thumb svg{width:100%;height:auto}
.slide h1{font-size:24px}
.slide p{font-size:15.5px}
section{padding:44px 0}
.stats{grid-template-columns:repeat(2,1fr);gap:12px}
.stat b{font-size:27px}
#top{right:14px;bottom:16px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}