/* ============================================================
   首页样式 index.css(PC + 移动端)
   ============================================================ */

/* ---------- Part1: 视频首屏 ---------- */
.part-1 { position: relative; }
.part-1 .responsive-video { width: 100%; height: 100vh; object-fit: cover; object-position: center; vertical-align: top; display: block; }
.part-1-content {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  color: #fff;
  padding: 164px 0 0 120px;
  box-sizing: border-box;
  z-index: 2;
}
.part-1-content h2 { height: 66px; line-height: 66px; font-size: 48px; font-weight: bold; margin-bottom: 8px; }
.part-1-content h3 { height: 22px; line-height: 22px; font-size: 16px; font-weight: normal; margin-bottom: 48px; }
.part-1-content p {
  font-size: 20px; height: 27px; line-height: 27px;
  padding-left: 27px; margin-bottom: 20px;
  background: url(../assets/images/index/dot.png) no-repeat left center/21px;
}

/* ---------- Part2: 智能生态大图 + 热点 ---------- */
.index { background: #0f1114; }
.part-2 { position: relative; width: 100%; height: 1080px; box-sizing: border-box; padding-top: 88px; }
.part-2 .box {
  width: 100%; height: 100%;
  background: url(../assets/images/myhome/homep2.png) no-repeat center/cover;
  position: absolute; left: 0; top: 0; z-index: 1;
}
.title-wrap { position: absolute; left: 50%; top: 88px; transform: translateX(-50%); z-index: 2; text-align: center; }
.title { font-size: 32px; font-weight: bold; line-height: 46px; color: #fff; margin-bottom: 12px; }
.title span {
  background: linear-gradient(111deg, #fb4593 4%, #5b3dfe 47%, #00a6ff 86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-title { height: 23px; line-height: 23px; font-size: 18px; color: #fff; margin-bottom: 100px; }
.point-wrap { width: 1px; height: 100%; margin: 0 auto; position: relative; z-index: 3; }
.point {
  background: url(../assets/images/myhome/info-icon.png) no-repeat center/cover;
  width: 28px; height: 28px;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}
.p-zhanting { left: 466px; top: 439px; }
.p-hanji { left: -270px; top: 476px; }
.p-ywb { left: 0; top: 440px; }
.p-fmom { left: 270px; top: 530px; }
.p-znzz { left: -225px; top: 740px; }
.p-zljc { left: 0; top: 710px; }
.p-xialiao { left: 315px; top: 780px; }
.p-shengtai { left: 235px; top: 334px; }

/* 悬浮信息面板 */
.point .pannel-wrap {
  position: absolute;
  width: 226px;
  left: 50%;
  top: 0;
  transform: translate(-100px, -100%);
  padding-bottom: 7.5px;
  display: none;
  z-index: 5;
}
.point:hover .pannel-wrap,
.point.active .pannel-wrap { display: block; }
.point .pannel {
  box-sizing: border-box;
  border-radius: 12px;
  background: #1a1b1f;
  padding: 14px 14px 10px;
  position: relative;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.point .pannel::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #2a2b2f;
}
.point .pannel-arrow {
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #1a1b1f;
  z-index: 2;
}
.point .pannel .title { font-size: 16px; font-weight: bold; color: #0088ff; margin-bottom: 6px; text-align: left; line-height: 23px; }
.point .pannel .desc { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 20px; margin-bottom: 8px; }
.point .pannel .list { color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: bold; }
.point .pannel .list li { margin-bottom: 10px; padding-left: 16px; background: url(../assets/images/myhome/left-arrow.png) no-repeat left center/6px 9px; }

@media screen and (max-width: 1440px) {
  .part-2 { padding-top: 57px; height: 810px; }
  .p-zhanting { left: 346px; top: 322px; }
  .p-hanji { left: -210px; top: 350px; }
  .p-ywb { left: 0; top: 320px; }
  .p-fmom { left: 200px; top: 400px; }
  .p-znzz { left: -170px; top: 550px; }
  .p-zljc { left: 0; top: 520px; }
  .p-xialiao { left: 235px; top: 580px; }
  .p-shengtai { left: 178px; top: 242px; }
}

/* ---------- Part3: 积分获取攻略(3D 卡片) ---------- */
.part-3 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 88px 0 150px;
  background: url(../assets/images/myhome/p3-bg.png) no-repeat center top/100% auto;
}
.part-3 .title { font-size: 32px; font-weight: bold; line-height: 46px; color: #fff; margin-bottom: 12px; text-align: center; }
.part-3 .title span {
  background: linear-gradient(127deg, #fb4593 5%, #5b3dfe 48%, #00a6ff 87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.part-3 .sub-title { height: 26px; line-height: 26px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; margin-bottom: 190px; }
.part-3 .items { width: fit-content; display: flex; margin: 0 auto; perspective: 1500px; }
.item {
  width: 355px; height: 528px;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.item-wrap {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  color: #fff;
  padding: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.item .bg-1 { background: url(../assets/images/myhome/p-3-bg-1.png) no-repeat center/cover; }
.item .bg-2 { background: url(../assets/images/myhome/p-3-bg-2.png) no-repeat center/cover; }
.item .bg-3 { background: url(../assets/images/myhome/p-3-bg-3.png) no-repeat center/cover; }
.item .bg-4 { background: url(../assets/images/myhome/p-3-bg-4.png) no-repeat center/cover; }
.item .title { font-size: 28px; font-weight: 500; line-height: 38px; margin-bottom: 16px; color: #fff; text-align: left; }
.item .list li { line-height: 27px; margin-bottom: 4px; padding-left: 16px; font-size: 20px; background: url(../assets/images/myhome/i-dot.png) no-repeat left center/12px; color: #fff; }
.item .desc { line-height: 27px; font-size: 20px; margin-bottom: 8px; margin-top: auto; color: #fff; }

@media screen and (max-width: 1440px) {
  .part-3 { padding-bottom: 88px; }
  .item { width: 255px; height: 379px; }
  .item-wrap { padding: 19px 16px 25px; }
  .item .title { font-size: 20px; height: 27px; line-height: 27px; margin-bottom: 12px; }
  .item .list li { height: 19px; font-size: 14px; line-height: 19px; margin-bottom: 4px; }
  .item .desc { line-height: 19px; font-size: 14px; }
}

/* 首页尾部背景 */
.tail-bg { width: 100%; height: 273px; background: url(../assets/images/myhome/tail_screen_bg.png) no-repeat center/cover; }

/* ============================================================
   移动端(手机 <768px): 品牌蓝 + 卡片式
   ============================================================ */
@media screen and (max-width: 767px) {
  .part-1 .responsive-video { height: 60vh; }
  .part-1-content { padding: 90px 20px 0; text-align: left; }
  .part-1-content h2 { height: auto; line-height: 40px; font-size: 28px; margin-bottom: 6px; }
  .part-1-content h3 { height: auto; line-height: 22px; font-size: 14px; margin-bottom: 28px; }
  .part-1-content p { font-size: 15px; height: auto; line-height: 22px; padding-left: 20px; margin-bottom: 12px; background-size: 16px; }

  /* Part2: 简化背景图 + 热点改列表卡片 */
  .part-2 { height: auto; min-height: 600px; padding-top: 48px; }
  .part-2 .box { background: url(../assets/images/myhome/homep2.png) no-repeat center/cover; }
  .title-wrap { position: static; transform: none; padding: 0 16px; }
  .title { font-size: 24px; line-height: 34px; }
  .sub-title { height: auto; font-size: 15px; margin-bottom: 24px; }
  .point-wrap { width: 100%; height: auto; margin: 0; padding: 0 16px 40px; }
  .point { position: static; width: 100%; height: auto; margin-bottom: 12px; background: none; }
  .point .pannel-wrap {
    position: static;
    width: 100%;
    transform: none;
    padding-bottom: 0;
    display: block;
  }
  .point .pannel { border-radius: 12px; background: #fff; padding: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
  .point .pannel::after, .point .pannel-arrow { display: none; }
  .point .pannel .title { color: #007aff; }
  .point .pannel .desc { color: #595959; }
  .point .pannel .list { color: #262626; }
  .point .pannel .list li { background-image: url(../assets/images/myhome/left-arrow.png); }
  /* 移动端热点的条目标题(内容与 PC 一致,仅排版) */
  .point .pannel { }

  /* Part3: 卡片单列滑动 */
  .part-3 { padding: 48px 0 60px; }
  .part-3 .sub-title { height: auto; margin-bottom: 28px; }
  .part-3 .items {
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .item { width: 280px; height: 400px; flex-shrink: 0; margin: 0 10px 0 0; }
  .item-wrap { padding: 20px 16px; }
  .tail-bg { height: 140px; }
}