.hero-image-wrap{ 
  display:flex; 
  justify-content:center; 
}
.hero-image{
  width: min(650px, 92vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 30px rgba(30, 15, 70, 0.22));
}

.hero-desc{
  max-width: 640px;
  margin: 18px auto 0;
  text-align: left;
  color: rgba(68,65,169,0.62);
  font-family: "Lancelot", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 25px;
  line-height: 1.6;
  min-height: 80px;
}

.hero-actions{
  margin-top: 60px;
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
}

.gesture-strip{
  display:flex;
  justify-content:center;
  gap: 26px;
  flex-wrap:wrap;
  padding-bottom: 16px;
}

.gesture{
  width: 240px;
  height:auto;
  filter: drop-shadow(0 12px 18px rgba(30, 15, 70, 0.14));
  opacity:.95;
}

.g1{ transform: translateY(-40px) translateX(-150px) rotate(-4deg); }
.g2{ transform: translateY(-30px) translateX(-190px) rotate(3deg); }
.g3{ transform: translateY(-10px) translateX(120px) rotate(-2deg); }
.g4{ transform: translateY(-30px) translateX(120px) rotate(4deg); }

@media (max-width: 980px){
  .g1,.g2,.g3,.g4{ transform: none; }
  .gesture{ width: 200px; }
}

@media (max-width: 640px){
  .hero-image-wrap{ margin-top: -70px; }
  .hero-desc{ font-size: 20px; text-align: center; }
}

/* Small laptops */
@media (min-width: 1024px) and (max-width: 1366px){

  .hero-image{
    width: 520px;
  }

  .hero-desc{
    font-size: 22px;
    max-width: 560px;
  }

  .gesture{
    width: 210px;
  }


}

@media (min-width: 1440px){

  .hero-image{
    width: 660px;
  }

  .hero-desc{
    font-size: 24px;
    max-width: 720px;
  }

  .gesture{
    width: 270px;
  }

}