/* ========== 全局基础样式（PC+H5通用） ========== */
/* 盒模型重置+基础优化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* 移动端点击高亮清除 */
* {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* HTML5标签兼容 */
main, article, section, header, footer, nav {
  display: block;
}

/* 文字缩放禁用+基准字体 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

/* 全局字体+配色优化（提升高级感） */
body {
  font-size: 16px;
  line-height: 1.75;
  color: #2c3e50; /* 更沉稳的文字色 */
  background: #f5f7fa; /* 更柔和的背景色 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面最大宽度限制（只影响样式，不影响 SEO） */
.page {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 12px;
}

/* 图片 SEO + 美化 */
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -webkit-touch-callout: none;
  transition: all 0.3s ease; /* 图片hover动效 */
}
img:hover {
  transform: scale(1.02); /* 轻微放大，提升交互感 */
}

/* ========== 头部导航（美化+适配） ========== */
.site-header {
  border-bottom: 1px solid #f0f2f5; /* 更浅的边框 */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影，提升层次感 */
  position: sticky; /* 头部吸顶，提升体验 */
  top: 0;
  z-index: 999;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 20px; /* 增加内边距，避免内容贴边 */
}

.logo img {
  height: 56px;
  transition: all 0.3s ease;
}
.logo img:hover {
  transform: scale(1.05); /* logo轻微放大 */
}

/* 下载按钮美化 */
.header-download .download-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, #d4a373 0%, #e6b888 100%); /* 渐变背景 */
  color: #fff;
  border-radius: 24px; /* 更圆润的圆角 */
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(212, 163, 115, 0.2); /* 按钮阴影 */
  transition: all 0.3s ease;
  display: inline-block;
}
.header-download .download-btn:hover {
  transform: translateY(-2px); /* 轻微上移 */
  box-shadow: 0 6px 16px rgba(212, 163, 115, 0.3); /* 阴影放大 */
  background: linear-gradient(135deg, #c89462 0%, #d4a373 100%); /* 加深渐变 */
}

/* 导航样式美化 */
.site-nav ul {
  display: flex;
  gap: 24px; /* 增大间距，更宽松 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;
  position: relative; /* 伪元素定位 */
  transition: color 0.3s ease;
}
/* 导航下划线动效 */
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #d4a373;
  transition: width 0.3s ease;
}
.site-nav a:hover {
  color: #d4a373;
}
.site-nav a:hover::after {
  width: 100%; /* 下划线展开 */
}

/* ========== Banner 轮播（美化+适配） ========== */
.banner {
  width: 100%;
  background: #f8f9fa;
  padding: 24px 0; /* 增大上下间距 */
  margin-bottom: 20px;
}

.banner-slider {
  max-width: 1200px;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px; /* 更大的圆角 */
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 轮播阴影，提升质感 */
}

.banner-track {
  display: flex;
  width: 300%;
  animation: bannerSlide 15s infinite ease-in-out; /* 更顺滑的动画 */
}

.banner-track img {
  width: 1200px;
  height: 360px;
  object-fit: cover;
  display: block;
}

/* ========== 内容区域（美化） ========== */
.content {
  background-color: white;
  padding: 20px; /* 增大内边距 */
  border-radius: 16px; /* 更大的圆角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); /* 轻微阴影 */
  margin-bottom: 24px;
}

/* ========== APP列表（核心美化） ========== */
/* 列表容器 */
.list_app {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; /* 行列间距，替代margin */
  padding: 0 8px;
}

/* 列表项美化 */
.list_app li {
  width: calc(50% - 10px); /* 精准两列 */
  padding: 24px;
  margin: 0; /* 用gap替代margin */
  overflow: hidden;
  display: flex; /* 替换inline-block，更灵活 */
  align-items: center;
  gap: 16px; /* 图片和文字间距 */
  background-color: white;
  border-radius: 16px; /* 大圆角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); /* 卡片阴影 */
  transition: all 0.3s ease; /* 动效过渡 */
  cursor: pointer;
}
/* 列表项hover动效 */
.list_app li:hover {
  transform: translateY(-4px); /* 轻微上移 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 阴影放大 */
}

/* APP图片容器（修复变形+美化） */
.appimg {
  width: 72px; /* 增大图片尺寸 */
  height: 72px;
  border-radius: 12px; /* 圆角优化 */
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* 图片阴影 */
}
.appimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下载按钮美化 */
.app_down {
  display: inline-block;
  padding: 8px 20px; /* 增大内边距 */
  background: linear-gradient(135deg, #8ebae8 0%, #a4c8ea 100%); /* 渐变背景 */
  color: #fff;
  border-radius: 8px; /* 圆角优化 */
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(142, 186, 232, 0.2);
  margin-top: 8px;
}
.app_down:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(142, 186, 232, 0.3);
  background: linear-gradient(135deg, #7aa7d8 0%, #8ebae8 100%);
}

/* ========== 通用样式重置（美化版） ========== */
ul, ol {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* a标签样式重置（保留交互） */
a {
  text-decoration: none;
  color: inherit;
  outline: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

/* ========== 轮播动画（优化） ========== */
@keyframes bannerSlide {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(0); } /* 停留时间更长 */
  33%  { transform: translateX(-1200px); }
  58%  { transform: translateX(-1200px); }
  66%  { transform: translateX(-2400px); }
  91%  { transform: translateX(-2400px); }
  100% { transform: translateX(0); } /* 循环更自然 */
}

/* ========== 移动端适配（美化+适配） ========== */
@media (max-width: 768px) {
  /* 头部适配 */
  .header-container {
    height: 56px;
    padding: 0 12px;
  }
  .logo img {
    height: 48px;
  }
  .header-download .download-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  .site-nav {
    display: none; /* 隐藏导航，避免溢出 */
  }

  /* 轮播适配 */
  .banner {
    padding: 16px 0;
  }
  .banner-slider {
    height: 180px;
    border-radius: 12px;
  }
  .banner-track img {
    width: 100vw;
    height: 180px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* 列表适配（单列） */
  .list_app li {
    width: 100%;
    padding: 18px;
    gap: 12px;
    display: flow;
  }
  .appimg {
    width: 64px;
    height: 64px;
  }

  /* 内容区域适配 */
  .content {
    padding: 16px;
    border-radius: 12px;
    margin: 0 8px 20px;
  }

  /* 轮播动画适配 */
  @keyframes bannerSlide {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(0); }
    33%  { transform: translateX(-100vw); }
    58%  { transform: translateX(-100vw); }
    66%  { transform: translateX(-200vw); }
    91%  { transform: translateX(-200vw); }
    100% { transform: translateX(0); }
  }
}

/* 超小屏适配（如iPhone SE） */
@media (max-width: 375px) {
  .banner-slider {
    height: 150px;
  }
  .banner-track img {
    height: 150px;
  }
  .content {
    padding: 12px;
    margin: 0 6px 16px;
  }
  .list_app li {
    padding: 15px;
  }
  .app_down {
    padding: 6px 16px;
    font-size: 14px;
  }
}