/* Use the approved design-hero.css layout, typography, CTAs and breakpoints.
   Only the artwork and its decorative light layers belong to the WWW variant. */
.we-page .wh-hero .dh-shell{max-width:1720px;width:calc(100% - clamp(40px,9.5vw,180px))}
.wh-hero .dh-eyebrow{letter-spacing:.17em;margin:0 0 20px}
.wh-atmosphere,.wh-beam,.wh-floor-light{position:absolute;pointer-events:none}
.wh-atmosphere{inset:8% -10% -15% 36%;z-index:-3;background:radial-gradient(ellipse at 76% 61%,#ff700034,transparent 62%);animation:wh-atmosphere 11s ease-in-out infinite}
.wh-beam{z-index:-2;top:-20%;right:12%;width:28%;height:130%;background:linear-gradient(103deg,transparent 38%,#ff751600 43%,#ff9a4936 50%,#ff751600 57%,transparent 63%);filter:blur(16px);transform:rotate(12deg);animation:wh-light-pass 12s ease-in-out infinite}
.wh-beam-two{right:-10%;width:35%;opacity:.38;animation-duration:17s;animation-delay:-6s}
.wh-floor-light{left:35%;right:-12%;bottom:-6%;height:23%;z-index:-1;background:radial-gradient(ellipse at 70% 72%,#ff6b003d,transparent 64%);filter:blur(12px);animation:wh-floor 9s ease-in-out infinite}
.wh-hero .dh-visual{aspect-ratio:1484/1060}
.wh-device-enter{position:absolute;inset:0;display:grid;place-items:center;z-index:2;animation:wh-device-in 1.15s .12s cubic-bezier(.2,.7,.2,1) both}
.wh-device-drift{width:100%;animation:wh-device-drift 10s 1.3s ease-in-out infinite}
.wh-devices{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(0 20px 20px #0004)}
.wh-ground{position:absolute;left:14%;right:11%;bottom:8%;height:8%;background:#0007;filter:blur(20px);border-radius:50%;z-index:0;animation:wh-shadow 10s 1.3s ease-in-out infinite}
.wh-light-trail{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;opacity:.7}
.wh-trail-point{offset-path:path('M10 435C145 500 735 518 882 322');animation:wh-trail 11s linear infinite;filter:drop-shadow(0 0 5px #ff8b3d)}
.wh-visual .wh-caption{position:absolute;bottom:-5px;left:0;right:0;z-index:3;display:flex;justify-content:center;align-items:center;gap:12px;font-size:10px;letter-spacing:.02em;color:#b5bfb8;line-height:1.5;margin:0;padding:0}
.wh-caption>span{width:23px;height:1px;background:#ff6900;opacity:.8}
.wh-hero .dh-motion{font-size:10px}
.wh-hero.wh-paused *,.wh-hero.wh-paused ::before,.wh-hero.wh-paused ::after,.wh-hero.wh-idle *,.wh-hero.wh-idle ::before,.wh-hero.wh-idle ::after{animation-play-state:paused!important}
@keyframes wh-device-in{from{opacity:0;transform:translate3d(25px,18px,0) scale(.975)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes wh-device-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3px,-4px,0)}}
@keyframes wh-atmosphere{0%,100%{opacity:.5;transform:translateX(-2%)}50%{opacity:1;transform:translateX(3%)}}
@keyframes wh-light-pass{0%,100%{opacity:.15;transform:translateX(20%) rotate(12deg)}50%{opacity:.85;transform:translateX(-32%) rotate(12deg)}}
@keyframes wh-floor{0%,100%{opacity:.45;transform:scaleX(.96)}50%{opacity:1;transform:scaleX(1.05)}}
@keyframes wh-shadow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:.65;transform:scale(.98)}}
@keyframes wh-trail{0%{offset-distance:0%;opacity:0}10%,85%{opacity:.85}100%{offset-distance:100%;opacity:0}}
@media(min-width:1500px),(min-width:901px) and (max-width:1200px){.wh-hero .dh-lead{min-height:4.44em}}
@media(min-width:901px) and (max-width:1200px){.wh-hero .dh-subtitle{max-width:none}}
@media(max-width:900px){.wh-atmosphere{inset:35% -20% -10% 0}.wh-beam{top:35%;height:70%;width:55%}.wh-floor-light{left:-10%;height:15%;bottom:0}}
@media(max-width:767px){.we-page .wh-hero .dh-shell{width:calc(100% - 40px)}}
@media(max-width:600px){.wh-hero .dh-subtitle{text-wrap:balance}.wh-hero .dh-actions .button-primary{gap:9px}.wh-visual .wh-caption{display:none}.wh-hero .dh-eyebrow{letter-spacing:.12em;margin-bottom:16px}.wh-visual .wh-caption{font-size:9px;bottom:10px}.wh-beam{filter:blur(12px)}.wh-devices{filter:drop-shadow(0 12px 12px #0004)}.wh-ground{filter:blur(12px)}}
@media(max-width:360px){.we-page .wh-hero .dh-shell{width:calc(100% - 32px)}}
@media(prefers-reduced-motion:reduce){.wh-hero *,.wh-hero ::before,.wh-hero ::after{animation:none!important;transition:none!important}.wh-hero .dh-motion{display:none!important}.wh-beam{opacity:.25}.wh-atmosphere{opacity:.6}.wh-trail-point{display:none}}