* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff6e8;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body {
  overflow-x: hidden;
}

.site {
  position: relative;
  width: 100%;
  max-width: 1672px;
  margin: 0 auto;
  background: #fff6e8;
}

.home-picture,
.home-image {
  display: block;
  width: 100%;
}

.home-image {
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* 可点击热区：默认透明，不影响视觉 */
.hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  text-decoration: none;
  outline: none;
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 154, 0, 0.35);
}

/* 电脑端：按照 1672 × 941 参考图百分比定位 */
.hotspot-main-cta {
  left: 11.2%;
  top: 55.7%;
  width: 20.0%;
  height: 7.2%;
}

.hotspot-card {
  top: 69.2%;
  height: 24.8%;
  border-radius: 24px;
}

.card-1 { left: 5.0%; width: 21.2%; }
.card-2 { left: 28.0%; width: 21.0%; }
.card-3 { left: 50.3%; width: 21.0%; }
.card-4 { left: 72.8%; width: 21.2%; }

/* 搜索引擎可读文字，视觉上隐藏 */
.seo-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* H5：按照 941 × 1672 参考图百分比定位 */
@media (max-width: 767px) {
  html,
  body {
    background: #fff6e8;
  }

  .site {
    max-width: 941px;
  }

  .hotspot-main-cta {
    left: 23.8%;
    top: 27.2%;
    width: 52.2%;
    height: 5.1%;
  }

  .hotspot-card {
    height: 15.8%;
    border-radius: 26px;
  }

  .card-1 {
    left: 5.0%;
    top: 63.1%;
    width: 43.1%;
  }

  .card-2 {
    left: 51.0%;
    top: 63.1%;
    width: 43.1%;
  }

  .card-3 {
    left: 5.0%;
    top: 81.1%;
    width: 43.1%;
  }

  .card-4 {
    left: 51.0%;
    top: 81.1%;
    width: 43.1%;
  }
}

/* 大屏居中展示，避免超宽屏拉伸过大 */
@media (min-width: 1673px) {
  body {
    background:
      linear-gradient(90deg, #fff6e8 0%, #fff8ee 50%, #fff1df 100%);
  }

  .site {
    box-shadow: 0 0 50px rgba(132, 82, 20, 0.05);
  }
}