/* ============================================================================
 * Education / EdTech landing page.
 *
 * Extends the existing design system rather than introducing a new one:
 * navy / red / yellow tokens only, existing radii, shadows, spacing scale
 * and container widths. Components here are the ones the page needs that
 * did not already exist (metric bar, agency comparison, horizontal stage
 * flow, funnel, dashboard mock, sticky mobile CTA).
 * ========================================================================== */

/* ── Trust metric bar ───────────────────────────────────────────────────── */

.wb-metrics {
  display: grid;
  gap: var(--wb-space-4);
  /* Capped at 18rem and centred so the row still looks deliberate when only
   * one or two metrics are verified — an uncapped 1fr would stretch a single
   * card across the full container. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 18rem));
  justify-content: center;
}
.wb-metric {
  position: relative;
  padding: var(--wb-space-6) var(--wb-space-5);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-xl);
  text-align: center;
  overflow: hidden;
}
.wb-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wb-gradient-brand);
}
.wb-metric__value {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: var(--wb-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 15px rgba(222, 36, 54, 0.4));
}
.wb-metric__label {
  display: block;
  margin-top: var(--wb-space-2);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-metric {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.wb-section--ink .wb-metric__value { 
  color: var(--wb-yellow-400);
  text-shadow: 0 0 15px rgba(251, 191, 19, 0.3);
}
.wb-section--ink .wb-metric__label { color: rgba(255, 255, 255, 0.7); }

/* ── Agency comparison (traditional vs ecosystem) ───────────────────────── */

.wb-compare {
  display: grid;
  gap: var(--wb-space-5);
}
@media (min-width: 900px) {
  .wb-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; }
}
.wb-compare__col {
  display: flex;
  flex-direction: column;
  padding: var(--wb-space-6);
  border-radius: var(--wb-radius-xl);
  border: var(--wb-border-width) solid var(--wb-color-border);
  background: var(--wb-color-bg-soft);
}
.wb-compare__col--ours {
  background: var(--wb-gradient-ink);
  border-color: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wb-compare__col--ours::before {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 36, 54, 0.3), transparent 68%);
  pointer-events: none;
}
.wb-compare__tag {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  margin-bottom: var(--wb-space-4);
  font-size: 0.7rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--wb-radius-full);
  background: var(--wb-color-bg-muted);
  color: var(--wb-color-text-muted);
}
.wb-compare__col--ours .wb-compare__tag {
  background: var(--wb-yellow-400);
  color: var(--wb-navy-900);
}
.wb-compare__title {
  margin: 0 0 var(--wb-space-5);
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--wb-color-ink);
}
.wb-compare__col--ours .wb-compare__title { color: #fff; }

/* Chain of steps rendered as wrapping chips with arrows between them */
.wb-chain {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-chain__step {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-ink);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
}
.wb-chain__step + .wb-chain__step::before {
  content: "\2192";
  margin: 0 var(--wb-space-2) 0 calc(var(--wb-space-2) * -1 - 0.05rem);
  color: var(--wb-color-text-soft);
  font-weight: var(--wb-fw-bold);
}
.wb-compare__col--ours .wb-chain__step {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.wb-compare__col--ours .wb-chain__step + .wb-chain__step::before { color: var(--wb-yellow-300); }
.wb-chain__step--end {
  background: var(--wb-color-highlight);
  border-color: var(--wb-yellow-500);
  color: var(--wb-navy-900);
  font-weight: var(--wb-fw-semibold);
}
.wb-compare__col--ours .wb-chain__step--end {
  background: var(--wb-color-highlight);
  border-color: var(--wb-yellow-500);
  color: var(--wb-navy-900);
}

/* ── Horizontal stage flow (the multichannel ecosystem infographic) ─────── */

.wb-stages {
  display: grid;
  gap: var(--wb-space-4);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wb-stage;
}
.wb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  padding: var(--wb-space-5);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
}
.wb-stage::after {
  counter-increment: wb-stage;
  content: counter(wb-stage, decimal-leading-zero);
  position: absolute;
  top: var(--wb-space-4);
  right: var(--wb-space-4);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.06em;
  color: var(--wb-color-border-strong);
}
.wb-stage__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-brand-soft);
  color: var(--wb-color-brand);
}
.wb-stage__icon svg { width: 1.15rem; height: 1.15rem; }
.wb-stage__title {
  margin: 0;
  font-size: var(--wb-text-base);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.01em;
  color: var(--wb-color-ink);
}
.wb-stage__meta {
  margin: 0;
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-normal);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-stage {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
.wb-section--ink .wb-stage__title { color: #fff; }
.wb-section--ink .wb-stage__meta { color: rgba(255, 255, 255, 0.68); }
.wb-section--ink .wb-stage__icon { background: rgba(255, 255, 255, 0.1); color: var(--wb-yellow-300); }
.wb-section--ink .wb-stage::after { color: rgba(255, 255, 255, 0.25); }

/* ── Platform cards ─────────────────────────────────────────────────────── */

.wb-platform {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: var(--wb-border-width) solid var(--wb-color-border);
}
.wb-platform:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 860px) {
  .wb-platform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.wb-platform__head {
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
  margin-bottom: var(--wb-space-4);
}
.wb-platform__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-brand-soft);
  color: var(--wb-color-brand);
}
.wb-platform__icon svg { width: 1.35rem; height: 1.35rem; }
.wb-platform__name {
  margin: 0;
  font-size: var(--wb-h3);
  font-weight: var(--wb-fw-bold);
  letter-spacing: -0.025em;
  color: var(--wb-color-ink);
}
.wb-platform__intro {
  margin: 0;
  font-size: var(--wb-text-lg);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}

/* ── Funnel ─────────────────────────────────────────────────────────────── */

.wb-funnel {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wb-space-3);
}
.wb-funnel__step {
  position: relative;
  padding: var(--wb-space-5) var(--wb-space-6);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-surface);
  text-align: center;
  /* Each step narrows significantly, reading as a clear funnel */
  width: calc(100% - (var(--wb-funnel-i, 0) * 10%));
  margin-inline: auto;
}
.wb-funnel__title {
  display: block;
  font-size: var(--wb-text-base);
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-ink);
}
.wb-funnel__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text-muted);
}
.wb-funnel__step--end {
  background: var(--wb-color-highlight-soft);
  border-color: var(--wb-yellow-300);
}
@media (max-width: 560px) {
  .wb-funnel__step { width: 100%; }
}

/* ── Dashboard mock ─────────────────────────────────────────────────────── */

.wb-dash {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--wb-gradient-ink);
  border-radius: var(--wb-radius-2xl);
  border: var(--wb-border-width) solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--wb-shadow-xl);
}
.wb-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-4);
  margin-bottom: var(--wb-space-5);
  padding-bottom: var(--wb-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wb-dash__title {
  margin: 0;
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.wb-dash__note {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--wb-radius-full);
  background: rgba(251, 191, 19, 0.16);
  color: var(--wb-yellow-300);
  border: 1px solid rgba(251, 191, 19, 0.32);
}
.wb-dash__grid {
  display: grid;
  gap: var(--wb-space-3);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: 0 0 var(--wb-space-5);
  padding: 0;
  list-style: none;
}
.wb-dash__tile {
  padding: var(--wb-space-4);
  border-radius: var(--wb-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.wb-dash__tile-label {
  display: block;
  font-size: var(--wb-text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* Value bars stand in for numbers — no invented figures are displayed */
.wb-dash__bar {
  display: block;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: var(--wb-radius-full);
  background: var(--wb-gradient-brand);
  opacity: 0.85;
}
.wb-dash__channels {
  display: grid;
  gap: var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-dash__channel {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  gap: var(--wb-space-4);
  font-size: var(--wb-text-sm);
  color: rgba(255, 255, 255, 0.72);
}
.wb-dash__track {
  position: relative;
  height: 8px;
  border-radius: var(--wb-radius-full);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.wb-dash__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--wb-gradient-brand);
}
@media (max-width: 560px) {
  .wb-dash__channel { grid-template-columns: 5.5rem 1fr; }
}

/* ── Illustrative / disclaimer note ─────────────────────────────────────── */

.wb-note {
  display: flex;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4) var(--wb-space-5);
  border-radius: var(--wb-radius-lg);
  border: var(--wb-border-width) dashed var(--wb-color-border-strong);
  background: var(--wb-color-bg-soft);
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-normal);
  color: var(--wb-color-text-muted);
}
.wb-note strong { color: var(--wb-color-ink); font-weight: var(--wb-fw-semibold); }
.wb-section--ink .wb-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
}
.wb-section--ink .wb-note strong { color: #fff; }

/* ── Sticky mobile CTA ──────────────────────────────────────────────────── */

.wb-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--wb-z-sticky);
  display: none;
  gap: var(--wb-space-3);
  padding: var(--wb-space-3) var(--wb-space-4);
  padding-bottom: calc(var(--wb-space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 20, 38, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wb-sticky-cta .wb-btn { flex: 1 1 0; white-space: nowrap; }
@media (max-width: 860px) {
  .wb-sticky-cta { display: flex; }
  /* Keep the footer clear of the fixed bar */
  body.wb-has-sticky-cta .wb-site-footer { padding-bottom: 5.5rem; }
}

/* ── Lead form panel ────────────────────────────────────────────────────── */

.wb-lead-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-2xl);
  box-shadow: var(--wb-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .wb-metric, .wb-stage, .wb-funnel__step { transition: none; }
}

/* ── AEO answer block ───────────────────────────────────────────────────────
 * A short, factual definition placed directly under a section heading so
 * answer engines have something clean to lift. Visually quiet on purpose —
 * it should read as a definition, not as another marketing card.
 * ------------------------------------------------------------------------ */

.wb-answer {
  width: 100%;
  margin: 0 0 var(--wb-space-7);
  padding: var(--wb-space-6);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-color-surface);
  box-shadow: var(--wb-shadow-sm);
}
.wb-answer--left { margin-inline: 0; }
.wb-answer__q {
  margin: 0 0 var(--wb-space-3);
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-bold);
  letter-spacing: -0.01em;
  color: var(--wb-color-brand);
}
.wb-answer__a {
  margin: 0;
  font-size: var(--wb-text-base);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-answer {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}
.wb-section--ink .wb-answer__q { color: #fff; }
.wb-section--ink .wb-answer__a { color: rgba(255, 255, 255, 0.72); }

/* ── Metric awaiting a verified figure ─────────────────────────────────────
 * Rendered dashed and muted so a placeholder can never be mistaken for a
 * published statistic. Replace by defining the metric's constant.
 * ------------------------------------------------------------------------ */

.wb-metric--pending {
  border-style: dashed;
  border-color: var(--wb-color-border-strong);
  background: transparent;
}
.wb-metric--pending::before { opacity: 0.35; }
.wb-metric--pending .wb-metric__value {
  color: var(--wb-color-text-soft);
  font-weight: var(--wb-fw-bold);
}
.wb-section--ink .wb-metric--pending .wb-metric__value { color: rgba(255, 255, 255, 0.55); }

/* Admin-only hint naming the constant to define */
.wb-metric__hint {
  display: block;
  margin-top: var(--wb-space-2);
  font-size: 0.68rem;
  font-family: var(--wb-font-mono);
  letter-spacing: 0.02em;
  color: var(--wb-color-accent);
  word-break: break-all;
}

/* ── Stage flow connectors ─────────────────────────────────────────────────
 * Turns the stage grid into something that reads as a flow rather than a
 * plain card grid. Hidden on the last item and on single-column layouts.
 * ------------------------------------------------------------------------ */

@media (min-width: 780px) {
  .wb-stage { position: relative; }
  .wb-stage:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--wb-space-4) * -1);
    width: var(--wb-space-4);
    height: 2px;
    background: linear-gradient(90deg, var(--wb-color-border-strong), transparent);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .wb-section--ink .wb-stage:not(:last-child)::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
  }
}

/* ── Internal links row ─────────────────────────────────────────────────── */

.wb-links {
  display: grid;
  gap: var(--wb-space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-links__item {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4) var(--wb-space-5);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-ink);
  text-decoration: none;
  transition: border-color var(--wb-duration-base) var(--wb-ease),
              transform var(--wb-duration-base) var(--wb-ease);
}
.wb-links__item:hover,
.wb-links__item:focus-visible {
  border-color: var(--wb-color-accent);
  transform: translateY(-2px);
  color: var(--wb-color-ink);
}
.wb-links__item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--wb-color-brand); }
.wb-links__item::after {
  content: "\2192";
  margin-left: auto;
  color: var(--wb-color-text-soft);
}

/* ── 360° Ecosystem Orbit ───────────────────────────────────────────────── */

.wb-orbit {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: var(--wb-space-8) auto;
  display: grid;
  place-items: center;
}
.wb-orbit__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: var(--wb-gradient-ink);
  box-shadow: 0 0 40px rgba(8, 20, 38, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
  color: #fff;
}
.wb-orbit__center-title {
  font-size: var(--wb-text-lg);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.wb-orbit__center-subtitle {
  font-size: 0.7rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wb-yellow-400);
  margin-top: 0.3rem;
}
.wb-orbit__track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--wb-color-border-strong);
  animation: wbOrbitRotate 40s linear infinite;
}
.wb-orbit:hover .wb-orbit__track {
  animation-play-state: paused;
}
.wb-orbit__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  background: var(--wb-color-surface);
  border: 1px solid var(--wb-color-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--wb-shadow-md);
  animation: wbOrbitRotateNode 40s linear infinite;
  color: var(--wb-color-brand);
  cursor: pointer;
  z-index: 10;
}
.wb-orbit:hover .wb-orbit__node {
  animation-play-state: paused;
}
.wb-orbit__node:hover {
  z-index: 20;
  border-color: var(--wb-color-brand);
}
.wb-orbit__node svg {
  width: 2rem;
  height: 2rem;
}

@keyframes wbOrbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wbOrbitCounterRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Position nodes around the circle. Variable --wb-orbit-i is 0-indexed */
.wb-orbit__node {
  transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i))) translateX(250px) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i)));
}
@media (max-width: 540px) {
  .wb-orbit__node {
    transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i))) translateX(42vw) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i)));
  }
}
@keyframes wbOrbitRotateNode {
  from { transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i) + 0deg)) translateX(250px) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i) - 0deg)); }
  to { transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i) + 360deg)) translateX(250px) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i) - 360deg)); }
}
@media (max-width: 540px) {
  @keyframes wbOrbitRotateNode {
    from { transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i) + 0deg)) translateX(42vw) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i) - 0deg)); }
    to { transform: rotate(calc(360deg / var(--wb-node-count) * var(--wb-orbit-i) + 360deg)) translateX(42vw) rotate(calc(-360deg / var(--wb-node-count) * var(--wb-orbit-i) - 360deg)); }
  }
}

/* Tooltip on hover */
.wb-orbit__node-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 200px;
  background: var(--wb-color-brand);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--wb-radius-md);
  font-size: var(--wb-text-sm);
  text-align: center;
  box-shadow: var(--wb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}
.wb-orbit__node-tooltip strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.wb-orbit__node:hover .wb-orbit__node-tooltip {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 15px);
}

/* Icon Colors */
.wb-orbit__node--meta svg { fill: #0668E1; color: #0668E1; }
.wb-orbit__node--instagram svg { fill: #E1306C; color: #E1306C; }
.wb-orbit__node--google svg { fill: #4285F4; color: #4285F4; }
.wb-orbit__node--youtube svg { fill: #FF0000; color: #FF0000; }
.wb-orbit__node--ga4 svg { fill: #E37400; color: #E37400; }
.wb-orbit__node--gtm svg { fill: #246FDB; color: #246FDB; }
.wb-orbit__node--pixel svg { fill: #0668E1; color: #0668E1; }
.wb-orbit__node--capi svg { stroke: #0668E1; }
.wb-orbit__node--crm svg { stroke: #10B981; }
.wb-orbit__node--whatsapp svg { fill: #25D366; color: #25D366; }
.wb-orbit__node--email svg { stroke: #6366F1; }
.wb-orbit__node--ai svg { stroke: #8B5CF6; }
.wb-orbit__node--seo svg { stroke: #F59E0B; }
.wb-orbit__node--cro svg { stroke: #EC4899; }