/* ---------- Font: Open Sans (self-hosted) ---------- */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/open-sans-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-latin-700-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bg:#060f28;
  --panel:#d7f8ff;
  --field:#a0d7e2;
  --accent:#782cff;
  --error:#d95000;
  --ink:#000;
  --panel-h:307px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:#fff;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
}
button,input{font:inherit;color:inherit}

/* ---------- Versione (verticale, in alto a destra) ---------- */
.version{
  position:fixed;
  top:30px;
  right:18px;
  writing-mode:vertical-rl;
  font-size:8px;
  letter-spacing:.02em;
  color:#59627a;
  user-select:none;
  pointer-events:none;
}

/* ---------- Layout ---------- */
.stage{
  flex:1;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:44.06vw 1fr;   /* 564 / 1280 */
  align-items:center;
}

/* ---------- Hero (sinistra) ---------- */
.hero{padding:0 24px 0 clamp(24px,7.1vw,91px)}
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  line-height:1.4;
}
.hero h1{
  font-size:32px;
  font-weight:300;
  line-height:1.2;
  margin-top:4px;
  letter-spacing:-.01em;
}
.lead{font-size:14.2px;font-weight:400;line-height:1.4;margin-top:2px}

/* ---------- Pannello ---------- */
.panel{
  display:grid;                 /* i tre step condividono la stessa cella */
  background:var(--panel);
  color:var(--ink);
  min-height:var(--panel-h);
  transition:background-color .4s ease, color .4s ease;
}
.panel[data-state="error"]{background:var(--error);color:#fff}

.step{
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  padding:35px 0 25px 45px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.step.active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .35s ease .1s, transform .35s ease .1s, visibility 0s;
}

.step h2{font-size:19.3px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.step .sub{font-size:12.3px;font-weight:600;line-height:1.35;margin-top:1px;padding-right:24px}

/* ---------- Campi ---------- */
.field label,.field .label{display:block;font-size:13.5px;font-weight:600;line-height:1.3;margin-bottom:5px}
.field--mail{margin-top:45px}
.field--otp{margin-top:40px}

#mail{
  display:block;
  width:335px;
  max-width:calc(100% - 45px);
  height:40px;
  padding:0 21px;
  border:0;
  border-radius:0;
  background:var(--field);
  font-size:14px;
  color:var(--ink);
  outline:none;
}
#mail::placeholder{color:#5f787f;opacity:1}
#mail:focus-visible{box-shadow:0 0 0 2px var(--accent)}
#mail.is-invalid{box-shadow:0 0 0 2px var(--error)}

.otp{display:grid;grid-template-columns:repeat(6,46px);gap:11px;max-width:calc(100% - 45px)}
.otp__cell{
  width:100%;
  min-width:0;
  height:56px;
  border:0;
  border-radius:0;
  background:var(--field);
  box-shadow:inset 0 0 6px rgba(0,50,70,.55);
  text-align:center;
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  caret-color:var(--accent);
  outline:none;
}
.otp__cell:focus-visible{box-shadow:inset 0 0 6px rgba(0,50,70,.55),0 0 0 2px var(--accent)}

/* ---------- Pulsanti ---------- */
.btn{
  margin-top:auto;
  align-self:flex-end;
  width:244px;
  height:47px;
  padding:0 45px 0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-radius:0;
  cursor:pointer;
  font-size:13.5px;
  font-weight:600;
  text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transition:filter .15s ease, transform .15s ease;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--light{background:#fff;color:var(--error);padding-left:21px;margin-bottom:-1px}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.btn__arrow{display:block;flex:none}
.btn--light .btn__label{font-size:14.5px;line-height:1.15}
.btn small{display:block;font-size:10.5px;font-weight:600;line-height:1.1;margin-top:2px}

/* ---------- Errore ---------- */
.step--error{padding:117px 0 24px 50px}
.warn{display:block;width:26px;height:23px;margin-bottom:4px}
.step--error h2{font-size:19.3px}

/* ---------- Logo ---------- */
.brand{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 16px 19px}
.brand a{display:block;line-height:0;opacity:1;transition:opacity .2s}
.brand a:hover{opacity:.8}
.brand a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.brand img{display:block;width:161px;height:auto}

/* ---------- Animazione errore campo ---------- */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .3s ease}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .stage{
    grid-template-columns:1fr;
    align-items:start;
    align-content:center;
    row-gap:44px;
    padding-top:72px;
  }
  .stage{min-height:0;padding-bottom:40px}
  .brand{position:static;padding:8px 16px 19px}
  .hero{padding:0 24px}
  .step{padding-left:24px}
  .step--error{padding-left:24px;padding-top:56px}
  .field--mail{margin-top:36px}
  .field--otp{margin-top:30px}
  #mail{max-width:calc(100% - 24px)}
  .otp{max-width:calc(100% - 24px);grid-template-columns:repeat(6,minmax(0,46px));gap:clamp(6px,2.6vw,11px)}
  .btn{margin-top:32px}
  .version{right:10px}
}

@media (max-width:420px){
  .hero h1{font-size:27px}
  .btn{width:min(244px,calc(100% - 24px))}
  .otp__cell{height:52px;font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}