/* B3-PERF v36 external patch
   Scope: only #b3-perf section of pd-neuma-house_v31.html
   Purpose: replace image-based performance graphics with programmatic 3-circle layout,
   keep DOM order 75Pa -> 3600Pa -> 720Pa, add scrollfade entrance, and use uploaded perspective grid background.
*/
.neuma-house-page .nh-b3-section{
  position:relative;
  overflow:hidden;
  background-color:#fff;
  background-image:
    linear-gradient(
      to bottom,
      rgba(238,246,248,1) 0%,
      rgba(238,246,248,1) 12%,
      rgba(241,247,249,.88) 24%,
      rgba(246,250,251,.62) 36%,
      rgba(251,253,253,.30) 44%,
      rgba(255,255,255,0) 50%
    ),
    url("../../images/neuma-home/AdobeStock_1215394361-2880.png");
  background-repeat:no-repeat,no-repeat;
  background-position:center top, center bottom;
  background-size:100% 100%, 100% auto;
}
.neuma-house-page .nh-perf-stage{
  position:relative;
  max-width:960px;
  min-height:980px;
  margin:0 auto;
  padding:1rem 0 5rem;
}
.neuma-house-page .nh-perf-circle{
  position:absolute;
  width:348px;
  height:348px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#0d2441;
  border:1px dashed #9cc7d8;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(1px);
  box-shadow:0 8px 24px rgba(15,55,96,.05);
  z-index:1;
}
.neuma-house-page .nh-perf-circle__inner{
  width:78%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.neuma-house-page .nh-perf-circle__eyebrow{
  margin:0 0 .55rem;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.02em;
}
.neuma-house-page .nh-perf-circle__value{
  margin:0;
  color:#27aae1;
  font-size:4.5rem;
  line-height:.95;
  font-family:"Arial Black","Arial","Microsoft JhengHei",sans-serif;
  font-weight:900;
  font-style:italic;
  -webkit-text-stroke:.65px currentColor;
  paint-order:stroke fill;
  letter-spacing:-.03em;
}
.neuma-house-page .nh-perf-circle__value span{
  font-size:.70em; /* Pa 維持減小 1 級 */
  font-family:"Arial Black","Arial","Microsoft JhengHei",sans-serif;
  font-style:italic;
  font-weight:900;
  -webkit-text-stroke:.45px currentColor;
  paint-order:stroke fill;
  letter-spacing:-.015em;
  margin-left:.04em;
}
.neuma-house-page .nh-perf-circle__sub{
  margin:.65rem 0 .45rem;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.45;
}
.neuma-house-page .nh-perf-circle__copy{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.22rem;
  font-size:.95rem;
  font-weight:600;
  line-height:1.45;
}
.neuma-house-page .nh-perf-circle__copy--compact{
  gap:.16rem;
  font-size:.90rem;
  line-height:1.38;
}
/* v31：依 Frame-1-3 三圓參考圖重排桌機位置。
   75Pa 右移且下移；3600Pa 左移且下移；720Pa 改為偏左，不再水平正中央。 */
.neuma-house-page .nh-perf-circle--75{ left:17%; top:-30px; }
.neuma-house-page .nh-perf-circle--3600{ right:calc(12% - 80px); top:160px; }
.neuma-house-page .nh-perf-circle--720{ left:20%; top:460px; transform:none; }

/* v32：參考 MySmartFit product.html 的 scrollfade 浮動滑入方式。
   每個圓依自身 getBoundingClientRect().top 觸發，因此會按目前幾何位置
   依序 75Pa → 3600Pa → 720Pa 進場；三圓位置本身完全沿用 v31。 */
.neuma-house-page .nh-scrollfade{
  opacity:0;
  -webkit-transform:translateY(150px);
  transform:translateY(150px);
  -webkit-transition:.4s;
  transition:.4s;
  -webkit-transition-delay:.3s;
  transition-delay:.3s;
  will-change:opacity,transform;
}
.neuma-house-page .nh-scrollfade.inView{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0);
}

@media (max-width:991.98px){
  .neuma-house-page .nh-b3-section{ background-size:100% 100%, cover; }
  .neuma-house-page .nh-perf-stage{ max-width:860px; min-height:920px; }
  .neuma-house-page .nh-perf-circle{ width:314px; height:314px; }
  .neuma-house-page .nh-perf-circle__eyebrow{ font-size:1.12rem; }
  .neuma-house-page .nh-perf-circle__value{ font-size:4.0rem; }
  .neuma-house-page .nh-perf-circle__sub{ font-size:1.04rem; }
  .neuma-house-page .nh-perf-circle__copy{ font-size:.88rem; }
  .neuma-house-page .nh-perf-circle__copy--compact{ font-size:.84rem; }
  /* v31：平板維持參考圖三角錯位比例；767px 以下仍回到單欄。 */
  .neuma-house-page .nh-perf-circle--75{ left:10%; top:-40px; }
  .neuma-house-page .nh-perf-circle--3600{ right:calc(8% - 80px); top:145px; }
  .neuma-house-page .nh-perf-circle--720{ left:15%; top:455px; transform:none; }
}
@media (max-width:767.98px){
  .neuma-house-page .nh-b3-section{
    background-position:center top, center bottom;
    background-size:100% 100%, auto 100%;
  }
  .neuma-house-page .nh-perf-stage{
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    padding:1rem .5rem 3rem;
  }
  .neuma-house-page .nh-perf-circle,
  .neuma-house-page .nh-perf-circle--75,
  .neuma-house-page .nh-perf-circle--3600,
  .neuma-house-page .nh-perf-circle--720{
    position:static;
    width:300px;
    height:300px;
    transform:none;
  }
  .neuma-house-page .nh-perf-circle__inner{ width:80%; }
  .neuma-house-page .nh-perf-circle__eyebrow{ font-size:1.05rem; }
  .neuma-house-page .nh-perf-circle__value{ font-size:3.6rem; }
  .neuma-house-page .nh-perf-circle__sub{ font-size:.98rem; margin:.5rem 0 .35rem; }
  .neuma-house-page .nh-perf-circle__copy{ font-size:.84rem; line-height:1.4; }
  .neuma-house-page .nh-perf-circle__copy--compact{ font-size:.80rem; line-height:1.35; }
}
@media (max-width:450px){
  .neuma-house-page .nh-perf-stage{ gap:1.25rem; padding:1rem .25rem 2.75rem; }
  .neuma-house-page .nh-perf-circle,
  .neuma-house-page .nh-perf-circle--75,
  .neuma-house-page .nh-perf-circle--3600,
  .neuma-house-page .nh-perf-circle--720{
    width:238px;
    height:238px;
  }
  .neuma-house-page .nh-perf-circle__inner{ width:81%; }
  .neuma-house-page .nh-perf-circle__eyebrow{ font-size:.95rem; margin:0 0 .35rem; }
  .neuma-house-page .nh-perf-circle__value{ font-size:2.85rem; }
  .neuma-house-page .nh-perf-circle__sub{ font-size:.88rem; margin:.38rem 0 .28rem; }
  .neuma-house-page .nh-perf-circle__copy{ font-size:.72rem; gap:.12rem; line-height:1.3; }
  .neuma-house-page .nh-perf-circle__copy--compact{ font-size:.69rem; line-height:1.26; }
}
@media (prefers-reduced-motion: reduce){
  .neuma-house-page .nh-scrollfade,
  .neuma-house-page .nh-scrollfade.inView{
    opacity:1;
    transform:none;
    transition:none;
  }
}