@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url('/font/Archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url('/font/Archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url('/font/Archivo-700.woff2') format('woff2')}
@font-face{font-family:'ArchivoExp';font-weight:800;font-style:normal;font-display:swap;src:url('/font/ArchivoExp-800.woff2') format('woff2')}
@font-face{font-family:'ArchivoCond';font-weight:600;font-style:normal;font-display:swap;src:url('/font/ArchivoCond-600.woff2') format('woff2')}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: #070B12;
  color: #E9EFF6;
  font-family: Archivo, -apple-system, system-ui, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
}

main { width: 100%; max-width: 380px; }

.marchio { display: flex; align-items: flex-start; gap: 14px; }
.sigla {
  font-family: ArchivoExp, sans-serif; font-weight: 800;
  font-size: 54px; line-height: .8; letter-spacing: -.04em; color: #FF5A38; flex: none;
}
h1 {
  font-family: ArchivoExp, sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1; letter-spacing: -.025em; text-transform: uppercase;
}
.sotto { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #93A7BC; }

form { margin-top: 34px; }

label {
  display: block;
  font-family: ArchivoCond, sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #7389A0;
}
label + input { margin-top: 7px; }
input {
  width: 100%; padding: 13px 14px;
  background: #0C131E; color: #E9EFF6;
  border: 1px solid #4A6078; border-radius: 0;
  font: inherit; font-size: 17px; font-weight: 600;
  -webkit-appearance: none;
}
input:focus { outline: 2px solid #FF5A38; outline-offset: 2px; border-color: #FF5A38; }
input + label { margin-top: 20px; }

button {
  width: 100%; margin-top: 26px; padding: 16px;
  background: #FF5A38; color: #070B12; border: 0; cursor: pointer;
  font-family: ArchivoExp, sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  -webkit-appearance: none;
}
button:focus-visible { outline: 2px solid #FF5A38; outline-offset: 3px; }
button:disabled { background: #111A28; color: #93A7BC; cursor: default; }

.errore {
  margin-top: 20px; padding: 12px 14px;
  background: #3A0D0A; color: #FFB3A6; border: 1px solid #6B1A14;
  font-size: 13.5px; line-height: 1.45;
}

.piede {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid #1C2736;
  font-size: 11.5px; line-height: 1.5; color: #7389A0;
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }