.brand {
  display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
  min-height: 2.75rem; color: inherit; text-decoration: none; border-radius: 0.6rem;
}
.brand-plate {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  width: 2.65rem; height: 2.65rem; border-radius: 0.85rem; color: #fff; flex: none;
  background:
    radial-gradient(100% 85% at 100% 100%, rgb(224 151 122 / 0.6), transparent 72%),
    linear-gradient(145deg, #193c7a, #426fc7 65%, #6386c8);
  border: 1px solid rgb(156 187 244 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 3px 9px rgb(14 31 62 / 0.16);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brand-plate::before {
  content: ""; position: absolute; inset: 3px; z-index: -1;
  border: 1px solid rgb(255 255 255 / 0.08); border-radius: 0.65rem;
}
.brand-plate svg { width: 1.9rem; height: 1.9rem; }
.brand-text { display: flex; flex-direction: column; gap: 0.32rem; }
.brand-text strong {
  font-family: var(--font-body); font-size: 1.38rem; font-weight: 750;
  letter-spacing: -0.055em; line-height: 1;
}
.brand-os { color: var(--accent-strong); font-weight: 500; letter-spacing: -0.06em; }
.brand-text small {
  color: var(--muted); font-size: 0.54rem; font-weight: 600;
  letter-spacing: 0.15em; line-height: 1; text-transform: uppercase;
}
.brand:hover .brand-plate { border-color: rgb(183 204 248 / 0.75); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 4px 12px rgb(14 31 62 / 0.22); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }