/* ---- hero ERP sync scene ---- */
.scene-sync{max-width:430px}
.pc-erp{left:0;top:56px;width:44%;padding:15px;z-index:2}
.erp-h,.chain-h,.post-h,.source-h,.map-h,.accepted-h,.bill-h,.erpdoc-h,.qadata-h,.stock-h,.dash-h,.log-h{
  font-size:12px;font-weight:700;color:var(--c-ink);margin-bottom:12px}
.erp-row,.source-row,.accepted-row,.bill-row,.qadata-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--c-line);font-size:11px;color:var(--c-muted)}
.erp-row b,.source-row b,.accepted-row b,.bill-row b,.qadata-row b{color:var(--green);font-variant-numeric:tabular-nums}
.sync-path{position:absolute;left:44%;top:122px;width:12%;height:2px;z-index:1}
.sync-path span,.pull-line span,.post-line span,.qa-sync-line span{display:block;height:2px;background:repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 12px);transform-origin:left;animation:drawline 4.6s ease-in-out infinite}
.pc-chain{right:0;top:42px;width:48%;padding:15px;z-index:2}
.chain-step{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--c-line);font-size:11px;color:var(--c-ink)}
.chain-step span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;background:#EAEDE8;color:var(--c-muted);font-size:9px;font-weight:800}
.chain-step.done span{background:var(--green);color:#fff}.chain-step.active span{border:1px solid var(--green);background:#fff;color:var(--green);box-shadow:0 0 0 5px rgba(16,128,92,.1)}
.pc-post{right:0;top:64px;width:44%;padding:15px;z-index:2;animation:float 7s ease-in-out infinite .4s}
.post-total{font-size:24px;font-weight:800;color:var(--c-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.post-sub{font-size:10.5px;color:var(--c-muted);margin-top:2px}
.post-badge{display:inline-flex;margin-top:12px;border-radius:999px;background:var(--g-soft);color:var(--green);font-size:10px;font-weight:800;padding:6px 10px}
.sync-core{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--g-soft);box-shadow:0 8px 22px rgba(16,128,92,.3)}
.sync-core svg{width:18px;height:18px;color:var(--green)}
.sync-lbl{position:absolute;left:50%;top:calc(44% + 32px);transform:translateX(-50%);z-index:6;white-space:nowrap;
  font-size:9.5px;font-weight:700;color:var(--green-deep);background:rgba(244,243,238,.92);border-radius:6px;padding:2px 7px}
.sync-ring{position:absolute;left:50%;top:44%;width:46px;height:46px;border-radius:50%;border:2px solid var(--green);z-index:5;opacity:0;transform:translate(-50%,-50%);animation:syncring 3.4s ease-out infinite}
.sync-ring.r2{animation-delay:1.7s}

/* ---- PO pull scene ---- */
.pc-source{left:0;top:48px;width:46%;padding:15px;z-index:2}
.pull-line{position:absolute;left:44%;top:158px;width:13%;height:2px;z-index:1}
.pc-map{right:0;top:36px;width:50%;padding:15px;z-index:2;animation:float 7s ease-in-out infinite .35s}
.map-row,.erpdoc-row,.stock-row,.log-row{font-size:11px;color:var(--c-ink);padding:9px 0;border-top:1px solid var(--c-line)}
.map-row::before,.erpdoc-row::before,.stock-row::before,.log-row::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px}
.map-row.ok,.erpdoc-row.ok,.stock-row.ok,.log-row.ok{color:var(--green)}
.stock-row.warn,.log-row.warn{color:#C84632}.stock-row.warn::before,.log-row.warn::before{background:#C84632}

/* ---- validation flow ---- */
.flow-track{position:absolute;left:6px;right:6px;top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;z-index:2}
.flow-track::before{content:"";position:absolute;left:12%;right:12%;top:18px;height:2px;background:rgba(21,36,29,.12);z-index:-1}
.flow-track::after{content:"";position:absolute;left:12%;top:18px;height:2px;width:52%;background:var(--green);z-index:-1;animation:flowfill 5s ease-in-out infinite}
.flow-node{text-align:center;color:var(--c-muted)}
.flow-node span{width:36px;height:36px;border-radius:50%;margin:0 auto 8px;background:#fff;border:1px solid var(--c-line);display:grid;place-items:center;font-size:11px;font-weight:800}
.flow-node.done span{background:var(--green);border-color:var(--green);color:#fff}.flow-node.active span{border-color:var(--green);color:var(--green);box-shadow:0 0 0 5px rgba(16,128,92,.1)}
.flow-node b{display:block;font-size:10.5px;color:var(--c-ink);line-height:1.15}.flow-node em{display:block;font-style:normal;font-size:9px;line-height:1.2;margin-top:3px}
.pc-accepted{left:50%;bottom:20px;width:66%;transform:translateX(-50%);padding:15px;z-index:4;box-shadow:0 18px 44px rgba(14,74,56,.2)}
.accepted-row.ok b{color:var(--green)}.accepted-row.warn b{color:#C84632}

/* ---- bill posting ---- */
.pc-bill{left:0;top:24px;width:48%;padding:15px;z-index:2}
.bill-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;border-radius:9px;background:var(--g-soft);padding:9px 10px;font-size:11px;font-weight:700;color:var(--green)}
.bill-total strong{font-size:15px;font-variant-numeric:tabular-nums}
.post-line{position:absolute;left:47%;top:156px;width:11%;height:2px;z-index:1}
.pc-erpdoc{right:0;top:62px;width:48%;padding:15px;z-index:2;animation:float 7s ease-in-out infinite .3s}

/* ---- quality sync ---- */
.pc-qadata{left:0;top:48px;width:44%;padding:15px;z-index:2}
.qadata-row.ok b{color:var(--green)}.qadata-row.warn b{color:#C84632}
.qa-sync-line{position:absolute;left:43%;top:156px;width:14%;height:2px;z-index:1}
.pc-stock{right:0;top:34px;width:50%;padding:15px;z-index:2;animation:float 7.2s ease-in-out infinite .35s}

/* ---- reporting ---- */
.pc-dashboard{left:0;top:30px;width:52%;padding:15px;z-index:2}
.metric-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--c-line);font-size:11px;color:var(--c-muted)}
.metric-row b{font-size:15px;color:var(--c-ink);font-variant-numeric:tabular-nums}
.mini-bars{display:flex;align-items:end;gap:7px;height:56px;margin-top:14px;border-top:1px solid var(--c-line);padding-top:12px}
.mini-bars i{flex:1;border-radius:5px 5px 0 0;background:var(--green);opacity:.25;animation:barlift 4.8s ease-in-out infinite}
.mini-bars i:nth-child(1){height:28px}.mini-bars i:nth-child(2){height:42px;animation-delay:.25s}.mini-bars i:nth-child(3){height:22px;animation-delay:.5s}.mini-bars i:nth-child(4){height:48px;animation-delay:.75s}
.pc-sync-log{right:0;top:92px;width:48%;padding:15px;z-index:3;animation:float 7s ease-in-out infinite .35s}

@keyframes drawline{0%,12%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
@keyframes syncring{0%{transform:translate(-50%,-50%) scale(.5);opacity:.55}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}
@keyframes flowfill{0%,12%{width:0}50%,100%{width:52%}}
@keyframes barlift{0%,100%{opacity:.25;transform:scaleY(.78)}50%{opacity:.75;transform:scaleY(1)}}

@media (max-width:620px){
  .pc-erp{width:48%}
  .pc-chain{width:51%}
  .pc-post{right:0;width:48%}
  .pc-accepted{width:78%}
  .flow-track{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .sync-path span,.pull-line span,.post-line span,.qa-sync-line span,.pc-post,.sync-ring,.pc-map,.flow-track::after,
  .pc-erpdoc,.pc-stock,.mini-bars i,.pc-sync-log{animation:none!important}
  .sync-ring{opacity:0!important}
}