.workflow{position:relative;overflow:hidden;background:radial-gradient(ellipse 50% 80% at 12% 48%,rgba(78,63,141,.18),transparent 75%),radial-gradient(ellipse 48% 70% at 90% 20%,rgba(26,100,115,.2),transparent 75%),#070f1e}
.workflow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(#91e9d4 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#0008,#0002 55%,#0009)}
.workflow .flow-layout{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,.79fr) minmax(0,1.21fr);gap:clamp(36px,5vw,84px);align-items:center;max-width:1400px}
.flow-story{min-width:0}.flow-overline{margin:28px 0 10px;color:#7ab9bf;font-size:10px;font-weight:800;letter-spacing:.19em}.flow-story h2{margin:0;color:#f4fbfa;font-size:clamp(43px,4.7vw,72px);line-height:1.21;letter-spacing:-.065em}.flow-story h2 em{font-style:normal;color:#98efd5}.flow-lead{max-width:530px;margin:27px 0 0;color:#a9c4c7;font-size:15px;line-height:1.95}.flow-example{margin-top:44px;padding:25px 28px;border:1px solid #4a777e;border-radius:18px;background:linear-gradient(120deg,rgba(27,57,76,.9),rgba(14,34,53,.76));box-shadow:0 25px 65px #030a1c75}.flow-example-label{display:flex;align-items:center;gap:9px;color:#9edbcf;font-size:10px;letter-spacing:.1em}.flow-example-label i{width:6px;height:6px;border-radius:50%;background:#a3f4d8;box-shadow:0 0 12px #8cf4d4}.flow-example strong{display:block;margin:14px 0 19px;color:#f0fbfa;font-size:20px;line-height:1.55;font-weight:600}.flow-example-foot{display:flex;align-items:center;gap:11px;color:#80aab4;font-size:11px}.flow-example-foot b{color:#8ce6d0;font-weight:500}.flow-disclaimer{max-width:490px;margin:17px 0 0;color:#789aa6;font-size:11px;line-height:1.7}
.flow-console{--orbit-angle:0deg;position:relative;overflow:hidden;padding:28px;border:1px solid rgba(126,179,193,.33);border-radius:23px;background:linear-gradient(155deg,rgba(20,35,60,.94),rgba(6,16,31,.96) 65%);box-shadow:0 30px 90px #020912b8,0 0 80px #39a2a114;isolation:isolate}
.flow-console::before{content:"";position:absolute;inset:-40% -40% auto 35%;height:490px;border-radius:50%;background:radial-gradient(circle,#4e9fb921,transparent 68%);pointer-events:none}.flow-console-head,.flow-task,.flow-console-foot{display:flex;justify-content:space-between;align-items:center;gap:18px}.flow-console-head{position:relative;margin-bottom:22px}.flow-console-head>div{display:grid;gap:5px}.flow-console-head>div span{color:#789da9;font-size:10px;font-weight:800;letter-spacing:.16em}.flow-console-head>div strong{color:#eefaf9;font-size:18px}.flow-console-status{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 10px;border:1px solid #3a6671;border-radius:7px;color:#aed7d3;font-size:11px}.flow-console-status i{width:6px;height:6px;border-radius:50%;background:#8df2d1;box-shadow:0 0 10px #8df2d1}.flow-console[data-flow-state="running"] .flow-console-status i{animation:flowBlink 1.25s infinite}.flow-console[data-flow-state="complete"] .flow-console-status{border-color:#6bcba9;color:#b4f4dc}
.flow-task{position:relative;padding:18px;border:1px solid rgba(123,174,193,.32);border-radius:15px;background:linear-gradient(110deg,rgba(61,86,126,.45),rgba(23,42,68,.3))}.flow-task-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #5a94ac;border-radius:10px;color:#a4eddb;font-size:22px}.flow-task>div{flex:1;min-width:0}.flow-task small{display:block;margin-bottom:5px;color:#9db5c1;font-size:10px}.flow-task strong{display:block;color:#ebf8f7;font-size:13px;line-height:1.55;font-weight:600}.flow-task-badge{flex:none;color:#a2efdc;font-size:10px}
.flow-console-main{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;align-items:center;margin:20px 0}.flow-steps{min-width:0;padding:0;margin:0;list-style:none;display:grid;gap:8px}.flow-step{--accent:#85f0d3;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:63px;padding:10px 13px;border:1px solid #41596f;border-radius:12px;background:linear-gradient(110deg,rgba(63,84,121,.35),rgba(16,32,55,.45));transition:background .55s,border-color .55s,box-shadow .55s,transform .55s}.flow-step:nth-child(2){--accent:#f6d77a}.flow-step:nth-child(3){--accent:#a9baff}.flow-step:nth-child(4){--accent:#e4a4e9}.flow-step[data-state="active"]{border-color:var(--accent);background:linear-gradient(110deg,rgba(66,90,125,.53),rgba(20,39,64,.72));box-shadow:0 0 25px color-mix(in srgb,var(--accent) 20%,transparent);transform:translateX(4px)}.flow-step[data-state="done"]{border-color:#6aa59a}.flow-step-num{color:var(--accent);font-size:11px;font-weight:800}.flow-step-copy{display:grid;gap:4px;min-width:0}.flow-step-copy strong{color:#eaf7f6;font-size:13px}.flow-step-copy small{color:#91a9b7;font-size:10px}.flow-step-state{color:#8fa8b6;font-size:10px;white-space:nowrap}.flow-step[data-state="active"] .flow-step-state{color:var(--accent)}.flow-step[data-state="done"] .flow-step-state{color:#95e5cc}
.flow-orbit{position:relative;width:170px;aspect-ratio:1;border:1px solid #4a678b;border-radius:50%;background:radial-gradient(circle,#182e4a 0 12%,#0d1c33 65%,#132844 100%);box-shadow:inset 0 0 35px #8ec8e51a,0 0 35px #6799bc17}.flow-orbit-ring{position:absolute;inset:14px;border:1px solid #6784aa67;border-radius:50%}.flow-orbit-ring-inner{inset:31px;border-color:#6ca5ae46}.flow-orbit-mark{position:absolute;display:grid;place-items:center;width:26px;height:26px;border:1px solid #9de9d2;border-radius:50%;background:#07192c;color:#b1f9e2;font-size:9px}.flow-orbit-mark.m1{top:0;left:calc(50% - 13px)}.flow-orbit-mark.m2{right:0;top:calc(50% - 13px);border-color:#f6d77a;color:#f6d77a}.flow-orbit-mark.m3{bottom:0;left:calc(50% - 13px);border-color:#a9baff;color:#a9baff}.flow-orbit-mark.m4{left:0;top:calc(50% - 13px);border-color:#e4a4e9;color:#e4a4e9}.flow-orbit-hand{position:absolute;left:calc(50% - 1px);top:15px;width:2px;height:69px;background:linear-gradient(#a6f5da,#effff5);transform-origin:50% 69px;transform:rotate(var(--orbit-angle));transition:transform 1.2s cubic-bezier(.25,.75,.2,1);box-shadow:0 0 12px #9af7db}.flow-orbit-core{position:absolute;left:calc(50% - 15px);top:calc(50% - 15px);width:30px;height:30px;display:grid;place-items:center;border:1px solid #a9e8d4;border-radius:50%;background:#0c2639;color:#d2ffec;font-size:17px;box-shadow:0 0 20px #8deccb57}
.flow-result{min-height:98px;padding:16px 18px;border:1px solid #315e65;border-radius:12px;background:linear-gradient(90deg,#11313d7a,#0b20346a)}.flow-result>span{display:block;color:#83bdbb;font-size:9px;font-weight:800;letter-spacing:.14em}.flow-result strong{display:block;margin:7px 0 3px;color:#dff9ef;font-size:14px}.flow-result p{margin:0;color:#9fb8bf;font-size:10px;line-height:1.55}.flow-console-foot{margin-top:20px;padding-top:18px;border-top:1px solid #345269;color:#87aeb8;font-size:10px}.flow-console-foot i{font-style:normal;color:#73e5ca}.flow-progress{display:flex;align-items:center;gap:12px}.flow-progress strong{color:#f2fbf8;font-size:11px;white-space:nowrap}.flow-progress-track{display:block;width:104px;height:4px;overflow:hidden;border-radius:9px;background:#315169}.flow-progress-track i{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,#7deed3,#9bdbf5);transition:width .9s ease}
@keyframes flowBlink{50%{opacity:.35;box-shadow:0 0 2px #8df2d1}}
@media(max-width:1100px){.workflow .flow-layout{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px}.flow-console{padding:21px}.flow-console-main{grid-template-columns:minmax(0,1fr) 130px;gap:10px}.flow-orbit{width:130px}.flow-orbit-hand{top:14px;height:51px;transform-origin:50% 51px}.flow-orbit-ring{inset:12px}.flow-orbit-ring-inner{inset:25px}}
@media(max-width:820px){.workflow .flow-layout{grid-template-columns:1fr;gap:34px}.flow-story h2{font-size:clamp(43px,8vw,65px)}.flow-example{margin-top:27px}.flow-console-main{grid-template-columns:minmax(0,1fr) 150px}.flow-orbit{width:150px}.flow-orbit-hand{height:61px;transform-origin:50% 61px}}
@media(max-width:600px){.workflow .flow-layout{gap:26px}.flow-overline{margin-top:16px}.flow-story h2{font-size:clamp(38px,10vw,52px)}.flow-lead{font-size:13px;margin-top:19px}.flow-example{padding:20px}.flow-example strong{font-size:16px}.flow-console{padding:15px;border-radius:16px}.flow-console-head>div strong{font-size:15px}.flow-console-status{font-size:9px}.flow-task{padding:12px;gap:9px}.flow-task strong{font-size:11px}.flow-task-badge{display:none}.flow-task-icon{width:34px;height:34px}.flow-console-main{grid-template-columns:1fr;gap:18px}.flow-orbit{order:-1;margin:0 auto;width:130px}.flow-orbit-hand{height:51px;transform-origin:50% 51px}.flow-step{min-height:57px}.flow-result{min-height:90px}.flow-console-foot{gap:7px}.flow-progress-track{width:64px}}
@media(prefers-reduced-motion:reduce){.flow-step,.flow-orbit-hand,.flow-progress-track i{transition:none}.flow-console-status i{animation:none}}