/* 全局样式 */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Arial,sans-serif; }
body { color:#333; line-height:1.6; background:#f4f4f4; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 50px; background:#111; color:#fff; }
header .logo { font-size:1.8em; font-weight:bold; letter-spacing:2px; }
header nav a { margin-left:20px; color:#fff; text-decoration:none; transition:0.3s; }
header nav a:hover { color:#00adee; }

/* Hero */
.hero { background: linear-gradient(135deg,#0a0a0a,#001f3f); color:white; text-align:center; padding:120px 20px; }
.hero h1 { font-size:3em; margin-bottom:10px; animation:fadeIn 1.5s; }
.hero p { font-size:1.2em; animation:fadeIn 2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Filter */
.filter-container { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-bottom:30px; }
#searchInput { width:300px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-size:1em; transition:0.3s; }
#searchInput:focus { outline:none; border-color:#00adee; box-shadow:0 0 5px rgba(0,173,238,0.5); }

.price-filter, .sort-filter { display:flex; align-items:center; gap:10px; }
.price-filter input, .sort-filter select { padding:8px 12px; border-radius:20px; border:1px solid #ccc; }
.price-filter button { padding:8px 15px; border:none; border-radius:20px; background-color:#00adee; color:white; cursor:pointer; transition:0.3s; }
.price-filter button:hover { background-color:#007bbf; }
.sort-filter select:hover, .sort-filter select:focus { border-color:#00adee; outline:none; }

/* 产品展示 */
.products { padding:80px 20px; background:#fff; text-align:center; }
.product-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:40px; }

.product-card {
    background:#f8f8f8;
    padding:20px;
    width:280px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.product-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.product-card img { width:100%; border-radius:10px; }
.product-card h3 { margin:15px 0 10px; font-size:1.3em; }
.product-card p { font-size:0.95em; color:#555; }

/* About & Contact */
.about, .contact { padding:80px 20px; text-align:center; background:#f4f4f4; }
.about p, .contact p { max-width:600px; margin:20px auto; font-size:1em; color:#666; }

/* Footer */
footer { background:#111; color:#fff; text-align:center; padding:20px; }