/* 首页样式 — 亮/暗双模式 */
@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&family=Ma+Shan+Zheng&display=swap');

@font-face {
  font-family: 'JiangJie';
  src: url('../font/ZoomlaJiangjies-A065.woff') format('woff');
  font-display: swap;
}

* { box-sizing:border-box; margin:0; padding:0; }

/* ===== 亮色模式（默认） ===== */
:root {
  --bg-primary: #f5f7fa;
  --home-bg: #f5f7fa;
  --home-text: #1a1d2e;
  --home-text-dim: #5a6377;
  --home-card-bg: #fff;
  --home-card-border: rgba(0,0,0,.06);
  --home-card-shadow: 0 1px 3px rgba(0,0,0,.04);
  --home-card-hover-shadow: 0 12px 40px rgba(0,0,0,.08);
  --home-divider: rgba(0,0,0,.06);
  --home-cta-bg: linear-gradient(135deg,rgba(57,197,187,.06),rgba(102,126,234,.04));
  --home-cta-border: rgba(57,197,187,.12);
  --home-grid-color: rgba(0,0,0,.03);
  --home-orb-opacity: .5;
  --home-header-bg: rgba(255,255,255,.85);
  --home-header-border: rgba(0,0,0,.06);
  --home-header-text: #1a1d2e;
  --home-btn-ghost-bg: #fff;
  --home-btn-ghost-text: #1a1d2e;
  --home-btn-ghost-border: rgba(0,0,0,.1);
}

/* ===== 暗色模式 ===== */
body.miku-dark {
  --bg-primary: #080c10;
  --home-bg: #080c10 !important;
  --home-card-bg: rgba(255,255,255,.04) !important;
  --home-bg: #080c10;
  --home-text: #dde4ed;
  --home-text-dim: #7b8a9e;
  --home-card-bg: rgba(255,255,255,.03);
  --home-card-border: rgba(255,255,255,.06);
  --home-card-shadow: none;
  --home-card-hover-shadow: 0 12px 40px rgba(0,0,0,.3);
  --home-divider: rgba(255,255,255,.05);
  --home-cta-bg: linear-gradient(135deg,rgba(57,197,187,.08),rgba(57,197,187,.02));
  --home-cta-border: rgba(57,197,187,.1);
  --home-grid-color: rgba(255,255,255,.02);
  --home-orb-opacity: .35;
  --home-header-bg: rgba(8,12,16,.85);
  --home-header-border: rgba(255,255,255,.06);
  --home-header-text: #dde4ed;
  --home-btn-ghost-bg: transparent;
  --home-btn-ghost-text: #dde4ed;
  --home-btn-ghost-border: rgba(255,255,255,.12);
}

body {
  background: var(--home-bg); color: var(--home-text);
  font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  overflow-x: hidden; line-height: 1.6;
  transition: background .3s, color .3s;
}

/* 背景光球 */
.bg-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(140px); opacity:var(--home-orb-opacity); transition:opacity .3s; }
.orb-1 { width:700px; height:700px; background:radial-gradient(circle,rgba(57,197,187,.2),transparent); top:-200px; left:-100px; animation:orbFloat 12s ease-in-out infinite; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(102,126,234,.15),transparent); bottom:-150px; right:-100px; animation:orbFloat 15s ease-in-out infinite reverse; }
.orb-3 { width:400px; height:400px; background:radial-gradient(circle,rgba(240,147,251,.12),transparent); top:50%; left:40%; animation:orbFloat 10s ease-in-out infinite 3s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(60px,-40px)scale(1.1)} 66%{transform:translate(-30px,50px)scale(.9)} }

.bg-grid { position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--home-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--home-grid-color) 1px,transparent 1px);
  background-size:60px 60px; }
@media(max-width:768px){.bg-grid{background-size:40px 40px}}

/* 导航栏 */
.miku-header { background:var(--home-header-bg)!important; backdrop-filter:blur(20px)!important; -webkit-backdrop-filter:blur(20px)!important; border-bottom:1px solid var(--home-header-border)!important; transition:background .3s; }
.miku-header a { color:var(--home-header-text)!important; }
.miku-header a:hover,.miku-header a.active { color:#39C5BB!important; }
.miku-footer { display:none!important; }

/* 滚动渐显 */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}

/* Hero */
.hero { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px 40px; text-align:center; }
.hero h1 {
  font-family: 'Zhi Mang Xing', 'JiangJie', cursive;
  font-size: clamp(4.5rem, 12vw, 9rem); font-weight: 400;
  line-height: 1.3; margin: 0 0 20px; letter-spacing: 0.2em;
  background: linear-gradient(135deg, #39C5BB 0%, #667eea 40%, #f093fb 70%, #39C5BB 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: titleFlow 5s ease-in-out infinite, fadeIn 1s ease .2s both;
}
body.miku-dark .hero h1 {
  background: linear-gradient(135deg, #39C5BB 0%, #8EE5EE 35%, #fff 65%, #39C5BB 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@keyframes titleFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.hero p { font-size:clamp(1rem,2vw,1.2rem); color:var(--home-text-dim); max-width:500px; margin:0 auto 40px; animation:fadeIn 1s ease .4s both; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:fadeIn 1s ease .6s both; }

.btn-primary { padding:14px 36px; border-radius:12px; background:linear-gradient(135deg,#39C5BB,#26A69A); color:#fff!important; font-weight:700; font-size:.95rem; text-decoration:none; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 20px rgba(57,197,187,.25); display:inline-block; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(57,197,187,.35); }
.btn-ghost { padding:14px 36px; border-radius:12px; background:var(--home-btn-ghost-bg); color:var(--home-btn-ghost-text)!important; font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid var(--home-btn-ghost-border); display:inline-block; transition:all .2s; }
.btn-ghost:hover { border-color:rgba(57,197,187,.4); }

/* Section */
.section { position:relative; z-index:1; padding:100px 24px; max-width:1100px; margin:0 auto; }
.section-label { font-size:.75rem; text-transform:uppercase; letter-spacing:3px; color:#39C5BB; margin-bottom:12px; }
.section h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin:0 0 16px; color:var(--home-text); letter-spacing:-.5px; }
.section .sec-desc { font-size:1rem; color:var(--home-text-dim); max-width:500px; margin-bottom:48px; }

/* 卡片 */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

.feat-card { display:block; padding:32px 24px; border-radius:16px; background:var(--home-card-bg); border:1px solid var(--home-card-border); box-shadow:var(--home-card-shadow); transition:all .3s; text-decoration:none; color:inherit; }
.feat-card:hover { background:var(--home-card-bg); border-color:rgba(57,197,187,.25); transform:translateY(-4px); box-shadow:var(--home-card-hover-shadow); }
.feat-card .fc-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; margin-bottom:16px; }
.feat-card h3 { font-size:1rem; font-weight:700; margin:0 0 6px; color:var(--home-text); }
.feat-card p { font-size:.82rem; color:var(--home-text-dim); margin:0; line-height:1.6; }

/* Stats */
.stats-row { display:flex; justify-content:center; gap:60px; flex-wrap:wrap; padding:20px 0; }
.stat-num { font-size:clamp(2.5rem,5vw,3.5rem); font-weight:900; color:var(--home-text); }
.stat-label { font-size:.82rem; color:var(--home-text-dim); margin-top:4px; }

/* CTA */
.cta-section { position:relative; z-index:1; margin:60px auto 80px; max-width:800px; padding:64px 40px; border-radius:24px; text-align:center; background:var(--home-cta-bg); border:1px solid var(--home-cta-border); }
.cta-section h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin:0 0 12px; color:var(--home-text); }
.cta-section p { color:var(--home-text-dim); margin:0 0 28px; }

/* Footer */
.site-footer { position:relative; z-index:1; border-top:1px solid var(--home-divider); padding:32px 24px; text-align:center; font-size:.78rem; color:var(--home-text-dim); }
.site-footer a { color:#39C5BB; text-decoration:none; }

@media(max-width:768px){.section{padding:60px 16px}.hero h1{font-size:3rem;letter-spacing:.1em}.stats-row{gap:30px}.cta-section{padding:40px 20px;margin:40px 16px 60px}}
body.miku-dark { background-color: #080c10 !important; }


/* 导航栏优化 */
.miku-header {
  height: 56px !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.miku-logo a {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

.miku-nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.miku-nav-list > li > a {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

.miku-nav-list > li > a:hover {
  background: rgba(57,197,187,0.08) !important;
  color: #39C5BB !important;
}

/* 下拉菜单 */
.miku-dropdown {
  position: relative !important;
}

.miku-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 160px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  padding: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s !important;
  z-index: 100 !important;
}

.miku-dropdown:hover .miku-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
}

.miku-dropdown-menu a {
  display: block !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  color: #1a1d2e !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}

.miku-dropdown-menu a:hover {
  background: rgba(57,197,187,0.06) !important;
  color: #39C5BB !important;
}

/* 暗色下拉 */
body.miku-dark .miku-dropdown-menu {
  background: #1a1d23 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

body.miku-dark .miku-dropdown-menu a {
  color: #dde4ed !important;
}

body.miku-dark .miku-dropdown-menu a:hover {
  background: rgba(57,197,187,0.1) !important;
  color: #39C5BB !important;
}

/* 主题切换按钮 */
.miku-theme-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: all 0.2s !important;
  margin-left: 8px !important;
}

.miku-theme-toggle:hover {
  background: rgba(57,197,187,0.08) !important;
}

@media (max-width: 860px) {
  .miku-header { padding: 0 16px !important; }
  .miku-nav-list { display: none !important; }
}