/* Maps Vue/Tailwind semantic utility names to theme CSS variables */
.bg-bg-primary { background-color: var(--bg-primary) !important; }
.bg-bg-secondary { background-color: var(--bg-secondary) !important; }
.text-text-primary { color: var(--text-primary) !important; }
.text-text-secondary { color: var(--text-secondary) !important; }
.from-text-primary { --tw-gradient-from: var(--text-primary) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-accent { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position); }
.from-accent { --tw-gradient-from: var(--accent) var(--tw-gradient-from-position); }
.via-accent\/90 { --tw-gradient-via: color-mix(in srgb, var(--accent) 90%, transparent); }
.to-accent\/80 { --tw-gradient-to: color-mix(in srgb, var(--accent) 80%, transparent); }
.from-accent\/10 { --tw-gradient-from: color-mix(in srgb, var(--accent) 10%, transparent); }
.to-accent\/5 { --tw-gradient-to: color-mix(in srgb, var(--accent) 5%, transparent); }
.bg-accent\/10 { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.bg-accent\/20 { background-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
.bg-accent\/5 { background-color: color-mix(in srgb, var(--accent) 5%, transparent) !important; }
.hover\:bg-accent\/5:hover { background-color: color-mix(in srgb, var(--accent) 5%, transparent) !important; }
.hover\:bg-accent\/10:hover { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.hover\:bg-accent\/20:hover { background-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
.hover\:bg-accent\/90:hover { background-color: color-mix(in srgb, var(--accent) 90%, transparent) !important; }
.hover\:text-accent:hover { color: var(--accent) !important; }
.border-border { border-color: var(--border) !important; }
.border-border\/30 { border-color: color-mix(in srgb, var(--border) 30%, transparent) !important; }
.border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent) !important; }
.border-accent\/20 { border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
.border-accent { border-color: var(--accent) !important; }
.bg-card\/50 { background-color: color-mix(in srgb, var(--card-bg) 50%, transparent) !important; }
.bg-card\/80 { background-color: color-mix(in srgb, var(--card-bg) 80%, transparent) !important; }
.bg-card\/90 { background-color: color-mix(in srgb, var(--card-bg) 90%, transparent) !important; }
.fill-primary { fill: var(--bg-primary) !important; }
.shadow-accent { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3) !important; }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-white { color: #fff !important; }
.bg-white { background-color: #fff !important; }
.hover\:text-white:hover { color: #fff !important; }
.hover\:bg-white:hover { background-color: #fff !important; }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem) !important; }
.group:hover .group-hover\:text-accent { color: var(--accent) !important; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1) !important; }
.group:hover .group-hover\:from-accent\/20 { background: linear-gradient(to bottom right, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)) !important; }
.group:hover .group-hover\:to-accent\/10 { }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0) !important; }
.opacity-90 { opacity: 0.9 !important; }
.backdrop-blur-lg { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.lg-block-sm-hidden { display: none; }
@media (min-width: 1024px) { .lg-block-sm-hidden { display: block; } }
.bg-card { background-color: var(--card-bg) !important; }
.bg-accent { background-color: var(--accent) !important; }
.text-accent { color: var(--accent) !important; }
.hover\:bg-accent:hover { background-color: var(--accent) !important; }
.hover\:text-accent\/80:hover { color: color-mix(in srgb, var(--accent) 80%, transparent) !important; }
#mobile-services-submenu { display: none; }
#mobile-services-submenu.open { display: block; }