/* 自定义样式补充 */

/* 滚动动画样式 - 优化性能 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.opacity-100.translate-y-0 {
    opacity: 1;
    transform: translateY(0);
}

/* 页面加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 产品卡片悬停效果增强 */
.product-panel .bg-white {
    transition: all 0.3s ease;
}

.product-panel .bg-white:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 表单元素聚焦动画 */
input:focus, textarea:focus {
    transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .product-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .product-tab {
        width: 100%;
        max-width: 300px;
    }
}

/* 平滑过渡效果 */
.product-panel {
    transition: opacity 0.3s ease;
}

/* 确保图片质量 */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 导航栏活动状态 */
#navbar a.active {
    color: #E0EBF5;
    font-weight: 600;
    position: relative;
}

#navbar a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E0EBF5;
    transition: all 0.3s ease;
}

/* 移动端菜单项活动状态 */
#mobile-menu a.active {
    color: #0F4C81;
    font-weight: 600;
}

/* 表格样式补充 */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* 页脚响应式调整 */
@media (max-width: 1024px) {
    footer .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    footer .grid {
        grid-template-columns: 1fr;
    }
}