/* ==========================================================================
   Pro Performance Solutions — brand tokens + logo lockup
   Shared by index.html (website) and logos.html (brand sheet).
   Midnight navy + signal lime · Space Grotesk
   ========================================================================== */

:root {
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --h-weight: 700;
  --h-track: -0.035em;

  --bg: #0A1230;
  --bg-alt: #0C1638;
  --surface: #101B44;
  --surface-2: #1A2862;
  --text: #EEF2FF;
  --muted: #A3AED0;
  --line: rgba(255, 255, 255, 0.1);

  --accent: #B8F84A;
  --on-accent: #0A1230;
  --accent-fill: #B8F84A;
  --chart: #B8F84A;
  --hl: linear-gradient(90deg, #B8F84A, #5EEAD4);
  --mark: #B8F84A;
  --kicker: #B8F84A;

  --radius: 18px;
  --radius-sm: 12px;
  --icon-radius: 10px;
  --bar-radius: 99px;
  --btn-radius: 999px;
  --pill-radius: 999px;

  --card-border: 1px solid rgba(255, 255, 255, 0.09);
  --card-shadow: none;
  --card-hover-move: translateY(-4px);
  --card-hover-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.8);
  --card-hover-border: rgba(184, 248, 74, 0.35);

  --btn-border: 1px solid transparent;
  --btn-shadow: none;
  --btn-hover-move: translateY(-2px);
  --btn-hover-shadow: 0 14px 30px -12px rgba(184, 248, 74, 0.55);
  --ghost-border: rgba(255, 255, 255, 0.18);
  --ghost-hover: rgba(255, 255, 255, 0.06);

  --pill-border: 1px solid rgba(255, 255, 255, 0.12);
  --pill-bg: rgba(255, 255, 255, 0.04);

  --hero-bg:
    radial-gradient(55% 60% at 85% 20%, rgba(184, 248, 74, 0.13), transparent 65%),
    radial-gradient(40% 45% at 0% 60%, rgba(94, 234, 212, 0.08), transparent 65%);
  --hero-pattern:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;

  --dash-bg: linear-gradient(180deg, #13204F, #0F1942);
  --dash-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75);
  --metric-border: 1px solid rgba(255, 255, 255, 0.06);
  --float-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.75);

  --icon-bg: rgba(184, 248, 74, 0.1);
  --icon-color: #B8F84A;
  --icon-border: 1px solid rgba(184, 248, 74, 0.22);
  --avatar-bg: #B8F84A;
  --avatar-text: #0A1230;
  --avatar-radius: 50%;

  --band-bg: linear-gradient(135deg, #17265F, #0E1946);
  --band-glow: radial-gradient(45% 70% at 95% 0%, rgba(184, 248, 74, 0.2), transparent 70%);
  --band-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --band-text: #EEF2FF;
  --band-muted: #A9B4D6;
  --band-kicker: #B8F84A;
  --band-icon: #B8F84A;
  --band-card: rgba(255, 255, 255, 0.04);
  --band-line: rgba(255, 255, 255, 0.1);
  --band-btn-bg: #B8F84A;
  --band-btn-text: #0A1230;
  --band-btn-border: 1px solid transparent;
}

/* ---------- Logo lockup (sized in em — set font-size on the parent) ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text);
  font-family: var(--font);
  line-height: 1;
}

.brand .mark {
  width: 2.15em;
  height: 2.15em;
  flex: none;
  color: var(--mark);
}

.brand .wm {
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.brand .wm span {
  margin-left: 0.24em;
  font-weight: 400;
  color: var(--muted);
}