@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@400;600&display=swap');

:root{
  --bg:#070b14;
  --panel:#0d1424cc;
  --text:#e6eefc;
  --muted:#9bb0d4;
  --pri:#4cc9f0;
  --acc:#8a5cf6;
  --glow:0 0 32px rgba(76,201,240,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color: transparent}
html,body,#app{height:100%}
body{
  margin:0;background:radial-gradient(1200px 600px at 50% -10%,#0e1a32 0%,#070b14 60%),
          radial-gradient(800px 500px at 20% 110%,#0a1428 0%,transparent 60%),
          radial-gradient(800px 500px at 80% 110%,#0a1428 0%,transparent 60%);
  color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#070b14 0%,rgba(7,11,20,.8) 60%,rgba(7,11,20,0) 100%);
  backdrop-filter:saturate(130%) blur(4px); z-index:9; transition:opacity .8s ease;
}
.splash .logo{font-family:Orbitron, Inter, sans-serif; letter-spacing:.12em; font-weight:700; font-size:28px;
  color:#e8f7ff; text-shadow:0 0 18px rgba(76,201,240,.45),0 0 2px rgba(76,201,240,.8);
  animation:pulse 2s ease-in-out infinite;
}
.splash .tag{margin-top:10px;color:var(--muted);font-size:12px}
.splash.hide{opacity:0;pointer-events:none}

.topbar{position:fixed;top:10px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;z-index:8;background:rgba(7,11,20,.75);backdrop-filter:blur(8px);border-bottom:1px solid rgba(156,180,220,.08)}
.brand{font-weight:600;font-size:14px; letter-spacing:.04em;color:#d9e7ff}
.topbar .brand.center{position:absolute;left:50%;transform:translateX(-50%);}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(156,180,220,.25);color:var(--text);background:rgba(13,20,36,.35);backdrop-filter: blur(6px);transition:all .2s ease}
.icon-btn:hover{background:rgba(156,180,220,.08);border-color:rgba(156,180,220,.35)}
.icon-btn:active{background:rgba(156,180,220,.12)}
.right-placeholder{width:36px;height:36px}

/* 抽屉菜单 */
.drawer{position:fixed;inset:auto 0 0 0; top:0; width:74vw; max-width:320px; height:100dvh; background:rgba(13,20,36,.88); backdrop-filter: blur(10px) saturate(140%); border-right:1px solid rgba(156,180,220,.18); transform:translateX(-105%); transition:transform .35s ease; z-index:10; padding:64px 14px 20px}
.drawer.open{transform:translateX(0)}
.drawer nav{display:flex;flex-direction:column;gap:8px}
.drawer .item{display:block;padding:12px 12px;border-radius:10px;color:#d9e7ff;text-decoration:none;border:1px solid transparent}
.drawer .item:active{background:rgba(156,180,220,.12);border-color:rgba(156,180,220,.18)}

/* 底部版权 */
.footer{margin:20px 12px;padding:16px;background:rgba(10,14,24,.6);backdrop-filter: blur(8px);border:1px solid rgba(156,180,220,.15);border-radius:14px}
.footer .legal{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#cfe1ff}
.footer .legal .beian{color:#9bb0d4;text-decoration:none}
.footer .legal .beian:active{color:#e6eefc}

/* 禁止滚动（抽屉打开时） */
body.no-scroll{overflow:hidden}

/* 兼容安全区 */
@supports(padding:max(0px)){
  .topbar{ padding-top: max(10px, env(safe-area-inset-top)) }
}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px}
.cta.primary{background:linear-gradient(90deg,var(--pri),var(--acc)); color:#00111a; box-shadow:var(--glow)}
.cta.ghost{border:1px solid rgba(156,180,220,.25); color:var(--text); background:rgba(13,20,36,.35); backdrop-filter: blur(6px)}
.cta.big{font-size:16px; padding:12px 18px}

.content{position:relative;z-index:1;padding:76px 14px 30px}
.content.hidden{opacity:0;transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.content.show{opacity:1;transform:none}

.section{margin:22px 0; padding:16px; background:var(--panel); border:1px solid rgba(156,180,220,.14); border-radius:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.section h2{margin:0 0 10px 2px;font-size:18px;color:#cfe5ff}
.hero{ text-align:center; padding:26px 16px 24px; background:linear-gradient(180deg, rgba(13,20,36,.75) 0%, rgba(13,20,36,.55) 100%);}
.hero h1{font-size:22px;line-height:1.3;margin:0 0 8px}
.hero p{margin:0;color:var(--muted)}
.hero .actions{display:flex;gap:12px;justify-content:center;margin-top:14px}

.cards .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{padding:14px; border-radius:14px; background:rgba(13,20,36,.55); border:1px solid rgba(156,180,220,.14)}
.card h3{margin:0 0 6px;font-size:15px;color:#d6e9ff}
.card p{margin:0;color:#9fb6da;font-size:13px}

.tags .taglist{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.tags .taglist li{padding:8px 12px;border-radius:999px;border:1px solid rgba(156,180,220,.18); background:rgba(13,20,36,.45); font-size:12px;color:#cfe1ff}

.contact{ text-align:center }

.bottombar{position:fixed;bottom:14px;left:12px;right:12px;display:flex;justify-content:space-around;gap:10px;padding:10px;border-radius:14px;background:rgba(10,14,24,.6);backdrop-filter: blur(8px);
  border:1px solid rgba(156,180,220,.15); z-index:8}
.bottombar a{ color:#d9e7ff; text-decoration:none; font-weight:600; font-size:13px; padding:10px 12px; border-radius:12px}
.bottombar a:active{ background:rgba(156,180,220,.12)}

@keyframes pulse {
  0%,100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 0 0 rgba(76,201,240,.0)); }
  50% { transform: translateZ(0) scale(1.04); filter: drop-shadow(0 0 8px rgba(76,201,240,.45)); }
}

/* 更好的触摸体验 */
:focus-visible{ outline:2px solid var(--pri); outline-offset:2px }
@supports(padding:max(0px)){
  .topbar{ padding-top: max(10px, env(safe-area-inset-top)) }
  .bottombar{ padding-bottom: max(10px, env(safe-area-inset-bottom)) }
}

/* 新的动画样式 */
.splash {
  opacity: 1;
  transition: opacity 1.2s ease-out;
}

.splash.fade-out {
  opacity: 0;
}

#content {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

#content.fade-in {
  opacity: 1;
}

/* 内容居中样式 */
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.hero-section {
  margin-bottom: 2rem;
}

.brand {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #fff;
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: 0.12em;
  font-weight: 700;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typewriter {
  display: inline-block;
}

.cursor {
  display: inline-block;
  color: #4cc9f0;
  animation: blink 1s infinite;
}

.cursor.hide {
  display: none;
}

.slogan {
  font-size: 1.2rem;
  color: #8892b0;
  margin-bottom: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slogan.show {
  opacity: 1;
}

.qrcode-section {
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.qrcode-section.show {
  opacity: 1;
}

.qrcode-label {
  font-size: 14px;
  color: #4cc9f0;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  margin: 0;
  padding: 0;
}

.qrcode-label.show {
  opacity: 1;
}

.qrcode-img {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
}

.qrcode-img.show {
  opacity: 1;
  transform: scale(1);
}

/* 打字机效果 */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes jump {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-5px) scale(1.05); }
  50% { transform: translateY(-10px) scale(1.1); }
  75% { transform: translateY(-5px) scale(1.05); }
}

.brand.jump {
  animation: jump 0.6s ease-in-out;
}

/* 抖音风格的故障效果 */
@keyframes glitch {
  0% { 
    transform: translate(0);
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 255, 0.75);
  }
  15% { 
    transform: translate(0.025em, -0.025em);
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 255, 0.75);
  }
  50% { 
    transform: translate(-0.025em, 0.025em);
    text-shadow: 0.05em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 255, 0.75);
  }
  100% { 
    transform: translate(0);
    text-shadow: -0.05em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.025em 0 rgba(0, 255, 255, 0.75);
  }
}

.brand.glitch {
  animation: glitch 0.3s infinite linear alternate-reverse;
}