/*
 * 首页以白、医疗蓝和品牌橙串联各模块。
 * 相邻区块以白色衔接，内部保留冷暖渐变，避免局部光晕在边缘形成断层。
 */
.medical-layout.home-page {
  --home-white: #ffffff;
  /* 先用边缘渐隐收住局部光晕，使相邻模块在交界处回到同一白色。 */
  --home-edge-fade: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) min(120px, 25%), rgba(255,255,255,0) max(calc(100% - 120px), 75%), #fff 100%);
  --home-blue-1: #f8fbfd;
  --home-blue-2: #f3f8fc;
  --home-orange-1: #fffaf6;
  background: var(--home-white);
}

/* 全宽渐变只在首页内容区内绘制，避免 100vw 将滚动条宽度计入后产生横向溢出。 */
.medical-layout.home-page #main {
  overflow-x: hidden;
  overflow-x: clip;
}

/* 品牌简介顶部承接 hero 底部条的浅灰（#f6f7f8），再过渡到纯白，避免交界处出现横向色带。 */
.medical-layout.home-page .intro-strip {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.medical-layout.home-page .intro-strip::before {
  content: '';
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #f6f7f8 0%, rgba(246,247,248,0) 25%, rgba(255,255,255,0) 70%, #fff 100%),
    radial-gradient(38% 100% at 94% 100%, rgba(104, 178, 226, .07), transparent 74%),
    linear-gradient(180deg, #f6f7f8 0%, #fafbfc 9%, var(--home-white) 20%, #ffffff 76%, var(--home-blue-1) 100%);
  pointer-events: none;
}

/* 解决方案：以全宽的冷暖渐变承接上下区块，右侧环境光淡化，避免留白处出现局部色块。 */
.medical-layout.home-page .solutions-showcase {
  background:
    var(--home-edge-fade),
    radial-gradient(58% 62% at 100% 12%, rgba(255, 150, 83, .035), transparent 82%),
    radial-gradient(52% 64% at 0% 84%, rgba(91, 164, 215, .045), transparent 84%),
    linear-gradient(180deg, var(--home-blue-1) 0%, #fcfdfe 28%, #ffffff 54%, #fffdfa 78%, var(--home-orange-1) 100%);
}

/* 服务规模：暖色与冷蓝留在区块内部，上下边缘统一渐隐到白色。 */
.medical-layout.home-page .reach-band {
  margin-top: 0;
  background:
    var(--home-edge-fade),
    /* 底部光晕并入底色，避免与连接区交界的色块断层。 */
    radial-gradient(40% 60% at 96% 88%, rgba(75, 157, 215, .03), transparent 82%),
    linear-gradient(180deg, var(--home-orange-1) 0%, #ffffff 22%, #ffffff 78%, var(--home-blue-1) 100%);
}

/* 连接能力区本身是定宽容器，用全宽伪元素保持背景连续。 */
.medical-layout.home-page .brand-connection {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.medical-layout.home-page .brand-connection::before {
  content: '';
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background:
    var(--home-edge-fade),
    /* 中部暖色光晕下移并减弱，避免在顶边形成可辨的色带。 */
    radial-gradient(30% 46% at 50% 52%, rgba(255, 145, 76, .045), transparent 80%),
    radial-gradient(40% 58% at 5% 24%, rgba(94, 171, 222, .045), transparent 82%),
    linear-gradient(180deg, var(--home-blue-1) 0%, #fafcfe 34%, #ffffff 66%, var(--home-white) 100%);
  pointer-events: none;
}

/* 案例区保持清爽，蓝色落在内容上缘，尾部回到暖白。 */
.medical-layout.home-page #cases {
  background:
    var(--home-edge-fade),
    radial-gradient(40% 56% at 96% 22%, rgba(91, 168, 221, .07), transparent 76%),
    linear-gradient(180deg, var(--home-white) 0%, #f8fbfd 48%, var(--home-orange-1) 100%);
}

/* 合作机构：内部保留暖色氛围，边缘与案例区统一衔接。 */
.medical-layout.home-page .cooperation-con {
  background:
    var(--home-edge-fade),
    /* 顶部与案例区同色起笔，暖色光晕下移并收敛，避免交界处出现色块。 */
    radial-gradient(36% 58% at 9% 34%, rgba(255, 157, 92, .05), transparent 80%),
    radial-gradient(34% 58% at 94% 80%, rgba(97, 170, 219, .045), transparent 82%),
    linear-gradient(180deg, var(--home-orange-1) 0%, #fffcf9 30%, #ffffff 56%, var(--home-blue-1) 100%);
}

/* 服务网络：以蓝色为主，橙色仅用于地图外的环境光，避免抢占数据层级。 */
.medical-layout.home-page .map-con {
  background:
    var(--home-edge-fade),
    radial-gradient(42% 64% at 3% 76%, rgba(77, 159, 218, .065), transparent 82%),
    radial-gradient(34% 52% at 96% 24%, rgba(255, 158, 94, .045), transparent 80%),
    linear-gradient(180deg, var(--home-blue-1) 0%, #ffffff 54%, #fafcfe 80%, #f9fbfd 100%);
}

/* 咨询区由冷蓝回到暖白，再自然衔接深色页脚。 */
.medical-layout.home-page .ask-con {
  background:
    var(--home-edge-fade),
    /* 顶部与地图区同色起笔，暖色光晕下移收敛，交界处不再出现色块。 */
    radial-gradient(38% 62% at 90% 38%, rgba(255, 145, 78, .05), transparent 80%),
    radial-gradient(32% 52% at 4% 84%, rgba(93, 168, 219, .045), transparent 82%),
    linear-gradient(180deg, #f9fbfd 0%, #fcfdfe 30%, #ffffff 52%, var(--home-orange-1) 80%, var(--home-white) 100%);
}

@media (max-width: 700px) {
  /* 小屏收紧光晕范围，避免色彩覆盖标题与正文对比度。 */
  .medical-layout.home-page .solutions-showcase {
    background:
    var(--home-edge-fade),
      radial-gradient(68% 30% at 100% 4%, rgba(255, 150, 83, .08), transparent 78%),
      linear-gradient(180deg, var(--home-blue-1) 0%, #ffffff 56%, var(--home-orange-1) 100%);
  }
  .medical-layout.home-page .reach-band {
    background: var(--home-edge-fade), linear-gradient(180deg, var(--home-orange-1) 0%, #ffffff 20%, #ffffff 84%, var(--home-blue-1) 100%);
  }
  .medical-layout.home-page .brand-connection::before {
    background:
    var(--home-edge-fade),
      radial-gradient(62% 32% at 50% 34%, rgba(255, 145, 76, .05), transparent 82%),
      linear-gradient(180deg, var(--home-blue-1) 0%, #fafcfe 36%, #ffffff 64%, var(--home-white) 100%);
  }
}