@charset "utf-8";
/*引入字体文件*/
@font-face {
  font-family: "PingFang SC";
  src: url("../fonts/pingfangsc-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PingFang SC";
  src: url("../fonts/pingfangsc-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("../fonts/sf-pro-text_regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* 通用的 CSS 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit; /* 继承父元素颜色 */
}
body {
  font-family: "PingFang SC", "SF Pro Text", Arial, "Microsoft YaHei",
    sans-serif;
  background-color: #111111;
}

header {
  max-width: 1300px; /* 最大宽度 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左中右排列 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px 15px; /* 内边距 */
}

/* logo 样式 */
header h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #f0d700;
}

/* 导航汉堡菜单 */
header svg {
  display: none;
}
/* 关闭按钮 */
header nav svg {
  display: none;
}

/* 导航栏样式 */
header nav ul {
  display: flex;
  list-style: none;
  gap: 20px; /* 间距 */
}

header nav ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
  padding: 5px 10px;
  transition: color 0.3s;
}

header nav ul li a:hover {
  color: #f0d700;
}

/* 下载按钮样式 */
header button {
  background-color: #f0d700;
  color: #111111;
  font-family: "PingFang SC";
  border: none;
  padding: 10px 30px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

header button:hover {
  background-color: #d2ff00;
}

/* HERO 区域 */
.hero {
  display: flex; /* 使用 flexbox 进行布局 */
  justify-content: space-between; /* 左右区域之间有间隔 */
  align-items: center; /* 垂直居中对齐 */
  max-width: 1300px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中 hero 区域 */
  padding: 40px 20px; /* 内边距，确保内容不会紧贴边缘 */
  margin-top: 3rem;
}

/* 左侧区域 */
.hero .content {
  flex: 1; /* 左侧区域占据剩余空间 */
  max-width: 50%; /* 最多占据 50% 宽度 */
}

.hero .content h1 {
  font-size: 88px; /* 标题字体大小 */
  font-weight: 600;
  line-height: 6rem;
  margin-bottom: 20px; /* 标题和按钮之间的间距 */
  color: #ffffff; /* 字体颜色 */
}

.hero .content button {
  font-family: "PingFang SC";
  font-size: 18px; /* 按钮字体大小 */
  padding: 10px 30px; /* 按钮内边距 */
  margin-right: 10px; /* 按钮之间的间距 */
  cursor: pointer; /* 鼠标悬停时显示手指图标 */
  border: none;
  border-radius: 28px; /* 按钮圆角 */
  transition: background-color 0.3s ease; /* 鼠标悬停动画效果 */
}

.hero .content button:hover {
  background-color: #d2ff00;
}

.hero .content .download {
  background-color: #f0d700;
  color: #111111;
}

.hero .content .buy {
  background-color: #111111;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.hero .content .buy:hover {
  color: #111111;
  border: 1px solid #d2ff00;
}

.hero .media {
  flex: 1; /* 右侧区域占据剩余空间 */
  max-width: 50%; /* 最多占据 50% 宽度 */
  display: flex;
  justify-content: center; /* 视频居中 */
  align-items: center; /* 视频垂直居中 */
}

.hero .media video {
  width: 100%; /* 视频宽度最多为容器宽度 */
  height: auto; /* 保持视频比例 */
}

/* 功能展示区域 */
.benefits {
  max-width: 1300px;
  margin: 0 auto; /* 居中显示 */
  padding: 40px 20px;
  margin-top: 3rem;
}

/* h1 样式 */
.benefits h1 {
  text-align: left;
  font-size: 36px;
  margin-bottom: 30px;
  color: #ffffff;
}

/* 功能区块容器，设置为两行三列 */
.benefits-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  grid-gap: 20px; /* 每个区块之间的间距 */
}

/* 每个功能区块 */
.benefit-item {
  padding: 20px;
  text-align: left;
  border: 1px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
}

/* SVG 图标 */
.benefit-item svg {
  width: 42px;
  height: 42px;
  color: #ffffff;
  margin-bottom: 10px;
}

/* 标题 h2 */
.benefit-item h2 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 2px;
}

/* 描述 p */
.benefit-item p {
  font-size: 16px;
  color: #ffffff;
}

/*特性指标区域*/
.metrics {
  max-width: 1000px;
  margin: 0 auto; /* 居中显示 */
  padding: 40px 20px;
  display: flex;
  justify-content: space-between; /* 分布在一行 */
}

/* 每个指标项 */
.metric-item {
  padding: 20px;
  text-align: center;
  flex: 1; /* 每个 div 占同等宽度 */
  margin: 0 10px; /* 每个 div 之间的间距 */
}

/* 数值内容 */
.metric-value {
  font-size: 46px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

/* 描述内容 */
.metric-description {
  font-size: 20px;
  color: #ffffff;
}

/* 定价区域 */
.pricing {
  max-width: 1300px;
  margin: 0 auto; /* 居中显示 */
  padding: 40px 20px;
  text-align: center;
  color: #ffffff;
}

/* section 标题样式 */
.pricing h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* 定义三个卡片容器 */
.pricing-grid {
  display: flex;
  justify-content: space-between; /* 横向均匀分布 */
  gap: 50px; /* 卡片间距 */
}

/* 每个卡片的样式 */
.pricing-card {
  padding: 20px;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  flex: 1; /* 保证每个卡片宽度一致 */
  text-align: center;
}

/* 卡片内标题样式 */
.pricing-card h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.pricing-card h3 {
  font-size: 24px;
  color: #f0d700;
  margin-bottom: 15px;
}

/* 描述内容样式 */
.pricing-card p {
  font-size: 18px;
  margin: 5px 0;
}
/* 按钮样式 */
.pricing-card button {
  background-color: #111111;
  margin-top: 15px;
  padding: 10px 30px;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pricing-card button:hover {
  background-color: #d2ff00;
}
/* 客服组件容器 */
.chat-widget {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 300px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  transition: transform 0.3s ease;
}

/* 客服头部信息 */
.chat-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

/* 客服头像 */
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  background: #f0d700 url("../images/202503102334.jpg") no-repeat center/cover;
}

/* 客服信息 */
.agent-info {
  flex: 1;
}

/* 在线状态 */
.status {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 0.9em;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d2ff00;
  margin-right: 8px;
  animation: pulse 1.5s infinite;
}

/* 咨询按钮 */
.consult-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
  padding: 12px;
  background: #f0d700;
  color: #333;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.consult-btn:hover {
  background: #d2ff00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(210, 255, 0, 0.4);
}

/* 状态点动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 215, 0, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(240, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(240, 215, 0, 0);
  }
}

footer {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  border-top: 1px solid #ffffff;
}

footer p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  nav {
    display: none; /* 默认隐藏导航 */
  }

  header svg {
    display: block; /* 显示汉堡图标 */
    color: #ffffff;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
  header nav svg {
    display: block; /* 显示关闭图标 */
    position: absolute;
    top: 20px;
    right: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
  nav.open {
    display: block; /* 显示全屏菜单 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 1000;
    text-align: center;
    padding-top: 20px;
  }

  nav.open ul {
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }

  nav.open ul li {
    padding: 4px;
  }

  nav.open ul li a {
    font-size: 24px;
    color: white;
  }
  .hero {
    flex-direction: column; /* 切换为垂直布局 */
    align-items: center; /* 居中对齐 */
    text-align: center; /* 文本居中 */
    margin-top: 0;
  }

  .hero .content,
  .hero .media {
    max-width: 100%; /* 内容宽度占满 100% */
    margin-bottom: 20px; /* 内容之间的间距 */
  }
  .hero .media {
    border: 2px solid #ffffff;
  }
  .hero .content h1 {
    font-size: 30px; /* 标题字体大小缩小 */
    line-height: 3rem;
  }
  .benefits {
    margin-top: 0;
    padding: 20px 20px;
  }
  .benefits-content {
    grid-template-columns: 1fr; /* 单列布局 */
  }

  .metrics {
    display: none;
  }
  .pricing-grid {
    flex-direction: column; /* 改为纵向排列 */
    gap: 20px; /* 间距加大 */
  }
}