/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600&display=swap');

:root {
    --accent-fuchsia: #7b61ff 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a !important; /* Nero assoluto */
    color: #e4e4e7;
}

.font-monospace {
    font-family: 'Fira Code', monospace !important;
}

/* Sovrascriviamo le classi "success" di Bootstrap con il nostro fucsia */
.text-success {
    color: var(--accent-fuchsia) !important;
}

.btn-outline-success {
    color: var(--accent-fuchsia);
    border-color: var(--accent-fuchsia);
}

.btn-outline-success:hover {
    background-color: var(--accent-fuchsia);
    color: #0a0a0a !important;
    border-color: var(--accent-fuchsia);
    box-shadow: 0 0 15px rgba(202, 38, 255, 0.4);
}

.btn-success {
    background-color: var(--accent-fuchsia) !important;
    border-color: var(--accent-fuchsia) !important;
}

.btn-success:hover {
    background-color: #b500fa !important;
    border-color: #b500fa !important;
    box-shadow: 0 0 15px rgba(202, 38, 255, 0.4);
}

.btn-custom {
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

/* Stili layout */
.max-w-custom {
    max-width: 900px;
}

.custom-bg-dark {
    background-color: #121212;
}

.custom-list li {
    margin-bottom: 1rem;
    color: #a1a1aa;
}

.custom-list strong {
    color: #f4f4f5;
    display: block;
}

/* Bordi scuri quasi invisibili per un look pulito */
.border-secondary {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sottile linea di divisione scura tra le righe del confronto */
.border-bottom.border-dark {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Tabella/Griglia di confronto */
.comparison-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.comparison-grid .row {
    margin-left: 0;
    margin-right: 0;
}

.text-muted {
    color: #71717a !important;
}

/* Effetto hover per i link nel footer e pulsanti */
.hover-glow {
    transition: text-shadow 0.2s ease, color 0.2s ease;
}
.hover-glow:hover {
    color: #d946ef !important;
    text-shadow: 0 0 8px rgba(202, 38, 255, 0.6);
}

.custom-small-text {
    font-size: 0.75rem;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

/* Effetto sfondo sfumato per la sezione "Cos'è un Private LLM" */
.custom-neural-section {
    position: relative;
    background-color: #121212;
    z-index: 1;
}

.custom-neural-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('img/neural-bg.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: -1;
    
    /* Forza la trasparenza totale (0%) fino al 45% della larghezza, eliminando qualsiasi bordo */
    -webkit-mask-image: linear-gradient(to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 45%, 
        rgba(0,0,0,0.8) 85%, 
        rgba(0,0,0,1) 100%
    );
    mask-image: linear-gradient(to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 45%, 
        rgba(0,0,0,0.8) 85%, 
        rgba(0,0,0,1) 100%
    );
}

.max-w-text {
    max-width: 620px;
}

.z-1 {
    z-index: 1;
}

.opacity-90 {
    opacity: 0.9;
}

/* Animazione fluida di scorrimento e sfumatura */
.word-rotate {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    transform: translateY(0);
}

/* Stato quando la parola esce verso l'alto */
.word-rotate.fade-out {
    opacity: 0;
    transform: translateY(-15px);
}

/* Stato quando la nuova parola si prepara dal basso */
.word-rotate.fade-in {
    opacity: 0;
    transform: translateY(15px);
}