/* v87 visual upgrade + generated graphics */
:root{
  --v87-hero:url('../img/hero/hero-dashboard.png');
  --v87-stage1:url('../img/program/stage1.png');
  --v87-stage2:url('../img/program/stage2.png');
  --v87-stage3:url('../img/program/stage3.png');
}
.home-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(110deg, rgba(3,8,18,.96) 0%, rgba(3,8,18,.90) 34%, rgba(3,8,18,.56) 68%, rgba(3,8,18,.78) 100%),
    var(--v87-hero) center right/cover no-repeat !important;
  border:1px solid rgba(123,170,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.03);
}
.home-hero::after{
  content:'';
  position:absolute;inset:auto auto -18% -12%;
  width:42%;height:46%;
  background:radial-gradient(circle, rgba(34,230,255,.24) 0%, rgba(34,230,255,.08) 34%, rgba(34,230,255,0) 70%);
  filter:blur(12px);
  pointer-events:none;
}
.home-only-grid .panel,
.hero-dashboard-panel,
.profile-config-panel,
#qaScreen .panel,
#testScreen .panel{
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.hero-dashboard-panel{
  position:relative;
  overflow:hidden;
}
.hero-dashboard-panel::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}
.showcase-copy .benefit{
  backdrop-filter:blur(8px);
}
.quick-stats-grid .progress-stat{
  position:relative;
  overflow:hidden;
  min-height:188px;
}
.quick-stats-grid .progress-stat::before{
  content:'';
  position:absolute;right:-34px;top:-34px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(34,230,255,.18), rgba(34,230,255,.03) 52%, transparent 72%);
}
.stat-icon{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  opacity:.95;
  filter:drop-shadow(0 6px 18px rgba(34,230,255,.18));
}
.seg{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.stage-choice,
.onboarding-program{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.stage-choice{
  min-height:220px !important;
  padding:18px !important;
  justify-items:start !important;
  align-content:end !important;
  text-align:left !important;
  background-size:cover !important;
  background-position:center center !important;
}
.onboarding-program{
  min-height:220px;
  justify-items:start;
  align-content:end;
  text-align:left;
  background-size:cover;
  background-position:center center;
  padding:18px;
}
.stage-choice::before,
.onboarding-program::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,7,14,.12) 0%, rgba(4,7,14,.38) 30%, rgba(4,7,14,.90) 100%);
  z-index:0;
}
.stage-choice::after,
.onboarding-program::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(34,230,255,.20) 0%, rgba(34,230,255,0) 40%), linear-gradient(315deg, rgba(214,255,0,.15) 0%, rgba(214,255,0,0) 35%);
  mix-blend-mode:screen;
  z-index:0;
}
.stage-choice>* , .onboarding-program>*{position:relative;z-index:1;}
.stage-choice[data-stage="Stage 1"], .onboarding-program[data-stage="Stage 1"]{background-image:var(--v87-stage1) !important;}
.stage-choice[data-stage="Stage 2"], .onboarding-program[data-stage="Stage 2"]{background-image:var(--v87-stage2) !important;}
.stage-choice[data-stage="Stage 3"], .onboarding-program[data-stage="Stage 3"]{background-image:var(--v87-stage3) !important;}
.stage-choice b,
.onboarding-program b{
  display:block;
  color:#fff !important;
  font-size:20px !important;
  line-height:1.05 !important;
}
.stage-choice span,
.onboarding-program span{
  color:#d6e6f6 !important;
  font-size:13px !important;
  line-height:1.3 !important;
  max-width:none !important;
}
.onboarding-program strong{
  color:#d6ff00 !important;
  text-shadow:0 0 20px rgba(214,255,0,.12);
}
.stage-choice.active,
.onboarding-program.active{
  border-color:rgba(34,230,255,.55) !important;
  box-shadow:0 0 0 1px rgba(34,230,255,.24) inset, 0 24px 50px rgba(0,0,0,.34), 0 0 32px rgba(34,230,255,.18);
  transform:translateY(-2px);
}
.stage-choice.active span{color:#edf7ff !important;}
.day-card{
  position:relative;
  overflow:hidden;
}
.day-card::after{
  content:'';
  position:absolute; right:-36px; bottom:-36px;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(11,132,255,.16), rgba(11,132,255,.02) 58%, transparent 72%);
  pointer-events:none;
}
.data-panel .small-note,
.overview-head .muted{max-width:72ch;}
@media (max-width: 900px){
  .seg{grid-template-columns:1fr;}
  .stage-choice, .onboarding-program{min-height:180px !important;}
  .showcase-copy h1{max-width:10ch !important;}
  .home-hero{background-position:68% center !important;}
  .stat-icon{width:38px;height:38px;top:16px;right:16px;}
}