@import url('/theme-tokens.css');

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.site-brand img.site-logo {
  height: 40px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.site-brand img.site-mark {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.site-brand .brand-text {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.site-brand .brand-text em {
  font-style: normal;
  color: var(--accent, #2563eb);
}

/* B1 mesh hero — CSS gradients only (no API/raster images) */
.vt-mesh-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 10px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8dee8);
}
.vt-mesh-hero__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 12% 22%, color-mix(in srgb, var(--accent, #2563eb) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 72% 52% at 88% 78%, color-mix(in srgb, var(--glow-blue, var(--accent, #2563eb)) 20%, transparent), transparent 52%),
    linear-gradient(135deg, var(--surface2, #eef1f6) 0%, var(--surface, #fff) 100%);
}
[data-theme="dark"] .vt-mesh-hero__layers {
  background:
    radial-gradient(ellipse 80% 60% at 12% 22%, color-mix(in srgb, var(--accent, #4d9fff) 32%, transparent), transparent 58%),
    radial-gradient(ellipse 72% 52% at 88% 78%, color-mix(in srgb, var(--glow-blue, #4d9fff) 24%, transparent), transparent 52%),
    linear-gradient(135deg, var(--surface2, #1c2433) 0%, var(--surface, #151b26) 100%);
}
.vt-mesh-hero__content {
  position: relative;
  z-index: 1;
}

/* B1 nav SVG icons */
.vt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}
.vt-nav-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: currentColor;
}