.brand-mark {
  --brand-accent: var(--accent-color, #00c896);
  --brand-cyan: var(--brand-secondary, #30f4ff);
  --brand-glow-soft: color-mix(in srgb, var(--brand-accent) 20%, transparent);
  --brand-glow-medium: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  --brand-glow-ring: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--brand-cyan) 24%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(18, 24, 27, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px var(--brand-glow-ring),
    0 18px 42px rgba(0, 0, 0, 0.35),
    0 0 26px var(--brand-glow-soft);
  color: var(--brand-accent);
  display: inline-flex;
  height: 58px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 58px;
}

.brand-mark::before {
  background: linear-gradient(135deg, transparent 18%, rgba(255, 255, 255, 0.2), transparent 54%);
  content: "";
  inset: -45%;
  opacity: 0.38;
  position: absolute;
  transform: translateX(-16%) rotate(8deg);
}

.brand-mark::after {
  animation: brandGlowPulse 2.8s ease-in-out infinite;
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 24%, transparent);
  border-radius: inherit;
  content: "";
  inset: 5px;
  opacity: 0.8;
  position: absolute;
}

.brand-mark svg {
  height: 78%;
  position: relative;
  width: 78%;
  z-index: 1;
}

.brand-mark-n {
  fill: none;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand-accent) 55%, transparent));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6.4;
}

.brand-mark-chip {
  fill: none;
  opacity: 0.5;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
}

.brand-mark-wave {
  animation: brandWavePulse 2.4s ease-in-out infinite;
  fill: none;
  opacity: 0.72;
  stroke: var(--brand-cyan);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.brand-mark-wave.wave-2 {
  animation-delay: 0.28s;
  opacity: 0.48;
}

.brand-mark.wave-static .brand-mark-wave,
.brand-mark.wave-static::after {
  animation: none;
}

.brand-mark-login {
  --brand-accent: #00c896;
  --brand-cyan: #30f4ff;
  height: 64px;
  margin-bottom: 14px;
  width: 64px;
}

.brand-mark-loading {
  --brand-cyan: color-mix(in srgb, var(--brand-accent) 68%, #30f4ff);
  height: 50px;
  margin-bottom: 8px;
  width: 50px;
}

@keyframes brandGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(0, 200, 150, 0);
    opacity: 0.62;
  }
  50% {
    box-shadow: 0 0 18px var(--brand-glow-medium);
    opacity: 1;
  }
}

@keyframes brandWavePulse {
  0%, 100% {
    opacity: 0.28;
    transform: translateX(-1px) scale(0.98);
  }
  50% {
    opacity: 0.92;
    transform: translateX(1px) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark::after,
  .brand-mark-wave {
    animation: none;
  }
}