/* Explain: Styles for reusable UI elements like buttons and cards. */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white transition-all duration-300 rounded-full cursor-pointer;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 text-sm font-semibold transition-all duration-300 rounded-full cursor-pointer border border-[var(--primary-color)] text-[var(--primary-color)];
}

.btn-outline:hover {
    @apply bg-[var(--primary-color)] text-white;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2);
}

.service-card {
    @apply flex flex-col h-full p-8 transition-all duration-300 rounded-2xl border border-[var(--border-color)] bg-[var(--surface-color)];
}

.service-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.2);
    transform: translateY(-4px);
}

.form-input, .form-textarea {
    @apply w-full px-4 py-3 bg-[var(--background-color)] border border-[var(--border-color)] rounded-xl text-[var(--text-color)] placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)] transition-colors;
}

select.form-input option {
    background-color: var(--surface-color);
    color: var(--text-color);
}

.glass-nav {
    background: rgba(9, 5, 20, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}