.workflow-visual{position:relative;overflow:hidden;min-height:390px;background:radial-gradient(circle at 80% 20%,rgba(148,231,236,.12),transparent 34%),linear-gradient(145deg,#112d34,#07181d 72%);}
.workflow-visual:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(145,225,230,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(145,225,230,.055) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent);}
.workflow-visual .demo-top,.workflow-visual p{position:relative;z-index:1;}
.workflow-visual-head{position:relative;z-index:1;padding:25px 22px 30px;border-top:1px solid #31535a;display:flex;flex-direction:column;gap:9px;}
.workflow-visual-head span{font-size:10px;letter-spacing:.2em;font-weight:800;color:#a7e3e8;}
.workflow-visual-head strong{font-size:clamp(22px,2.5vw,34px);line-height:1.15;letter-spacing:-.035em;color:#effafb;max-width:430px;}
.workflow-visual-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 20px 8px;}
.workflow-visual-steps>div{position:relative;min-height:150px;padding:18px 14px;background:linear-gradient(155deg,rgba(29,70,78,.94),rgba(9,34,40,.96));border:1px solid #416970;display:flex;flex-direction:column;gap:12px;transition:transform .35s ease,border-color .35s ease;}
.workflow-visual-steps>div:hover{transform:translateY(-5px);border-color:#9de5e9;}
.workflow-visual-steps>div:not(:last-child):after{content:"→";position:absolute;right:-13px;top:45%;z-index:2;color:#a6e7eb;font-size:17px;}
.workflow-visual-steps span{font-size:11px;letter-spacing:.16em;color:#a4e8eb;}
.workflow-visual-steps strong{font-size:15px;line-height:1.2;color:#f2fbfb;}
.workflow-visual-steps small{font-size:11px;line-height:1.4;color:#abc6ca;}
.workflow-visual p{padding:10px 17px 7px;letter-spacing:.04em;}
@media(max-width:700px){.workflow-visual{min-height:0}.workflow-visual-head{padding:22px 13px}.workflow-visual-steps{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 10px 8px}.workflow-visual-steps>div{min-height:126px}.workflow-visual-steps>div:nth-child(2):after{content:none}}
@media(max-width:420px){.workflow-visual-steps strong{font-size:13px}.workflow-visual-steps small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.workflow-visual-steps>div{transition:none}.workflow-visual-steps>div:hover{transform:none}}