.home-product-views{
  background-image: linear-gradient(to bottom, var(--sky-blue), transparent 15%, transparent 80%, var(--sky-blue)), url(../../img/product-section-bg-100.jpg);
  background-size: cover;
  background-position-y: center, top 64%;
  background-repeat: no-repeat;
  padding: 4.5rem 0 7.5rem;
}
.benefit-glass{
  position: relative;
  background-image: url('../../img/benefit-bg-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.benefit-glass .benefit-glass-mascot, .benefit-card-wrapper .benefit-card-mascot{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: var(--bg-url);
  background-size: contain;
  background-repeat: no-repeat;
}
.benefit-glass .benefit-glass-mascot{
  padding-top: 42.5%;
}
.benefit-card-wrapper .benefit-card-mascot{
  padding-top: 37.5%;
  background-position: center right -2.5rem;
  width: auto;
  left: -1rem;
  right: -1rem;
}
.benefit-card-wrapper{
  position: relative;
  background-image: url('../../img/benefit-bg-2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 2rem 0 4rem;
}
.benefit-card{
  text-align: center;
  aspect-ratio: 5/4;
  position: relative;
  /* border-radius: 1rem; */
  /* transform: perspective(1000px) rotateY(-28deg) rotateX(12deg); */
}
.benefit-card::before{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../img/kebaikan-bg.svg") no-repeat center bottom;
  background-size: contain;
}
.benefit-card.bc-reverse::before{
  background: url("../../img/kebaikan-bg-reverse.svg") no-repeat center bottom;
}
.benefit-card .benefit-content{
  padding: .5rem 2rem 3rem;
  color: var(--bs-primary);
  font-weight: normal;
  /* transform: perspective(1000px) rotateY(28deg) rotateX(12deg); */
}
.benefit-card .benefit-content .bc-title{
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: .75rem;
}
.benefit-card.bc-reverse .benefit-content{
  /* transform: perspective(1000px) rotateY(-28deg) rotateX(-12deg); */
}
.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.benefit-card.bc-reverse {
  flex-direction: column; /* tetap column karena design vertical */
}
.testimonial-section{
  background-image: radial-gradient(closest-side, rgba(255,255,255,0.875), transparent);
}
.tc-card{
  position: relative;
  transition: transform 0.3s;
  aspect-ratio: 187 / 150;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tc-card::before{
  content: "";
  display: block;
  /* background-color: #fff;
  border-radius: 1rem;
  border: 2px solid var(--bs-accent); */
  background: url("../../img/testimonial-bg.svg") no-repeat center;
  background-size: contain;
  transition: transform 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tc-card.tc-passed::before{
  transform: scaleX(-1);
}
.tc-card .tc-content{
  position: relative;
  padding: 2rem 2.5rem;
  text-align: center;
  color: var(--bs-primary);
  z-index: 3;
}
.tc-card .tc-content .tc-content--title{ font-size: 1.5rem; }
.growth-calculator .sh-title{
  -webkit-text-stroke: 4px white;
  paint-order: stroke;
}

.bubble-part .spark{
  position: absolute;
}
.bubble-part .spark.hb-spark-pos-1{
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
}
.bubble-part .spark.hb-spark-pos-2{
  top: calc(50% + .5rem);
  left: 0;
}
.bubble-part .spark.hb-spark-pos-3{
  top: 20%;
  right: -0.5rem;
}
.growth-calculator{
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 1.75rem;
}
.growth-calculator .gw-header{
  position: relative;
  padding: 0 1rem;
  z-index: 1;
  margin: 0 2rem;
}
.growth-calculator .gw-header .spark{
  position: absolute;
}
.growth-calculator .gw-header .spark.gwh-spark-pos1{
  top: 1rem;
  left: -1rem;
}
.growth-calculator .gw-header .spark.gwh-spark-pos2{
  left: 0;
  top: -1.25rem;
}
.growth-calculator .gw-header .spark.gwh-spark-pos3{
  right: -0.25rem;
  top: 2rem;
}
.growth-calculator .gw-header .spark.gwh-spark-pos4{
  right: -.75rem;
  top: 1rem;
}
.growth-calculator .gw-header::before{
  content: "";
  display: block;
  background-color: #fff;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
  transform: skewX(-3deg);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 12px solid;
  border-image: url('../../img/base-charcoal-border.svg') 16;
  border-image-outset: 8px 0px 8px 8px;
}
.growth-calculator .gw-header::after {
    content: "";
    display: block;
    width: 12rem;
    height: 12rem;
    position: absolute;
    border-left: 1.5rem solid white;
    border-radius: 50rem;
    bottom: -7rem;
    z-index: -1;
    transform: rotate(45deg);
}
.growth-calculator .gw-header .section-header{
  position: relative;
  bottom: 2rem;
}
.growth-calculator .gw-body{
  background-color: var(--hilo-green);
  border-radius: 1rem;
  z-index: 0;
  transform: perspective(2500px) rotateX(-20deg) rotateY(3deg);
}
.growth-calculator .gw-body .gwb-content{
  margin: 0;
  padding: 8rem 2rem 2rem;
  transform: perspective(2500px) rotateX(20deg) rotateY(3deg);
}
.gw-gender-selection{
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: -2rem 0 -128px;
  z-index: 2;
}
.gw-gender-selection .gw-gs--radio .gw-gsr--label{
  display: flex;
  border-radius: .75rem;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background-color: #a3a3a3;
  padding: .5rem 1rem;
  color: #fff;
  transition: background-color 0.3s;
}
.gw-gender-selection .gw-gs--radio:hover .gw-gsr--label{
  background-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-light) 60%);
}
.gw-gender-selection .gw-gs--radio > input[type="radio"]:checked + .gw-gsr--label{
  background-color: var(--bs-primary);
  font-family: "Anton", 'Antonio', sans-serif;
}
.gw-gender-selection .gw-gs--radio .gwl-media{
  position: relative;
  width: 96px;
}
.gw-gender-selection .gw-gs--radio .gwl-media::before{
  content: "";
  display: block;
  padding-top: 116.6666666667%;
}
.gw-gender-selection .gw-gs--radio .gwl-media > img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s;

}

.gw-gender-selection .gw-gs--radio .gwl-media img.gwl-main{
  opacity: 0;
  visibility: hidden;
}

.gw-gender-selection .gw-gs--radio > input[type="radio"]:checked + .gw-gsr--label .gwl-media img.gwl-main{
  opacity: 1;
  visibility: visible;
}
.gw-gender-selection .gw-gs--radio > input[type="radio"]:checked + .gw-gsr--label .gwl-media img.gwl-outline{
  opacity: 0;
  visibility: hidden;
}
.product-tagline {
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: clamp(160px, 20%, 250px);
    transform: translateY(50%);
}

/* --- Hero Section --- */
.hero-section {
  padding-top: 40px;
  position: relative;
  overflow: hidden;
}

/* Container Gelembung Putih */
.hero-bubble {
  padding: 4rem 2rem 1.5rem;
  position: relative;
  margin-top: 0px;
  z-index: 2;
}
.hero-bubble::before{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 1rem;
  transform: perspective(2500px) rotateY(9deg) rotateX(-16deg);
  border: 16px solid;
  border-image: url('../../img/base-charcoal-border.svg') 12;
  border-image-outset: 8px 0px 10px 10px;
}

/* Ekor Gelembung (Speech Bubble Tail) */
.hero-bubble::after {
  content: "";
  display: block;
  width: 24rem;
  height: 24rem;
  position: absolute;
  border-right: 2rem solid white;
  border-radius: 50rem;
  bottom: -16rem;
  z-index: -1;
  transform: rotate(-40deg);
  right: 1.5rem;
}
.bubble-part p{
  color: var(--hilo-blue);
  margin: 2rem auto 1rem;
}
.hilo-logo-main {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 200px;
}
.tc-carousel-item.tns-slide-active{
  position: relative;
}
.tc-carousel-item.tns-slide-active.active{
  z-index: 9;
}

.tc-carousel-item.tns-slide-active:not(.active) > .tc-card::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.125);
  transition: transform 0.3s;
  mask-image: url("../../img/testimonial-bg.svg");
}

.tc-carousel-item.tns-slide-active:not(.active) > .tc-card.tc-passed::after{
  transform: scaleX(-1);
}
.carousel-btn{
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 36px;
  height: 36px;
  --bs-btn-border-radius: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-slider-wrapper{
  position: relative;
}
.home-slider-wrapper button[data-action]{ display: none; }
.home-slider-slide img{ width: 100%; }
.hsw-controls, .hsw-nav{
  position: absolute;
}
.hsw-controls{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
}
.hsw-controls .home-slider-controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hsw-nav{
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.carousel-nav{
  text-align: center;
}
.carousel-nav .carousel-nav-item{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background-color: rgb(var(--bs-accent-rgb));
  opacity: .25;
  transition: all 0.3s;
}
.carousel-nav .carousel-nav-item.tns-nav-active{
  opacity: 1;
  width: 1.5rem;
}
.testimony-carousel-nav{
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin-top: 1rem;
}
.testimony-carousel-controls{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.main-logo-wrapper{
  position: relative;
  z-index: 3;
}

.tagline-pink {
  color: var(--bs-accent);
  font-weight: normal;
  font-family: "Antonio", var(--bs-font-sans-serif);
}
.bubble-part .tagline-pink > strong,
.bubble-part .tagline-pink > b{
  font-family: 'Anton', 'Antonio', 'Myriad Pro', sans-serif;
  color: var(--hilo-blue);
  letter-spacing: -1px;
  font-size: 1.5em;
  font-weight: normal;
}
.tagline-blue {
  color: var(--hilo-blue);
  font-weight: bold;
  letter-spacing: -1px;
  font-size: 1.5em;
}
.heading-emphasize{
  font-family: 'Anton', var(--bs-font-sans-serif);
  font-weight: normal;
}
.content-wrap{
  position: relative;
}
.page-section{
  background-color: var(--sky-blue);
}
#slider{
  position: fixed;
  /* z-index: -1; */
  width: 100%;
  top: 88px;
}
#slider::before{
  content: "";
  display: block;
  padding-top: 87.5%;
  width: 100%;
}
#slider + .content-wrap{
  margin-top: 87.5%;
}
#slider > .home-slider-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.early-section-begin{
  background-image: linear-gradient(to bottom, transparent, var(--bs-info) 20%);
}
/* responsive css */
@media screen and (min-width: 768px) {
  .hero-bubble {
    padding: 4rem 5rem 1.5rem;
  }
  .testimony-carousel-controls{
    left: 16.66667%;
    width: 66.66667%;
  }
  .hilo-logo-main {
   top: -140px;
   width: 300px; 
  }
}
@media screen and (min-width: 992px) {
  #slider::before{
    padding-top: 40%;
  }
  #slider + .content-wrap{
    margin-top: 40%;
  }
  .testimony-carousel-controls{
    left: 33.3333%;
    width: 33.3333%;
  }
}