.hero3-background {
  height: 100vh;
  background: #000;
  position: relative;
}
.hero3-text {
  position: absolute;
  top: 20%;
  left: 50%;
  right: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero3-text p{
  color: #fff;
  font-size: 1.6rem;
  white-space: nowrap;
  font-weight: 100;
}

/* network chips */
.hero-networks {
  display:flex;
  gap:8px; 
  justify-content:center;
  opacity:0; animation:up .5s ease forwards 1.2s;
  
}
.hero-network-chip {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-pill); padding:6px 14px;
  font-size:.76rem; font-weight:600;
  color:rgba(255,255,255,.78);
}
.hero-network-chip img { width:17px; height:17px; border-radius:50%; object-fit:cover; }

@keyframes up {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:translateY(0); }
}



.order-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 80px;
  padding: 40px 70px;
  background: rgb(255,255,255, 0.15);
  backdrop-filter: blur(5px);
  backdrop-filter:blur(8px);
  color: #fff;
  font-size: 3rem;
  font-weight: 900;
  font-family: "Outfit";
  box-shadow: inset 0 0px 1px rgba(255, 255, 255, 0.125);
}
.order-card:hover {
  padding: 50px 80px;
  font-size: 3.5rem;
}


.hand{
  position: absolute;
  height: 56%;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}



.hero3-background.show .hero3-text {
  opacity: 1;
  transform: translateY(0);
}

.hero3-background.show .order-card {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.hero3-background.show .hand {
  opacity: 1;
  transform: translate(-50%, 0);
}
.hero3-text {
  transform: translateY(40px);
}

.order-card {
  transform: translate(-50%, -40%);
}

.hand {
  transform: translate(-50%, 100px);
}
.hero3-text,
.order-card,
.hand {
  opacity: 0;
  transition: all 0.8s ease;
}