.service-illustration{display:grid;place-items:center;width:100%;min-width:0;min-height:21rem;padding:1.5rem;background:#edf5f4;overflow:hidden;border-radius:6px}.service-illustration--web{padding:0;background:#fff}.service-site-preview{width:100%;min-width:0}.service-site-preview img{width:100%;height:auto;aspect-ratio:800 / 556}.service-sample-bar{display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;color:#526573;background:#f8fbfb;border-bottom:1px solid #dfe9e8;font-size:.65rem;line-height:1.3}.service-sample-bar>span{width:.4rem;height:.4rem;margin-left:auto;border-radius:50%;background:#2fc8b4}.service-workflow{display:grid;justify-items:center;width:min(100%,24rem)}.workflow-node{display:flex;gap:.75rem;align-items:center;width:100%;min-height:3rem;padding:.7rem .9rem;border:1px solid #d5e5e2;border-radius:6px;background:#fff;color:#193a46;font-size:.75rem}.workflow-node>i{display:grid;width:1.7rem;height:1.7rem;flex-shrink:0;place-items:center;border-radius:4px;color:#087f73;background:#e4f5f0}.workflow-node>b{margin-left:auto;color:#158576;font-size:.7rem}.workflow-node-ai{background:#092d40;border-color:#092d40;color:#fff}.workflow-node-ai>i{color:#8df0db;background:#16465a}.workflow-connector{position:relative;width:1px;height:1.2rem;background:#8dcac1}.workflow-connector:before{content:"";position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:#087f73;animation:workflow-packet 2.7s ease-in-out infinite}.workflow-activity{display:flex;gap:.15rem;margin-left:auto}.workflow-activity b{width:.2rem;height:.2rem;border-radius:50%;background:#57e3cb;animation:workflow-activity 1.5s ease-in-out infinite}.workflow-activity b:nth-child(2){animation-delay:.2s}.workflow-activity b:nth-child(3){animation-delay:.4s}.workflow-result{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding-top:.4rem;color:#087365;font-size:.7rem}.workflow-result>span{width:100%;text-align:center;color:#526573;font-size:.65rem}.service-app-preview{width:100%;min-width:0;overflow:hidden;border:1px solid #d7e4e5;border-radius:6px;background:#fff}.service-app-body{display:grid;grid-template-columns:2.75rem minmax(0,1fr)}.service-app-sidebar{display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding-block:1rem;color:#5f8e91;background:#f2f7f7;border-right:1px solid #e1eaea;font-size:.7rem}.service-app-sidebar>i:first-child{color:#0e8a7d}.service-app-main{min-width:0;padding:1rem}.service-app-heading{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:1rem;color:#173847;font-family:var(--font-secondary);font-weight:600;font-size:.85rem}.service-app-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-bottom:1rem}.service-app-stats>span{display:grid;gap:.35rem;padding:.55rem .3rem;background:#f0f7f6;border-radius:4px;color:#48696c;font-size:.6rem;text-align:center}.service-app-stats i{color:#138878;font-size:.75rem}.service-app-row{display:flex;align-items:center;gap:.55rem;padding:.7rem 0;border-bottom:1px solid #e5eded;color:#324c57;font-size:.65rem}.service-app-row>i{color:#55948c}.service-app-row>span{min-width:0}.service-app-row small{display:block;color:#789093;font-size:.6rem}.service-app-row b{margin-left:auto;padding:.1rem .4rem;border-radius:3px;background:#e7f5f0;color:#137d69;font-size:.55rem;font-weight:500;white-space:nowrap}.service-app-row:last-of-type b{background:#fff4de;color:#866728}.service-app-progress{display:grid;gap:.5rem;margin-top:.8rem;color:#667e85;font-size:.6rem}.service-app-progress>i{position:relative;display:block;height:.2rem;border-radius:2px;background:#e5efed;overflow:hidden}.service-app-progress>i:before{content:"";display:block;width:65%;height:100%;background:#29b6a1;animation:service-progress 5s ease-in-out infinite;transform-origin:left}.is-compact .service-app-main{padding:.7rem}.is-compact .service-app-heading{margin-bottom:.6rem}.is-compact .service-app-stats{margin-bottom:.45rem}.is-compact .service-app-stats>span{padding-block:.35rem}.is-compact .service-app-row{padding-block:.4rem}.is-compact .service-app-progress{display:none}@keyframes workflow-packet{0%{transform:translateY(0);opacity:0}30%{opacity:1}to{transform:translateY(1rem);opacity:0}}@keyframes workflow-activity{0%,to{opacity:.3}50%{opacity:1}}@keyframes service-progress{0%,to{transform:scaleX(.7)}50%{transform:scaleX(1)}}@media(max-width:540px){.service-illustration{min-height:18rem;padding:1rem}.service-illustration--web{padding:0;min-height:0}.service-app-main{padding:.7rem}.service-app-body{grid-template-columns:2rem minmax(0,1fr)}.service-app-row{font-size:.6rem;gap:.35rem}.workflow-node{gap:.5rem;padding-inline:.65rem;font-size:.7rem}}@media(prefers-reduced-motion:reduce){.workflow-connector:before,.workflow-activity b,.service-app-progress>i:before{animation:none}}
