/* A calm, compositor-only illustration for the service hero. */
.banner.hero-upgraded{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  align-items:center;
  gap:22px;
  min-height:286px;
  padding:32px 38px;
  background:linear-gradient(122deg,#092b25 0%,#104d3f 57%,#236d5b 100%)!important;
  border:1px solid #40816e;
  isolation:isolate;
}
.banner.hero-upgraded:before{opacity:.11}
.banner.hero-upgraded:after{
  right:-85px;
  top:-95px;
  width:350px;
  height:350px;
  background:radial-gradient(circle,#e7c77b24 0,transparent 69%);
}
.banner.hero-upgraded>div:first-child{z-index:2}
.banner.hero-upgraded h2{
  max-width:570px;
  font-size:clamp(27px,3vw,35px);
  line-height:1.2;
  letter-spacing:-.035em;
  margin:12px 0;
  text-wrap:balance;
}
.banner.hero-upgraded p{max-width:470px;line-height:1.6}
.banner.hero-upgraded .hero-tags{margin-top:19px;gap:8px}
.banner.hero-upgraded .hero-tags span{
  border-radius:999px;
  padding:6px 11px;
  background:#ffffff14!important;
  border:1px solid #ffffff46!important;
  color:#f5fcf8!important;
  font-size:11px;
}
.banner.hero-upgraded .hero-showcase{
  position:relative;
  z-index:1;
  width:244px;
  height:244px;
  justify-self:center;
  flex:none;
  border-radius:50%;
  background:radial-gradient(circle,#f1d99620 0,#f1d9960a 37%,transparent 70%);
  pointer-events:none;
}
.hero-orbit{
  position:absolute;
  inset:15px;
  border:1px solid #e7d49b53;
  border-radius:50%;
  animation:hero-orbit-turn 34s linear infinite;
}
.hero-orbit:before{
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f4d88c;
  box-shadow:0 0 12px #f4d88c80;
}
.hero-orbit-inner{
  inset:45px;
  border-style:dashed;
  border-color:#a3d4bb59;
  animation-duration:48s;
  animation-direction:reverse;
}
.hero-orbit-inner:before{width:5px;height:5px;background:#a8dcc5;box-shadow:none}
.hero-device,.hero-center{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:21px;
}
.hero-device{
  width:69px;
  height:69px;
  color:#f8f7ec;
  border:1px solid #a1d5be75;
  background:linear-gradient(150deg,#2d7869d9,#155044ed);
  box-shadow:0 13px 28px #051d1847;
  animation:hero-float 8s ease-in-out infinite;
}
.hero-device svg{width:34px;height:34px;stroke-width:1.6}
.hero-device-phone{top:30px;left:4px;transform:rotate(-10deg)}
.hero-device-game{right:2px;bottom:28px;transform:rotate(10deg);animation-delay:-4s}
.hero-center{
  width:92px;
  height:92px;
  top:76px;
  left:76px;
  z-index:2;
  border:1px solid #ffe5a5;
  background:linear-gradient(145deg,#f2d995,#cba85b);
  color:#163d32;
  box-shadow:0 14px 32px #061d184d,0 0 0 11px #eecf8640;
}
.hero-center svg{width:46px;height:46px;stroke-width:1.8}
.hero-spark{position:absolute;color:#f3dfaa;font-size:25px;line-height:1}
.hero-spark-one{top:10px;right:33px}.hero-spark-two{bottom:5px;left:38px;font-size:20px}
@keyframes hero-orbit-turn{to{transform:rotate(360deg)}}
@keyframes hero-float{50%{translate:0 -6px}}
@media(max-width:850px){
  .banner.hero-upgraded{grid-template-columns:minmax(0,1fr) 190px;min-height:260px;padding:28px}
  .banner.hero-upgraded .hero-showcase{width:190px;height:190px}
  .hero-orbit{inset:11px}.hero-orbit-inner{inset:34px}
  .hero-center{width:76px;height:76px;top:57px;left:57px}
  .hero-center svg{width:38px;height:38px}
  .hero-device{width:54px;height:54px;border-radius:17px}
  .hero-device svg{width:27px;height:27px}
  .hero-device-phone{top:18px;left:0}.hero-device-game{right:0;bottom:18px}
}
@media(max-width:620px){
  .banner.hero-upgraded{display:block;min-height:255px;padding:25px 23px}
  .banner.hero-upgraded h2{font-size:clamp(27px,7.1vw,32px);max-width:100%}
  .banner.hero-upgraded p{max-width:300px}
  .banner.hero-upgraded .hero-showcase{
    position:absolute;
    right:-60px;
    top:-50px;
    width:185px;
    height:185px;
    opacity:.22;
  }
  .banner.hero-upgraded .hero-tags{position:relative;z-index:2}
}
@media(prefers-reduced-motion:reduce){
  .hero-orbit,.hero-device{animation:none!important}
}