body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* 浅灰色背景 */
    color: #333; /* 深色文字以获得更好的对比度 */
    scroll-behavior: smooth; /* 为整个页面启用平滑滚动 */
}

.card {
    background-color: white;
    border-radius: 12px; /* 增加边框圆角 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 更柔和的阴影 */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
    padding-bottom: 6px; /* 为下划线动画留出空间 */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0; /* 定位到 padding-bottom 的底部 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #3b82f6; /* 蓝色强调色 */
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: #3b82f6;
}
/* 确保激活的链接也有强调色 */
.nav-link.active {
    color: #3b82f6;
    font-weight: 600; /* 可以给激活链接加粗 */
}


.btn-primary {
    background-color: #3b82f6; /* 蓝色主按钮 */
    color: white;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* 添加 transform 和 box-shadow 过渡 */
}

.btn-primary:hover {
    background-color: #2563eb; /* 鼠标悬停时颜色变深 */
    transform: translateY(-2px); /* 轻微上移效果 */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); /* 添加阴影 */
}

.section-title {
    color: #1e3a8a; /* 深蓝色用于版块标题 */
}

.icon-link i {
    transition: color 0.3s ease;
}

.icon-link:hover i {
    color: #3b82f6;
}

.footer {
    background-color: #1f2937; /* 深灰色页脚 */
    color: #e5e7eb; /* 页脚浅色文字 */
}

.footer a:hover {
    color: #9ca3af;
}

/* 确保Tailwind的sticky header正常工作，并且内容不会被遮挡 */
main section {
    padding-top: 4rem; /* 根据header高度调整，确保锚点跳转时内容不被header遮挡 */
    margin-top: -4rem; /* 抵消padding-top，保持布局不变 */
}
/* 如果header高度是固定的，可以直接使用具体数值，例如：
header { height: 64px; }
main section { padding-top: 64px; margin-top: -64px; }
*/
/* 响应式调整，确保在小屏幕上导航栏不会过于拥挤 */
@media (max-width: 768px) {
    header .container nav {
        /* 在小屏幕上可以考虑将导航变为汉堡菜单，或减少间距 */
        space-x-4;
    }
    header .container h1 {
        font-size: 1.5rem; /* 调整标题大小 */
    }
    .nav-link {
        font-size: 0.875rem; /* 调整导航链接字体大小 */
    }
    .card {
        padding: 1.5rem; /* 调整卡片内边距 */
    }
    .section-title {
        font-size: 1.75rem; /* 调整版块标题大小 */
    }
}