.hero-belt{position:absolute;right:3%;top:29%;width:43%;height:47%;z-index:2;animation:hero-belt-float 7s ease-in-out infinite;filter:drop-shadow(0 25px 35px #0008);pointer-events:none}
.hero-belt-crop{width:100%;height:100%;position:relative;overflow:hidden;border-radius:18px;border:1px solid #7ac7d633;box-shadow:0 0 55px #21a2ba33}
.hero-belt img{position:absolute;width:100%;height:auto;left:0;top:50%;transform:translateY(-58%);display:block}
.hero-belt-crop:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#04131e88,transparent 45%);pointer-events:none}
.hero .corner-stamp{z-index:3;right:5%;bottom:115px;width:280px}
@keyframes hero-belt-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(1deg)}}
@media(min-width:1001px){.hero-inner{max-width:57%}.hero h1{font-size:clamp(3rem,5.8vw,6rem)}.hero-copy{max-width:540px}.hero-actions{gap:20px;flex-wrap:wrap}.hero-belt{top:31%;height:43%}}
@media(max-width:1000px){.hero{padding-bottom:470px}.hero-belt{top:auto;bottom:95px;right:9%;width:64%;height:320px}.hero .corner-stamp{display:block;bottom:70px;right:5%;width:235px;padding:20px}.hero .corner-stamp b{font-size:55px}.hero .corner-stamp .badge-bottom strong{font-size:15px}.hero .corner-stamp .badge-bottom span{font-size:11px}}
@media(max-width:650px){.hero{padding-bottom:365px;min-height:1180px}.hero-belt{right:7%;width:86%;bottom:100px;height:235px}.hero .corner-stamp{bottom:66px;width:190px;padding:16px;border-radius:12px}.hero .corner-stamp .badge-label{font-size:9px}.hero .corner-stamp b{font-size:43px}.hero .corner-stamp .badge-score{margin:12px 0}.hero .corner-stamp .badge-score span{font-size:13px}.hero .corner-stamp .badge-rule{margin:12px 0}.hero .corner-stamp .badge-bottom{display:block}.hero .corner-stamp .badge-bottom span{margin-top:6px}.hero .corner-stamp .badge-bottom strong{font-size:14px}.hero .scroll-cue{bottom:23px}}
@media(prefers-reduced-motion:reduce){.hero-belt{animation:none}}
.hero-belt img{width:120%;left:-10%;transform:translateY(-57.8%)}
.hero-belt-crop{overflow:visible;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;align-items:center}.hero-belt img{position:relative;top:auto;left:auto;width:100%;height:auto;transform:none}.hero-belt-crop:after{display:none}
/* Raised belt with a gentle horizontal drift. */
.hero-belt{top:17%;animation:hero-belt-drift 14s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes hero-belt-drift{from{transform:translate3d(14px,0,0)}to{transform:translate3d(-24px,0,0)}}
@media(min-width:1001px){.hero-belt{top:17%}}
@media(max-width:1000px){.hero-belt{top:auto;bottom:145px}}
@media(max-width:650px){.hero-belt{top:auto;bottom:140px;animation-duration:16s}}
@media(prefers-reduced-motion:reduce){.hero-belt{animation:none;transform:none}}
.hero-belt{right:5.5%;animation:hero-belt-drift 20s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform;backface-visibility:hidden}
@keyframes hero-belt-drift{from{transform:translate3d(8px,0,0)}to{transform:translate3d(-28px,0,0)}}
@media(min-width:1001px){.hero .corner-stamp{top:54%;bottom:auto;right:6.5%}}
@media(max-width:1000px){.hero-belt{right:12%}.hero .corner-stamp{bottom:120px;right:7%}}
@media(max-width:650px){.hero-belt{right:9%;width:84%;animation-duration:22s}.hero .corner-stamp{bottom:108px;right:6%}}
@media(prefers-reduced-motion:reduce){.hero-belt{animation:none;transform:none;will-change:auto}}
/* User-supplied telesales face-off scene becomes the hero artwork. */
.hero .arena{background-image:url('assets/telesales-faceoff.webp');background-position:center center;transform-origin:65% 50%}
.hero .hero-belt{display:none}
.hero:after{background:linear-gradient(90deg,#031019e8 0%,#031019a3 34%,#03101915 58%,transparent 80%),linear-gradient(0deg,#061923,transparent 22%)}
.hero .corner-stamp{top:auto;bottom:62px;right:4%;width:250px;padding:20px 23px;background:linear-gradient(130deg,#0c3148e8,#04131ee8)}
.hero .corner-stamp b{font-size:62px}.hero .corner-stamp .badge-score{margin:14px 0}.hero .corner-stamp .badge-rule{margin:14px 0}
@media(max-width:1000px){.hero{padding-bottom:110px;min-height:940px}.hero .arena{background-position:64% center}.hero .corner-stamp{display:none}.hero:after{background:linear-gradient(90deg,#031019ed,#031019a6 52%,#03101933),linear-gradient(0deg,#061923,transparent 25%)}}
@media(max-width:650px){.hero{min-height:920px;padding-bottom:90px}.hero .arena{background-position:67% center}.hero:after{background:linear-gradient(90deg,#031019e3,#03101999),linear-gradient(0deg,#061923,transparent 25%)}}
.hero .corner-stamp{display:none!important}
.hero .arena{inset:-10%;background-image:url('assets/telesales-faceoff.webp');background-size:cover;background-position:center;animation:hero-cinematic-drift 38s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:65% 50%;will-change:transform;backface-visibility:hidden}
@keyframes hero-cinematic-drift{from{transform:translate3d(-1%,0,0) scale(1.02) rotate(-.6deg)}to{transform:translate3d(1.5%,.6%,0) scale(1.12) rotate(.6deg)}}
@media(max-width:1000px){.hero .arena{background-position:64% center}}
@media(max-width:650px){.hero .arena{background-position:67% center}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important;will-change:auto}}
/* Wider framing retains both competitors and the complete belt. */
.hero .arena{inset:-2%;background-position:right center;transform-origin:75% 50%;animation:hero-wide-drift 38s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes hero-wide-drift{from{transform:translate3d(0,0,0) scale(1) rotate(-.25deg)}to{transform:translate3d(-.35%,.2%,0) scale(1.035) rotate(.25deg)}}
@media(min-width:1001px){.hero{min-height:820px;padding-top:50px;padding-bottom:80px}.hero .arena{background-size:cover;background-position:right center}.hero h1{font-size:clamp(3rem,5.3vw,5.6rem)}.hero-mantra{margin-top:24px}.hero-copy{margin-top:18px}.hero-actions{margin-top:24px}}
@media(max-width:1000px){.hero .arena{background-position:73% center}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important}}
/* Mobile gives the complete face-off scene its own wide frame. */
@media(max-width:650px){.hero{display:block;min-height:0;padding:45px 6% 330px;background:#04131e}.hero-inner{max-width:100%}.hero .arena{inset:auto -2% 0;height:310px;background-position:center center;background-size:cover;transform-origin:center;animation:mobile-faceoff-drift 38s cubic-bezier(.45,0,.55,1) infinite alternate}.hero:after{background:linear-gradient(0deg,#061923 0%,transparent 9%,transparent 24%,#04131e 35%);inset:0}.hero .mesh{opacity:.4}.hero .hero-copy{max-width:none}.hero .hero-actions{margin-top:25px}.hero .deadline{margin-top:17px}.hero .scroll-cue{bottom:14px;left:6%;text-shadow:0 2px 6px #000}.hero canvas{height:100%}.hero .hero-mantra{margin-top:24px}.hero .hero-actions .text-link{text-align:left}.hero h1{font-size:clamp(2.6rem,10.6vw,4.2rem)}}
@media(max-width:380px){.hero{padding-bottom:300px}.hero .arena{height:280px}}
@keyframes mobile-faceoff-drift{from{transform:scale(1) rotate(-.2deg)}to{transform:scale(1.025) rotate(.2deg)}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important}}
@media(max-width:650px){.hero .arena{background-size:100% auto;background-repeat:no-repeat;background-position:center bottom;background-color:#04131e}.hero:after{background:linear-gradient(0deg,#061923 0%,transparent 7%,transparent 21%,#04131e 33%)}}
/* Mobile returns to an immersive full-height image with the belt in frame. */
@media(max-width:650px){.hero{display:flex;align-items:flex-start;min-height:1100px;padding:45px 6% 355px}.hero .arena{inset:-3%;height:auto;background-image:url('assets/telesales-faceoff.webp');background-repeat:no-repeat;background-size:auto 76%;background-position:74% bottom;background-color:#04131e;transform-origin:75% 82%;animation:mobile-belt-zoom 18s cubic-bezier(.45,0,.55,1) infinite alternate}.hero:after{background:linear-gradient(180deg,#04131eea 0%,#04131ed9 25%,#04131e99 48%,#04131e33 66%,transparent 79%,#06192388 100%)}.hero .scroll-cue{bottom:18px}.hero .mesh{opacity:.55}.hero .hero-actions .text-link{text-align:left}}
@media(max-width:380px){.hero{min-height:1110px;padding-bottom:350px}.hero .arena{background-size:auto 73%;background-position:74% bottom}}
@keyframes mobile-belt-zoom{from{transform:translate3d(0,0,0) scale(1) rotate(-.3deg)}to{transform:translate3d(-1%,.2%,0) scale(1.14) rotate(.3deg)}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important}}
/* A shorter, stronger zoom makes motion visible immediately. */
.hero .arena{animation:visible-hero-zoom 12s ease-in-out infinite alternate;transform-origin:72% 68%}
@keyframes visible-hero-zoom{from{transform:translate3d(0,0,0) scale(1) rotate(-.3deg)}to{transform:translate3d(-1%,.4%,0) scale(1.16) rotate(.3deg)}}
@media(max-width:650px){.hero .arena{animation:visible-mobile-zoom 8s ease-in-out infinite alternate;transform-origin:74% 83%}}
@keyframes visible-mobile-zoom{from{transform:translate3d(0,0,0) scale(1) rotate(-.3deg)}to{transform:translate3d(-1%,.4%,0) scale(1.22) rotate(.3deg)}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important}}