.hero-container {
  position: relative;
  width: 100vw;
  min-height: 150vh; /* Fixed typo from 150xh to 150vh */
  overflow-x: hidden; 
  background: #1e0e3d;   
}

/* Background Graphic Wrapper */
.hero-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
/*  overflow-x: hidden;  */
/*  isolation: isolate; */
}

/* Ambient Backdrop Glow */
.hero-bg-shapes::before {
  content: '';
  position: absolute; /* Changed from relative to absolute to keep positioning context clean */
  top: 10%;
  right: -10%;
  width: 70%;
  height: 50%;
  background: radial-gradient(circle, #ec3494 0%, #a42c94 60%, transparent 100%);
  filter: blur(100px);
  opacity: 0.45;
  z-index: 1;
}

/* PILL 1: Top-Right to Bottom-Left (Blue Base) */
.hero-bg-shapes::after {
  content: '';
  position: absolute;
  top: 30%;
  right: -5%;
  width: 65%;
  height: 20%;
  border-radius: 9999px; 
  transform: rotate(-20deg); 
  
  /* Set to your exact requested base color */
  background: #2a03f9; 
  filter: blur(25px); 
  opacity: 0.85; 
  z-index: 2;
}

/* PILL 1 Overlay */
.pill1-pink-overlay {
  content: '';
  position: absolute;
  top: 30%;
  right: -5%;
  width: 65%;
  height: 20%;
  border-radius: 9999px; 
  transform: rotate(-20deg); 
  
  /* Set to your exact requested base color */
  background: #fe54ff; 
  filter: blur(35px); 
  opacity: 0.85; 
  z-index: 3;

  -webkit-mask-image: radial-gradient(circle at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 50%);
  mask-image: radial-gradient(circle at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 50%);
}

/* PILL 2: Bottom-Right to Top-Left (Blue Base) */
.second-pill {
  position: absolute;
  top: 10%;
  right: 3%;
  width: 50%;
  height: 20%;
  border-radius: 9999px;
  transform: rotate(20deg); 
  
  /* Set to your exact requested base color */
  background: #2a03f9; 
  filter: blur(25px);   
  opacity: 0.85;
  z-index: 4;
}

/* PILL 2 Overlay */
.pill2-pink-overlay {
  content: '';
  position: absolute;
  top: 10%;
  right: 3%;
  width: 50%;
  height: 20%;
  border-radius: 9999px;
  transform: rotate(20deg); 
  
  /* Set to your exact requested base color */
  background: #fe54ff; 
  filter: blur(35px); 
  opacity: 0.85; 
  z-index: 5;

  -webkit-mask-image: radial-gradient(circle at 100% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 50%);
  mask-image: radial-gradient(circle at 100% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 50%);
}


/* Content Layer */
.hero-content {
  position: relative;
  z-index: 6; /* Bumped to 3 so it sits cleanly on top of the intersection layer */
  padding: 0;
  margin: 0;
  flex: 1 0 auto; 
} 

/* --- MOBILE STYLING --- */
@media (max-width: 992px) {

  /* PILL 1: Top-Right to Bottom-Left (Blue Base) */
  .hero-bg-shapes::after {
    top: 25%;
    right: -5%;
    width: 100%;
    height: 10%;
  }

  /* PILL 1 Overlay */
  .pill1-pink-overlay {
    top: 25%;
    right: -5%;
    width: 100%;
    height: 10%;
  }

  /* PILL 2: Bottom-Right to Top-Left (Blue Base) */
  .second-pill {
    top: 15%;
    right: 3%;
    width: 90%;
    height: 10%;
  }

  /* PILL 2 Overlay */
  .pill2-pink-overlay {
    top: 15%;
    right: 3%;
    width: 90%;
    height: 10%;
  }


}