.mg-flow,.mg-flow *{box-sizing:border-box}
.mg-flow__list>li{margin:0;padding:0}
/* AMG Automatyzacje – schemat przepływu danych [mg_przeplyw] */
.mg-flow{margin:2.5rem 0 3.5rem}
.mg-flow__list{display:flex;align-items:flex-start;justify-content:center;list-style:none;margin:0;padding:2.25rem 0 0}
.mg-flow__n{width:150px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0}
.mg-flow__card{position:relative;width:84px;height:84px;border-radius:22px;background:linear-gradient(160deg,#16305A,#0F2343);border:1px solid #2E4C7A;box-shadow:0 0 0 6px rgba(43,100,160,.08),0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:box-shadow .5s ease,border-color .5s ease}
.mg-flow__card svg{width:38px;height:38px;fill:none;stroke:#8DBBFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mg-flow__port{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#0A1628;border:1.5px solid #4E78B0}
.mg-flow__port--l{left:-5px}.mg-flow__port--r{right:-5px}
.mg-flow__n:first-child .mg-flow__port--l,.mg-flow__n:last-child .mg-flow__port--r{display:none}
.mg-flow__t{display:block;margin-top:16px;font-weight:500;font-size:.95rem;line-height:1.3;color:var(--wp--preset--color--contrast)}
.mg-flow__s{display:block;margin-top:4px;color:var(--wp--preset--color--accent-3);font-size:.82rem;line-height:1.35}
.mg-flow__n--h .mg-flow__card{border-color:#E8A24A;background:linear-gradient(160deg,#2A2A3A,#1A1E30);box-shadow:0 0 0 6px rgba(232,162,74,.12),0 0 28px rgba(232,162,74,.3)}
.mg-flow__n--h svg{stroke:#FFC27A}.mg-flow__n--h .mg-flow__port{border-color:#E8A24A}
.mg-flow__chip{position:absolute;top:-31px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.7rem;letter-spacing:.04em;color:#FFC27A;background:rgba(232,162,74,.12);border:1px solid rgba(232,162,74,.4);padding:3px 8px;border-radius:20px;transition:opacity .4s ease}
.mg-flow__ok{position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:#4CC38A;box-shadow:0 0 12px rgba(76,195,138,.6);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s ease}
.mg-flow__ok svg{width:14px;height:14px;stroke:#0F2A2A;stroke-width:2.5}
.mg-flow__ln{position:relative;flex:0 0 70px;width:70px;height:84px;margin:0}
.mg-flow__ln i{position:absolute;top:41px;left:0;right:0;border-top:1.5px solid #3A5F94}
.mg-flow__ln--wait i{border-top-style:dashed;border-top-color:#6A6E80}
.mg-flow__dot{position:absolute;top:36px;left:28px;width:10px;height:10px;border-radius:50%;background:#BFE0FF;box-shadow:0 0 10px 3px rgba(141,187,255,.8)}
.mg-flow__legend{margin:2.5rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:center;color:var(--wp--preset--color--accent-3);font-size:.85rem}
.mg-flow__legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px;background:#BFE0FF;box-shadow:0 0 8px 2px rgba(141,187,255,.7)}
.mg-flow__legend span.o:before{background:#E8A24A;box-shadow:0 0 8px 2px rgba(232,162,74,.6)}
.mg-flow__cap{text-align:center;color:var(--wp--preset--color--accent-3);font-size:.85rem;margin:.75rem 0 0}
/* animacja */
.mg-flow.is-anim .mg-flow__dot{opacity:0}
.mg-flow.is-anim .mg-flow__ln.go .mg-flow__dot{animation:mg-flow-x 1.035s ease-in-out forwards}
@keyframes mg-flow-x{0%{left:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:64px;opacity:0}}
.mg-flow.is-anim .mg-flow__n.on .mg-flow__card{border-color:#6FA2E6;box-shadow:0 0 0 6px rgba(43,100,160,.18),0 0 26px rgba(141,187,255,.35)}
.mg-flow.is-anim .mg-flow__n--h.wait .mg-flow__card{animation:mg-flow-pulse 1.265s ease-in-out infinite}
@keyframes mg-flow-pulse{0%,100%{box-shadow:0 0 0 6px rgba(232,162,74,.12),0 0 20px rgba(232,162,74,.25)}50%{box-shadow:0 0 0 10px rgba(232,162,74,.2),0 0 40px rgba(232,162,74,.6)}}
.mg-flow.is-anim .mg-flow__n--h.ok .mg-flow__ok{opacity:1;transform:scale(1)}
.mg-flow.is-anim .mg-flow__n--h.ok .mg-flow__chip{opacity:.35}
/* mg-flow-done: ostatni krok świeci na zielono */
.mg-flow.is-anim .mg-flow__n:last-child.on .mg-flow__card{border-color:#4CC38A;background:linear-gradient(160deg,#143A35,#0F2A2A);box-shadow:0 0 0 6px rgba(76,195,138,.16),0 0 34px rgba(76,195,138,.5)}
.mg-flow.is-anim .mg-flow__n:last-child.on svg{stroke:#8FE8BD}
.mg-flow.is-anim .mg-flow__n:last-child.on .mg-flow__port{border-color:#4CC38A}
.mg-flow__n:last-child .mg-flow__card,.mg-flow__n:last-child svg{transition:box-shadow .5s ease,border-color .5s ease,background .5s ease,stroke .5s ease}
/* mg-flow-start: pierwszy węzeł rozbłyska prawie na biało na początku */
.mg-flow__card svg{position:relative;z-index:1}
.mg-flow__n:first-child .mg-flow__card::after{content:"";position:absolute;inset:-1px;border-radius:22px;background:radial-gradient(circle at 50% 45%,#D9E9FF 0%,#B7D3F8 75%);opacity:0;pointer-events:none}
.mg-flow.is-anim .mg-flow__n:first-child.on .mg-flow__card::after{animation:mg-flow-start 2.4s ease-out forwards}
.mg-flow.is-anim .mg-flow__n:first-child.on .mg-flow__card{animation:mg-flow-startglow 2.4s ease-out forwards}
.mg-flow.is-anim .mg-flow__n:first-child.on svg{animation:mg-flow-starticon 2.4s ease-out forwards}
@keyframes mg-flow-start{0%{opacity:0}18%{opacity:.8}50%{opacity:.8}100%{opacity:0}}
@keyframes mg-flow-startglow{0%,50%{border-color:#CFE2FF;box-shadow:0 0 0 7px rgba(170,205,250,.14),0 0 42px rgba(160,200,250,.7)}100%{border-color:#6FA2E6;box-shadow:0 0 0 6px rgba(43,100,160,.18),0 0 26px rgba(141,187,255,.35)}}
@keyframes mg-flow-starticon{0%{stroke:#8DBBFF}18%,50%{stroke:#1F4E80}100%{stroke:#8DBBFF}}
/* mg-flow-orbit: kulka obiega węzeł AI */
.mg-flow__orbit{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;opacity:0;z-index:2}
.mg-flow__card svg.mg-flow__orbit{position:absolute;left:-1px;top:-1px;z-index:2;width:calc(100% + 2px);height:calc(100% + 2px)}
.mg-flow__orbit rect{fill:none;stroke:#E6F1FF;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:3 97;stroke-dashoffset:-87.5}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__orbit{animation:mg-flow-orbit-o 1.7s linear forwards;filter:drop-shadow(0 0 4px rgba(141,187,255,.95))}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__orbit rect{animation:mg-flow-orbit-h 1.7s cubic-bezier(.45,.05,.55,.95) forwards}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__card svg:not(.mg-flow__orbit){animation:mg-flow-think 1.7s ease-in-out}
@keyframes mg-flow-orbit-o{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes mg-flow-orbit-h{0%{stroke-dashoffset:-87.5}100%{stroke-dashoffset:-187.5}}
@keyframes mg-flow-orbit-v{0%{stroke-dashoffset:-12.5}100%{stroke-dashoffset:-112.5}}
@keyframes mg-flow-think{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* mg-flow-ai-glow: węzeł AI rozjaśnia się w czasie obrotu (50% rozbłysku startu) */
.mg-flow__n--ai .mg-flow__card::after{content:"";position:absolute;inset:-1px;border-radius:22px;background:radial-gradient(circle at 50% 45%,#D9E9FF 0%,#B7D3F8 75%);opacity:0;pointer-events:none}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__card::after{animation:mg-flow-ai-glow 1.7s ease-in-out forwards}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__card{animation:mg-flow-ai-shadow 1.7s ease-in-out forwards}
@keyframes mg-flow-ai-glow{0%{opacity:0}20%{opacity:.4}75%{opacity:.4}100%{opacity:0}}
@keyframes mg-flow-ai-shadow{0%,100%{border-color:#6FA2E6;box-shadow:0 0 0 6px rgba(43,100,160,.18),0 0 26px rgba(141,187,255,.35)}20%,75%{border-color:#A9CBF5;box-shadow:0 0 0 6px rgba(170,205,250,.1),0 0 34px rgba(160,200,250,.5)}}
/* telefon: pionowo */
@media (max-width:760px){
.mg-flow{margin:1.5rem 0 2.5rem}
.mg-flow__list{flex-direction:column;align-items:stretch;padding-top:0;max-width:330px;margin:0 auto}
.mg-flow__n{width:auto;max-width:none;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;text-align:left}
.mg-flow__card{grid-row:1 / span 2;width:56px;height:56px;border-radius:15px;box-shadow:0 0 0 4px rgba(43,100,160,.08),0 6px 18px rgba(0,0,0,.3)}
.mg-flow__n:first-child .mg-flow__card::after,.mg-flow__n--ai .mg-flow__card::after{border-radius:15px}
.mg-flow__card svg{width:26px;height:26px}
.mg-flow__t{margin-top:0;align-self:end;font-size:.92rem}
.mg-flow__s{margin-top:2px;align-self:start;font-size:.8rem}
.mg-flow__chip{display:none}
.mg-flow__ok{width:20px;height:20px;right:-7px;top:-7px}
.mg-flow__ok svg{width:12px;height:12px}
.mg-flow__ln{flex:0 0 36px;width:56px;height:36px}
.mg-flow__ln i{top:0;bottom:0;left:50%;right:auto;width:0;transform:translateX(-50%);border-top:0;border-left:1.5px solid #3A5F94}
.mg-flow__ln--wait i{border-left-style:dashed;border-left-color:#6A6E80}
.mg-flow__dot{top:13px;left:50%;width:9px;height:9px;margin-left:-4.5px}
.mg-flow__port--l{left:50%;top:-5px;margin:0 0 0 -4.5px}
.mg-flow__port--r{right:auto;left:50%;top:auto;bottom:-5px;margin:0 0 0 -4.5px}
.mg-flow.is-anim .mg-flow__ln.go .mg-flow__dot{animation-name:mg-flow-y}
@keyframes mg-flow-y{0%{top:-6px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:33px;opacity:0}}
.mg-flow.is-anim .mg-flow__n--ai.spin .mg-flow__orbit rect{animation-name:mg-flow-orbit-v}
.mg-flow__orbit rect{stroke-dashoffset:-12.5}
.mg-flow__legend{margin-top:1.5rem;flex-direction:column;align-items:center;gap:.4rem}
.mg-flow__cap{margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){.mg-flow.is-anim .mg-flow__dot{opacity:1;animation:none}}