/* 全局重置 - 极致轻量化 */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}
html,body{min-height:100%;background:#fff;color:#222;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* 容器 */
.container{max-width:1200px;margin:0 auto;padding:0 16px;min-height:100vh;display:flex;flex-direction:column}

/* 头部导航 */
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap;gap:16px}
.nav{display:flex;gap:24px;flex-wrap:wrap}
.nav-link{padding:6px 0;color:#555;border-bottom:2px solid transparent}
.nav-link.active{color:#000;border-color:#222}
.nav-link:hover{color:#000}

/* 主横幅 */
.main{flex:1;padding:20px 0}
.banner{text-align:center;margin-bottom:40px;padding:20px 0}
.banner h1{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:16px}
.banner-desc{font-size:clamp(1rem,2vw,1.2rem);color:#444;max-width:800px;margin:0 auto;line-height:1.7}

/* 产品卡片通用 */
.card{border:1px solid #eee;border-radius:12px;padding:24px;margin-bottom:24px}
.card-title{font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:20px;text-align:center;color:#111;font-weight:600}

/* 产品网格布局 自适应 */
.product-grid{display:grid;gap:16px}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.product-item{text-align:center}
.product-item img{height:120px;object-fit:contain;margin:0 auto 8px}
.product-item p{font-size:0.9rem;color:#333}

/* 页脚 */
.footer{margin-top:40px;padding:24px 0;border-top:1px solid #eee}
.footer-inner p{font-size:0.85rem;color:#666;text-align:center;line-height:1.6}
.footer-inner a{color:#444}

/* 移动端适配 */
@media(max-width:640px){
  .header{justify-content:center;text-align:center}
  .nav{justify-content:center;width:100%}
  .product-item img{height:100px}
  .card{padding:16px}
}
/* 页脚 */
.footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--border-gray);
  background: var(--bg-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4,1fr);
  gap: 40px;
  margin-bottom: 60px;
}
.footer-logo {
  width: 130px;
  margin-bottom: 20px;
}
.footer-desc {
  max-width: 300px;
  font-size: 14px;
  margin-bottom: 24px;
  color: var(--text-gray);
}
.footer-col-title {
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.footer-link:hover {
  color: var(--primary);
  padding-left: 4px;
}
.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid var(--border-gray);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-light-gray);
}