@import url("styles.css");

.bioHeroV2 .hero {
  background:
    linear-gradient(90deg, rgba(3, 35, 26, .98) 0%, rgba(3, 45, 33, .91) 34%, rgba(3, 45, 33, .58) 57%, rgba(3, 39, 29, .18) 82%, rgba(3, 31, 23, .08) 100%),
    linear-gradient(0deg, rgba(2, 34, 25, .78) 0%, rgba(2, 34, 25, .13) 48%, rgba(2, 34, 25, .18) 100%),
    url("hero-bio-v2.png") 75% center / cover no-repeat;
}

.bioHeroV2 .heroBackdrop::before {
  opacity: 1;
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 233, 159, .16), transparent 24%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: auto, 82px 82px, 82px 82px;
  mask-image: linear-gradient(90deg, #000, transparent 58%);
}

.bioHeroV2 .leaf { display: none; }
.bioHeroV2 .orbit { opacity: .18; border-color: rgba(205, 235, 69, .18); }
.bioHeroV2 .topbar { border-bottom-color: rgba(255, 255, 255, .22); }
.bioHeroV2 .hero h1 { text-shadow: 0 12px 44px rgba(0, 25, 18, .24); }
.bioHeroV2 .heroLead { color: rgba(255, 255, 255, .82); text-shadow: 0 5px 24px rgba(0, 24, 17, .3); }
.bioHeroV2 .primaryButton { background: #d9ef52; box-shadow: 0 18px 48px rgba(205, 235, 69, .18); }
.bioHeroV2 .outlineButton { border-color: rgba(255, 255, 255, .4); background: rgba(4, 63, 46, .24); }
.bioHeroV2 .heroContent { grid-template-columns: minmax(0, 1.42fr) minmax(255px, .48fr); gap: clamp(38px, 5vw, 70px); }
.bioHeroV2 .mobileHeroPreview { width: 258px; justify-self: end; margin-right: 5px; }
.bioHeroV2 .previewGlow { inset: 4% -18% 2%; background: rgba(205, 235, 69, .16); filter: blur(70px); }
.mobilePreviewLabel { position: absolute; z-index: 3; top: -17px; right: 5px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: rgba(4, 70, 51, .72); box-shadow: 0 14px 36px rgba(0, 28, 20, .24); backdrop-filter: blur(16px); font-size: .52rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.mobilePreviewLabel i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(205, 235, 69, .8); }
.mobilePhone { position: relative; z-index: 1; width: 258px; padding: 8px; border: 5px solid rgba(255, 255, 255, .94); border-radius: 43px; background: #082e25; box-shadow: 0 48px 110px rgba(0, 24, 17, .48), 0 0 0 1px rgba(255, 255, 255, .28); transform: rotate(1.4deg); }
.mobileSpeaker { position: absolute; z-index: 4; top: 12px; left: 50%; width: 55px; height: 6px; border-radius: 999px; background: #0b3b30; transform: translateX(-50%); }
.mobileScreen { position: relative; min-height: 515px; overflow: hidden; border-radius: 31px; color: var(--ink); background: #f3f7f4; }
.mobileStatus { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 7px 16px 0; color: rgba(255, 255, 255, .82); background: var(--forest-600); font-size: .52rem; font-weight: 800; }
.mobileAppBar { min-height: 76px; display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; padding: 12px 13px 14px; color: #fff; background: var(--forest-600); }
.mobileAppBar img { width: 34px; height: 34px; border-radius: 10px; }
.mobileAppBar > div { min-width: 0; display: flex; flex-direction: column; }
.mobileAppBar small { color: rgba(255, 255, 255, .67); font-size: .48rem; font-weight: 700; }
.mobileAppBar strong { margin-top: 2px; font-size: .85rem; letter-spacing: -.025em; }
.mobileProfile { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: var(--forest-950); background: var(--lime); font-size: .48rem; font-weight: 900; }
.mobileContent { padding: 13px 12px 70px; }
.mobileSearch { height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid #dce5e1; border-radius: 11px; color: #7b8a85; background: #fff; font-size: .57rem; }
.mobileSearch b { color: var(--forest-700); font-size: 1rem; }
.mobileSectionHead { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 9px; }
.mobileSectionHead strong { font-size: .67rem; }
.mobileSectionHead small { color: var(--forest-700); font-size: .48rem; font-weight: 750; }
.mobileProduct { display: grid; grid-template-columns: 34px minmax(0, 1fr) 25px; gap: 9px; align-items: center; min-height: 75px; padding: 9px; border: 1px solid #e0e7e3; border-radius: 13px; background: #fff; }
.mobileProduct + .mobileProduct { margin-top: 7px; }
.mobileProductMark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--forest-950); font-size: .6rem; font-weight: 900; }
.mobileProductMark.lime { background: var(--lime-soft); }
.mobileProductMark.orange { color: #9a4a12; background: var(--orange-soft); }
.mobileProduct > div { min-width: 0; display: flex; flex-direction: column; }
.mobileProduct div > small { overflow: hidden; color: #82908b; font-size: .4rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; }
.mobileProduct div > strong { overflow: hidden; margin-top: 3px; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.mobileProduct div > span { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--forest-600); font-size: .46rem; font-weight: 750; }
.mobileProduct div > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--forest-600); }
.mobileProduct > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--forest-600); font-size: .83rem; }
.mobileCart { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 8px 10px; border-radius: 12px; color: #fff; background: var(--forest-950); }
.mobileCart > span { display: flex; flex-direction: column; }
.mobileCart small { color: rgba(255, 255, 255, .58); font-size: .43rem; }
.mobileCart strong { margin-top: 2px; font-size: .6rem; }
.mobileCart > b { color: var(--lime); font-size: .49rem; }
.mobileBottomNav { position: absolute; right: 0; bottom: 0; left: 0; height: 60px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-top: 1px solid #e0e7e3; background: #fff; }
.mobileBottomNav span { display: flex; align-items: center; flex-direction: column; gap: 3px; color: #7b8984; font-size: .44rem; font-weight: 700; }
.mobileBottomNav span b { font-size: .75rem; line-height: 1; }
.mobileBottomNav .active { color: var(--forest-600); }
.bioHeroV2 .heroRail { border-top-color: rgba(255, 255, 255, .22); background: rgba(3, 41, 30, .22); backdrop-filter: blur(14px); }

@media (max-width: 960px) {
  .bioHeroV2 .hero {
    background:
      linear-gradient(180deg, rgba(3, 35, 26, .94) 0%, rgba(3, 45, 33, .79) 44%, rgba(3, 40, 30, .42) 72%, rgba(3, 35, 26, .79) 100%),
      url("hero-bio-v2.png") 88% center / cover no-repeat;
  }

  .bioHeroV2 .heroContent { min-height: 930px; grid-template-columns: 1fr; }
  .bioHeroV2 .mobileHeroPreview { width: 235px; justify-self: end; margin: -20px 5vw 0 0; }
  .bioHeroV2 .mobilePhone { width: 235px; }
  .bioHeroV2 .mobileScreen { min-height: 475px; }
  .bioHeroV2 .mobileProduct:nth-of-type(2) { display: none; }
}

@media (max-width: 680px) {
  .bioHeroV2 .hero {
    background:
      linear-gradient(180deg, rgba(3, 35, 26, .94) 0%, rgba(3, 45, 33, .84) 50%, rgba(3, 35, 26, .92) 100%),
      url("hero-bio-v2.png") 93% center / cover no-repeat;
  }

  .bioHeroV2 .heroContent { min-height: 785px; }

  .bioHeroV2 .heroBackdrop::before {
    background: radial-gradient(circle at 80% 18%, rgba(255, 233, 159, .13), transparent 26%);
    mask-image: none;
  }
}

@media print {
  .bioHeroV2 .hero { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}