.live-demo{padding:145px max(38px,calc((100vw - 1244px)/2));background:linear-gradient(145deg,#081d2e,#0b2940 54%,#071a2c);position:relative;overflow:hidden}.demo-heading{display:flex;align-items:end;justify-content:space-between;gap:44px;margin-bottom:54px}.demo-heading h2{margin:16px 0 0;font-family:var(--display);font-size:clamp(43px,4.9vw,66px);line-height:1.14;letter-spacing:-3px;font-weight:530}.demo-heading h2 em{font-style:normal;background:linear-gradient(105deg,#e5fffd,#5fe1d6 42%,#00b0f0);background-clip:text;-webkit-background-clip:text;color:transparent}.demo-heading>p{max-width:390px;margin:0 0 8px;color:#b8cdd6;font-size:16px;line-height:1.88}.demo-stage{position:relative;min-height:650px;overflow:hidden;border:1px solid #83e8eb52;border-radius:30px;background:#061829;box-shadow:0 35px 80px #0000005c}.demo-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.demo-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#061827e8 0,#0618279d 34%,#06182710 66%,#0618273a),linear-gradient(0deg,#061827b8,transparent 50%)}.demo-edge,.demo-cloud,.demo-app{position:absolute;z-index:2;border:1px solid #b8f7f54a;background:#09263bdc;box-shadow:inset 0 1px #e0fffd1e,0 18px 45px #0000004d;backdrop-filter:blur(18px)}.demo-edge{left:36px;bottom:42px;width:350px;padding:21px;border-radius:19px}.demo-card-head,.app-bar{display:flex;align-items:center;justify-content:space-between}.demo-card-head span{font-size:16px;font-weight:700}.demo-card-head i,.app-bar i{padding:6px 9px;border-radius:999px;background:#59d4bd23;color:#8df1cd;font-size:11px;font-style:normal}.demo-edge>p{margin:7px 0 18px;color:#9bb7c3;font-size:12px}.live-measures{display:grid;grid-template-columns:1fr 1fr;gap:11px}.live-measures>div{padding:12px;border:1px solid #bffdf318;border-radius:13px;background:#ffffff08}.live-measures span{display:block;color:#b0c9d2;font-size:12px}.live-measures strong{display:block;margin:3px 0 8px;font-size:29px;letter-spacing:-1px}.live-measures strong small{margin-left:3px;color:#8baab6;font-size:11px;font-weight:500;letter-spacing:0}.mini-wave{display:block;height:12px;background:linear-gradient(transparent 42%,#54e5dd55 43% 52%,transparent 53%);position:relative;overflow:hidden}.mini-wave:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 2%,#7afbf0 3% 5%,transparent 6% 13%,#4aaee4 14% 16%,transparent 17% 25%,#7df4d7 26% 28%,transparent 29%);animation:wave-slide 2.7s linear infinite}.breath-wave:after{animation-duration:4.8s}.demo-quality{display:flex;align-items:center;gap:7px;margin-top:14px;color:#b1d2d9;font-size:11px}.demo-quality i{width:7px;height:7px;border-radius:50%;background:#68e3ba;box-shadow:0 0 10px #68e3ba}.data-route{position:absolute;z-index:1;left:340px;right:262px;bottom:178px;height:300px;pointer-events:none}.route-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#71f3e7,#00b0f0,transparent);transform-origin:left center;opacity:.8}.route-up{left:0;bottom:24px;width:72%;transform:rotate(-39deg)}.route-down{left:55%;top:26px;width:46%;transform:rotate(39deg)}.data-packet{position:absolute;width:10px;height:10px;border-radius:50%;background:#d5fffb;box-shadow:0 0 16px #53e7db,0 0 33px #00b0f0;animation:packet-one 4.3s ease-in-out infinite}.packet-one{left:0;bottom:20px}.packet-two{left:0;bottom:20px;animation-delay:1.4s}.packet-three{left:0;bottom:20px;animation-delay:2.8s}.demo-cloud{top:58px;right:282px;display:flex;align-items:center;gap:13px;padding:14px 17px;border-radius:17px}.cloud-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:#00b0f021;color:#bffffa;font-size:23px}.demo-cloud span{display:block;color:#b2cad4;font-size:12px}.demo-cloud strong{display:block;margin:3px 0;color:#f1ffff;font-size:15px}.demo-cloud strong b{color:#78f0dd}.demo-cloud small{display:block;color:#8caab6;font-size:10px}.demo-app{right:35px;bottom:47px;width:224px;padding:17px;border-radius:20px}.app-bar span{color:#c7dbe1;font-size:12px}.app-bar i{padding:4px 7px;font-size:9px}.demo-app>strong{display:block;margin:19px 0 10px;font-size:20px}.app-chart{display:flex;align-items:end;gap:4px;height:76px;padding:10px;border:1px solid #bffdf31c;border-radius:13px;background:#06192783}.app-chart i{flex:1;border-radius:99px 99px 3px 3px;background:linear-gradient(#67e7dc,#0f6f96);transform-origin:bottom;animation:chart-pulse 2.7s ease-in-out infinite}.app-chart i:nth-child(1),.app-chart i:nth-child(9){height:28%}.app-chart i:nth-child(2),.app-chart i:nth-child(10){height:44%;animation-delay:.2s}.app-chart i:nth-child(3),.app-chart i:nth-child(7){height:68%;animation-delay:.4s}.app-chart i:nth-child(4),.app-chart i:nth-child(8){height:46%;animation-delay:.6s}.app-chart i:nth-child(5),.app-chart i:nth-child(11){height:78%;animation-delay:.8s}.app-chart i:nth-child(6),.app-chart i:nth-child(12){height:57%;animation-delay:1s}.demo-app p{display:flex;justify-content:space-between;margin:12px 0 0;color:#9bb7c0;font-size:11px}.demo-app p b{color:#70e9bc}.demo-toggle{position:absolute;z-index:3;right:35px;top:32px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #b8f7f551;border-radius:999px;background:#071e31c4;color:#e6ffff;font-size:12px;cursor:pointer;backdrop-filter:blur(12px)}.demo-toggle span{font-size:16px}.demo-captions{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:29px 24px 0}.demo-captions p{margin:0;color:#b4ccd5;font-size:14px;line-height:1.75}.demo-captions b{margin-right:9px;color:#00b0f0;font-size:17px}.demo-captions span{margin-right:8px;color:#e6ffff;font-size:16px;font-weight:700}.demo-stage.is-paused *{animation-play-state:paused!important}.demo-stage.is-paused .demo-toggle{border-color:#6debd8;background:#0a493f;color:#c8fff9}@keyframes packet-one{0%,13%{opacity:0;transform:translate(0,0) scale(.2)}19%{opacity:1}52%{opacity:1;transform:translate(250px,-200px) scale(1)}68%{opacity:1;transform:translate(420px,-68px) scale(.9)}82%,100%{opacity:0;transform:translate(480px,-17px) scale(.25)}}@keyframes wave-slide{to{transform:translateX(-35%)}}@keyframes chart-pulse{50%{filter:brightness(1.4);transform:scaleY(.65)}}@media(max-width:1050px){.demo-stage{min-height:610px}.demo-cloud{right:248px}.data-route{right:230px}.demo-captions{gap:20px}}@media(max-width:850px){.live-demo{padding:95px 21px}.demo-heading{align-items:start;flex-direction:column;gap:19px;margin-bottom:35px}.demo-heading>p{margin:0;font-size:15px}.demo-stage{min-height:790px;border-radius:23px}.demo-stage>img{object-position:64% center}.demo-vignette{background:linear-gradient(180deg,#06182794 0,#06182770 45%,#061827e8 77%)}.demo-edge{left:16px;right:16px;bottom:215px;width:auto}.demo-app{right:16px;bottom:20px;width:calc(100% - 32px)}.demo-cloud{top:20px;right:16px;left:16px}.data-route{left:28%;right:25%;bottom:285px;height:260px}.route-up{width:100%;transform:rotate(-64deg)}.route-down{display:none}.demo-toggle{top:auto;right:16px;bottom:157px}.demo-captions{grid-template-columns:1fr;padding:26px 4px 0;gap:13px}.demo-captions p{font-size:14px}}@media(prefers-reduced-motion:reduce){.demo-stage *{animation:none!important}}