:root {
  --arena-brand-ink: var(--text-primary, #ecf4ff);
  --arena-brand-muted: var(--text-muted, #91a6bd);
  --arena-brand-accent: var(--accent-blue, #47d7ff);
  --arena-brand-font: var(--font-sans, 'Space Grotesk', sans-serif);
  --arena-brand-mono: var(--font-mono, 'IBM Plex Mono', monospace);
}

.arena-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 44px;
  padding: 3px 4px;
  border-radius: 6px;
  color: var(--arena-brand-ink);
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
  transition: color 180ms ease, text-shadow 180ms ease;
}

/* Same rendered size as the angel-serv.com header mark. */
.arena-brand-mark {
  width: 118px;
  height: 46px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(201, 185, 138, 0.16));
}

.arena-brand-copy {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.arena-brand-name {
  display: block;
  max-width: none;
  overflow: visible;
  color: currentColor;
  font: 700 clamp(0.82rem, 1.1vw, 1rem)/1 var(--arena-brand-font);
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.arena-brand-product {
  display: block;
  max-width: none;
  overflow: visible;
  color: var(--arena-brand-muted);
  font: 600 clamp(0.52rem, 0.65vw, 0.62rem)/1 var(--arena-brand-mono);
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.arena-brand:hover {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 22px color-mix(in srgb, var(--arena-brand-accent) 35%, transparent);
}

.arena-brand:hover .arena-brand-product {
  color: var(--arena-brand-accent);
}

.arena-brand:focus-visible {
  outline: 2px solid var(--arena-brand-accent);
  outline-offset: 4px;
}

/* Explore dropdown: the brand lockup doubles as its trigger. */
.explore-item {
  position: relative;
}

.explore-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 4px;
  z-index: 70;
  min-width: 248px;
  padding: 10px;
  border: 1px solid rgba(126, 166, 207, 0.22);
  border-radius: 16px;
  background: rgba(6, 12, 20, 0.94);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.explore-item.is-open .explore-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.explore-menu a {
  display: block;
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--arena-brand-ink);
  font: 600 0.84rem/1.3 var(--arena-brand-font);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.explore-menu a:hover,
.explore-menu a:focus-visible {
  background: rgba(71, 215, 255, 0.1);
  color: var(--arena-brand-accent);
  outline: none;
}

.explore-menu a span {
  display: block;
  margin-top: 3px;
  color: var(--arena-brand-muted);
  font: 500 0.62rem/1.3 var(--arena-brand-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  .explore-menu {
    right: -4px;
    min-width: 0;
    width: min(280px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-menu {
    transition-duration: 0.01ms;
  }
}

.dashboard-arena-brand {
  position: absolute;
  inset-block-start: max(16px, env(safe-area-inset-top));
  inset-inline-start: max(18px, env(safe-area-inset-left));
  z-index: 30;
}

body:not(.dashboard-embedded) #app {
  padding-top: 84px;
}

.dashboard-embedded .dashboard-arena-brand {
  display: none;
}

#tb-brand.arena-brand {
  flex: 0 1 auto;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  padding: 0;
}

#tb-brand .arena-brand-mark {
  width: 72px;
  height: 28px;
}

#tb-brand .arena-brand-name {
  font-size: clamp(0.58rem, 2.7vw, 0.72rem);
}

#tb-brand .arena-brand-product {
  font-size: clamp(0.42rem, 2vw, 0.5rem);
}

@media (max-width: 420px) {
  .site-header .arena-brand,
  .shop-site-header .arena-brand {
    flex: 0 1 auto;
    gap: 8px;
  }

  .arena-brand-mark {
    width: 96px;
    height: 38px;
  }

  .arena-brand-name {
    font-size: 0.68rem;
  }

  .arena-brand-product {
    font-size: 0.46rem;
  }

  .site-brand > .arena-brand-product {
    max-width: none;
  }

  .dashboard-arena-brand {
    inset-block-start: max(10px, env(safe-area-inset-top));
    inset-inline-start: max(10px, env(safe-area-inset-left));
  }

  body:not(.dashboard-embedded) #app {
    padding-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-brand {
    transition-duration: 0.01ms;
  }
}