/* ============================================================
   CEE hero hub animation — a living network of professionals
   and programs orbiting the children they keep in class.
   Drop [cee_hub] beside the hero copy. Canvas-driven.
   ============================================================ */
.cee-hub {
  --cee-blue: #6ca5d5;
  --cee-deep: #3d6f9e;
  --cee-ink: #1d3043;
  --cee-sky: #eef4fa;
  --cee-gold: #e8a13d;
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  isolation: isolate;
}
.cee-hub canvas { display: block; width: 100%; height: 100%; }

/* Floating stat chips that count up */
.cee-hub-chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(108,165,213,.32);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  box-shadow: 0 10px 24px -12px rgba(29,48,67,.45);
  opacity: 0; transform: translateY(8px);
  animation: cee-hub-chip-in .7s cubic-bezier(.2,.8,.2,1) forwards;
  white-space: nowrap;
}
.cee-hub-chip i {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cee-blue), var(--cee-deep));
  color: #fff; font-style: normal; font-size: 14px; font-weight: 800;
}
.cee-hub-chip b { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--cee-deep); line-height: 1; }
.cee-hub-chip span { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5e7b95; }
.cee-hub-chip.is-gold i { background: linear-gradient(135deg, #f3b14e, var(--cee-gold)); }
.cee-hub-chip.is-gold b { color: #b9781f; }

.cee-hub-chip--1 { top: 8%;  left: 0;   animation-delay: .5s; }
.cee-hub-chip--2 { top: 44%; right: -2%; animation-delay: .9s; }
.cee-hub-chip--3 { bottom: 9%; left: 6%; animation-delay: 1.3s; }

@keyframes cee-hub-chip-in { to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .cee-hub { max-width: 460px; }
  .cee-hub-chip b { font-size: 16px; }
  .cee-hub-chip span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cee-hub-chip { animation: none; opacity: 1; transform: none; }
}