/* Schermata di accesso e di primo ingresso su invito. */

:root{
  --ink:#1A1C1F; --ink-2:#3A4046; --muted:#62676E; --faint:#8A9099;
  --surface:#FFFFFF; --surface-2:#F7F8FA; --line:#D7DBE0;
  --brand:#D81E1E; --brand-deep:#A81414; --brand-soft:#FBE6E6;
  --err:#8E1B1B; --err-soft:#F7E2E2;
  --panel:#111417; --panel-2:#181C21; --panel-ink:#F2F4F6; --panel-muted:#9AA2AB;
  --body:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Montserrat","Lato",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E9ECEF; --ink-2:#C4CAD1; --muted:#949BA3; --faint:#71787F;
    --surface:#171A1E; --surface-2:#1D2126; --line:#2A2F36;
    --brand:#FF4D4D; --brand-deep:#FF6B6B; --brand-soft:#3A1416;
    --err:#F0736B; --err-soft:#3A1A1A;
  }
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--surface); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);
}
@media (max-width:900px){ body{grid-template-columns:1fr; grid-template-rows:auto 1fr;} }

/* ---------- pannello del marchio: un foglio da disegno ---------- */
.brandpanel{
  position:relative; background:var(--panel); color:var(--panel-ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:40px 44px; overflow:hidden; isolation:isolate;
}
.brandpanel::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 16px 16px, 16px 16px;
}
.brandpanel::after{
  content:""; position:absolute; z-index:-1; width:640px; height:640px;
  right:-220px; bottom:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,30,30,.30) 0%, rgba(216,30,30,0) 68%);
}
.lockup{display:flex; align-items:center; gap:16px;}
.lockup img{
  width:118px; height:70px; object-fit:contain; background:#fff;
  padding:4px 6px; border-radius:3px; display:block;
}
.lockup .wm{display:flex; flex-direction:column; line-height:1.1;}
.lockup .wm b{font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.12em; text-transform:uppercase;}
.lockup .wm span{font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand);}
.pitch{max-width:34ch; margin:36px 0;}
.pitch h1{
  font-family:var(--disp); font-weight:800; font-size:clamp(28px,3.1vw,40px);
  line-height:1.08; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance;
}
.pitch p{margin:0; color:var(--panel-muted); font-size:15px; max-width:44ch;}
.facts{display:flex; gap:30px; flex-wrap:wrap;}
.fact{display:flex; flex-direction:column; gap:2px;}
.fact b{font-family:var(--disp); font-weight:800; font-size:23px; font-variant-numeric:tabular-nums; line-height:1.1;}
.fact span{font-family:var(--disp); font-weight:600; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--panel-muted);}
.brandfoot{font-size:11.5px; color:var(--panel-muted); line-height:1.5;}
.brandfoot b{color:var(--panel-ink); font-weight:700;}

/* ---------- pannello di accesso ---------- */
.formpanel{display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--surface);}
.card{width:100%; max-width:390px;}
.card .eyebrow{font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px;}
.card h2{font-family:var(--disp); font-weight:700; font-size:25px; margin:0 0 6px; letter-spacing:-.01em;}
.card .lead{margin:0 0 26px; color:var(--muted); font-size:14px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.field input[type=text], .field input[type=password]{
  width:100%; font-family:var(--body); font-size:15px; padding:11px 13px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:3px;
}
.field input:focus-visible{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.pw{position:relative;}
.pw button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; padding:6px 7px;
}
.pw button:hover{color:var(--brand);}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px;}
.remember{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer;}
.remember input{accent-color:var(--brand); width:16px; height:16px;}
button.go{
  width:100%; padding:13px 16px; background:var(--brand); color:#fff; border:0; border-radius:3px;
  font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; cursor:pointer;
}
button.go:hover{background:var(--brand-deep);}
button.go:disabled{opacity:.55; cursor:not-allowed;}
.alert{
  display:flex; gap:10px; align-items:flex-start; background:var(--err-soft);
  border-left:3px solid var(--err); color:var(--err); padding:11px 13px;
  font-size:13px; margin-bottom:20px; line-height:1.45;
}
.alert b{font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.11em; text-transform:uppercase; display:block; margin-bottom:2px;}
.foot{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:11.5px; color:var(--faint); line-height:1.55;}
.foot a{color:var(--muted);}
@media (max-width:900px){
  .brandpanel{padding:26px 24px;}
  .pitch{margin:22px 0;} .pitch h1{font-size:26px;}
  .facts{gap:22px;} .brandfoot{display:none;}
}
@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .22s ease-out;}
  @keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
}