*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#00d4ff;--secondary:#7b2ff7;--accent:#ff2d75;--dark:#0a0e1a;--darker:#060810;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:#1e293b}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--dark);color:var(--text);line-height:1.7;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* 顶部导航 */
header{background:linear-gradient(180deg,rgba(10,14,26,.98) 0%,rgba(10,14,26,.9) 100%);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:999}
nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;flex-wrap:wrap;gap:10px}
.logo{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px}
.nav-links{display:flex;list-style:none;gap:8px;flex-wrap:wrap}
.nav-links a{padding:8px 16px;border-radius:8px;font-size:14px;color:var(--muted);transition:all .3s}
.nav-links a:hover{color:var(--primary);background:rgba(0,212,255,.08)}

/* Hero */
.hero{background:radial-gradient(ellipse at 50% 0%,rgba(123,47,247,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(0,212,255,.08) 0%,transparent 50%),var(--dark);padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(0,212,255,.02) 50px,rgba(0,212,255,.02) 51px);animation:none}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.hero h1{font-size:clamp(28px,5vw,48px);font-weight:900;margin-bottom:18px;line-height:1.2}
.hero h1 span{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:clamp(14px,2.5vw,18px);color:var(--muted);max-width:600px;margin:0 auto 30px}
.btn{display:inline-block;padding:14px 36px;border-radius:10px;font-size:16px;font-weight:700;transition:all .3s;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 20px rgba(0,212,255,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(0,212,255,.45)}
.btn-accent{background:linear-gradient(135deg,var(--accent),#ff6b35);color:#fff;box-shadow:0 4px 20px rgba(255,45,117,.3)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(255,45,117,.45)}

/* 数据条 */
.stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:40px;padding-top:40px;border-top:1px solid var(--border)}
.stat-item{text-align:center}
.stat-num{font-size:clamp(24px,4vw,36px);font-weight:900;color:var(--primary)}
.stat-label{font-size:13px;color:var(--muted);margin-top:4px}

/* 三张主图 */
.showcase{padding:60px 0;background:linear-gradient(180deg,var(--dark),var(--darker))}
.section-title{text-align:center;font-size:clamp(24px,4vw,36px);font-weight:800;margin-bottom:12px}
.section-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:40px}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.show-card{background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--border);transition:all .3s}
.show-card:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 10px 40px rgba(0,212,255,.1)}
.show-img{height:220px;display:flex;align-items:center;justify-content:center;font-size:60px;position:relative;overflow:hidden}
.show-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--card) 100%)}
.si-1{background:linear-gradient(135deg,#1a0533,#0d1b2a)}
.si-2{background:linear-gradient(135deg,#0d1b2a,#1a0533)}
.si-3{background:linear-gradient(135deg,#1a1a2e,#16213e)}
.show-info{padding:24px}
.show-info h3{font-size:20px;margin-bottom:8px;color:#fff}
.show-info p{color:var(--muted);font-size:14px}

/* 功能卡片 */
.features{padding:60px 0;background:var(--darker)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.feat-card{background:var(--card);padding:30px;border-radius:14px;border:1px solid var(--border);transition:all .3s;position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:opacity .3s}
.feat-card:hover{border-color:rgba(0,212,255,.3);transform:translateY(-3px)}
.feat-card:hover::before{opacity:1}
.feat-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.fi-1{background:rgba(0,212,255,.15)}
.fi-2{background:rgba(123,47,247,.15)}
.fi-3{background:rgba(255,45,117,.15)}
.fi-4{background:rgba(0,255,136,.15)}
.fi-5{background:rgba(255,170,0,.15)}
.fi-6{background:rgba(0,150,255,.15)}
.feat-card h3{font-size:18px;margin-bottom:8px;color:#fff}
.feat-card p{color:var(--muted);font-size:14px}

/* 部署教程 */
.tutorial{padding:60px 0;background:var(--dark)}
.tut-steps{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.tut-step{background:var(--card);padding:24px;border-radius:12px;border-left:4px solid var(--primary);display:flex;gap:16px;align-items:flex-start;transition:all .3s}
.tut-step:hover{background:rgba(17,24,39,.8);transform:translateX(4px)}
.step-num{min-width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.step-content h4{color:#fff;margin-bottom:6px;font-size:16px}
.step-content p{color:var(--muted);font-size:14px}

/* 下载区域 */
.download-zone{padding:80px 0;text-align:center;background:radial-gradient(ellipse at center,rgba(123,47,247,.12) 0%,var(--dark) 70%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.download-zone h2{font-size:clamp(28px,5vw,42px);font-weight:900;margin-bottom:12px}
.download-zone p{color:var(--muted);margin-bottom:30px;font-size:16px}

/* 常见问题 */
.faq{padding:60px 0;background:var(--darker)}
.faq-list{max-width:750px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--card);border-radius:12px;border:1px solid var(--border);overflow:hidden}
.faq-q{padding:18px 24px;font-weight:600;color:var(--primary);cursor:default;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.faq-a{padding:0 24px 18px;color:var(--muted);font-size:14px;line-height:1.8}

/* 底部参数 */
footer{background:var(--darker);border-top:1px solid var(--border);padding:50px 0 30px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:40px}
.footer-col h4{color:#fff;margin-bottom:14px;font-size:15px}
.footer-col p,.footer-col a{color:var(--muted);font-size:13px;display:block;margin-bottom:8px;transition:color .3s}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.footer-bottom a{color:var(--primary)}

/* 响应式 */
@media(max-width:768px){
  .hero{padding:50px 0 40px}
  .stats{gap:24px}
  .showcase-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .nav-links{gap:4px}
  .nav-links a{padding:6px 12px;font-size:13px}
  .tut-step{padding:18px}
  .download-zone{padding:50px 0}
}
@media(max-width:480px){
  .container{padding:0 14px}
  .show-img{height:180px;font-size:48px}
  .btn{padding:12px 28px;font-size:15px}
}