/* hero-r1 (2026-11-02): 3D dashboard hero, blended into #0D1117, soft green glow, gentle float */
.hero .hv.h3d{position:relative;isolation:isolate}
.hero .h3d .h3glow{position:absolute;z-index:-1;left:8%;right:8%;top:14%;bottom:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(28,166,56,.34),rgba(28,166,56,.10) 55%,transparent 75%);filter:blur(28px);pointer-events:none}
.hero .h3d .photo{aspect-ratio:auto!important;background:none;border:0;box-shadow:none;
 -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
.hero .h3d .photo img{display:block;width:100%;height:auto;transform:none!important;object-fit:contain}
.hero .h3d .photo .tag{top:auto;bottom:12%;right:14%}
@media (prefers-reduced-motion:no-preference){
 .hero .h3d .photo{animation:h3float 7s ease-in-out infinite}
 .hero .h3d .h3glow{animation:h3glow 7s ease-in-out infinite}
}
@keyframes h3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes h3glow{0%,100%{opacity:.85}50%{opacity:1}}
.hero .h3d .float{z-index:2;background:rgba(22,27,34,.86);border:1px solid #30363D;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media (min-width:1024px){
 .hero .hv.h3d{margin:0 -32px 0 -8px}
 .hero .h3d .float{left:2%;bottom:6%;top:auto;right:auto}
 .hero .h3d .float.f2{left:auto;right:2%;top:4%;bottom:auto}
 .hero .h3d .float.f3{display:flex;left:-3%;top:30%;bottom:auto}
 .hero .h3d .chip{right:6%;bottom:4%;top:auto}
}
@media (max-width:1023px){
 .hero .hv.h3d{margin:8px -8px 0}
 .hero .h3d .float{left:4px;bottom:2%;top:auto}
 .hero .h3d .float.f2{right:4px;left:auto;top:0;bottom:auto}
 .hero .h3d .float.f3{display:none}
 .hero .h3d .chip{display:none}
 .hero .h3d .photo{-webkit-mask-image:radial-gradient(ellipse 76% 72% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 76% 72% at 50% 50%,#000 60%,transparent 100%)}
}
/* hero-r1b: larger visual on desktop, chips inside the frame, mobile spacing */
@media (min-width:1024px){.hero .hv.h3d{margin:0 -48px 0 -24px}.hero .h3d .photo img{transform:scale(1.08)!important}.hero .h3d .float.f2{right:6%;top:6%}.hero .h3d .float.f3{left:0;top:32%}.hero .h3d .float{left:6%;bottom:8%}}
@media (max-width:1023px){.hero .hv.h3d{margin-top:28px}.hero .h3d .float.f2{top:4%;right:8px}.hero .h3d .photo{-webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 55%,transparent 100%)}}