.flow-showcase{background:radial-gradient(70% 100% at 50% 90%,#153c78 0%,#091b39 54%,#07152e 100%);overflow:hidden}
.flow-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:36px}.flow-heading>div{max-width:850px}.flow-heading h2{max-width:780px}.flow-heading p:last-child{max-width:710px;color:#b8cdec;font-size:17px;line-height:1.65}.flow-heading .text-link{white-space:nowrap;margin-bottom:8px}
.flow-demo{border:1px solid #4084c7;border-radius:24px;overflow:hidden;background:#0b1d3c;box-shadow:0 30px 90px #020b23b8,0 0 50px #2189ff2e}.flow-toolbar{display:flex;align-items:center;gap:18px;min-height:62px;padding:12px 24px;border-bottom:1px solid #315782;background:#102748}.flow-toolbar-title{display:flex;align-items:center;gap:10px;font-weight:800;color:#eef8ff}.flow-toolbar-title i,.flow-demo-footer i{width:8px;height:8px;border-radius:50%;background:#2ce1ad;box-shadow:0 0 14px #2ce1ad}.flow-toolbar-title small{font-size:11px;color:#85aacf;font-weight:600}.flow-toolbar-steps{margin-left:auto;color:#83ccff;font-size:12px;font-weight:800;letter-spacing:.1em}.flow-toolbar button{border:1px solid #4f87bc;border-radius:9px;background:#173b68;color:#e8f5ff;padding:8px 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.flow-toolbar button:hover{background:#2465a0}.flow-toolbar button:focus-visible{outline:3px solid #82d7ff;outline-offset:2px}
.flow-brief{display:flex;align-items:center;gap:16px;margin:24px 28px 0;padding:15px 18px;border:1px solid #3d74ad;border-radius:15px;background:linear-gradient(100deg,#183b70,#142b5d 70%,#1c2d69)}.flow-iris-mark{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#18b9fb,#7355f8);color:white;font-size:25px;box-shadow:0 0 28px #299dff7d}.flow-brief div{min-width:0}.flow-brief small{display:block;margin-bottom:3px;color:#8bd6ff;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.flow-brief strong{font-size:15px;line-height:1.45}.flow-brief-status{margin-left:auto;flex:none;color:#8deacb;font-size:11px;font-weight:800}
.flow-map{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px;align-items:center;min-height:280px;margin:20px 28px;padding:30px 12px;background-image:radial-gradient(#4b81b2 1px,transparent 1px);background-size:18px 18px;background-color:#0b203f;border:1px solid #264b78;border-radius:15px;overflow:hidden}.flow-path{position:absolute;left:9%;right:9%;top:50%;height:3px;background:linear-gradient(90deg,#2e9cff,#52d8ff,#8e6fff);box-shadow:0 0 16px #269eff;transform:scaleX(0);transform-origin:left;transition:transform 3s ease}.flow-demo.playing .flow-path{transform:scaleX(1)}.flow-node{position:relative;z-index:1;display:flex;gap:10px;min-height:126px;padding:15px 12px;border:1px solid #5277ae;border-radius:12px;background:linear-gradient(150deg,#183862,#0d2449);box-shadow:0 14px 24px #06142db3;opacity:0;transform:translateY(22px) scale(.92);transition:opacity .45s ease,transform .45s ease,border-color .45s ease}.flow-node.shown{opacity:1;transform:translateY(0) scale(1)}.flow-node-iris{border-color:#8d7dff;background:linear-gradient(150deg,#24477e,#32266c)}.flow-node-end{border-color:#3cbca8}.flow-node-icon{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:8px;background:#155da3;color:#bceeff;font-size:16px}.flow-node-iris .flow-node-icon{background:#704ee8;color:white}.flow-node-end .flow-node-icon{background:#137e78;color:#d3fff2}.flow-node small{display:block;color:#76bbef;font-size:9px;font-weight:800;letter-spacing:.05em}.flow-node strong{display:block;margin-top:9px;font-size:13px;line-height:1.2;color:#fff}.flow-node p{margin:7px 0 0;color:#b1c9e8;font-size:11px;line-height:1.35}.flow-demo-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 28px 22px;color:#9eb8d7;font-size:12px}.flow-demo-footer span{display:flex;align-items:center;gap:9px}.flow-demo-footer a{color:#8bd8ff;font-weight:800}.flow-demo-footer a:hover{text-decoration:underline}
@media(max-width:1100px){.flow-map{gap:12px}.flow-node{padding:12px 8px;gap:6px}.flow-node strong{font-size:12px}}
@media(max-width:800px){.flow-heading{display:block}.flow-heading .text-link{display:inline-block;margin-top:10px}.flow-map{grid-template-columns:1fr;gap:14px;padding:20px;min-height:0}.flow-path{left:41px;right:auto;top:7%;bottom:7%;width:3px;height:auto;transform:scaleY(0);transform-origin:top}.flow-demo.playing .flow-path{transform:scaleY(1)}.flow-node{min-height:70px;padding:12px;max-width:520px;width:100%;margin-inline:auto}.flow-node strong{margin-top:4px}.flow-node p{margin-top:3px}.flow-brief-status{display:none}}
@media(max-width:520px){.flow-toolbar{padding:10px 14px;gap:7px;flex-wrap:wrap}.flow-toolbar-title small{display:none}.flow-toolbar button{margin-left:auto}.flow-toolbar-steps{margin-left:0}.flow-brief{margin:14px 14px 0;padding:12px}.flow-brief strong{font-size:12px}.flow-map{margin:14px;padding:15px}.flow-demo-footer{padding:0 16px 18px;display:block;line-height:1.5}.flow-demo-footer a{display:block;margin-top:9px}}
@media(prefers-reduced-motion:reduce){.flow-path,.flow-node{transition:none}}
@media(hover:hover) and (pointer:fine){html.iris-pointer,html.iris-pointer *{cursor:none!important}html.iris-pointer input,html.iris-pointer textarea,html.iris-pointer [contenteditable="true"]{cursor:text!important}.iris-cursor{position:fixed;z-index:99999;left:0;top:0;display:flex;align-items:center;gap:1px;pointer-events:none;transform:translate3d(-100px,-100px,0);filter:drop-shadow(0 2px 9px #00152f);will-change:transform}.iris-cursor img{width:42px;height:52px}.iris-cursor span{margin-left:-4px;padding:5px 9px;border:1px solid #5ecaff;border-radius:7px;background:#103869;color:#e5faff;font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.09em;box-shadow:0 0 18px #1e9eff66}.iris-cursor.is-clicking{scale:.88}.iris-cursor.is-hidden{display:none}}