/* =====================================================================
   landing.css — gli stili di landing.html
   
   Perche' e' un file e non un <style> nella pagina, e vale la pena
   scriverlo: la CSP di server.js dichiara `style-src 'self'`, e sotto
   quella direttiva un blocco <style> inline non viene applicato. Il
   22/08 le sei pagine sono uscite in Times New Roman, e la mitigazione
   e' stata un `add_header` scritto a mano nel vhost del VPS — cioe' una
   riga d'operatore che vive solo li' e che nessun `git clone` porta con
   se'. Servita da express.static, questa foglia e' `self`: la CSP resta
   stretta, il vhost torna al template, e la configurazione in esercizio
   e' di nuovo quella del pacchetto.
   
   Estratto senza una modifica dal <style> di landing.html — 2026-08-23, Ettore
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 40%, #0f2847 100%);
    min-height: 100vh; color: #fff; display: flex; flex-direction: column;
}
.landing-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.landing-card {
    background: rgba(255,255,255,0.05); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
    max-width: 960px; width: 100%; display: grid; grid-template-columns: 1fr 1fr;
    overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.landing-info { padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; }
.landing-info h1 {
    font-size: 32px; font-weight: 800; margin-bottom: 8px;
    background: linear-gradient(135deg, #fff, #a8c8ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-info .subtitle { color: rgba(255,255,255,0.5); font-size: 15px; margin-bottom: 32px; }
.brandmark { font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); font-weight: 700; margin-bottom: 24px; }
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.8); }
.feature-list li .icon {
    width: 36px; height: 36px; background: rgba(74,158,255,0.15); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #4a9eff;
}
.landing-form-container {
    background: rgba(255,255,255,0.03); border-left: 1px solid rgba(255,255,255,0.08);
    padding: 50px 40px; display: flex; flex-direction: column; justify-content: center;
}
.landing-form-container h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.landing-form-container .form-subtitle { color: rgba(255,255,255,0.5); font-size: 13px; margin-bottom: 28px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.form-group label .required { color: #ff6b6b; }
.form-group input {
    width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff;
    font-size: 15px; transition: all 0.2s; outline: none;
}
.form-group input:focus { border-color: #4a9eff; background: rgba(74,158,255,0.08); box-shadow: 0 0 0 3px rgba(74,158,255,0.15); }
.form-group input::placeholder { color: rgba(255,255,255,0.25); }
/* 14/09 — lo stato d'errore SUL CAMPO. Il testo del messaggio nomina gia' il
   campo ("la partita IVA..."), ma solo se lo leggi: il campo non si
   distingueva dagli altri in nessun modo. Bordo + alone rossi, e regge anche
   mentre il campo ha il fuoco (la specificita' e' piu' alta di :focus, che
   altrimenti lo ridipingerebbe di azzurro proprio nel momento in cui
   showError() ci porta il cursore). */
.form-group input.input-error,
.form-group input.input-error:focus {
    border-color: rgba(239,68,68,0.75); background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.submit-btn {
    width: 100%; padding: 14px; background: linear-gradient(135deg, #4a9eff, #6366f1);
    border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all 0.3s; display: flex; align-items: center;
    justify-content: center; gap: 8px; margin-top: 8px;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(74,158,255,0.4); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-message { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; display: none; }
.form-message.error { display: flex; gap: 8px; align-items: center; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.privacy-note { margin-top: 16px; font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.5; }
.privacy-note a { color: rgba(255,255,255,0.5); }
.landing-footer { text-align: center; padding: 20px; font-size: 12px; color: rgba(255,255,255,0.25); }
.landing-footer a { color: rgba(255,255,255,0.4); text-decoration: none; }
.spinner {
    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; display: none;
}
.submit-btn.loading .spinner { display: block; }
.submit-btn.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* schermata di conferma */
.sent-wrap { text-align: center; padding: 20px 0; }
.sent-badge {
    width: 70px; height: 70px; background: rgba(34,197,94,0.15); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #4ade80;
}
.sent-wrap h2 { margin: 0 0 8px; font-size: 22px; color: #4ade80; }
.sent-to { margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,0.6); }
.sent-to strong { color: #fff; font-size: 15px; display: block; }
.sent-list {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 18px; text-align: left; font-size: 13px;
    color: rgba(255,255,255,0.6); line-height: 1.9;
}
.sent-list div { display: flex; gap: 8px; align-items: flex-start; }
.sent-list div span.ico { color: #4a9eff; flex-shrink: 0; margin-top: 3px; }
.sent-foot { margin: 20px 0 0; font-size: 12px; color: rgba(255,255,255,0.3); }

@media (max-width: 768px) {
    .landing-card { grid-template-columns: 1fr; max-width: 480px; }
    .landing-info { padding: 30px 24px 20px; }
    .landing-info h1 { font-size: 26px; }
    .feature-list { gap: 10px; }
    .landing-form-container { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding: 24px; }
}
.bg-glow { position: fixed; width: 400px; height: 400px; border-radius: 50%; filter: blur(100px); opacity: 0.15; pointer-events: none; z-index: 0; }
.bg-glow-1 { background: #4a9eff; top: -100px; right: -100px; }
.bg-glow-2 { background: #6366f1; bottom: -100px; left: -100px; }

/* --- lotto 2: secondo ingresso (installatori) ------------------------ */
/* Una riga di aiuto sotto un campo. Sta QUI e non in un attributo
   `style=` sul markup: `style-src 'self'` non applica gli attributi di
   stile, e il rimedio sarebbe una riga d'operatore nel vhost (gate §H). */
.field-hint { margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.5; }
.landing-info .kicker { display:inline-block; margin-bottom:14px; padding:4px 10px; border-radius:999px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:#93c5fd; background:rgba(74,158,255,.12); border:1px solid rgba(74,158,255,.3); }