/* Shared main CSS for site components */

/* 3D brand styles */
.brand-3d { perspective: 800px; display: inline-block; }
.brand-3d .stack { position: relative; width: 56px; height: 40px; }
.brand-3d .layer { position: absolute; inset: 0; border-radius: 0.5rem; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; transition: transform .25s ease, box-shadow .25s ease; font-family: Inter, Kanit, sans-serif; }
.brand-3d .layer.bottom { background: rgba(15, 23, 42, 0.95); transform: translate(6px,6px) scale(.98); box-shadow: 0 10px 24px rgba(2,6,23,0.6); }
.brand-3d .layer.middle { background: #4F46E5; transform: translate(3px,3px) scale(.995); box-shadow: 0 8px 20px rgba(79,70,229,0.18); }
.brand-3d .layer.top { background: linear-gradient(90deg,#7c3aed,#ec4899); transform: translate(0,0); box-shadow: 0 12px 30px rgba(124,58,237,0.22); }
.brand-3d.small .stack { width: 40px; height: 28px; }
.brand-3d.small .layer { font-size: 0.9rem; }
.brand-3d .layer.top:hover { transform: translateY(-4px) rotateX(10deg) translateZ(6px); }

.brand-title { margin-left: 0.75rem; font-weight:700; }
.brand-title { 
	margin-left: 0.75rem; 
	font-weight:700; 
	font-size: 1.375rem; /* ~22px, slightly larger than text-xl */
	line-height: 1.1;
	text-shadow: 0 6px 18px rgba(12, 12, 20, 0.6), 0 2px 6px rgba(124,58,237,0.12);
	letter-spacing: 0.6px;
}