/* ==========================================
   CSS SPECIFICO LANDING PAGE & MOBILE-FIRST
   ========================================== */

/* Sovrascrittura body per full-page */
body { 
    margin: 0; 
    padding: 0; 
    display: block; 
    overflow-x: hidden; 
}

/* NAVBAR */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 5%; 
    background: rgba(9, 9, 11, 0.8); 
    backdrop-filter: blur(10px); 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    box-sizing: border-box; 
}
.nav-brand { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.nav-brand span { color: #3b82f6; }
.nav-buttons { display: flex; gap: 15px; }

/* PULSANTI */
.btn-outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: #fafafa; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.btn-outline:hover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.btn-primary { background: #3b82f6; border: none; color: white; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4); }
.btn-primary:hover { background: #2563eb; transform: translateY(-1px); }

/* HERO SECTION */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; background: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.15), transparent 60%); }
.hero-badge { background: rgba(59, 130, 246, 0.1); color: #3b82f6; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; border: 1px solid rgba(59, 130, 246, 0.2); }
.hero h1 { font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: 1.1; margin-bottom: 24px; max-width: 800px; }
.hero h1 span { background: linear-gradient(to right, #3b82f6, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 18px; color: #a1a1aa; max-width: 600px; line-height: 1.6; margin-bottom: 40px; }
.hero-buttons { display: flex; gap: 15px; margin-top: 10px; }
.hero-btn { padding: 16px 32px; font-size: 16px; }

/* MODALE AUTENTICAZIONE */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; padding: 20px; box-sizing: border-box; }
.modal-overlay.active { display: flex; opacity: 1; }
.close-modal { position: absolute; top: 20px; right: 30px; font-size: 30px; color: #a1a1aa; cursor: pointer; border: none; background: transparent; transition: 0.2s; z-index: 1001;}
.close-modal:hover { color: white; transform: scale(1.1); }
.auth-wrapper { margin-top: 0; width: 100%; max-width: 450px; }

/* FORMS: GRIGLIA FLESSIBILE */
.form-row { display: flex; gap: 10px; width: 100%; }
.col-half { flex: 1; }
.col-2-3 { flex: 2; }
.col-1-3 { flex: 1; }


/* ==========================================
   MEDIA QUERIES PER SMARTPHONE (Mobile First)
   ========================================== */
@media screen and (max-width: 768px) {
    /* Ridimensionamento Testi Hero */
    .hero h1 { font-size: 38px; }
    .hero p { font-size: 16px; }
    
    /* Disposizione verticale bottoni Hero */
    .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; }
    .hero-btn { width: 100%; padding: 14px 20px; }

    /* Adattamento Navbar */
    .navbar { 
        flex-direction: column; 
        gap: 15px; 
        padding: 15px 5%; 
        position: relative; /* Evita sovrapposizione brutta con l'hero se c'è troppo contenuto */
    }
    .nav-buttons { 
        width: 100%; 
        justify-content: center; 
        flex-wrap: wrap; 
    }
    .nav-buttons button { flex: 1 1 auto; padding: 8px 12px; font-size: 14px; text-align: center; }

    /* Fix Campi di testo affiancati nel form di registrazione */
    .form-row { flex-direction: column; gap: 0; }
    .col-half, .col-2-3, .col-1-3 { width: 100%; flex: none; }
    
    /* Aggiustamenti Modale */
    .auth-card { padding: 25px 20px; }
    .close-modal { top: 10px; right: 15px; }
}