/* Estilos Gerais */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a; /* Fundo principal escuro */
    color: #e5e7eb; /* Cor de texto padrão clara */
}

/* Classes Utilitárias */
.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Estilos dos Componentes */
.card {
    background-color: rgba(255, 255, 255, 0.03); /* Fundo do card semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
    opacity: 0; /* Começa invisível para animação JS */
    transform: translateY(20px); /* Começa um pouco abaixo para animação JS */
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.tag {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.btn-primary {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), 0 0 15px rgba(139, 92, 246, 0.5);
}