:root {
  --brand-bg: #101a2a;
  --brand-panel: #172437;
  --brand-panel-2: #1c2c42;
  --brand-blue: #1597f6;
  --brand-blue-bright: #32b7ff;
  --brand-text: #eef6ff;
  --brand-muted: #9fb3c8;
  --brand-border: rgba(153, 190, 224, .18);
}

.brandbar {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #14243a 0%, #101c2d 100%);
  border-bottom: 1px solid var(--brand-border);
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.brandbar-inner {
  max-width: 1200px;
  min-height: 82px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-sizing: border-box;
}

.brand-logo { display: block; width: min(360px, 54vw); height: auto; }
.brand-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 20px; }
.brand-nav a { color: #d8e7f6 !important; text-decoration: none; font-weight: 650; margin: 0 !important; }
.brand-nav a:hover { color: var(--brand-blue-bright) !important; }
.brand-parent { font-size: .82rem; color: var(--brand-muted); white-space: nowrap; }
.brand-parent strong { color: var(--brand-text); }

.brand-mini {
  width: min(330px, 82vw);
  margin: 0 auto 20px;
  display: block;
}

@media (max-width: 720px) {
  .brandbar-inner { flex-direction: column; align-items: center; padding: 12px 16px 16px; gap: 8px; }
  .brand-logo { width: min(355px, 90vw); }
  .brand-nav { justify-content: center; }
  .brand-parent { white-space: normal; text-align: center; }
}