/* V91 · 罗拉蝴蝶 03 FOUNDATION 与 LoLR.AI OS 首屏共用视觉背景
   只作用于两个指定模块，不改变其他页面与既有组件。 */

/* 罗拉蝴蝶总览 · 03 FOUNDATION / 训练积累 */
#page-butterfly #bf-moat {
  position: relative;
  overflow: hidden;
  background-color: #020317;
  background-image:
    linear-gradient(180deg, rgba(2, 3, 24, .58) 0%, rgba(2, 3, 24, .48) 42%, rgba(2, 3, 24, .76) 100%),
    linear-gradient(90deg, rgba(2, 3, 24, .34) 0%, rgba(2, 3, 24, .08) 62%, rgba(2, 3, 24, .24) 100%),
    url("/homepage/v157/assets/media/c9555a83bbf1bd04751b.webp");
  background-repeat: no-repeat;
  background-position: center 68%;
  background-size: cover;
}

#page-butterfly #bf-moat > .shell {
  position: relative;
  z-index: 1;
}

#page-butterfly #bf-moat .bf-intro-head .lead-muted {
  color: rgba(232, 238, 247, .78) !important;
}

#page-butterfly #bf-moat .bf-moat-grid article {
  border-top-color: #61b6ff;
}

#page-butterfly #bf-moat .bf-moat-grid small {
  color: #8ac8ff;
}

#page-butterfly #bf-moat .bf-moat-grid p {
  color: rgba(232, 238, 247, .78);
}

/* 罗拉操作系统 · 首屏 Banner */
#page-aios > .pd-hero {
  position: relative;
  background-color: #020317;
  background-image:
    linear-gradient(90deg, rgba(2, 3, 24, .92) 0%, rgba(2, 3, 24, .79) 48%, rgba(2, 3, 24, .42) 100%),
    linear-gradient(180deg, rgba(2, 3, 24, .10) 0%, rgba(2, 3, 24, .28) 100%),
    url("/homepage/v157/assets/media/c9555a83bbf1bd04751b.webp");
  background-repeat: no-repeat;
  background-position: center 64%;
  background-size: cover;
}

#page-aios > .pd-hero > .shell {
  position: relative;
  z-index: 1;
}

#page-aios > .pd-hero h1 {
  color: #fff;
  text-shadow: none;
}

#page-aios > .pd-hero .lead {
  color: rgba(241, 245, 250, .82);
}

#page-aios > .pd-hero .pd-facts {
  border-top-color: rgba(255, 255, 255, .20);
}

#page-aios > .pd-hero .pd-facts span {
  color: rgba(241, 245, 250, .62);
}

@media (max-width: 760px) {
  #page-butterfly #bf-moat {
    background-position: 58% center;
    background-image:
      linear-gradient(180deg, rgba(2, 3, 24, .62) 0%, rgba(2, 3, 24, .60) 48%, rgba(2, 3, 24, .82) 100%),
      url("/homepage/v157/assets/media/c9555a83bbf1bd04751b.webp");
  }

  #page-aios > .pd-hero {
    background-position: 57% center;
    background-image:
      linear-gradient(180deg, rgba(2, 3, 24, .68) 0%, rgba(2, 3, 24, .78) 54%, rgba(2, 3, 24, .88) 100%),
      url("/homepage/v157/assets/media/c9555a83bbf1bd04751b.webp");
  }
}

@media (max-width: 620px) {
  #page-aios > .pd-hero .lead {
    box-sizing: border-box;
    padding-right: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-butterfly #bf-moat,#page-aios > .pd-hero {
    background-attachment: scroll;
  }
}