/* TwinPare Health & Fitness visual-density layer · 2026-08-27
 * Purpose: increase meaningful product imagery and keep the DNA/research motif
 * visibly present without changing copy, claims, routing, or component semantics.
 */

body.theme-health{background:#0d1627}
body.theme-health::before{
  content:"";
  position:fixed;
  inset:64px 0 0 auto;
  width:min(64vw,980px);
  height:calc(100vh - 64px);
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(13,22,39,1) 0%,rgba(13,22,39,.70) 24%,rgba(13,22,39,.12) 72%,rgba(13,22,39,.05) 100%),
    url('/images/twins-hub/science/hero-v2.jpg') left center/cover no-repeat;
  opacity:.15;
  filter:saturate(1.08) contrast(1.06);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 90%,transparent 100%);
}
body.theme-health .v2-header,
body.theme-health .health-v2,
body.theme-health .health-product-proof-v2,
body.theme-health .v2-footer{position:relative;z-index:1}

/* Put a dedicated DNA layer inside the Health hero. The previous body-only
 * treatment sat behind opaque sections and became effectively invisible on Safari/mobile. */
.health-v2__hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 20%,rgba(0,229,255,.08),transparent 30%),
    radial-gradient(circle at 70% 58%,rgba(187,134,252,.07),transparent 34%);
}
.health-v2__hero::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:-5%;
  width:min(62vw,900px);
  height:100%;
  min-height:560px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,22,39,.98) 0%,rgba(13,22,39,.82) 24%,rgba(13,22,39,.36) 58%,rgba(13,22,39,.12) 100%),
    linear-gradient(180deg,rgba(13,22,39,.10),rgba(13,22,39,.55) 100%),
    url('/images/twins-hub/science/hero-v2.jpg') left 38%/cover no-repeat;
  opacity:.24;
  filter:saturate(1.04) contrast(1.08);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.40) 18%,#000 46%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.40) 18%,#000 46%,#000 100%);
}
.health-v2__hero > *{position:relative;z-index:1}

.health-v2__flow{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:290px;
  display:grid;
  align-content:center;
}
.health-v2__flow::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('/images/apps/health/latest-2026-08-26/my-health-overview.webp') center/cover no-repeat;
  opacity:.115;
  transform:scale(1.03);
}
.health-v2__flow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(13,17,34,.95),rgba(17,29,48,.78));
}

.health-v2__areas{align-items:stretch}
.health-v2__area{
  position:relative;
  overflow:hidden;
  min-height:255px;
  padding:118px 24px 24px;
  isolation:isolate;
}
.health-v2__area::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 auto;
  height:104px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.66;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.health-v2__area::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:42px 0 0;
  background:linear-gradient(to bottom,rgba(15,18,34,.10) 0%,rgba(18,20,38,.94) 68px,rgba(18,20,38,.99) 132px);
}
.health-v2__area:nth-child(1)::before{background-image:url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp');background-position:center 28%}
.health-v2__area:nth-child(2)::before{background-image:url('/images/apps/health/latest-2026-08-26/my-health-overview.webp')}
.health-v2__area:nth-child(3)::before{background-image:url('/images/apps/health/twinpare-health-ai-workout.jpg');background-position:center 18%}
.health-v2__area:nth-child(4)::before{background-image:url('/images/apps/health/twinpare-health-hero-banner.jpg');background-position:center 38%}
.health-v2__area:nth-child(5)::before{background-image:url('/images/apps/health/latest-2026-08-26/heart-trends.webp');background-position:center 24%;background-size:145% auto}
.health-v2__area:nth-child(6)::before{background-image:url('/images/apps/health/twinpare-health-energy-bank.jpg');background-position:center 30%}
.health-v2__area > *{position:relative;z-index:1}

.health-v2__device-grid{position:relative}
.health-v2__device-grid::before{
  content:"";
  grid-column:1/-1;
  display:block;
  min-height:280px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    linear-gradient(90deg,rgba(12,17,33,.22),rgba(12,17,33,.02)),
    url('/images/apps/health/twinpare-health-hero-banner.jpg') center 42%/cover no-repeat;
  box-shadow:0 28px 70px rgba(0,0,0,.24);
}

.health-v2__individual-inner{
  position:relative;
  overflow:hidden;
  padding-top:230px!important;
}
.health-v2__individual-inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:190px;
  background:
    linear-gradient(to bottom,rgba(12,16,31,.05),rgba(19,17,36,.96)),
    url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp') center 29%/cover no-repeat;
  opacity:.72;
}
.health-v2__individual-inner>*{position:relative;z-index:1}

.health-v2__research-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:310px;
  align-content:center;
}
.health-v2__research-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('/images/twins-hub/science/hero-v2.jpg') left center/cover no-repeat;
  opacity:.23;
}
.health-v2__research-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(17,14,35,.94),rgba(14,31,49,.80));
}

.health-v2__privacy-inner{position:relative;overflow:hidden}
.health-v2__privacy-inner::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-80px;
  top:-95px;
  border-radius:50%;
  background:url('/images/apps/health/latest-2026-08-26/heart-trends.webp') center/cover no-repeat;
  opacity:.09;
  filter:blur(.2px);
}
.health-v2__privacy-inner>*{position:relative;z-index:1}

@media(max-width:900px){
  body.theme-health::before{width:82vw;opacity:.12;background-position:left center}
  .health-v2__hero::before{right:-24%;width:96vw;opacity:.21;background-position:left 34%}
  .health-v2__device-grid::before{min-height:220px}
  .health-v2__individual-inner{padding-top:205px!important}
  .health-v2__individual-inner::before{height:165px}
}

@media(max-width:620px){
  body.theme-health::before{width:100vw;opacity:.095;background-position:left center}
  .health-v2__hero::before{
    right:-54%;
    width:145vw;
    min-height:500px;
    opacity:.18;
    background-position:left 30%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 16%,#000 50%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 16%,#000 50%,#000 100%);
  }
  .health-v2__area{
    min-height:0;
    padding:104px 18px 22px;
    background:rgba(17,20,38,.96);
  }
  .health-v2__area::before{height:92px;opacity:.38;filter:saturate(.88) brightness(.74)}
  .health-v2__area::after{
    inset:34px 0 0;
    background:linear-gradient(to bottom,rgba(13,16,31,.12) 0%,rgba(17,20,38,.96) 58px,rgba(17,20,38,1) 112px);
  }
  .health-v2__area h3,
  .health-v2__area p,
  .health-v2__area .health-v2__badge{position:relative;z-index:2;text-shadow:0 2px 16px rgba(0,0,0,.46)}
  .health-v2__device-grid::before{min-height:175px;border-radius:20px;background-position:center}
  .health-v2__individual-inner{padding-top:174px!important}
  .health-v2__individual-inner::before{height:142px}
  .health-v2__research-card{min-height:250px}
}

@media(prefers-reduced-motion:reduce){
  body.theme-health::before{background-attachment:scroll}
}