/* Realistic interactive simulations for the three engineering service cards. */
.engineering-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:18px}.engineering-actions .service-contact{margin-top:0!important}.engineering-demo-button{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:9px 15px;border:1px solid var(--brand-blue);border-radius:999px;background:transparent;color:var(--brand-blue);font:600 13px/1.2 'Inter',sans-serif;cursor:pointer;transition:background .18s,color .18s,transform .18s}.engineering-demo-button::before{content:'▸';font-size:12px}.engineering-demo-button:hover{background:var(--brand-blue);color:#fff;transform:translateY(-1px)}.engineering-demo-button:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}
.eng-demo-overlay{display:none;position:fixed;inset:0;z-index:270;align-items:center;justify-content:center;padding:20px;background:rgba(5,14,22,.82);backdrop-filter:blur(6px)}.eng-demo-overlay.open{display:flex}.eng-demo-modal{position:relative;width:min(1040px,100%);max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #304556;border-radius:16px;background:#f4f6f6;box-shadow:0 30px 90px rgba(0,0,0,.48)}.eng-demo-close{position:absolute;z-index:5;top:15px;right:15px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #405a6d;border-radius:50%;background:#172b3a;color:#fff;font-size:23px;cursor:pointer}.eng-demo-close:hover{background:#24465e}.eng-demo-close:focus-visible,.eng-demo-control:focus-visible,.cloud-provider:focus-visible{outline:2px solid #71b9ca;outline-offset:3px}
.eng-demo-heading{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;padding:27px 72px 20px 30px;border-bottom:1px solid #ccd5d8;background:#fff;border-radius:16px 16px 0 0}.eng-demo-number{grid-row:1/span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#e6eff1;color:#245f76;font:700 13px/1 'Inter',sans-serif;letter-spacing:.07em}.eng-demo-heading h3{margin:0;color:#112b3b;font-size:clamp(21px,3vw,29px);line-height:1.15}.eng-demo-heading p{margin:1px 0 0;color:#60727b;font-size:13px;text-align:left!important}.eng-demo-body{padding:24px 28px 26px}.eng-demo-stage{min-height:470px;border:1px solid #233948;border-radius:12px;background:#0b1720;overflow:hidden}.eng-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}.eng-demo-note{margin:0;color:#677982;font-size:11px;text-align:left!important}.eng-demo-controls{display:flex;gap:9px;flex-shrink:0}.eng-demo-control{min-height:40px;padding:9px 14px;border:1px solid #c4d0d4;border-radius:8px;background:#fff;color:#183344;font:600 12px/1.2 'Inter',sans-serif;cursor:pointer}.eng-demo-control.primary{border-color:#1f607d;background:#1f607d;color:#fff}.eng-demo-control:hover{border-color:#2f8496}.eng-demo-control.primary:hover{background:#184d65}
.eng-console{min-height:470px;color:#d7e2e7;font:12px/1.35 'Inter',sans-serif;background:linear-gradient(145deg,#0a1720,#101f2a 58%,#0a1821);position:relative}.eng-console>header{position:static;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 20px;border:0;border-bottom:1px solid #2a3e4b;background:#122531;box-shadow:none}.eng-console-title{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:.02em}.eng-console-title i{width:9px;height:9px;border-radius:50%;background:#36b77b;box-shadow:0 0 0 5px rgba(54,183,123,.12)}.eng-live{padding:5px 8px;border:1px solid #355263;border-radius:5px;color:#7fbaca;font:700 9px/1 'Inter',sans-serif;letter-spacing:.11em}.eng-console-sub{padding:11px 20px;color:#78909d;font-size:10px;border-bottom:1px solid #223744}.eng-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 20px 4px}.eng-metric{padding:11px 13px;border:1px solid #29404e;border-radius:8px;background:#10232e}.eng-metric span,.eng-metric small{display:block;color:#79919e;font-size:9px}.eng-metric strong{display:inline-block;margin:5px 6px 2px 0;color:#e8f3f6;font-size:17px}.eng-metric small{display:inline-block;color:#5fa8b8}
.ha-layout{display:grid;grid-template-columns:1fr 135px 1fr;gap:14px;align-items:center;padding:16px 20px}.ha-system{border:1px solid #2d4655;border-radius:9px;background:#10232e;overflow:hidden}.ha-system-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #2a404e;font-size:9px;font-weight:700;letter-spacing:.08em}.ha-state{padding:4px 6px;border-radius:4px;font-size:8px}.state-primary{color:#f5bc60;background:rgba(231,164,56,.12)}.state-secondary{color:#83a5b2;background:rgba(119,153,166,.12)}.ha-components{display:grid;gap:7px;padding:11px}.ha-components span{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid #273d49;border-radius:6px;color:#9db1ba;font-size:9px}.ha-components i{width:7px;height:7px;border-radius:50%;background:#38b47a}.ha-link{text-align:center;position:relative}.ha-link::before{content:'';position:absolute;left:-14px;right:-14px;top:13px;height:2px;background:#33515e}.ha-link b,.ha-link small{position:relative;z-index:2;display:inline-block;background:#0d1b24}.ha-link b{padding:5px 8px;color:#6ca9b7;font-size:8px;text-transform:uppercase;letter-spacing:.07em}.ha-link small{display:block;margin:28px auto 0;padding:4px;color:#d3a959;font-size:8px}.ha-packet{position:absolute;z-index:3;top:9px;left:0;width:10px;height:10px;border-radius:50%;background:#efb757;box-shadow:0 0 0 4px rgba(239,183,87,.15)}.playing .ha-packet{animation:ha-packet 7.5s infinite ease-in-out}.playing .state-primary{animation:primary-state 7.5s infinite}.playing .state-secondary{animation:secondary-state 7.5s infinite}.eng-events{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 20px 16px}.eng-events>div{display:grid;grid-template-columns:auto 1fr;gap:3px 7px;padding:9px;border:1px solid #283e4a;border-radius:7px;background:#0e202a;opacity:.32}.eng-events time{color:#5f8291;font:8px/1.2 ui-monospace,monospace}.eng-events span{grid-column:1/-1;color:#aabac1;font-size:8px}.eng-events b{grid-row:1;grid-column:2;text-align:right;color:#63ba8f;font-size:7px}.playing .eng-events>div{animation:event-in 7.5s calc(var(--event)*1.25s) infinite both}.eng-result{display:flex;align-items:center;gap:10px;margin:0 20px 18px;padding:11px 13px;border:1px solid #255940;border-radius:8px;background:rgba(33,112,75,.13);opacity:0}.eng-result>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2c9867;color:#fff;font-weight:700}.eng-result b,.eng-result small{display:block}.eng-result b{color:#8bd0a8;font-size:10px}.eng-result small{margin-top:2px;color:#7d9b8b;font-size:8px}.playing .eng-result{animation:result-in 7.5s 5.1s infinite both}
.vm-summary{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}.vm-summary b,.vm-summary small{display:block}.vm-summary b{font-size:9px;letter-spacing:.08em}.vm-summary small{margin-top:3px;color:#728b97;font-size:9px}.vm-legend{display:flex;align-items:center;gap:7px;color:#8da2ac;font-size:9px}.vm-legend i{width:7px;height:7px;border-radius:2px;background:#e8b451}.vm-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;padding:0 20px}.vm-cluster,.vm-terminal{position:relative;min-height:260px;border:1px solid #2b4250;border-radius:9px;background:#10232e}.vm-cluster{padding:13px}.vm-host{margin-bottom:9px;padding:10px;border:1px solid #2b414e;border-radius:7px;background:#0d1e27}.vm-host>div:first-child{display:flex;justify-content:space-between}.vm-host b{font-size:9px}.vm-host span{color:#78919d;font-size:8px}.vm-bar{height:5px;margin:7px 0 9px;border-radius:99px;background:#203640;overflow:hidden}.vm-bar i{display:block;width:var(--before);height:100%;background:linear-gradient(90deg,#4f9eb0,#e3a74a);border-radius:99px}.playing .vm-bar i{animation:host-optimize 7.5s 4.6s infinite both}.vm-boxes{display:flex;gap:5px}.vm-boxes span{width:17px;height:11px;border:1px solid #416171;border-radius:2px;background:#17303d}.moving-vm{position:absolute;z-index:3;left:46%;top:67px;width:74px;padding:6px;border:1px solid #d69e3f;border-radius:5px;background:#3a3020;box-shadow:0 6px 20px rgba(0,0,0,.28);opacity:0}.moving-vm b,.moving-vm span{display:block;text-align:center}.moving-vm b{color:#f4c979;font-size:8px}.moving-vm span{margin-top:2px;color:#aa956d;font-size:6px}.playing .moving-vm{animation:vm-move 7.5s 2.6s infinite both}.vm-terminal{padding:0 12px 10px;background:#071118;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.vm-terminal h4{display:flex;align-items:center;gap:8px;margin:0 -12px 9px;padding:10px 12px;border-bottom:1px solid #263945;color:#93a8b1;font:9px/1 'Inter',sans-serif}.vm-terminal h4 span{color:#58a7b8}.vm-terminal p{display:grid;grid-template-columns:43px 1fr;gap:5px;margin:0;padding:6px 0;color:#8fa1a8;font-size:7px;opacity:.2;text-align:left!important}.vm-terminal time{color:#496977}.playing .vm-terminal p{animation:terminal-line 7.5s calc(var(--line)*.75s) infinite both}.terminal-success{margin-top:7px;padding:7px;border:1px solid #23573f;border-radius:5px;background:#0c271d;color:#6ac58f;font-size:8px;opacity:0}.playing .terminal-success{animation:result-in 7.5s 4.1s infinite both}.vm-result{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 20px 18px;padding:10px;border:1px solid #2b4654;border-radius:8px;background:#10232e;opacity:0}.vm-result div span,.vm-result div b{display:block;text-align:center}.vm-result div span{color:#6f8995;font-size:7px}.vm-result div b{font-size:13px}.vm-result i{color:#5fa8b8}.vm-result p{margin:0 0 0 10px;color:#78bd98;font-size:8px!important;text-align:left!important}.playing .vm-result{animation:result-in 7.5s 4.8s infinite both}
.cloud-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #263b48;color:#78919c;font-size:9px}.cloud-toolbar>div{display:flex;gap:6px}.cloud-provider{padding:6px 9px;border:1px solid #35515f;border-radius:5px;background:#102530;color:#8ca4ae;font:600 8px/1 'Inter',sans-serif;cursor:pointer}.cloud-provider.active{border-color:#55a4b5;background:#183b49;color:#d9f0f4}.cloud-layout{padding:16px 20px}.cloud-diagram{display:grid;grid-template-columns:1fr 155px 1.15fr;gap:13px;align-items:center}.cloud-zone{min-height:180px;padding:12px;border:1px solid #2a4350;border-radius:9px;background:#10232e}.cloud-zone h4{margin:0 0 10px;color:#839aa5;font-size:8px;letter-spacing:.08em}.cloud-zone>div{display:grid;grid-template-columns:31px 1fr;gap:8px;align-items:center;margin-top:8px;padding:8px;border:1px solid #2a414d;border-radius:6px}.cloud-zone>div>span{display:grid;place-items:center;height:25px;border-radius:4px;background:#193541;color:#6db0bf;font-size:7px}.cloud-zone>div>b{font-size:8px}.cloud-zone>small{display:block;margin-top:10px;color:#65a9b8;font-size:7px;text-align:center}.cloud-connection{text-align:center;position:relative}.cloud-connection::before{content:'';position:absolute;left:-13px;right:-13px;top:28px;height:2px;background:#31505d}.cloud-connection i{position:absolute;z-index:2;top:24px;left:0;width:10px;height:10px;border-radius:50%;background:#e6b250;box-shadow:0 0 0 4px rgba(230,178,80,.14)}.playing .cloud-connection i{animation:cloud-packet 7.5s infinite ease-in-out}.cloud-connection b,.cloud-connection small{position:relative;z-index:2;display:block}.cloud-connection b{margin-top:45px;padding:4px;background:#0e1e28;color:#6caaba;font-size:8px}.cloud-connection small{color:#607c88;font-size:7px}.migration-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.migration-steps>div{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 7px;padding:9px;border:1px solid #2b424e;border-radius:7px;background:#0e202a;opacity:.28}.migration-steps span{grid-row:1/span 2;display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#173540;color:#6eaab7;font-size:7px}.migration-steps b{font-size:8px}.migration-steps small{color:#5e7985;font-size:7px}.migration-steps i{position:absolute;left:0;bottom:0;height:2px;width:0;background:#49af79}.playing .migration-steps>div{animation:event-in 7.5s calc(var(--step)*1.05s) infinite both}.playing .migration-steps i{animation:step-progress 7.5s calc(var(--step)*1.05s) infinite both}.cloud-result{margin:14px 0 0}
@keyframes ha-packet{0%,15%{left:0}62%,100%{left:calc(100% - 10px)}}@keyframes primary-state{0%,40%{color:#f5bc60;background:rgba(231,164,56,.12)}55%,100%{color:#7cb395;background:rgba(54,183,123,.12)}}@keyframes secondary-state{0%,40%{color:#83a5b2;background:rgba(119,153,166,.12)}55%,100%{color:#7bd2a0;background:rgba(54,183,123,.15)}}@keyframes event-in{0%,10%{opacity:.28;transform:translateY(5px)}19%,100%{opacity:1;transform:none}}@keyframes result-in{0%,8%{opacity:0;transform:translateY(6px)}16%,100%{opacity:1;transform:none}}@keyframes host-optimize{0%,12%{width:var(--before)}30%,100%{width:var(--after);background:#4aaf7b}}@keyframes vm-move{0%,8%{opacity:0;transform:translate(-80px,0)}18%{opacity:1}55%{opacity:1;transform:translate(75px,95px)}66%,100%{opacity:0;transform:translate(75px,95px)}}@keyframes terminal-line{0%,9%{opacity:.2}17%,100%{opacity:1}}@keyframes cloud-packet{0%,15%{left:0}64%,100%{left:calc(100% - 10px)}}@keyframes step-progress{0%,8%{width:0}20%,100%{width:100%}}
@media(max-width:760px){.eng-demo-overlay{padding:9px}.eng-demo-modal{max-height:calc(100dvh - 18px);border-radius:12px}.eng-demo-heading{padding:23px 58px 17px 18px}.eng-demo-body{padding:15px}.eng-demo-stage,.eng-console{min-height:590px}.ha-layout{grid-template-columns:1fr 75px 1fr;padding:14px 12px}.eng-metrics{padding:14px 12px 4px}.eng-events{grid-template-columns:1fr 1fr;padding:4px 12px 14px}.eng-result{margin-left:12px;margin-right:12px}.vm-layout{grid-template-columns:1fr;padding:0 12px}.vm-cluster,.vm-terminal{min-height:230px}.vm-result{margin-left:12px;margin-right:12px}.cloud-layout{padding:13px 12px}.cloud-diagram{grid-template-columns:1fr 74px 1fr}.cloud-zone{padding:8px}.migration-steps{grid-template-columns:1fr 1fr}.eng-demo-footer{align-items:flex-start;flex-direction:column}.eng-demo-controls{width:100%}.eng-demo-control{flex:1}.eng-demo-note{order:2}}
@media(max-width:480px){.engineering-actions{align-items:flex-start;flex-direction:column}.eng-demo-heading p{display:none}.eng-demo-heading h3{font-size:20px}.eng-demo-stage,.eng-console{min-height:690px}.eng-metrics{grid-template-columns:1fr 1fr}.eng-metric:last-child{grid-column:1/-1}.ha-layout{grid-template-columns:1fr}.ha-link{min-height:52px}.ha-link::before{left:50%;right:auto;top:-14px;bottom:-12px;width:2px;height:auto}.ha-packet{top:-8px;left:calc(50% - 5px)}.playing .ha-packet{animation:ha-packet-mobile 7.5s infinite ease-in-out}.ha-link small{margin-top:21px}.vm-summary{padding:12px}.cloud-toolbar{align-items:flex-start;gap:8px;flex-direction:column;padding:11px 12px}.cloud-diagram{grid-template-columns:1fr}.cloud-connection{min-height:57px}.cloud-connection::before{left:50%;right:auto;top:-13px;bottom:-11px;width:2px;height:auto}.cloud-connection i{top:-7px;left:calc(50% - 5px)}.playing .cloud-connection i{animation:cloud-packet-mobile 7.5s infinite ease-in-out}.cloud-connection b{margin-top:21px}.eng-demo-controls{flex-direction:column}.eng-demo-control{width:100%}}@keyframes ha-packet-mobile{0%,15%{top:-8px}62%,100%{top:48px}}@keyframes cloud-packet-mobile{0%,15%{top:-7px}64%,100%{top:51px}}
@media(prefers-reduced-motion:reduce){.engineering-demo-button{transition:none}.eng-demo-stage *{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important}.eng-events>div,.eng-result,.vm-terminal p,.terminal-success,.vm-result,.migration-steps>div{opacity:1!important;transform:none!important}.moving-vm{display:none}.vm-bar i{width:var(--after)!important}.migration-steps i{width:100%!important}}