/* pb-anim.css — PENTA homepage animation styles ONLY (brain + data-flow spark + kinetic tiles).
   Scoped to .pb-* / .pb-spark / .bento tile hover. Contains NO nav rules (nav is a separate change).
   Additive: does not restyle any existing site class. */

/* Meet The Brain canvas (dark device panel so it pops on the light section) */
.pb-visual{width:100%}
.pb-wrap{position:relative;aspect-ratio:1/.9;width:100%;max-width:540px;margin-inline:auto;
  background:radial-gradient(120% 120% at 72% 8%,#0a4470,#04263f 62%,#031f34);
  border-radius:26px;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 44px 100px -44px rgba(9,35,60,.55),inset 0 1px 0 rgba(255,255,255,.05);padding:6px}
.pb-canvas{width:100%;height:100%;display:block;border-radius:22px}
.pb-badge{position:absolute;display:inline-flex;align-items:center;gap:9px;background:rgba(3,31,52,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 15px;font-family:"Open Sans",sans-serif;font-weight:700;font-size:13px;color:#fff;box-shadow:0 18px 44px -22px rgba(0,0,0,.6);transition:opacity .5s,transform .5s;z-index:2}
.pb-braining{top:4%;left:0}
.pb-ready{bottom:6%;right:0;border-color:rgba(255,211,107,.55);opacity:0;transform:translateY(8px)}
.pb-ready.show{opacity:1;transform:none}
.pb-braining.hide{opacity:0}
.pb-chk{width:18px;height:18px;border-radius:50%;background:#ffd36b;color:#053353;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.pb-dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#9fd0ff;margin-left:3px;animation:pbblink 1.3s infinite}
.pb-dots i:nth-child(2){animation-delay:.18s}.pb-dots i:nth-child(3){animation-delay:.36s}
@keyframes pbblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.pb-meter{max-width:360px;margin:14px auto 0}
.pb-row{display:flex;justify-content:space-between;font-size:11px;color:rgba(81,96,116,.9);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.pb-bar{height:6px;border-radius:6px;background:rgba(59,120,206,.14);overflow:hidden}
.pb-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b78ce,#3eae54,#ffd36b);border-radius:6px;transition:width .2s linear}
@media (prefers-reduced-motion:reduce){.pb-dots i{animation:none}}

/* products data-flow spark */
.pb-spark-wrap{margin-top:16px}
.pb-spark{width:100%;height:54px;display:block}
.pb-spark-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#c9dcf0;font-weight:600;letter-spacing:.03em}
.pb-spark-labels .fin{color:#8fe0a3}

/* (kinetic product-tile hover intentionally omitted: the live .tile already has its own
   hover lift + ::after shadow; layering a second one caused a double-translate + shadow
   collision. The data-flow elevation is the animated spark above, not the tiles.) */