*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif;background:#080816;color:#d0d8e8;overflow-x:hidden;min-height:100vh}

/* ===== 星空粒子背景 ===== */
.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.stars .dot{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:twinkle var(--d) ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:0;transform:scale(0.3)}100%{opacity:var(--o);transform:scale(1)}}

/* ===== 主背景渐变 ===== */
body::before{content:'';position:fixed;top:-40%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 30% 40%,rgba(0,212,255,0.06),transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(139,92,246,0.05),transparent 50%),radial-gradient(ellipse at 50% 30%,rgba(244,114,182,0.03),transparent 40%);pointer-events:none;z-index:0;animation:nebula 20s ease-in-out infinite alternate}
@keyframes nebula{0%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-1%) scale(1.02)}100%{transform:translate(-1%,2%) scale(0.98)}}

/* ===== 浮动光球 ===== */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px)}
.orb-1{width:400px;height:400px;background:rgba(0,212,255,0.06);top:-100px;right:-100px;animation:float1 15s ease-in-out infinite alternate}
.orb-2{width:300px;height:300px;background:rgba(139,92,246,0.05);bottom:-80px;left:-80px;animation:float2 18s ease-in-out infinite alternate}
.orb-3{width:200px;height:200px;background:rgba(244,114,182,0.04);top:50%;left:50%;animation:float3 12s ease-in-out infinite alternate}
@keyframes float1{0%{transform:translate(0,0)}100%{transform:translate(-60px,40px)}}
@keyframes float2{0%{transform:translate(0,0)}100%{transform:translate(60px,-50px)}}
@keyframes float3{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-30%,-40%) scale(1.3)}}

/* ===== 导航 ===== */
nav{position:fixed;top:0;width:100%;z-index:100;padding:0 5%}
.nav-bg{position:absolute;top:12px;left:5%;right:5%;height:56px;background:rgba(12,12,30,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px;border:1px solid rgba(255,255,255,0.04)}
.nav-inner{position:relative;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px}
.nav-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#00d4ff;letter-spacing:1px}
.nav-brand svg{flex-shrink:0}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:13px;color:#6a7a9a;text-decoration:none;transition:color .3s;letter-spacing:0.3px}
.nav-links a:hover{color:#00d4ff}
.nav-links a.active{color:#e0e8f0}
.nav-cta{font-size:12px;font-weight:600;color:#080816;background:linear-gradient(135deg,#00d4ff,#6a5acd);padding:8px 22px;border-radius:8px;text-decoration:none;transition:all .3s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,212,255,0.3)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 5% 80px;z-index:1}
.hero-content{position:relative;z-index:2;max-width:820px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.1);border-radius:20px;font-size:11px;color:#5aa8d4;margin-bottom:20px;letter-spacing:0.5px}
.hero-badge::before{content:'';width:5px;height:5px;background:#00d4ff;border-radius:50%;display:block;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.15;margin-bottom:16px;letter-spacing:-0.5px}
.hero h1 .gradient{background:linear-gradient(135deg,#00d4ff 0%,#8b5cf6 40%,#f472b6 70%,#00d4ff 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 6s ease-in-out infinite alternate}
@keyframes gradientShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.hero h1 .block{display:block}
.hero p{font-size:clamp(1rem,1.8vw,1.15rem);color:#6a7a9a;margin-bottom:32px;line-height:1.9;max-width:600px;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 34px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;transition:all .3s;letter-spacing:0.3px}
.hero-btn.primary{background:linear-gradient(135deg,#00d4ff,#6a5acd);color:#080816;box-shadow:0 0 30px rgba(0,212,255,0.2)}
.hero-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,212,255,0.35)}
.hero-btn.secondary{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:#8a9ab8}
.hero-btn.secondary:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1);color:#d0d8e8}

/* ===== 分隔 ===== */
.divider{position:relative;height:60px;z-index:1}
.divider::before{content:'';position:absolute;top:50%;left:5%;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.15),rgba(139,92,246,0.15),transparent)}
.divider::after{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:rgba(0,212,255,0.2);animation:spinGlow 4s ease-in-out infinite;background:#080816;padding:0 12px}
@keyframes spinGlow{0%,100%{opacity:0.2;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.6;transform:translate(-50%,-50%) scale(1.2)}}

/* ===== sections ===== */
section{position:relative;z-index:1;padding:60px 5%}
.section-inner{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:44px}
.section-tag{font-size:11px;color:#6a5acd;letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#e0e8f0;margin-bottom:8px}
.section-sub{font-size:14px;color:#5a6a8a;max-width:540px;margin:0 auto;line-height:1.8}

/* ===== 特色卡片 ===== */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.f-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:14px;padding:28px 22px;transition:all .4s;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.f-card:hover{transform:translateY(-4px);border-color:rgba(0,212,255,0.15);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.f-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.3),transparent);opacity:0;transition:opacity .4s}
.f-card:hover::before{opacity:1}
.f-card .fc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02)}
.f-card h3{font-size:16px;font-weight:700;color:#d0d8e8;margin-bottom:6px}
.f-card p{font-size:13px;color:#5a6a8a;line-height:1.7}

/* ===== 数据统计 ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.stat-box{text-align:center;padding:20px 12px;background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.03);border-radius:10px}
.stat-box .num{font-size:28px;font-weight:800;background:linear-gradient(135deg,#00d4ff,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-box .label{font-size:12px;color:#4a5a7a;margin-top:2px;letter-spacing:0.5px}

/* ===== 文章网格 ===== */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.a-card{background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:24px;transition:all .4s;position:relative;backdrop-filter:blur(8px)}
.a-card:hover{border-color:rgba(139,92,246,0.15);transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,0.2)}
.a-card .a-tag{display:inline-block;font-size:9px;padding:2px 8px;border-radius:4px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.a-card .a-tag.t1{background:rgba(0,212,255,0.08);color:#00d4ff}
.a-card .a-tag.t2{background:rgba(139,92,246,0.08);color:#a78bfa}
.a-card .a-tag.t3{background:rgba(244,114,182,0.08);color:#f472b6}
.a-card h3{font-size:15px;font-weight:700;margin-bottom:4px;line-height:1.4}
.a-card h3 a{color:#d0d8e8;text-decoration:none;transition:color .3s}
.a-card h3 a:hover{color:#00d4ff}
.a-card .a-excerpt{font-size:12px;color:#4a5a7a;line-height:1.7;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-card .a-meta{font-size:10px;color:#3a4a6a;margin-top:10px;display:flex;gap:12px}

/* ===== 分类列表 ===== */
.cat-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.03);border-radius:10px;text-decoration:none;transition:all .3s}
.cat-item:hover{border-color:rgba(0,212,255,0.12);transform:translateX(4px);background:rgba(0,212,255,0.02)}
.cat-item .ci-title{font-size:14px;color:#b0c0d8;font-weight:500}
.cat-item .ci-arrow{font-size:12px;color:#3a4a6a;transition:all .3s}
.cat-item:hover .ci-arrow{color:#00d4ff;transform:translateX(2px)}

/* ===== 文章页 ===== */
.article-page{max-width:720px;margin:0 auto;padding:100px 5% 60px;position:relative;z-index:1}
.article-page h1{font-size:28px;font-weight:800;margin-bottom:12px;color:#e0e8f0;line-height:1.25}
.article-page .a-p-meta{font-size:12px;color:#4a5a7a;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.04)}
.article-page .a-p-body{font-size:15px;line-height:2;color:#9aabbe}
.article-page .a-p-body p{margin-bottom:14px}
.article-page .a-p-body h2{font-size:20px;font-weight:700;color:#d0d8e8;margin:28px 0 10px;padding-left:14px;border-left:2px solid #00d4ff}
.article-page .a-p-body ul{padding-left:20px;margin:8px 0 14px}
.article-page .a-p-body ul li{margin-bottom:4px;list-style:none;position:relative;padding-left:16px}
.article-page .a-p-body ul li::before{content:'▸';position:absolute;left:0;color:#00d4ff;font-size:12px}

/* ===== 页脚 ===== */
footer{position:relative;z-index:1;padding:48px 5% 36px;text-align:center}
footer::before{content:'';position:absolute;top:0;left:5%;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.08),transparent)}
footer .f-brand{font-size:14px;font-weight:700;color:#3a4a6a;letter-spacing:2px;margin-bottom:6px}
footer .f-links{display:flex;justify-content:center;gap:20px;margin:10px 0;flex-wrap:wrap}
footer .f-links a{font-size:12px;color:#3a4a6a;text-decoration:none;transition:color .3s}
footer .f-links a:hover{color:#00d4ff}
footer p{font-size:11px;color:#2a3a5a;line-height:1.8}

/* ===== 响应式 ===== */
  .article-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:flex;gap:8px}
  .nav-cta{font-size:11px;padding:6px 16px}
  .hero h1{font-size:26px}
  .hero-btn{width:100%;justify-content:center}
}
  .stats-grid{grid-template-columns:1fr}
  section{padding:40px 4%}
}


/* === article compat === */
:root{--navbg:rgba(8,8,22,0.85);--bd:rgba(255,255,255,0.06);--cardbg:rgba(255,255,255,0.02);--mt:#5a6a8a;--ac:#00d4ff;--tx:#d0d8e8}
.h{background:rgba(8,8,22,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.04);padding:0 5%;position:sticky;top:0;z-index:100}
.hi{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.lgo{font-size:18px;font-weight:700;color:#00d4ff;text-decoration:none;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.nv{display:flex;gap:20px;align-items:center}
.ft{border-top:1px solid rgba(255,255,255,0.04);padding:14px 5%;max-width:1200px;margin:0 auto;font-size:12px;color:#3a4a6a;text-align:center}
.abd {
font-size:.88rem;
line-height:1.8;
color:var(--mt)
}
.ac {
background:var(--cardbg);
border:1px solid var(--bd);
border-radius:var(--r);
padding:24px
}
.aw {
max-width:800px;
margin:0 auto;
padding:30px 20px 40px
}
@media(max-width:768px){
  .hero{padding:80px 5% 40px;min-height:auto}
  .hero h1{font-size:24px!important}
  .hero p{font-size:14px!important;margin-bottom:24px}
  .hero-badge{font-size:9px;padding:3px 10px}
  .hero-btn{padding:12px 24px;font-size:14px;width:100%;justify-content:center}
  .hero-actions{flex-direction:column;gap:10px}
  .features{grid-template-columns:1fr 1fr;gap:10px}
  .f-card{padding:20px 16px}
  .f-card h3{font-size:14px}
  .f-card p{font-size:12px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-box{padding:14px 8px}
  .stat-box .num{font-size:22px}
  .article-grid{grid-template-columns:1fr;gap:12px}
  .a-card{padding:18px}
  .a-card h3{font-size:14px}
  .cat-list{gap:6px}
  .cat-item{padding:10px 14px}
  .cat-item .ci-title{font-size:12px}
  section{padding:40px 4%}
  .section-header{margin-bottom:28px}
  .section-title{font-size:18px}
  .section-sub{font-size:12px}
  footer{padding:30px 4% 24px}
  footer .f-links{gap:12px}
  footer .f-links a{font-size:10px}
  .nav-inner{gap:8px}
  .nav-links{display:flex;gap:8px}
  .nav-cta{font-size:10px;padding:6px 14px}
  .nav-brand span span:first-child{font-size:12px!important}
  .nav-brand span span:last-child{font-size:7px!important}
  .stars{display:none}
  .hero-btns{flex-direction:column;gap:10px}
}
@media(max-width:480px){
  .features{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:20px!important}
  .hero{padding:60px 4% 30px}
  section{padding:28px 3%}
  .f-card{padding:14px 12px}
  .a-card{padding:14px}
}

@media(max-width:768px){
  nav div[style*="gap:20px"]{gap:8px!important;font-size:11px!important}
  nav div[style*="gap:20px"] a{font-size:11px!important}
  nav div[style*="gap:16px"]{gap:8px!important}
  nav div[style*="gap:16px"] a{font-size:10px!important}
}

@media(max-width:768px){
  .nav-links{gap:8px!important}
  .nav-links a{font-size:11px!important}
  .nav-inner{height:48px!important}
  .nav-cta{font-size:9px!important;padding:4px 12px!important}
}

@media(max-width:768px){
  .nav-brand svg{width:20px!important;height:20px!important}
  .nav-brand span span:first-child{font-size:11px!important}
  .nav-brand span span:last-child{font-size:6px!important}
  .nav-inner{padding:0 12px!important;height:44px!important}
  .nav-links a{font-size:10px!important}
  .nav-cta{font-size:8px!important;padding:3px 8px!important;white-space:nowrap}
}

@media(max-width:768px){
  .nav-inner[style]{height:auto!important;min-height:44px;padding:6px 12px!important;flex-wrap:wrap!important;gap:4px}
  .nav-links{display:flex!important;gap:6px!important}
  .nav-links a{font-size:10px!important;white-space:nowrap}
  .nav-cta{font-size:8px!important;padding:3px 8px!important}
  .nav-brand svg{width:18px!important;height:18px!important}
}

@media(max-width:768px){
  nav div[style*="max-width:1200px"]{flex-wrap:wrap!important;height:auto!important;min-height:44px;padding:6px 12px!important;gap:4px!important}
  nav div[style*="gap:20px"]{gap:6px!important;flex-wrap:wrap!important}
  nav div[style*="gap:20px"] a{font-size:10px!important}
  nav div[style*="gap:16px"]{gap:6px!important;flex-wrap:wrap!important}
  nav div[style*="gap:16px"] a{font-size:10px!important}
}