.process-block{--purple:var(--primary-purple);--orange:var(--accent-orange);--green:var(--accent-green)}.process-block__progress-fill{background:linear-gradient(90deg,#ff6b6b,#9970f7 50%,#31e8b0)}.process-block__dot-grid{background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.2px,transparent 0);background-size:30px 30px;background-position:15px 15px}@media(min-width:48rem){.process-block__dot-grid{background-size:45px 45px;background-position:27px 27px}}.process-block .canvas-wrap{aspect-ratio:1;max-width:450px;margin-inline:auto;overflow:hidden}@media(min-width:48rem){.process-block .canvas-wrap{aspect-ratio:800/440;max-width:none;margin-inline:0}}.process-block .card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;border:1.5px solid;background:#fff;backdrop-filter:blur(4px);z-index:2}.process-block .card.purple{border-color:var(--accent-purple);color:var(--purple)}.process-block .card.orange{border-color:var(--accent-orange);color:var(--orange)}.process-block .card.green{border-color:var(--accent-green);color:var(--green)}.process-block .card .icon{width:40%;aspect-ratio:1;background:currentColor;border-radius:4px;opacity:.8}.process-block .card .label{font-size:8px;letter-spacing:1px;text-transform:uppercase}@media(min-width:48rem){.process-block .card .label{font-size:9px}}.process-block .deco{position:absolute;z-index:1;pointer-events:none}.process-block .canvas-wrap[data-ready] .card,.process-block .canvas-wrap[data-ready] .deco{transition:all 1s cubic-bezier(.22,1,.36,1)}.process-block .connections{position:absolute;inset:0;z-index:1;pointer-events:none}.process-block .connections line,.process-block .connections path{stroke-dasharray:6 4;stroke-width:1.5;transition:opacity .8s ease .4s}.process-block .flow-arrow{position:absolute;z-index:3;opacity:0;transition:opacity .6s ease .6s,transform .6s ease .6s;transform:scale(.6)}.process-block .flow-arrow.visible{opacity:1;transform:scale(1)}@keyframes pulse-ring{0%{transform:scale(1);opacity:.5}to{transform:scale(1.8);opacity:0}}.process-block .pulse-ring{position:absolute;width:5%;aspect-ratio:1;border-radius:50%;border:2px solid var(--accent-green);pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease}.process-block .pulse-ring.active{opacity:1;animation:pulse-ring 2s ease-out infinite}.process-block .status-badge{position:absolute;font-size:8px;padding:2px 6px;border-radius:20px;letter-spacing:.5px;opacity:0;transition:opacity .5s ease .8s;z-index:4;white-space:nowrap}@media(min-width:48rem){.process-block .status-badge{font-size:9px;padding:3px 8px}}.process-block .status-badge.visible{opacity:1}.process-block .group-label{position:absolute;font-size:10px;text-transform:uppercase;opacity:0;transition:opacity .6s ease .5s,transform .6s ease .5s;transform:translateY(10px);z-index:3;pointer-events:none}@media(min-width:48rem){.process-block .group-label{font-size:12px}}.process-block .group-label.visible{opacity:.85;transform:translateY(0)}.process-block .group-box{position:absolute;border-width:1.5px;border-style:dashed;border-radius:20px;opacity:0;transition:opacity .6s ease .3s,all 1s cubic-bezier(.22,1,.36,1);z-index:1;pointer-events:none}.process-block .group-box.visible{opacity:1}.process-block .progress-track{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:75%;max-width:300px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;z-index:5;opacity:0;transition:opacity .6s ease}@media(min-width:48rem){.process-block .progress-track{bottom:25px}}.process-block .progress-track.visible{opacity:1}.process-block .progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-green),color-mix(in srgb,var(--accent-green) 55%,white));border-radius:2px;transition:width 2s cubic-bezier(.22,1,.36,1) .8s}.process-block .progress-label{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity .6s ease;z-index:5;color:var(--accent-green)}@media(min-width:48rem){.process-block .progress-label{font-size:9px}}.process-block .progress-label.visible{opacity:.7}