.site-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 0; background: transparent; border: none; display: inline-block; }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 18px 26px; border: 2px solid transparent; border-radius: 18px; 
		/* Glass fill (lighter) + softer pastel outline */
		background-image: 
			linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
			/* paler pastel gradient for softer outline */
			linear-gradient(135deg, rgba(147,197,253,0.45), rgba(251,211,141,0.40), rgba(196,181,253,0.40), rgba(125,211,252,0.40), rgba(255,180,208,0.40), rgba(147,197,253,0.45));
	background-origin: border-box;
	background-clip: padding-box, border-box;
		backdrop-filter: blur(12px) brightness(1.06);
		-webkit-backdrop-filter: blur(12px) brightness(1.06);
	color: #e2e8f0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.2px; text-align: left; 
	box-shadow: 0 10px 30px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.08);
	/* Subtle animated movement for the colorful border */
	background-size: auto, 250% 250%;
	background-position: 0 0, 0% 50%;
	animation: borderShift 24s linear infinite;
}
.brand i {
	/* Fill icon with same light glass color as badge and a subtle dark stroke */
	color: rgba(255,255,255,0.10); /* matches badge inner background */
	-webkit-text-fill-color: rgba(255,255,255,0.10);
	-webkit-text-stroke: 0.9px rgba(10,10,12,0.92); /* near-black outline, slightly softer */
	font-size: 1.6rem;
	line-height: 1;
	margin-right: 10px;
	/* subtle highlight plus dark outline for crispness */
	text-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 0 0 rgba(0,0,0,0.32);
	filter: none;
}
.brand-name { color: #e8edf4; -webkit-text-stroke: 0.28px rgba(90,90,100,0.44); text-shadow:
	0 0 0.5px rgba(90,90,100,0.44),
	0 1px 2px rgba(0,0,0,0.45);
}
.brand:hover { transform: translateY(-1px); transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 12px 28px rgba(59,130,246,0.22), inset 0 1px 0 rgba(255,255,255,0.2); }

@keyframes borderShift {
	to { background-position: 0 0, 180% 50%; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.brand { animation: none !important; transition: none !important; }
}

/* Slightly reduce size on very small screens for comfort */
@media (max-width: 480px) {
	.brand { font-size: 1.05rem; padding: 10px 14px; border-radius: 14px; gap: 8px; }
	.brand i { font-size: 1.15rem; margin-right: 8px; }
}

/* Slightly reduce size on very small screens for comfort */
@media (max-width: 420px) {
	.brand { font-size: 1.15rem; padding: 12px 16px; border-radius: 14px; gap: 8px; }
}