@keyframes ob-fade-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ob-flow-visual{position:relative;border-radius:1.5rem;height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:1.25rem;padding:1.5rem;background:#fff;box-shadow:0 4px 6px -1px #0066ff0f,0 10px 25px -5px #0066ff1a,0 25px 50px -12px #00000014}.ob-flow-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0066ff1f,#00d4aa14,#0066ff0f);border-radius:1.5rem}.ob-flow-bg-border{position:absolute;inset:0;border:1px solid rgba(0,102,255,.18);border-radius:1.5rem}.ob-flow-dotgrid{position:absolute;inset:0;opacity:.4;background-image:radial-gradient(rgba(0,102,255,.2) 1px,transparent 1px);background-size:24px 24px;border-radius:1.5rem}.ob-flow-glow{position:absolute;top:40%;left:30%;transform:translate(-50%,-50%);width:200px;height:200px;background:#0066ff1a;filter:blur(60px);border-radius:50%}.ob-flow-glow-2{position:absolute;bottom:10%;right:10%;width:140px;height:140px;background:#00d4aa14;filter:blur(50px);border-radius:50%}.ob-flow-header{position:relative;z-index:1;align-self:flex-start}.ob-flow-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#06f;background:#0066ff14;border:1px solid rgba(0,102,255,.15);border-radius:999px;padding:.3rem .75rem}.ob-corner-badge{position:absolute;bottom:1rem;right:1rem;font-size:.6rem;font-weight:800;letter-spacing:.1em;color:#0066ff4d;background:#0066ff0d;border:1px solid rgba(0,102,255,.1);border-radius:.375rem;padding:.2rem .5rem;z-index:1}.ob-step-icon-wrap{position:relative}.ob-step-number{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#06f;color:#fff;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 1px 4px #0066ff4d}.ob-step-number--success{background:#00b894;box-shadow:0 1px 4px #00b8944d}.ob-flow-steps{display:flex;align-items:center;gap:0;position:relative;z-index:1;padding:0 1.5rem}.ob-flow-step{display:flex;flex-direction:column;align-items:center;gap:.6rem;min-width:90px}.ob-step-icon{width:60px;height:60px;border-radius:1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #00000014;transition:transform .3s ease}.ob-step-icon--customer{background:linear-gradient(135deg,#06f,#3385ff);color:#fff}.ob-step-icon--bank{background:linear-gradient(135deg,#00d4aa,#00b894);color:#fff}.ob-step-icon--merchant{background:linear-gradient(135deg,#0052cc,#06f);color:#fff}.ob-step-icon--roxpay{background:#fff;border:1px solid rgba(0,102,255,.12);box-shadow:0 4px 20px #0066ff1a}.ob-step-label{font-size:.8rem;font-weight:700;color:#1e293b;text-align:center;line-height:1}.ob-step-sub{font-size:.65rem;color:#64748b;text-align:center;line-height:1.2;max-width:100px}.ob-connector{display:flex;align-items:center;position:relative;width:40px;height:2px;margin:0 .25rem 2.5rem}.ob-connector-line{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,102,255,.25) 0px,rgba(0,102,255,.25) 4px,transparent 4px,transparent 8px);border-radius:1px}.ob-connector-pulse{position:absolute;width:8px;height:8px;background:#06f;border-radius:50%;box-shadow:0 0 8px #0066ff80;animation:ob-pulse-move 2.5s ease-in-out infinite}.ob-pulse-1{animation-delay:0s}.ob-pulse-2{animation-delay:.4s}.ob-pulse-3{animation-delay:.8s}.ob-connector-arrow{position:absolute;right:-4px;font-size:1rem;color:#06f6;font-weight:700;line-height:1}@keyframes ob-pulse-move{0%,to{left:0;opacity:0}10%{opacity:1}90%{opacity:1}to{left:calc(100% - 8px);opacity:0}}.ob-float-1{animation:ob-bob 4s ease-in-out infinite}.ob-float-2{animation:ob-bob 4s ease-in-out infinite .4s}.ob-float-3{animation:ob-bob 4s ease-in-out infinite .8s}.ob-float-4{animation:ob-bob 4s ease-in-out infinite 1.2s}.ob-float-5{animation:ob-bob 5s ease-in-out infinite .6s}@keyframes ob-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.ob-status-bar{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid rgba(0,102,255,.12);border-radius:999px;padding:.5rem 1.25rem;box-shadow:0 2px 12px #0000000f;position:relative;z-index:1}.ob-status-dot{width:6px;height:6px;border-radius:50%;background:#00d4aa;animation:ob-status-blink 2s ease-in-out infinite}@keyframes ob-status-blink{0%,to{opacity:1}50%{opacity:.3}}.ob-status-text{font-size:.7rem;font-weight:600;color:#475569;letter-spacing:.02em}