@charset "utf-8";

:root {
  --primary-color: #a50c01;
  --secondary-color: #32373c;
  --text-color: #333;
  --white: #ffffff;
  --gray: #abb8c3;
  --gap: 24px;
  --content-width: 1200px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif, "Roboto", sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 5px 0px 5px;
}

//* 导航栏基础 */
.navbar {
  padding: 15px 0;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.navbar .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  /* 去掉多余均分逻辑，让Logo自适应宽度，导航只占自身需要的宽度 */
}

/* Logo容器不要占多余空间，自适应图片宽度 */
.navbar .logo {
  flex-shrink: 0; /* 禁止Logo被压缩，固定自身宽度不缩小 */
}
.navbar .logo img {
  height: 45px; /* 手机端再缩小一点Logo高度，进一步瘦身 */
  width: auto;
  display: block;
}

/* 导航列表取消 flex:1，不再强行占满剩余宽度 */
.navbar ul.right-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 20px; /* 横向间距缩小，省空间 */
  flex: unset; /* 关键：取消1等分，导航宽度由自身文字决定 */
  flex-shrink: 1; /* 空间不够时导航可以轻微压缩间距，Logo不动 */
  max-width: 75%; /* 限制导航最大占页面75%，避免完全挤没Logo */
}

.navbar a {
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: 400;
  transition: color 0.3s;
  white-space: nowrap; /* 单个文字不换行 */
}

.navbar a:hover {
  color: var(--primary-color);
}

/* 手机端微调（768px以下） */
@media (max-width: 768px) {
  .navbar .logo img {
    height: 60px; /* 移动端Logo再收窄高度，整体宽度更小 */
    padding: 10px 0;
  }
  /* 导航横向间距再缩小，节约横向空间 */
  .navbar ul.right-nav {
    gap: 8px 6px;
  }
  /* 导航单项文字字号缩小一点，更省宽度 */
  .navbar ul.right-nav a {
    font-size: 14px;
  }
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.navbar a {
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: 400;
  transition: color 0.3s;
}

.navbar a:hover {
  color: var(--primary-color);
}

/* 英雄区 */
.hero {
  position: relative;
  color: var(--white);
  padding: 80px 0;
  text-align: center;
  min-height: 600px; /* 保证高度 */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 视频背景 */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满不变形 */
  z-index: -2;
}

/* 黑色半透明遮罩（让文字更清晰） */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* 原有内容样式保留 */
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero ul {
  list-style: none;
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: left;
}

.hero li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.hero li::before {
  content: ">>";
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

/* 按钮样式 */
.btn {
  display: inline-block;
  background: var(--primary-color);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 300;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: #000;
}

/* 优势区块 */
.features {
  padding: 80px 0;
}

.features h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.feature-card {
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
  margin-bottom: 15px;
  color: var(--secondary-color);
}

/* 产品区 */
.products {
  padding: 80px 0;
  background: #f9f9f9;
}

.products h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.product-card {
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 4px;
}

.product-card ul {
  list-style: none;
  text-align: left;
  margin: 15px 0;
}

.product-card li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.product-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4caf50;
}

/* 质量承诺 */
.quality {
  padding: 0 0 80px 0;
  text-align: center;
}

.quality h2 {
  margin-bottom: 20px;
  font-size: 2rem;
}

.quality-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin: 30px 0;
}

.quality-images img {
  max-width: 45%;
  height: auto;
  border-radius: 8px;
}

/* 供应商风险 */
.risks {
  padding: 80px 0;
  background: #f9f9f9;
}
.risk-card-image img {
  width: 100%;
  height: auto; /* 自动高度，图片不会变形 */
  display: block;
  margin-bottom: 40px;
}
.risks h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--gap);
}

.risk-card {
  padding: 30px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.risk-card h3 {
  margin-bottom: 20px;
  color: var(--primary-color);
}

/* COA报告 */
.coa {
  padding: 80px 0;
}

.coa h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.coa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}

.coa-item {
  text-align: center;
}

.coa-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 工厂展示 */
.factory {
  padding: 80px 0;
  background: #f9f9f9;
}

.factory h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.factory-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--gap);
  align-items: center;
}

.factory-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 服务团队 */
.team {
  padding: 80px 0;
  text-align: center;
}

.team h2 {
  margin-bottom: 40px;
  font-size: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
}

.team-member {
  text-align: center;
}

.team-member img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

/* 客户评价 */
.testimonials {
  padding: 80px 0;
  background: #f9f9f9;
}

.testimonials h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.testimonial-item img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* FAQ */
.faq {
  padding: 80px 0;
}

.faq h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  padding: 15px 20px;
  background: #f9f9f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 300;
}

.faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

.faq-answer.active {
  padding: 15px 20px;
  max-height: 500px;
}

/* 联系区 */
.contact {
  padding: 80px 0;
  background: var(--secondary-color);
  color: var(--white);
  text-align: center;
}

.contact h2 {
  margin-bottom: 20px;
  font-size: 2rem;
}

.contact-info {
  margin-bottom: 30px;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
}

/* 悬浮联系栏 */
.floating-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  width: 100%;
  padding: 15px;
  background: transparent;
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--white);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  outline: none;
  background: linear-gradient(135deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
  background-size: 400% 400%;
  animation: rainbowBg 12s linear infinite;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  font-weight: 300;
  cursor: pointer;
  user-select: none;
}

/* WhatsApp 按钮独占悬浮栏整行 */
#WhatsApp-floating-btn {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

@keyframes rainbowBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 弹窗 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: var(--white);
  padding: 40px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

/* 响应式 */
@media (max-width: 768px) {
  .floating-bar {
    padding: 10px;
  }

  #WhatsApp-floating-btn {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .quality-images img {
    max-width: 100%;
  }

  .risk-grid,
  .factory-content {
    grid-template-columns: 1fr;
  }
}

/* 懒加载 */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

img.lazy.loaded {
  opacity: 1;
}

.image-anime {
  position: relative;
  overflow: hidden;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}