/* 全局样式和基础布局 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 粒子背景的样式，无需修改，它现在会相对于 #app 定位 */
#particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.page-container { position: relative; z-index: 2;}
.page-section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 6rem 1rem; box-sizing: border-box; background-color: #111827; }
/* home 页背景透明，以显示粒子效果 */
#home.page-section { background-color: transparent; }
.active-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: #4267b2; transform-origin: center; transition: transform 0.3s ease-out; transform: scaleX(1); }
.service-card { @apply bg-gray-800/60 p-6 rounded-lg border border-gray-700 text-center transition-all duration-300; @apply hover:bg-gray-700/80 hover:border-[#4267b2] hover:-translate-y-2; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 1s ease-out 0.5s forwards; opacity: 0; }