:root{--brand:#e63946;--brand-2:#ff7a59;--brand-3:#7c3aed;--brand-soft:#fff0f1;--brand-glow:rgba(230,57,70,.28);--ink:#1d1d1f;--ink-2:#2b2d33;--muted:#5b6069;--bg:#ffffff;--bg-soft:#f7f8fa;--bg-glass:rgba(255,255,255,.72);--line:#e6e8ec;--line-strong:#d5d8de;--card:#ffffff;--radius:16px;--radius-sm:12px;--radius-lg:22px;--shadow:0 6px 24px rgba(20,25,40,.08);--shadow-lg:0 18px 48px rgba(20,25,40,.14);--ease:cubic-bezier(.22,.61,.36,1);--grad-brand:linear-gradient(135deg,#e63946 0%,#ff7a59 55%,#ff9e6d 100%);--grad-hero:radial-gradient(1200px 460px at 12% -12%,#ffe3e5 0,transparent 58%),radial-gradient(900px 420px at 92% 0%,#f3e8ff 0,transparent 55%),linear-gradient(180deg,#fff7f7 0,#ffffff 100%);--grad-soft:linear-gradient(135deg,#fff6f6 0,#f7f8fa 100%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .35s var(--ease),color .35s var(--ease)}
a{color:var(--brand);text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);letter-spacing:.2px}
p{overflow-wrap:break-word}
::selection{background:var(--brand);color:#fff}
.container{width:min(1180px,92%);margin:0 auto}
header.site-header{position:sticky;top:0;z-index:100;background:var(--bg-glass);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .3s var(--ease)}
header.site-header:hover{box-shadow:0 8px 30px rgba(20,25,40,.06)}
.nav-wrap{display:flex;align-items:center;gap:18px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ink);transition:transform .25s var(--ease)}
.logo:hover{text-decoration:none;transform:translateY(-1px)}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900;box-shadow:0 6px 16px var(--brand-glow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.logo:hover .mark{transform:rotate(-6deg) scale(1.06);box-shadow:0 10px 22px var(--brand-glow)}
nav.main-nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
nav.main-nav a{color:var(--ink);font-size:14px;padding:6px 2px;position:relative;transition:color .2s var(--ease)}
nav.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
nav.main-nav a:hover{color:var(--brand);text-decoration:none}
nav.main-nav a:hover::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:10px}
.search-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;background:var(--bg-soft);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow);background:var(--card)}
.search-box input{border:0;background:transparent;outline:none;font-size:14px;width:130px;color:var(--ink);font-family:inherit}
.search-box input::placeholder{color:var(--muted)}
.search-box button{border:0;background:var(--grad-brand);color:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;font-family:inherit;transition:transform .2s var(--ease),box-shadow .25s var(--ease),filter .2s var(--ease)}
.search-box button:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--brand-glow);filter:brightness(1.05)}
.search-box button:active{transform:translateY(0) scale(.97)}
.icon-btn{border:1px solid var(--line);background:var(--bg-soft);border-radius:999px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;font-size:15px;color:var(--ink);font-family:inherit;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.icon-btn:hover{transform:translateY(-2px) rotate(6deg);border-color:var(--brand);color:var(--brand);box-shadow:0 8px 18px rgba(20,25,40,.1)}
.icon-btn:active{transform:scale(.94)}
.mobile-toggle{display:none}
.hero{position:relative;background:var(--grad-hero);padding:48px 0 40px;border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(230,57,70,.16),transparent 68%);pointer-events:none;animation:floatBlob 14s ease-in-out infinite}
.hero::after{content:"";position:absolute;width:420px;height:420px;left:-140px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 68%);pointer-events:none;animation:floatBlob 18s ease-in-out infinite reverse}
@keyframes floatBlob{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-18px,22px,0) scale(1.06)}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(26px,3.4vw,40px);line-height:1.28;margin:0 0 14px;letter-spacing:.5px}
.hero h1 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.hero p.lead{font-size:17px;color:var(--muted);margin:0 0 18px;max-width:640px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 24px var(--brand-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px var(--brand-glow);text-decoration:none;color:#fff}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,25,40,.1)}
.btn-ghost:active{transform:translateY(0) scale(.98)}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.stat b{display:block;font-size:24px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
.slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.slider:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(20,25,40,.18)}
.slides{display:flex;transition:transform .6s var(--ease)}
.slide{min-width:100%;padding:24px}
.slide h3{margin:8px 0 6px;font-size:18px}
.slide p{margin:0;color:var(--muted);font-size:14px}
.slide .tag{display:inline-block;font-size:12px;color:#fff;background:var(--grad-brand);padding:2px 10px;border-radius:999px;box-shadow:0 4px 12px var(--brand-glow)}
.slider-nav{position:absolute;bottom:12px;right:14px;display:flex;gap:6px}
.slider-nav button{width:9px;height:9px;border-radius:50%;border:0;background:#d9dbe1;cursor:pointer;padding:0;transition:width .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.slider-nav button:hover{transform:scale(1.25)}
.slider-nav button.active{width:22px;border-radius:999px;background:var(--grad-brand)}
.section{padding:52px 0;position:relative}
.section.soft{background:var(--bg-soft)}
.section.soft::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 300px at 85% 0%,rgba(230,57,70,.05),transparent 60%);pointer-events:none}
.section-head{max-width:760px;margin-bottom:26px;position:relative}
.section-head h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 10px;line-height:1.35}
.section-head h2::after{content:"";display:block;width:52px;height:4px;border-radius:4px;background:var(--grad-brand);margin-top:12px}
.section-head p{margin:0;color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(230,57,70,.5),rgba(124,58,237,.35),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card:hover::before{opacity:1}
.card h3{margin:12px 0 8px;font-size:18px;transition:color .25s var(--ease)}
.card:hover h3{color:var(--brand)}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.card ul li{margin-bottom:4px;transition:color .2s var(--ease),transform .2s var(--ease)}
.card ul li:hover{color:var(--ink);transform:translateX(2px)}
.icon-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover .icon-badge{transform:rotate(-8deg) scale(1.08);background:var(--grad-brand);color:#fff;box-shadow:0 10px 22px var(--brand-glow)}
.breadcrumb{font-size:13px;color:var(--muted);padding:14px 0 0;position:relative;z-index:1}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{color:var(--ink)}
.article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.article-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease)}
.article-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-brand);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.article-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.article-item:hover::after{transform:scaleY(1)}
.article-item h3{margin:0 0 6px;font-size:17px;transition:color .25s var(--ease)}
.article-item:hover h3{color:var(--brand)}
.article-item .meta{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.article-item p{margin:0 0 10px;color:var(--muted);font-size:14px}
.read-more{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:gap .25s var(--ease),color .2s var(--ease)}
.read-more:hover{text-decoration:none;gap:9px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;background:var(--card);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.faq-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.faq-item.open{border-color:var(--brand);box-shadow:0 10px 28px rgba(230,57,70,.12)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:16px 18px;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-family:inherit;transition:color .25s var(--ease),background .25s var(--ease)}
.faq-q:hover{color:var(--brand);background:rgba(230,57,70,.03)}
.faq-q .plus{color:var(--brand);font-weight:800;transition:transform .3s var(--ease);flex-shrink:0}
.faq-item.open .faq-q .plus{transform:rotate(180deg)}
.faq-a{padding:0 18px 16px;color:var(--muted);font-size:14.5px;display:none;animation:fadeSlide .35s var(--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;display:grid;gap:14px}
.step{position:relative;padding:16px 18px 16px 58px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.step:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:0 6px 14px var(--brand-glow);transition:transform .3s var(--ease)}
.step:hover::before{transform:scale(1.1) rotate(-8deg)}
.step h4{margin:0 0 4px;font-size:15.5px}
.step p{margin:0;color:var(--muted);font-size:14px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
th{background:var(--bg-soft);font-weight:700;color:var(--ink)}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:rgba(230,57,70,.04)}
tr:last-child td{border-bottom:0}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.contact-info li{margin-bottom:10px;list-style:none}
.contact-info{padding:0;margin:0}
.contact-info b{color:var(--ink)}
.site-footer{background:linear-gradient(180deg,#1d1f24 0,#15171b 100%);color:#c9ccd3;padding:44px 0 20px;margin-top:20px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;width:600px;height:600px;right:-200px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(230,57,70,.14),transparent 68%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;position:relative;z-index:1}
.site-footer h4{color:#fff;font-size:15px;margin:0 0 12px}
.site-footer a{color:#c9ccd3;font-size:14px;transition:color .2s var(--ease),padding-left .2s var(--ease)}
.site-footer a:hover{color:#fff;text-decoration:none;padding-left:3px}
.site-footer ul{padding:0;margin:0;list-style:none}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid #2c2f36;margin-top:28px;padding-top:16px;font-size:13px;color:#8f939c;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.back-top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--grad-brand);color:#fff;border:0;cursor:pointer;font-size:18px;box-shadow:0 10px 26px var(--brand-glow);display:none;z-index:120;font-family:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.back-top:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 34px var(--brand-glow)}
.back-top:active{transform:scale(.94)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
body.dark{--ink:#e8eaee;--ink-2:#d6d9df;--muted:#a3a8b3;--bg:#14161a;--bg-soft:#1b1e24;--bg-glass:rgba(20,22,26,.72);--line:#2a2e36;--line-strong:#363b45;--card:#1b1e24;--brand-soft:#3a1e22;--brand-glow:rgba(230,57,70,.4);--shadow:0 6px 24px rgba(0,0,0,.4);--shadow-lg:0 18px 48px rgba(0,0,0,.55);--grad-hero:radial-gradient(1200px 460px at 12% -12%,#3a1e22 0,transparent 58%),radial-gradient(900px 420px at 92% 0%,#2a1e3f 0,transparent 55%),linear-gradient(180deg,#1b1e24 0,#14161a 100%);--grad-soft:linear-gradient(135deg,#1f2229 0,#1b1e24 100%)}
body.dark header.site-header{background:var(--bg-glass)}
body.dark .search-box,body.dark .icon-btn{background:#1b1e24}
body.dark .search-box input{color:var(--ink)}
body.dark .btn-ghost{background:#1b1e24;color:var(--ink)}
body.dark .slide,body.dark .card,body.dark .article-item,body.dark .faq-item,body.dark .step,body.dark table{background:#1b1e24}
body.dark .icon-badge{background:#3a1e22}
body.dark .site-footer{background:linear-gradient(180deg,#0f1114 0,#0a0c0f 100%)}
body.dark .slider-nav button{background:#3a3f4a}
body.dark .slider-nav button.active{background:var(--grad-brand)}
body.dark th{background:#22262e}
body.dark tbody tr:hover{background:rgba(230,57,70,.08)}
body.dark .faq-q:hover{background:rgba(230,57,70,.08)}
@media(max-width:980px){
.hero-grid,.grid-3,.grid-2,.article-list,.contact-grid,.footer-grid{grid-template-columns:1fr}
.mobile-toggle{display:grid}
nav.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-direction:column;padding:14px 5%;border-bottom:1px solid var(--line);gap:10px;box-shadow:var(--shadow-lg);animation:menuDrop .3s var(--ease)}
nav.main-nav.open{display:flex}
nav.main-nav a{padding:8px 0;border-bottom:1px solid var(--line)}
nav.main-nav a:last-child{border-bottom:0}
nav.main-nav a::after{display:none}
.search-box input{width:100px}
.hero{padding:36px 0 30px}
.section{padding:40px 0}
.slider:hover{transform:none}
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:560px){
.hero-stats{gap:16px}
.stat b{font-size:20px}
.stat span{font-size:12px}
.hero-actions{width:100%}
.btn{flex:1;justify-content:center}
.search-box input{width:76px}
.logo{font-size:18px}
.card{padding:18px}
.article-item{padding:16px}
.section-head h2::after{width:42px}
.back-top{right:14px;bottom:16px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.reveal{opacity:1;transform:none}
}