:root{
  --x: -10%;
  --y: -10%;
  --r: 10px;     /* base radius for spotlight */
  --mx: 0px;      /* mouse x (px) for the ring */
  --my: 0px;      /* mouse y (px) for the ring */
}

/* Hero text */
 .hero-section {
     min-height: 90vh;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 40px 20px;
     overflow: hidden;
 }

 .hero-section-layer,
 .hero-section-overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

  .hero-section-overlay {
    clip-path: circle(10px at 0% 0%);
    clip-path: circle(var(--r, 10px) at var(--x, 0%) var(--y, 0%));
    transition: clip-path 100ms;
  }


 /* Background elements */
 .background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background: #fff;
 }

 .hero-icon-wrapper{
    margin: 10px auto;
    width: 80px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    border-radius: 20px;
    padding: 1.6rem 1rem;
    cursor: pointer;
    transition: transform 0.3s ease-in;
 }

  .hero-icon-wrapper:hover {
    transform: scale(1.2);
  }

  .hero-icon-wrapper i{
    color:white;
  }

 
 /* subtle grid */
 .hero-icon-wrapper .grid {
     position: absolute;
     inset: 0;
     opacity: 0.15;
     background-image:
         radial-gradient(circle at 1px 1px, #ddd 1px, transparent 0);
     background-size: 28px 28px;
 }

 /* colored blobs */
 .blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(40px);
     opacity: 0.6;
 }

 .blob.a {
     width: 300px;
     height: 300px;
     left: 8%;
     top: 100px;
     background: #cde4ff;
 }

 .blob.b {
     width: 220px;
     height: 220px;
     right: 12%;
     top: 200px;
     background: #ffe6c7;
 }

 .blob.c {
     width: 180px;
     height: 180px;
     left: 20%;
     bottom: 120px;
     background: #d4ffd7;
 }

 .hero-text-container h1 {
     font-size: clamp(32px, 6vw, 56px);
     margin: 0 0 12px;
     font-weight: bold;
 }

 .hero-text-container p {
     font-size: clamp(16px, 2vw, 22px);
     ;
     color: #555;
     margin: 0;
 }

 /* Hero Overlay Section Star  */
 .hero-section-overlay  .background-overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
     background: #000;
 }

 /* subtle grid */
 .hero-section-overlay   .grid {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0.3;
     background-image:
         radial-gradient(circle at 1px 1px, #ddd 1px, transparent 0);
     background-size: 28px 28px;
 }

 .hero-section-overlay .hero-text-container h1,  .hero-section-overlay .hero-text-container p  {
     color: white;
 }

  .hero-section-overlay .hero-icon-wrapper{
    background-color: white;
  }

  .hero-section-overlay .hero-icon-wrapper i{
    color:black;
  }
 .is-open{
    clip-path: circle(200% at  100% 100%);
    transition: clip-path 1.3s;
    transition-timing-function: cubic-bezier(1, -0.01, .01 , .99);
 }