/* Animated overview of the programmable-mobile communication flows. */
.start-flow-intro{display:grid;grid-template-columns:.78fr 1.22fr;gap:4rem;align-items:end;margin-bottom:2.25rem}
.start-flow-intro h2{max-width:570px}
.start-flow-intro>div:last-child>p:first-child{max-width:760px;font-size:1.05rem}
.start-live-system{position:relative;overflow:hidden;padding:1.15rem;border:1px solid rgba(117,189,249,.28);border-radius:26px;background:radial-gradient(circle at 50% 12%,rgba(18,134,238,.2),transparent 34%),linear-gradient(145deg,#0b2236,#07131f 70%);box-shadow:0 30px 70px rgba(0,0,0,.25)}
.start-live-system:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 84%)}
.start-live-install{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;width:max-content;max-width:100%;margin:0 auto 1.15rem;padding:.55rem .7rem;border:1px solid rgba(117,204,255,.28);border-radius:999px;background:rgba(8,30,48,.82);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.start-live-install>i{width:9px;height:9px;border-radius:50%;background:#48d99a;box-shadow:0 0 0 0 rgba(72,217,154,.55);animation:start-install-pulse 2.2s ease-out infinite}
.start-live-install>span{display:flex;min-width:0;flex-direction:column;line-height:1.25}
.start-live-install strong{color:#fff;font-size:.78rem}
.start-live-install small{color:#8faec6;font-size:.67rem}
.start-live-install>b{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#153d54;color:#66e1ac;font-size:.75rem}
.start-live-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(155px,190px) minmax(70px,1fr) minmax(205px,240px) minmax(70px,1fr) minmax(155px,190px);gap:.75rem;align-items:center;min-height:340px}
.start-live-node{position:relative;display:flex;min-height:205px;flex-direction:column;justify-content:center;padding:1.15rem;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(12,37,57,.9);box-shadow:0 15px 35px rgba(0,0,0,.2)}
.start-live-node small,.start-live-phone header small{color:#72bbf8;font-size:.63rem;font-weight:850;letter-spacing:.1em}
.start-live-node>strong{margin:.45rem 0;color:#fff;font-size:1rem;line-height:1.3}
.start-live-node>em{color:#9bb5c9;font-size:.72rem;font-style:normal}
.start-live-icon{display:grid;width:43px;height:43px;margin-bottom:.9rem;place-items:center;border-radius:12px;background:#123d5f;color:#6fc2ff;font:800 .95rem/1 monospace}
.start-contact-avatar{display:grid;width:43px;height:43px;margin-bottom:.9rem;place-items:center;border-radius:50%;background:linear-gradient(#dfeaf2 34%,#7e9eb4 35%);color:transparent;box-shadow:inset 0 0 0 5px rgba(255,255,255,.08)}
.start-contact-message{position:absolute;right:.7rem;bottom:.7rem;left:.7rem;padding:.48rem .58rem;border-radius:10px;color:#dcedfa;font-size:.62rem;line-height:1.3;opacity:0;transform:translateY(7px)}
.start-contact-message-out{background:#12518a;animation:start-status-cycle 12s ease infinite}
.start-contact-message-in{background:#17513f;animation:start-status-cycle 12s ease 4s infinite}
.start-live-route{display:grid;gap:.45rem;align-items:center}
.start-live-route>span{overflow:hidden;color:#7897ae;font-size:.57rem;font-weight:750;letter-spacing:.02em;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.start-live-track{position:relative;display:block;height:2px;border-radius:99px;background:linear-gradient(90deg,rgba(75,176,255,.14),rgba(84,195,255,.65),rgba(75,176,255,.14))}
.start-live-track-in{background:linear-gradient(90deg,rgba(72,217,154,.14),rgba(72,217,154,.7),rgba(72,217,154,.14))}
.start-live-track>b{position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;background:#62bdff;box-shadow:0 0 12px #40a9f7;transform:translateY(-50%);animation:start-route-right 12s ease-in-out infinite}
.start-live-track-in>b{right:0;left:auto;background:#55dba0;box-shadow:0 0 12px #35c58b;animation:start-route-left 12s ease-in-out 4s infinite}
.start-live-route-right .start-live-track-out>b{animation-delay:.7s}
.start-live-route-left .start-live-track-in>b{animation-delay:4.7s}
.start-live-phone{position:relative;padding:.35rem}
.start-live-phone:before{content:"";position:absolute;inset:12% -13%;border-radius:50%;background:rgba(18,134,238,.18);filter:blur(22px);animation:start-phone-glow 4s ease-in-out infinite}
.start-live-phone-shell{position:relative;z-index:1;overflow:hidden;max-width:235px;margin:auto;border:7px solid #193247;border-radius:30px;background:#f5f9fc;box-shadow:0 22px 45px rgba(0,0,0,.35)}
.start-live-phone-shell:before{content:"";position:absolute;z-index:3;top:6px;left:50%;width:44px;height:5px;border-radius:10px;background:#183044;transform:translateX(-50%)}
.start-live-phone-shell header{display:flex;align-items:center;gap:.55rem;padding:1.25rem .7rem .65rem;background:#e8f3fb}
.start-live-phone-shell header img{width:30px;height:30px;border-radius:8px}
.start-live-phone-shell header span{display:flex;min-width:0;flex:1;flex-direction:column}
.start-live-phone-shell header strong{overflow:hidden;color:#09233a;font-size:.7rem;white-space:nowrap;text-overflow:ellipsis}
.start-live-phone-shell header>i{width:7px;height:7px;border-radius:50%;background:#36c78a;box-shadow:0 0 0 4px rgba(54,199,138,.14)}
.start-live-phone-screen{position:relative;height:145px;background:linear-gradient(155deg,#fff,#edf6fb)}
.start-live-phone-status{position:absolute;inset:18px 12px;display:grid;grid-template-columns:31px 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-content:center;padding:.7rem;border:1px solid #d5e5ef;border-radius:13px;background:#fff;box-shadow:0 12px 24px rgba(22,65,97,.12);opacity:0;transform:translateY(8px)}
.start-live-phone-status>span{display:grid;grid-row:1/3;width:31px;height:31px;place-items:center;align-self:center;border-radius:10px;background:#e4f3ff;color:#0879da;font-weight:900}
.start-live-phone-status strong{align-self:end;color:#102a3d;font-size:.69rem}
.start-live-phone-status small{align-self:start;color:#607d91;font-size:.59rem}
.start-live-status-out{animation:start-status-cycle 12s ease infinite}
.start-live-status-in{animation:start-status-cycle 12s ease 4s infinite}
.start-live-status-in>span{background:#e3f8ee;color:#199d68}
.start-live-status-call{animation:start-status-cycle 12s ease 8s infinite}
.start-live-status-call>span{background:#eee8ff;color:#7550d3}
.start-live-phone-shell footer{display:flex;align-items:center;gap:.4rem;padding:.55rem .65rem;background:#e8f3fb;color:#38576c;font-size:.57rem}
.start-live-phone-shell footer>i{width:6px;height:6px;border-radius:50%;background:#38c88b}
.start-live-phone-shell footer>span{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.start-live-phone-shell footer>b{color:#14855c;font-size:.52rem}
.start-call-stream{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(8,27,43,.88)}
.start-call-stream>div{display:flex;align-items:center;gap:.75rem}
.start-call-stream>div>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:#172f58;color:#a68bff}
.start-call-stream p{display:flex;flex-direction:column;margin:0!important}
.start-call-stream strong{color:#fff;font-size:.78rem}
.start-call-stream small{max-width:500px;color:#88a3b8;font-size:.64rem}
.start-call-stream ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem;margin:0;padding:0;list-style:none}
.start-call-stream li{display:flex;align-items:center;gap:.35rem;padding:.48rem .58rem;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#102b40;color:#bed2e2;font-size:.62rem;opacity:.46;animation:start-call-event 12s ease infinite}
.start-call-stream li i{font-style:normal;font-weight:900}
.start-call-stream .start-call-missed{animation-delay:8s}
.start-call-stream .start-call-incoming{animation-delay:8.55s}
.start-call-stream .start-call-outgoing{animation-delay:9.1s}
.start-live-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0 0;padding:0;list-style:none}
.start-live-summary li{display:flex;gap:.75rem;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0b1e2e}
.start-live-summary li>span{display:grid;flex:0 0 29px;height:29px;place-items:center;border-radius:9px;background:#133a58;color:#6cc1ff;font-size:.62rem;font-weight:850}
.start-live-summary strong{display:block;color:#fff;font-size:.75rem}
.start-live-summary p{margin:.15rem 0 0!important;color:#87a4b9!important;font-size:.64rem;line-height:1.45}
.start-live-summary li:nth-child(2)>span{background:#153e35;color:#5be1a6}
.start-live-summary li:nth-child(3)>span{background:#27254b;color:#ae98ff}
@keyframes start-install-pulse{0%{box-shadow:0 0 0 0 rgba(72,217,154,.55)}75%,100%{box-shadow:0 0 0 9px rgba(72,217,154,0)}}
@keyframes start-route-right{0%,3%{left:0;opacity:0}7%{opacity:1}25%{left:calc(100% - 9px);opacity:1}29%,100%{left:calc(100% - 9px);opacity:0}}
@keyframes start-route-left{0%,3%{right:0;opacity:0}7%{opacity:1}25%{right:calc(100% - 9px);opacity:1}29%,100%{right:calc(100% - 9px);opacity:0}}
@keyframes start-status-cycle{0%,3%{opacity:0;transform:translateY(8px)}8%,27%{opacity:1;transform:translateY(0)}32%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes start-call-event{0%,5%{opacity:.42;transform:translateY(0)}9%,24%{opacity:1;transform:translateY(-2px);border-color:rgba(166,139,255,.48)}31%,100%{opacity:.42;transform:translateY(0)}}
@keyframes start-phone-glow{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@media(max-width:1050px){.start-live-stage{grid-template-columns:minmax(140px,175px) minmax(45px,1fr) minmax(190px,220px) minmax(45px,1fr) minmax(140px,175px);gap:.45rem}.start-live-route>span{font-size:.5rem}.start-call-stream{align-items:flex-start;flex-direction:column}.start-call-stream ul{justify-content:flex-start}}
@media(max-width:820px){.start-flow-intro{grid-template-columns:1fr;gap:.75rem}.start-live-stage{grid-template-columns:1fr;gap:.65rem}.start-live-node{width:min(100%,420px);min-height:150px;margin:auto}.start-live-route{width:min(75%,300px);margin:auto}.start-live-route>span{white-space:normal}.start-live-phone-shell{max-width:225px}.start-live-summary{grid-template-columns:1fr}.start-live-contact{min-height:185px}.start-call-stream ul{width:100%}}
@media(max-width:520px){.start-live-system{padding:.8rem;border-radius:20px}.start-live-install{width:100%;border-radius:14px}.start-live-stage{min-height:0}.start-live-route{width:88%}.start-call-stream li{flex:1 1 calc(50% - .5rem)}.start-call-stream small{line-height:1.35}}
@media(prefers-reduced-motion:reduce){.start-live-system *{animation:none!important}.start-live-status-out,.start-contact-message-out{opacity:1;transform:none}.start-live-status-in,.start-live-status-call,.start-contact-message-in{display:none}.start-call-stream li{opacity:1}}