/* 全局样式重置与基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Bento Grid布局实现 */
.bento-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem;
    padding: 1.5rem;
}

/* 不同大小的Bento卡片 */
.bento-card-lg {
    grid-column: span 8;
    grid-row: span 2;
}

.bento-card-md {
    grid-column: span 4;
    grid-row: span 1;
}

.bento-card-sm {
    grid-column: span 4;
    grid-row: span 1;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .bento-container {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .bento-card-lg {
        grid-column: span 8;
    }
    
    .bento-card-md, .bento-card-sm {
        grid-column: span 4;
    }
}

@media (max-width: 768px) {
    .bento-container {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
        padding: 1rem;
    }
    
    .bento-card-lg, .bento-card-md, .bento-card-sm {
        grid-column: span 4;
        grid-row: span 1;
    }
}

/* 圆角样式统一应用 */
img, .product-box, .btn, .input-field, .card, .nav-item {
    border-radius: 12px !important;
}

/* 交互效果 */
.product-box, .btn, .nav-item, .card {
    transition: all 0.3s ease;
}

.product-box:hover, .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.product-box img:hover {
    transform: scale(1.03);
    transition: transform 0.5s ease;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
}

.nav-item:hover {
    background-color: rgba(52, 152, 219, 0.1);
}

/* 科技感高亮色 */
.highlight-blue {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0.5));
}

.highlight-red {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.8), rgba(231, 76, 60, 0.5));
}

.highlight-green {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.8), rgba(46, 204, 113, 0.5));
}

/* 导航栏滚动效果 */
.header {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 图片淡入效果 */
.img-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.img-fade-in.loaded {
    opacity: 1;
}