/* A desktop computer, composed at its resting scale before scroll begins. */
.computer-scene{position:absolute;left:74%;top:51%;width:min(46vw,680px);aspect-ratio:1.32;transform:translate3d(-50%,-50%,0);pointer-events:none;will-change:transform,opacity;contain:layout style}
.computer-aura{position:absolute;inset:-10%;background:radial-gradient(ellipse,#2673cf22,transparent 67%);pointer-events:none}
.computer-monitor{position:absolute;inset:0 0 17%;padding:10px 10px 0;background:linear-gradient(135deg,#465268,#182333 15%,#101a29 70%,#354356);border:1px solid #647b9d88;border-radius:13px;box-shadow:0 30px 70px #0007;overflow:hidden;transform:perspective(1400px) rotateY(-10deg);backface-visibility:hidden}
.monitor-camera{position:absolute;top:4px;left:50%;width:3px;height:3px;background:#20334c;border:1px solid #58718b66;border-radius:50%}
.computer-screen{position:relative;height:calc(100% - 22px);background:#071121;border:1px solid #020912;border-radius:5px;overflow:hidden}
.screen-toolbar{height:34px;border-bottom:1px solid #6085b225;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#122039;color:#83b5f4}
.screen-brand{display:flex;gap:10px;align-items:center;font-size:20px;letter-spacing:-3px}
.screen-brand b{font-size:7px;letter-spacing:1px;font-weight:400;color:#9ab5d6}
.screen-dots{color:#446187;font-size:5px;letter-spacing:3px}
.screen-workspace{height:calc(100% - 55px);display:grid;grid-template-columns:36px 1fr}
.screen-rail{border-right:1px solid #6085b21c;display:flex;align-items:center;flex-direction:column;gap:21px;padding-top:18px;color:#52739d;font-size:13px}
.screen-rail span:first-child{color:#95c6ff}
.screen-editor{padding:0 18px;overflow:hidden}
.editor-tabs{height:35px;display:flex;align-items:center;gap:22px;font-size:6px;color:#59789e;border-bottom:1px solid #739ac61a;margin-bottom:12px}
.editor-tabs span:first-child{color:#98bae3}
.code-line{display:flex;gap:14px;font:8px/1.9 Consolas,'Courier New',monospace;color:#9aaec9;white-space:nowrap}
.code-line i{width:11px;font-style:normal;color:#3e5574;font-size:6px}
.code-line em{font-style:normal;color:#8d9dff}.code-line b{font-weight:400;color:#67c5e7}
.editor-preview{display:flex;align-items:center;justify-content:space-between;border:1px solid #548bd22e;background:linear-gradient(125deg,#11284a,#0b172a);padding:17px 20px;margin-top:18px;border-radius:5px;position:relative;overflow:hidden}
.editor-preview small{font-size:5px;letter-spacing:1.3px;color:#6c9bd4;display:block;margin-bottom:10px}
.editor-preview strong{font-family:Manrope,Arial,sans-serif;font-size:23px;font-weight:500;letter-spacing:-1px;line-height:1.2;color:#d9e9ff;position:relative;z-index:1}
.preview-orbit{width:90px;height:90px;position:relative;flex-shrink:0}
.preview-orbit>span{position:absolute;inset:10px;border:1px solid #649eff88;border-radius:10px;transform:rotateX(55deg) rotateZ(-35deg);background:linear-gradient(130deg,#4389ef44,#134d7c11)}
.preview-orbit>span:nth-child(2){translate:0 -15px;opacity:.7}.preview-orbit>span:nth-child(3){translate:0 15px;opacity:.4}
.screen-status{height:21px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#10223a;border-top:1px solid #5689bd22;font-size:4px;letter-spacing:.7px;color:#6b99cf}
.monitor-chin{height:22px;display:flex;align-items:center;justify-content:center;position:relative;font-size:4px;letter-spacing:2px;color:#687e9a}
.monitor-chin i{position:absolute;right:12px;width:3px;height:3px;background:#75b8f5;border-radius:50%;box-shadow:0 0 5px #5fafff88}
.computer-stand{position:absolute;top:82%;left:43%;width:18%;height:13%;background:linear-gradient(90deg,#152033,#64738a 45%,#253146);clip-path:polygon(26% 0,77% 0,100% 100%,0 100%);z-index:-1}
.computer-foot{position:absolute;bottom:4%;left:31%;width:42%;height:4%;background:linear-gradient(#5b6d88,#243349);clip-path:polygon(24% 0,76% 0,100% 80%,99% 100%,1% 100%,0 80%)}
.computer-ground{position:absolute;bottom:1%;left:15%;width:75%;height:8%;background:radial-gradient(ellipse,#02050b99,transparent 70%);z-index:-2}
.computer-caption{position:absolute;top:103%;left:3%;right:0;display:flex;justify-content:space-between;color:#506d93;font-size:5px;letter-spacing:1px}
.cinema-title{width:49%}.cinema-title h1{font-size:clamp(43px,5vw,79px)}
.computer-scene,.assembly-board,.assembly-satellite{backface-visibility:hidden}
/* Predictable hover states: no translating, scaling, sweeping or tilting. */
.button,.button.dark,.nav-cta,.contact-orb{transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease;color:#edf5ff}
.button:before,.nav-cta:before,.service-row:after{display:none}
.button:hover,.button.dark:hover,.button:active,.button.dark:active,.nav-cta:hover,.contact-orb:hover{transform:none;scale:none}
.button.dark,.button.dark:hover{box-shadow:0 4px 18px #1a55a51c;background:#3478df}
.button.dark:hover{background:#4186ed;border-color:#95c4ff66}
.nav-cta:hover{background:#26477226;border-color:#7098c366}
.contact-orb,.contact-orb:hover{background:#2d65c0;box-shadow:none;transition:background-color .4s ease,border-color .4s ease}
.contact-orb:hover{background:#3976d1;border-color:#9ac3f0}
.button>span,.nav-cta>span,.text-link>span,.contact-orb>span,.row-arrow,.demo-controls button b{transform:none!important;transition:color .4s ease,opacity .4s ease}
.button:hover>span,.nav-cta:hover>span,.text-link:hover>span,.contact-orb:hover>span,.service-row:hover .row-arrow{transform:none}
.service-row:before{background:#3e77bd0c;transition:opacity .4s ease}
.service-row h3,.service-row .service-tags span{transition:color .4s ease,border-color .4s ease}
.service-row:hover h3{color:#c3dcff}.service-row:hover .row-arrow{color:#c3dcff}
.service-row:hover .service-tags span{color:#9eb8da;border-color:#588bce40}
.service-row.reveal,.motion-ready .service-row.reveal{transform:none;filter:none;transition:opacity .7s ease}
.service-row.reveal.visible{transform:none}
.demo-panel{transform:none!important;transition:none}
.demo-controls button{transition:color .4s ease,background-color .4s ease}
.demo-controls button:hover{color:#bad3f4}
.demo-controls button b{opacity:.5}.demo-controls button[aria-selected=true] b{opacity:1}
#demo-content{animation:content-dissolve .35s ease}
@keyframes content-dissolve{from{opacity:.25}to{opacity:1}}
.faq summary span{transition:transform .4s ease}
.header nav a,.text-link{transition:color .4s ease}
@media(hover:none){.service-row:hover:before{opacity:0}.service-row:hover h3{color:inherit}.button.dark:hover{background:#3478df}.service-row:hover .service-tags span{color:#8ba7cf;border-color:#588bce27}}
@media(min-width:801px) and (max-width:1100px){.computer-scene{width:46vw;left:75%}.screen-toolbar{height:29px}.screen-workspace{height:calc(100% - 47px);grid-template-columns:29px 1fr}.screen-editor{padding:0 12px}.editor-tabs{height:28px;margin-bottom:8px}.code-line{font-size:6px}.screen-rail{gap:16px;padding-top:13px;font-size:10px}.editor-preview{margin-top:12px;padding:12px 15px}.editor-preview strong{font-size:18px}.preview-orbit{width:65px;height:65px}.screen-status{height:18px;font-size:3px}.computer-screen{height:calc(100% - 18px)}.monitor-chin{height:18px}}
@media(max-width:800px){.computer-scene{top:72%;left:52%;width:min(72vw,420px);aspect-ratio:1.32}.cinema-title{width:86%}.cinema-title h1{font-size:clamp(39px,7.8vw,65px)}.screen-toolbar{height:25px;padding:0 9px}.screen-brand{font-size:14px;gap:8px}.screen-brand b{font-size:5px}.screen-workspace{height:calc(100% - 40px);grid-template-columns:25px 1fr}.screen-rail{gap:14px;padding-top:12px;font-size:9px}.screen-editor{padding:0 10px}.editor-tabs{height:25px;margin-bottom:7px;font-size:4px;gap:13px}.code-line{font-size:5px;gap:9px}.code-line i{font-size:4px;width:7px}.editor-preview{margin-top:10px;padding:10px 12px}.editor-preview strong{font-size:16px;letter-spacing:-.6px}.editor-preview small{font-size:3px;letter-spacing:.7px;margin-bottom:5px}.preview-orbit{width:55px;height:55px}.preview-orbit>span{inset:5px;border-radius:5px}.preview-orbit>span:nth-child(2){translate:0 -10px}.preview-orbit>span:nth-child(3){translate:0 10px}.screen-status{height:15px;font-size:3px;padding:0 7px;letter-spacing:.3px}.computer-monitor{padding:7px 7px 0;border-radius:9px}.monitor-camera{width:2px;height:2px;top:3px}.computer-screen{height:calc(100% - 17px)}.monitor-chin{height:17px;font-size:3px}.computer-caption{font-size:4px;letter-spacing:.7px}.cinema-title{top:31%}}
@media(max-width:480px){.computer-scene{width:84vw;top:70%;left:51%}.cinema-title{top:30%}.cinema-title h1{font-size:clamp(34px,9.7vw,45px)}.editor-preview strong{font-size:14px}.editor-preview{margin-top:8px;padding:8px 10px}.code-line{line-height:1.8}.screen-rail{gap:12px}.computer-caption{font-size:3px}.computer-monitor{box-shadow:0 16px 35px #0005}}
@media(prefers-reduced-motion:reduce){.computer-scene{opacity:1!important;transform:translate3d(-50%,-50%,0)!important;left:58%!important;top:72%!important}.computer-monitor{transform:none}.button,.nav-cta,.service-row:before,.service-row h3,.contact-orb,.text-link{transition:none!important}.cinema-title{top:30%}#demo-content{animation:none}}
.cinema{height:480svh}.cinema-sticky{height:100svh}@media(max-width:800px){.cinema{height:460svh}}@media(prefers-reduced-motion:reduce){.cinema{height:auto}.cinema-sticky{height:850px}}
@media(max-width:480px){.editor-tabs{height:18px;margin-bottom:4px}.code-line{font-size:4.5px;line-height:1.7}.editor-preview{margin-top:7px;padding:5px 10px}.editor-preview strong{font-size:13px}.preview-orbit{width:42px;height:42px}}@media(max-width:360px){.editor-tabs{height:16px}.code-line{font-size:4px;line-height:1.4}.code-line:nth-of-type(4),.code-line:nth-of-type(5){display:none}.preview-orbit{width:38px;height:38px}.editor-preview strong{font-size:12px}}
@media(max-width:360px){.nav-cta{gap:12px;padding:9px 12px;font-size:10px;white-space:nowrap}.cinema-title{top:33%}.editor-preview{padding:4px 8px}.preview-orbit{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce) and (min-width:801px){.cinema-title{width:49%;top:48%}.computer-scene{left:74%!important;top:51%!important}}
/* Service rows keep their colour and geometry; only the fine rule and arrow respond. */
.service-list .service-row,.service-list .service-row:hover{grid-template-columns:42px minmax(0,1fr) minmax(180px,270px) 48px;gap:28px;padding:34px 28px;background:transparent;border-color:#899ab21e}
.service-list .service-row>div{min-width:0}
.service-list .service-number{font-size:11px;font-variant-numeric:tabular-nums;color:#778aa6;margin-top:7px}
.service-list .service-row h3,.service-list .service-row:is(:hover,:focus-visible) h3{color:#e9f0ff;line-height:1.3}
.service-list .service-row p{font-size:12px;line-height:1.85;max-width:500px;color:#8f9db5}
.service-list .service-tags{gap:8px;justify-content:flex-end;padding-left:12px}
.service-list .service-tags span,.service-list .service-row:is(:hover,:focus-visible) .service-tags span{color:#8fa2bd;border-color:#7893bb28;background:#ffffff02;line-height:1.5}
.service-list .service-row:before{display:none}
.service-list .service-row:after{content:'';display:block;position:absolute;left:28px;right:28px;bottom:0;width:auto;height:1px;background:linear-gradient(90deg,#8ba9d18c,#789cc442 65%,transparent);opacity:0;transform:scaleX(.75);transform-origin:left;pointer-events:none;transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.service-list .service-row .row-arrow,.service-list .service-row:is(:hover,:focus-visible) .row-arrow{width:44px;height:44px;justify-self:end;display:grid;place-items:center;border:1px solid #869bb329;border-radius:8px;background:transparent;color:#bdcce0;transition:border-color .6s ease,background-color .6s ease}
.service-list .row-arrow svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:translate(0,0);transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.service-list .service-row:focus-visible:after{opacity:1;transform:scaleX(1)}
.service-list .service-row:focus-visible .row-arrow{border-color:#a0b6d268;background:#a6bdd608}
.service-list .service-row:focus-visible .row-arrow svg{transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){.service-list .service-row:hover:after{opacity:1;transform:scaleX(1)}.service-list .service-row:hover .row-arrow{border-color:#a0b6d268;background:#a6bdd608}.service-list .service-row:hover .row-arrow svg{transform:translate(3px,-3px)}}
@media(max-width:1100px){.service-list .service-row,.service-list .service-row:hover{grid-template-columns:32px minmax(0,1fr) 200px 44px;gap:24px;padding:30px 24px}.service-list .service-row:after{left:24px;right:24px}.service-list .service-tags{padding-left:0}}
@media(max-width:800px){.service-list .service-row,.service-list .service-row:hover{grid-template-columns:24px minmax(0,1fr) 44px;gap:15px 18px;padding:27px 18px}.service-list .service-row:after{left:18px;right:18px}.service-list .service-tags{justify-content:flex-start;gap:8px}.service-list .service-number{font-size:10px;margin-top:6px}.service-list .service-row p{font-size:11px}.service-list .service-row h3{font-size:20px}.service-list .service-row .row-arrow{grid-column:3;grid-row:1/3}}
@media(max-width:480px){.service-list .service-row,.service-list .service-row:hover{grid-template-columns:20px minmax(0,1fr) 40px;gap:13px 12px;padding:25px 14px}.service-list .service-row:after{left:14px;right:14px}.service-list .service-row h3{font-size:17px;letter-spacing:-.5px}.service-list .service-row p{font-size:11px}.service-list .service-row .row-arrow{width:38px;height:38px;border-radius:7px}.service-list .row-arrow svg{width:19px;height:19px}.service-list .service-tags span{font-size:7px;padding:5px 8px}.service-list .service-number{font-size:9px}}
@media(prefers-reduced-motion:reduce){.service-list .service-row:after,.service-list .row-arrow,.service-list .row-arrow svg{transition:none!important}.service-list .service-row:is(:hover,:focus-visible) .row-arrow svg{transform:none}}
@media(max-width:360px){.editor-preview{margin-top:4px;padding:3px 8px}.editor-preview small{display:none}.editor-preview strong{font-size:10px}.preview-orbit{width:24px;height:24px}}