/* =========================

   1. Reset（精简版）

========================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html, body {

  width: 100%;

  min-height: 100%;

  font-family: Tahoma, Arial, "PingFang SC", sans-serif;

  background: #fff;

}

/* 去掉你原来的 flex 居中（这是你页面乱的核心原因） */

body {

  display: block;

}

/* =========================

   2. 容器

========================= */

.container {

  width: 100%;

  min-width: 320px;

  overflow-x: hidden;

}

/* =========================

   3. 顶部区域（贴顶优化）

========================= */

#top-container {

  width: 100%;

  background: url("../image/topbg.png") center/cover no-repeat;

  padding: 20px 15px 30px;

  text-align: center;

  margin-bottom: 20px;

}

#top-title-text {

  font-size: 22px;

  font-weight: 700;

  background: linear-gradient(to bottom, #47BFFF, #0B77F6);

  -webkit-background-clip: text;

  color: transparent;

}

#second-title-text {

  display: block;

  margin-top: 10px;

  font-size: 13px;

  color: #333;

}

#content-text {

  display: block;

  margin-top: 6px;

  font-size: 13px;

  color: #333;

}

/* banner 图片 */

#img-container {

  margin-top: 15px;

  display: flex;

  justify-content: center;

}

#top-img {

  width: 90%;

  max-width: 320px;

  border-radius: 8px;

}

/* =========================

   4. 下载区域（统一优化）

========================= */

#download-container {

  width: 100%;

  padding: 10px 15px;

}

#storage-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}

.storage-item {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 42px;

  background: #4892FF;

  border-radius: 10px;

  color: #fff;

  text-decoration: none;

  transition: 0.2s;

}

.storage-item img {

  width: 20px;

  margin-right: 8px;

}

.storage-item:hover {

  opacity: 0.9;

}

.platform {

  font-size: 14px;

}

/* =========================

   5. banner 区域优化

========================= */

#banner-container {

  width: 100%;

  background: #F5F6F9;

  padding: 20px 0;

}

.banner-wrapper {

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

}

/* 标题 */

#banner-secret {

  font-size: 16px;

  font-weight: 600;

  color: #4892FF;

  text-align: center;

}

#banner-secret-des {

  font-size: 12px;

  color: #333;

  text-align: center;

  margin-top: 4px;

}

/* 轮播 */

#carousel-container {

  margin-top: 15px;

  width: 100%;

  display: flex;

  justify-content: center;

}

.swiper-container {

  width: 100%;

  max-width: 500px;

}

.swiper-slide {

  display: flex;

  justify-content: center;

  align-items: center;

}

.swiper-slide img {

  width: 85%;

  border-radius: 8px;

}

/* =========================

   6. 功能区优化

========================= */

#feature-container {

  padding: 20px 15px;

}

#feature-title {

  text-align: center;

  font-size: 14px;

  color: #333;

  margin-bottom: 10px;

}

.feature-item-container {

  display: grid;

  gap: 10px;

  grid-template-columns: repeat(4, 1fr); /* 默认：电脑4列 */

}

/* 手机：2列 */

@media screen and (max-width: 768px) {

  .feature-item-container {

    grid-template-columns: repeat(2, 1fr);

  }

}

.feature-item {

  background: #fff;

  border-radius: 8px;

  padding: 12px 8px;

  text-align: center;

}

.feature-item img {

  width: 32px;

}

.feature-item-title {

  margin-top: 6px;

  font-size: 13px;

  font-weight: 600;

}

.feature-item-des {

  margin-top: 4px;

  font-size: 12px;

  color: #666;

}

/* =========================

   7. footer

========================= */

#footer-container {

  width: 100%;

  background: url("../image/footerbg.png") center/cover no-repeat;

  padding: 20px 0;

  text-align: center;

}

.footer-logo {

  width: 40px;

}

#footer-app-name {

  font-size: 14px;

  color: #fff;

  margin-top: 6px;

}

#footer-text {

  font-size: 12px;

  color: #fff;

  margin-top: 6px;

}

/* =========================

   8. 底部按钮（移动端）

========================= */

#bottom-box {

  display: none;

}

/* =========================

   9. 手机优化

========================= */

@media screen and (max-width: 768px) {

  #storage-container {

    grid-template-columns: repeat(2, 1fr);

  }

  .swiper-slide img {

    width: 90%;

  }

  .feature-item-container {

    grid-template-columns: 1fr;

  }

  #banner-container {

    padding: 15px 0;

  }

}

/* =========================

   10. PC优化（关键：不挤不乱）

========================= */

@media screen and (min-width: 768px) {

  .container {

    max-width: 1100px;

    margin: 0 auto;

  }

  #storage-container {

    grid-template-columns: repeat(4, 1fr);

  }

  .feature-item-container {

    grid-template-columns: repeat(4, 1fr);

  }

  #carousel-container {

    max-width: 700px;

    margin: 0 auto;

  }

}