/* JOVIK 4.1.4 — hero visual balance */
.hero-v41{
  background:
    radial-gradient(circle at 76% 44%,rgba(110,54,255,.52),transparent 25%),
    radial-gradient(circle at 91% 62%,rgba(201,255,54,.12),transparent 21%),
    linear-gradient(145deg,#0c0f1e 0%,#11142a 48%,#1d1743 100%)!important;
}
.hero-device{
  max-width:640px!important;
  min-height:540px!important;
}
.hero-device:before{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  right:2%;
  top:8%;
  background:radial-gradient(circle,rgba(111,55,255,.28),rgba(111,55,255,.08) 44%,transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}
.hero-device:after{
  content:"";
  position:absolute;
  right:-24px;
  top:55px;
  width:340px;
  height:340px;
  border:1px solid rgba(201,255,54,.13);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 78px rgba(255,255,255,.012);
  pointer-events:none;
}

.device-browser{
  width:535px!important;
  max-width:calc(100% - 40px)!important;
  top:20px!important;
  left:47%!important;
}
.device-main{
  min-height:230px!important;
}
.device-orb img{
  width:165px!important;
}
.phone-a{
  width:160px!important;
  height:340px!important;
  right:-4px!important;
  bottom:-3px!important;
}
.phone-b{
  width:160px!important;
  height:340px!important;
  right:166px!important;
  bottom:-28px!important;
}

.hero-float-card{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:170px;
  padding:11px 13px;
  background:rgba(255,255,255,.96);
  color:#171829;
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
}
.hero-float-card b{
  display:block;
  font:800 11px Manrope,sans-serif;
}
.hero-float-card small{
  display:block;
  margin-top:2px;
  color:#777b88;
  font-size:8px;
}
.float-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  background:#6b34ff;
  color:#fff;
  font-weight:900;
}
.float-icon.lime{
  background:#c9ff36;
  color:#161827;
}
.float-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:linear-gradient(135deg,#7340ff,#c9ff36);
  box-shadow:inset 0 0 0 3px #fff;
}
.float-one{
  right:22px;
  top:108px;
  transform:rotate(2deg);
}
.float-two{
  left:-6px;
  bottom:108px;
  transform:rotate(-2deg);
}
.float-three{
  right:22px;
  bottom:114px;
  transform:rotate(1deg);
}

/* More intentional right-side composition on wide screens */
@media(min-width:1181px){
  .hero-shell{
    grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr)!important;
    column-gap:48px!important;
  }
  .hero-copy{
    max-width:570px!important;
  }
  .hero-device{
    transform:translateX(10px);
  }
}

/* Slightly simplify on medium widths */
@media(max-width:1180px){
  .hero-device{
    max-width:580px!important;
  }
  .device-browser{
    width:485px!important;
  }
  .phone-a,.phone-b{
    width:145px!important;
    height:310px!important;
  }
  .phone-b{
    right:148px!important;
  }
  .hero-float-card{
    transform:scale(.92)!important;
  }
}

/* Tablet keeps browser + one phone, hides some floats */
@media(max-width:980px){
  .hero-device{
    max-width:720px!important;
    min-height:500px!important;
  }
  .device-browser{
    width:580px!important;
    left:50%!important;
  }
  .phone-a{
    right:4%!important;
  }
  .phone-b{
    right:26%!important;
  }
  .float-two{
    left:5%!important;
  }
}

/* Mobile stays clean */
@media(max-width:700px){
  .hero-device{
    min-height:290px!important;
  }
  .hero-device:before,.hero-device:after,
  .hero-float-card{
    display:none!important;
  }
  .device-browser{
    width:100%!important;
    left:auto!important;
  }
}