:root{--c-primary: #ff4f9b;--c-primary-2: #c44dff;--c-primary-3: #6b5bff;--c-accent: #00e5ff;--c-accent-2: #7c4dff;--c-bg: #0d0a1a;--c-bg-2: #161028;--c-bg-3: #1e1638;--c-card: rgba(30, 22, 56, .65);--c-card-border: rgba(196, 77, 255, .25);--c-text: #f0eaff;--c-text-2: #b8aed6;--c-text-3: #8a7fb0;--c-gold: #ffd166;--radius: 16px;--radius-sm: 10px;--radius-lg: 24px;--shadow-glow: 0 0 30px rgba(196, 77, 255, .35);--shadow-card: 0 8px 32px rgba(0, 0, 0, .4);--nav-h: 68px;--max-w: 1200px;--grad-main: linear-gradient(135deg, #ff4f9b 0%, #c44dff 50%, #6b5bff 100%);--grad-accent: linear-gradient(135deg, #00e5ff 0%, #7c4dff 100%);--grad-text: linear-gradient(90deg, #ff4f9b, #c44dff, #00e5ff)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.7;overflow-x:hidden;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 600px 400px at 10% 10%,rgba(255,79,155,.12),transparent 70%),radial-gradient(ellipse 500px 500px at 90% 20%,rgba(0,229,255,.1),transparent 70%),radial-gradient(ellipse 700px 500px at 50% 90%,rgba(196,77,255,.12),transparent 70%);pointer-events:none;z-index:0}a{color:inherit;text-decoration:none;transition:color .25s}a:hover{color:var(--c-accent)}img{max-width:100%;height:auto;display:block;border:0}ul,ol{list-style:none}h1,h2,h3,h4{line-height:1.35;font-weight:700}.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;position:relative;z-index:1}.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;background:#0d0a1ad1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(196,77,255,.18);transition:transform .35s cubic-bezier(.4,0,.2,1),background .3s}.navbar.nav-hidden{transform:translateY(-100%)}.navbar-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.nav-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;flex-shrink:0}.nav-logo-icon{width:36px;height:36px;border-radius:10px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 16px #ff4f9b80}.nav-logo span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.nav-menu{display:flex;align-items:center;gap:6px}.nav-menu a{padding:8px 14px;border-radius:var(--radius-sm);font-size:15px;color:var(--c-text-2);transition:all .25s;white-space:nowrap}.nav-menu a:hover,.nav-menu a.active{color:#fff;background:#c44dff2e}.nav-cta{background:var(--grad-main)!important;color:#fff!important;font-weight:600;padding:9px 20px!important;box-shadow:0 4px 18px #ff4f9b66}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px #ff4f9b8c}.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:#c44dff26;border:1px solid rgba(196,77,255,.3);border-radius:10px;cursor:pointer;padding:0 10px}.nav-toggle span{display:block;height:2px;background:var(--c-text);border-radius:2px;transition:all .3s}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:#0d0a1af7;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(196,77,255,.2);padding:16px 24px 24px;z-index:999;transform:translateY(-120%);opacity:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s}.mobile-menu.open{transform:translateY(0);opacity:1}.mobile-menu a{display:block;padding:14px 12px;font-size:16px;color:var(--c-text-2);border-bottom:1px solid rgba(196,77,255,.1);border-radius:8px}.mobile-menu a:last-child{border-bottom:0}.mobile-menu a.active,.mobile-menu a:hover{color:#fff;background:#c44dff26}.mobile-menu .nav-cta{margin-top:12px;text-align:center;border-radius:12px}.hero{padding:calc(var(--nav-h) + 60px) 0 70px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:#00e5ff1a;border:1px solid rgba(0,229,255,.3);border-radius:100px;font-size:13px;color:var(--c-accent);margin-bottom:20px}.hero h1{font-size:clamp(28px,4.5vw,48px);margin-bottom:20px;letter-spacing:-.5px}.hero-desc{font-size:17px;color:var(--c-text-2);margin-bottom:32px;max-width:560px}.hero-btns{display:flex;gap:16px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border-radius:100px;font-size:16px;font-weight:600;cursor:pointer;border:0;transition:all .3s;text-align:center}.btn-primary{background:var(--grad-main);color:#fff;box-shadow:0 6px 24px #ff4f9b73}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px #ff4f9b99;color:#fff}.btn-ghost{background:#c44dff1f;border:1px solid rgba(196,77,255,.4);color:var(--c-text)}.btn-ghost:hover{background:#c44dff38;border-color:#c44dff99;color:#fff}.hero-image{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-glow),var(--shadow-card);border:1px solid var(--c-card-border)}.hero-image img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}.hero-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,79,155,.15),transparent 50%,rgba(0,229,255,.15));pointer-events:none}.section{padding:70px 0;position:relative;z-index:1}.section-head{text-align:center;margin-bottom:48px}.section-head .tag{display:inline-block;padding:5px 16px;background:#ff4f9b1a;border:1px solid rgba(255,79,155,.3);border-radius:100px;font-size:13px;color:var(--c-primary);margin-bottom:14px}.section-head h2{font-size:clamp(24px,3.5vw,36px);margin-bottom:14px}.section-head p{font-size:16px;color:var(--c-text-2);max-width:680px;margin:0 auto}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.card{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--radius);padding:28px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .35s;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-main);transform:scaleX(0);transform-origin:left;transition:transform .4s}.card:hover{transform:translateY(-6px);border-color:#c44dff80;box-shadow:var(--shadow-glow)}.card:hover:before{transform:scaleX(1)}.card-icon{width:52px;height:52px;border-radius:14px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;box-shadow:0 4px 16px #ff4f9b59}.card h3{font-size:19px;margin-bottom:10px}.card p{font-size:14.5px;color:var(--c-text-2);line-height:1.75}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}.step{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--radius);padding:28px 24px;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.step-num{width:40px;height:40px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin-bottom:16px;box-shadow:0 0 16px #00e5ff66}.step h3{font-size:17px;margin-bottom:8px}.step p{font-size:14px;color:var(--c-text-2)}.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:56px}.feature-row:last-child{margin-bottom:0}.feature-row.reverse .feature-text{order:2}.feature-text h3{font-size:clamp(20px,2.8vw,28px);margin-bottom:16px}.feature-text p{font-size:15.5px;color:var(--c-text-2);margin-bottom:14px}.feature-text ul{margin-top:16px}.feature-text li{padding:8px 0 8px 28px;position:relative;font-size:14.5px;color:var(--c-text-2)}.feature-text li:before{content:"✦";position:absolute;left:0;color:var(--c-accent);font-size:16px}.feature-img{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--c-card-border);box-shadow:var(--shadow-card)}.feature-img img{width:100%;aspect-ratio:4/3;object-fit:cover}.cta-band{background:var(--grad-main);border-radius:var(--radius-lg);padding:48px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 12px 40px #ff4f9b59}.cta-band:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);animation:rotate 20s linear infinite}.cta-band h2{font-size:clamp(22px,3vw,32px);color:#fff;margin-bottom:12px;position:relative}.cta-band p{color:#ffffffe6;font-size:16px;margin-bottom:28px;position:relative}.cta-band .btn{background:#fff;color:var(--c-primary);position:relative}.cta-band .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;text-align:center}.stat{padding:24px 16px}.stat-num{font-size:clamp(28px,4vw,42px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}.stat-label{font-size:14px;color:var(--c-text-3)}.article{padding:calc(var(--nav-h) + 50px) 0 60px}.article-header{text-align:center;margin-bottom:40px}.article-header .tag{display:inline-block;padding:5px 16px;background:#00e5ff1a;border:1px solid rgba(0,229,255,.3);border-radius:100px;font-size:13px;color:var(--c-accent);margin-bottom:16px}.article-header h1{font-size:clamp(26px,4vw,40px);margin-bottom:16px}.article-header p{font-size:16px;color:var(--c-text-2);max-width:720px;margin:0 auto}.article-body{max-width:860px;margin:0 auto}.article-body h2{font-size:clamp(20px,2.6vw,26px);margin:40px 0 16px;padding-left:14px;border-left:4px solid var(--c-primary)}.article-body h3{font-size:18px;margin:28px 0 12px;color:var(--c-accent)}.article-body p{font-size:15.5px;color:var(--c-text-2);margin-bottom:16px;line-height:1.85}.article-body ul,.article-body ol{margin:16px 0;padding-left:8px}.article-body li{padding:8px 0 8px 24px;position:relative;font-size:15px;color:var(--c-text-2);line-height:1.8}.article-body ul li:before{content:"◆";position:absolute;left:0;color:var(--c-primary);font-size:12px;top:12px}.article-body ol{counter-reset:ol;padding-left:0}.article-body ol li{counter-increment:ol;padding-left:32px}.article-body ol li:before{content:counter(ol);position:absolute;left:0;width:22px;height:22px;background:var(--grad-main);border-radius:50%;font-size:12px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;top:10px}.article-img{margin:28px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-card-border);box-shadow:var(--shadow-card)}.article-img img{width:100%;aspect-ratio:16/9;object-fit:cover}.article-img figcaption{padding:10px 16px;font-size:13px;color:var(--c-text-3);text-align:center;background:#0003}.code-block{background:#0a0718;border:1px solid rgba(0,229,255,.2);border-radius:var(--radius-sm);padding:20px;margin:16px 0;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:13.5px;line-height:1.7;color:#a5e3ff}.code-block .k{color:#ff79c6}.code-block .s{color:#f1fa8c}.code-block .c{color:#6272a4;font-style:italic}.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;border-radius:var(--radius-sm);overflow:hidden}.data-table th{background:#c44dff33;padding:12px 16px;text-align:left;font-weight:600;color:#fff;border-bottom:1px solid rgba(196,77,255,.3)}.data-table td{padding:11px 16px;color:var(--c-text-2);border-bottom:1px solid rgba(196,77,255,.1)}.data-table tr:hover td{background:#c44dff0f}.faq-item{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden}.faq-q{padding:18px 22px;font-weight:600;font-size:15.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}.faq-q:after{content:"+";font-size:22px;color:var(--c-accent);flex-shrink:0;transition:transform .3s}.faq-item.open .faq-q:after{transform:rotate(45deg)}.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-item.open .faq-a{max-height:500px}.faq-a-inner{padding:0 22px 20px;font-size:14.5px;color:var(--c-text-2);line-height:1.8}.footer{border-top:1px solid rgba(196,77,255,.18);padding:48px 0 28px;background:#0d0a1a99;position:relative;z-index:1}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}.footer-brand p{font-size:14px;color:var(--c-text-3);margin-top:14px;max-width:300px;line-height:1.8}.footer-col h4{font-size:15px;margin-bottom:16px;color:#fff}.footer-col a{display:block;padding:5px 0;font-size:14px;color:var(--c-text-3)}.footer-col a:hover{color:var(--c-accent)}.footer-bottom{border-top:1px solid rgba(196,77,255,.12);padding-top:20px;text-align:center;font-size:13px;color:var(--c-text-3)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.float-anim{animation:float 4s ease-in-out infinite}@media (max-width: 960px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero-image{max-width:520px;margin:0 auto}.feature-row{grid-template-columns:1fr;gap:28px}.feature-row.reverse .feature-text{order:0}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}@media (max-width: 768px){:root{--nav-h: 60px}.nav-menu{display:none}.nav-toggle{display:flex}.mobile-menu{display:block}.hero{padding:calc(var(--nav-h) + 40px) 0 50px}.section{padding:50px 0}.container,.navbar-inner{padding:0 18px}.nav-logo{font-size:17px}.nav-logo-icon{width:32px;height:32px;font-size:16px}.hero-btns{flex-direction:column}.hero-btns .btn{width:100%}.card-grid,.steps{grid-template-columns:1fr}.cta-band{padding:36px 24px}.footer-grid{grid-template-columns:1fr;gap:24px}.article{padding:calc(var(--nav-h) + 36px) 0 44px}.data-table{font-size:13px}.data-table th,.data-table td{padding:9px 10px}}@media (max-width: 480px){.hero h1{font-size:26px}.section-head h2{font-size:22px}.card{padding:22px}.btn{padding:12px 24px;font-size:15px}}
