:root{
  --navy:#122a5a;
  --navy-dark:#0a1d40;
  --blue:#2563eb;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --soft:#f8fafc;
  --dark:#0a0e1a;
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
[id]{scroll-margin-top:84px;}
.container{width:min(1200px,calc(100% - 40px));margin-inline:auto;}
.section{padding:70px 0;}

/* 头部导航 */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-size:22px;font-weight:900;letter-spacing:-.02em;}
.logo span{color:var(--blue);}
.nav{display:flex;gap:30px;font-size:14px;font-weight:700;}
.nav a:hover{color:var(--blue);}

/* 首屏 Banner */
.hero-wrap{
  background: url('images/factory/banner.jpg') center/cover no-repeat;
  height: 600px;
  width: 100%;
}

/* About 区域 */
.about{
  padding: 80px 0;
  background: #122a5a;
  color: #ffffff;
}
.about-title{font-size:clamp(26px,4vw,36px);line-height:1.2;margin:10px 0 0;font-weight:800; color: #ffffff;}
.about-title span{display:block;color:#bfdbfe;font-size:18px;font-weight:400;margin-top:6px;}
.about-text{margin-top:24px; max-width: 1000px; margin-bottom: 50px;}
.about-text p{color:#dbeafe;margin-bottom:16px;font-size:15px;line-height:1.8;}
.about-text b{color:#ffffff;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#38bdf8;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.eyebrow::before{content:"";width:32px;height:2px;background:currentColor;}

/* 工厂图墙 */
.factory-wall{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
.factory-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}
.factory-card:hover{transform: translateY(-4px);}
.factory-img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.factory-card-content{padding:16px;}
.factory-card h4{margin:0 0 8px; font-size:15px; color:#fff; font-weight:700;}
.factory-card p{margin:0; font-size:13px; color:#bfdbfe; line-height:1.5;}

/* 证书区 */
.cert-section{background:#fff;padding:70px 0;border-bottom:1px solid var(--line);}
.section-head{text-align:center;margin-bottom:40px;}
.section-head h2{font-size:clamp(26px,4vw,36px);font-weight:800;margin-bottom:10px;}
.section-head p{color:var(--muted);font-size:14px;}
.cert-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;}
.cert-item{width:380px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;transition:transform .2s;}
.cert-item:hover{transform:translateY(-5px);}
.cert-item img{width:100%;height:auto;max-height:480px;object-fit:contain;background:#fff;border-radius:8px;cursor:zoom-in;}
.cert-item p{margin:15px 0 0;font-size:15px;font-weight:800;color:var(--navy);}

/* 产品区 */
.products{background:var(--soft);}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.18s ease;}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.08);}
.product-img{height:160px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.product-img img{width:100%;height:100%;object-fit:contain;padding:10px;}
.product-card h3{font-size:16px;line-height:1.35;font-weight:800;}
.product-card p{font-size:13px;color:var(--muted);margin-top:8px;flex-grow:1;}
.product-card .link{display:inline-block;margin-top:16px;color:var(--blue);font-size:13px;font-weight:800;}

/* 联系我们 */
.contact{background:#fff;}
.contact h2{font-size:clamp(26px,4vw,36px);margin-bottom:32px;font-weight:800;text-align:center;}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.contact-card{background:var(--soft);border-radius:var(--radius);padding:24px;border:1px solid var(--line);}
.contact-card h3{margin-bottom:12px;font-size:16px;}
.contact-card p{font-size:13px;color:#475569;line-height:1.8;}
.inquiry-card{display:flex;flex-direction:column;background:var(--navy);color:#fff;border-radius:var(--radius);padding:24px;transition:.18s ease;}
.inquiry-card:hover{background:var(--navy-dark);}
.inquiry-card h3{margin-bottom:12px;font-size:16px;}
.inquiry-card p{font-size:13px;color:#bfdbfe;line-height:1.6;flex-grow:1;}
.inquiry-tip{margin-top:16px;font-size:13px;color:#dbeafe;background:rgba(255,255,255,.1);border-radius:10px;padding:12px;text-align:center;font-weight:bold;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:999px;font-size:14px;font-weight:800;transition:.18s;margin-top:20px;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-dark);}

/* 页脚 */
.footer{padding:40px 16px;background:var(--dark);color:#94a3b8;font-size:13px;text-align:center;line-height:1.8;}
.footer b{color:#e2e8f0;font-size:14px;}

/* 悬浮 WhatsApp 按钮 */
.whatsapp-float {
  position: fixed;
  bottom: 20px; /* 从 30px 改成 20px */
  right: 20px;  /* 从 30px 改成 20px */
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  padding: 8px 16px; /* 改小了：从 12px 20px 改成 8px 16px */
  display: flex;
  align-items: center;
  gap: 8px; /* 从 10px 改成 8px */
  font-size: 14px; /* 改小了：从 16px 改成 14px */
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #20b858;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
  width: 20px;  /* 从 24px 改成 20px */
  height: 20px; /* 从 24px 改成 20px */
  fill: currentColor;
}

/* 响应式 */
@media(max-width:900px){
  .hero-wrap{height: 400px;}
  .factory-wall{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:repeat(2,1fr);}
  .nav{display:none;}
  .cert-item{width:100%; max-width:380px;}
}

@media(max-width:620px){
  .container{width:min(100% - 28px,1200px);}
  .hero-wrap{height: 250px; background-position: center left;}
  .factory-wall,.product-grid,.contact-grid{grid-template-columns:1fr;}
  
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
}
@media(max-width: 900px){
  /* 让首页的联系区在手机上变成上下排列 */
  .contact-layout {
    grid-template-columns: 1fr !important;
  }
}