
.device-scene{display:grid;grid-template-columns:4.3fr 3.5fr 2fr 1.2fr;gap:20px;align-items:end;margin:56px auto 42px;position:relative;max-width:1320px;text-align:left}.device{margin:0;min-width:0;position:relative;padding-bottom:45px}.device-frame{padding:10px;border:2px solid #788079;border-radius:16px;background:linear-gradient(135deg,#404744,#111815 35%,#343b37);box-shadow:inset 0 0 0 3px #131916,0 10px 20px #0004;position:relative}.device-screen{height:300px;background:#1c2c25;position:relative;overflow:hidden;isolation:isolate;border-radius:4px;border:1px solid #080e0b}.device-laptop .device-frame:after{content:'';position:absolute;bottom:-10px;height:10px;left:-9px;right:-9px;background:linear-gradient(#899089,#323b35);border-radius:0 0 50% 50%}.device-desktop .device-frame:after{content:'';position:absolute;bottom:-22px;height:20px;width:30%;left:35%;background:linear-gradient(90deg,#242d27,#626b63,#202922);clip-path:polygon(30% 0,70% 0,80% 80%,100% 85%,100% 100%,0 100%,0 85%,20% 80%)}.device-phone .device-frame{border-radius:23px;padding:8px}.device-phone .device-screen{border-radius:15px}.device-phone .device-screen:after{content:'';position:absolute;top:0;left:25%;width:50%;height:9px;border-radius:0 0 8px 8px;background:#0c130f}.device figcaption{position:absolute;bottom:0;width:100%;text-align:center;font:500 14px Barlow,sans-serif;color:#d2d7ce}.device-interface{padding:18px;position:relative;height:100%;box-sizing:border-box}.device-brand{font:bold 27px Inter,sans-serif;color:#ff6947;margin-bottom:17px}.device-brand span{font:600 8px Barlow,sans-serif;color:#b6c3b7;float:right;padding-top:10px}.device-interface strong{font:900 italic 38px/1 'ENG1N Condensed',sans-serif;text-transform:uppercase;color:#eeede6;position:relative;z-index:1}.device-lines{width:55%;height:24px;margin-top:14px;background:repeating-linear-gradient(0deg,#aeb9ab66 0 3px,transparent 3px 9px)}.device-cta{display:block;width:50px;height:16px;background:#ff6947;border-radius:2px;margin-top:12px}.device-art{position:absolute;right:0;top:55px;width:38%;height:125px;background:#ff6947;color:#eeede6;font:900 85px Inter;text-align:center;transform:skewY(-8deg)}.device-products{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.device-products i{display:grid;place-items:center;height:70px;background:#d6d6bd;color:#ff6947;font:bold 22px Inter;border-radius:5px;box-shadow:inset 0 -12px #b5bba7}.device-products i:nth-child(2){background:#ff6947;color:#eeede6}.device-interface b{font:600 13px Inter;color:#eeede6}.device-tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.device-tiles i{display:grid;place-items:center;background:#34493a;color:#ff6947;height:43px;font:24px Arial;border-radius:4px}.device-ring{width:48px;height:48px;border:8px solid #34493a;border-top-color:#ff6947;border-right-color:#ff6947;border-radius:50%;margin:10px auto}.device-road{position:absolute;bottom:0;height:29px;left:0;right:0;background:#ff6947;border-top:2px solid #ffa681}.device-road:after{content:'';position:absolute;bottom:9px;height:2px;left:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 20px,#fff1d9 20px 40px,transparent 40px 60px)}.device-car{position:absolute!important;width:250px!important;max-width:none!important;height:auto!important;bottom:0;left:0;z-index:3;will-change:transform}.device-wheel{transform-box:fill-box;transform-origin:center}.ex-hero.ex-wrap{width:min(1320px,calc(100% - 64px))}.device-scene svg{overflow:visible}
@media(max-width:760px){.device-scene{gap:8px;margin-top:35px}.device-frame{padding:4px;border-radius:8px}.device-screen{height:170px}.device-phone .device-frame{padding:3px;border-radius:10px}.device-interface{padding:8px}.device-brand{font-size:16px;margin-bottom:10px}.device-interface strong{font-size:22px}.device-art{top:35px;height:65px;font-size:40px}.device-products{gap:3px}.device-products i{height:35px;font-size:12px}.device-interface b{font-size:8px}.device-tiles{gap:3px}.device-tiles i{height:24px;font-size:15px}.device-ring{width:20px;height:20px;border-width:4px}.device-brand span{display:none}.device figcaption{font-size:10px}.device-phone .device-screen{border-radius:5px}.device-road{height:20px}.device-car{width:130px!important}.ex-hero.ex-wrap{width:calc(100% - 28px)}}

.device{padding-bottom:24px}.device-mobile-browser{font:8px Barlow,sans-serif;color:#aab8ad;padding:5px 0;border-block:1px solid #ffffff20}.device-mobile-cover{margin-top:12px;padding:8px;background:#ff6947;color:#eeede6;font:bold 30px Inter,sans-serif;text-align:center}@media(max-width:760px){.device-mobile-browser{font-size:5px}.device-mobile-cover{font-size:15px;padding:4px;margin-top:6px}}

/* Soft contact shadows retain the original device silhouettes. */
.device-tablet .device-frame,.device-phone .device-frame{box-shadow:inset 0 0 0 3px #131916,0 3px 3px #070d0980,0 10px 10px -7px #070d09b3}
.device-laptop .device-frame:after{box-shadow:0 3px 4px #070d0970}

/* A centred responsive family: small, medium, largest, medium, small. */
.device-scene{grid-template-columns:1fr 2.25fr 4fr 2.25fr 1fr;gap:16px;align-items:end}




.device-phone .device-interface{padding:10px}
.device-laptop .device-interface{padding:14px}
.device-laptop .device-brand span{display:none}
.device-phone .device-brand{margin-bottom:10px}
.device-products{gap:5px}
.device-products i{height:58px;font-size:18px}
@media(max-width:760px){
 .device-scene{gap:5px;grid-template-columns:1fr 2fr 3.6fr 2fr 1fr}
 
 
 
 
 .device-phone .device-interface,.device-laptop .device-interface{padding:5px}
 .device-products i{height:30px;font-size:10px}
 .device-phone .device-mobile-browser{display:none}
}

/* Device feet share one baseline; the journey rises inside the displays. */
.device{padding-bottom:0}.device-desktop{padding-bottom:22px}.device-laptop{padding-bottom:10px}
.device-engine-icon{display:inline-block;width:30px;height:30px;vertical-align:middle}
.device-art .device-engine-icon{width:80px;height:80px;margin-top:20px}
.device-mobile-cover .device-engine-icon{width:30px;height:30px}
.device-road{inset:0;height:100%;border:0;background:none;pointer-events:none;z-index:2}
.device-road:after{display:none}.device-road svg{width:100%;height:100%;overflow:hidden}
.device-car{transform-origin:50% 84.5%}
@media(max-width:760px){.device-engine-icon{width:18px;height:18px}.device-art .device-engine-icon{width:35px;height:35px;margin-top:15px}.device-mobile-cover .device-engine-icon{width:16px;height:16px}}

/* Physical display proportions, maintained as the composition scales. */
.device-scene{grid-template-columns:1fr 2.6fr 4fr 2.6fr 1fr}
.device-desktop .device-screen{height:auto;aspect-ratio:16/9}
.device-laptop .device-screen{height:auto;aspect-ratio:16/10}
.device-tablet{width:72%;justify-self:center}
.device-tablet .device-screen{height:auto;aspect-ratio:3/4}
.device-phone .device-screen{height:auto;aspect-ratio:9/19.5}
.device-screen{container-type:inline-size}
.device-interface{position:absolute;inset:0;padding:4cqw}
.device-brand{margin-bottom:3cqw;line-height:1}
.device-interface strong{font-size:8cqw}
.device-lines{height:5cqw;margin-top:3cqw}
.device-art{top:17%;height:42%;display:grid;place-items:center}
.device-art .device-engine-icon{width:55%;height:auto;margin:0}
.device-products i{height:17cqw;font-size:7cqw}
.device-tiles{gap:3cqw;margin-top:6cqw}
.device-tiles i{height:22cqw;font-size:11cqw}
.device-interface b{font-size:6cqw}
@media(max-width:760px){.device-scene{gap:5px}.device-desktop{padding-bottom:12px}.device-desktop .device-frame:after{bottom:-12px;height:10px}.device-laptop{padding-bottom:6px}.device-laptop .device-frame:after{bottom:-6px;height:6px}.device-engine-icon{width:16cqw;height:16cqw}.device-phone .device-interface,.device-laptop .device-interface{padding:4cqw}.device-mobile-cover{margin-top:3px;padding:2px}.device-mobile-cover .device-engine-icon{width:60%;height:auto}}
/* Layer the responsive devices as one group, preserving each display ratio. */
.device-scene{display:block;width:100%;height:auto;aspect-ratio:1320/440;margin-top:56px;isolation:isolate}
.device-scene .device{position:absolute;bottom:0;margin:0}
.device-scene .device-desktop{width:52%;left:24%;z-index:1}
.device-scene .device-laptop{width:34%;left:3%;z-index:3}
.device-scene .device-tablet{width:17%;right:9%;z-index:3}
.device-scene .device-phone{width:8.5%;left:0;z-index:4}
.device-scene .device-phone:last-child{left:auto;right:0}
.device-scene .device-frame{box-shadow:inset 0 0 0 3px #131916,0 5px 10px #0007,-6px 0 16px #0003}
@media(max-width:760px){.device-scene{aspect-ratio:1320/470;margin-top:35px}.device-scene .device-frame{padding:3px;border-width:1px}.device-scene .device-phone .device-frame{padding:2px}.device-scene .device-desktop{padding-bottom:12px}}
