:root{
  --bg1:#f5f3ef;                 /* crema chiaro */
  --bg2:#f5f3ef;                 /* crema chiaro */

  --text:#111111;                /* nero morbido */
  --muted:rgba(17,17,17,.58);    /* grigio testo secondario */

  --border:rgba(219,212,201,.95);/* bordo warm light */

  --shadowFar: rgba(17,24,39,.18);
  --shadowMid: rgba(17,24,39,.12);
  --shadowNear: rgba(17,24,39,.08);

  --accent:#0f1e33;              /* navy bottone/focus */
  --accentSoft: rgba(15,30,51,.14);

  --cardBg:#ffffff;              /* bianco card */
  --surface:#ffffff;             /* bianco input */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);

  /* Fondo crema con micro-luci, molto discreto */
  background:
    radial-gradient(900px 520px at 25% 20%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(800px 520px at 75% 30%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 20px;
}

.card{
  width:100%;
  max-width: 520px;
  padding: 10px 22px 14px;
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid rgba(235,229,219,.95);

  /* 3D più “profondo” come nell’immagine */
  box-shadow:
    0 34px 90px var(--shadowFar),
    0 14px 30px var(--shadowMid),
    0 6px 14px var(--shadowNear),
    inset 0 1px 0 rgba(255,255,255,.85);

  text-align:center;
  position:relative;
}

/* sottile highlight in alto */
.card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    radial-gradient(520px 140px at 50% 0%, rgba(255,255,255,.70), transparent 70%);
}

/* micro bordo interno per effetto “cornice” */
.card:after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  pointer-events:none;
  border: 1px solid rgba(0,0,0,.04);
}

.logo{
  width: 400px;
  max-width: 98%;
  height:auto;
  display:block;
  margin: 0 auto 6px;

  /* più pulito su fondo chiaro */
  filter:
    drop-shadow(0 10px 22px rgba(17,24,39,.18))
    brightness(1.02)
    contrast(1.02);

  opacity:1;

  /* qui è la chiave per passare da immagine 1 a immagine 2 */
  clip-path: inset(22px 0 18px 0);
  transform: translateY(-10px);
}

h1{
  margin: 0 0 2px;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: .3px;
  color: var(--text);
}

.subtitle{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}

.label{
  display:block;
  text-align:left;
  font-size: 13px;
  color: rgba(18,18,18,.72);
  margin: 0 0 6px;
}

.input{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;

  background: var(--surface);
  color: var(--text);

  /* leggerissimo “rilievo” come field dell’immagine */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 0 rgba(0,0,0,.02);

  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input::placeholder{ color: rgba(18,18,18,.40); }

.input:focus{
  border-color: rgba(15,30,51,.35);
  box-shadow:
    0 0 0 4px var(--accentSoft),
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 0 rgba(0,0,0,.02);
  background: #ffffff;
}

.btn{
  width:100%;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 650;
  color: #fff;

  /* navy come screenshot */
  background: linear-gradient(180deg, #0f1e33 0%, #0b1626 100%);

  /* bottone più “solido” e 3D */
  box-shadow:
    0 18px 34px rgba(15,30,51,.30),
    0 8px 14px rgba(15,30,51,.18),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.25);

  cursor:pointer;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  position:relative;
}

.btn:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,.10);
}

.btn:hover{
  filter: brightness(1.03);
  box-shadow:
    0 22px 40px rgba(15,30,51,.34),
    0 10px 16px rgba(15,30,51,.20),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.26);
}

.btn:active{
  transform: translateY(1px);
  filter: brightness(.99);
}

.msg{
  margin: 8px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: rgba(18,18,18,.55);
}

.msg--error{ color: rgba(180,60,60,.95); }

.footnote{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(18,18,18,.50);
}

/* Mobile */
@media (max-width: 560px){
  .card{
    padding: 10px 18px 12px;
    border-radius: 14px;
  }

  h1{ font-size: 24px; }

  .logo{
    width: 270px;
    margin: 0 auto 6px;
    clip-path: inset(18px 0 14px 0);
    transform: translateY(-8px);
  }
}