/* ==================================================================
   ZONAR — Schermata di benvenuto
   Colori ufficiali del marchio: navy #081C3F, lime #BEFA03.
   Niente color-mix(), niente :has(). Compatibile Aruba / SiteGround.
   ================================================================== */

:root{
  /* Marchio */
  --zb-navy:#081c3f;
  --zb-lime:#befa03;

  /* Interfaccia */
  --zb-fondo:#0f1a2e;
  --zb-fondo-scuro:#081221;
  --zb-card:rgba(26,41,66,.66);
  --zb-card-solida:#16243c;
  --zb-bordo:rgba(126,166,222,.18);
  --zb-bordo-forte:rgba(190,250,3,.38);
  --zb-testo:#eaf1fb;
  --zb-muto:#9db0cb;

  /* Accento: per tornare al blu precedente basta cambiare queste due */
  --zb-accento:#befa03;
  --zb-accento-tenue:rgba(190,250,3,.16);
}

*{box-sizing:border-box}

html,body{height:100%}

body.zb{
  margin:0;
  min-height:100vh;
  background:var(--zb-fondo-scuro);
  color:var(--zb-testo);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Sfondo ------------------------------------------------------- */

.zb-sfondo,
.zb-velo{
  position:fixed;
  inset:0;
  z-index:0;
}

.zb-sfondo{
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Il velo lavora anche da solo: se l'immagine manca, resta una
   notte urbana costruita solo con gradienti. */
.zb-velo{
  background:
    radial-gradient(118% 76% at 80% 90%, rgba(19,58,110,.55) 0%, rgba(8,28,63,0) 62%),
    radial-gradient(74% 46% at 16% 4%, rgba(190,250,3,.08) 0%, rgba(8,28,63,0) 60%),
    linear-gradient(180deg, rgba(8,18,33,.93) 0%, rgba(8,28,63,.78) 40%, rgba(8,18,33,.95) 100%);
}

/* --- Impaginato ---------------------------------------------------- */

.zb-schermo{
  position:relative;
  z-index:1;
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  padding:clamp(34px,8vh,72px) 22px calc(28px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}

/* Il blocco centrale galleggia al centro, il piede resta in basso */
.zb-centro{margin:auto 0}

/* --- Marchio -------------------------------------------------------- */

.zb-testata{text-align:center}

.zb-logo{
  display:block;
  width:min(214px,60%);
  height:auto;
  margin:0 auto;
}

/* Lockup di riserva, se il PNG del logo non e' stato caricato */
.zb-lockup{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.zb-monogramma{
  display:block;
  width:auto;
  height:62px;
}

.zb-marchio{
  font-size:56px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.5px;
  color:#fff;
}

.zb-payoff{
  margin:8px 0 0;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:4.8px;
  text-transform:uppercase;
  color:#7f96b6;
}

.zb-claim{
  margin:18px auto 0;
  max-width:34ch;
  font-size:15px;
  line-height:1.55;
  color:#d3e0f2;
  text-wrap:balance;
}

.zb-claim strong{color:#fff;font-weight:700}

/* "Chi sei?" — e' la domanda della schermata, non un'etichetta */
.zb-domanda{
  margin:clamp(26px,5vh,42px) 0 14px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:#8ea4c2;
}

/* --- Schede ruolo ---------------------------------------------------- */

.zb-scelte{display:flex;flex-direction:column;gap:14px}

.zb-scelta{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 14px 16px 16px;
  border:1px solid var(--zb-bordo);
  border-radius:18px;
  background:var(--zb-card-solida);
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, transform .18s ease, background-color .18s ease;
}

@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .zb-scelta{
    background:var(--zb-card);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
}

.zb-scelta:hover,
.zb-scelta:focus-visible{
  border-color:var(--zb-bordo-forte);
  background:rgba(32,50,80,.82);
  transform:translateY(-1px);
}

.zb-scelta:focus-visible{
  outline:2px solid var(--zb-accento);
  outline-offset:3px;
}

.zb-scelta:active{transform:translateY(0)}

.zb-icona{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(190,250,3,.24);
  background:linear-gradient(160deg, rgba(190,250,3,.15), rgba(19,58,110,.28));
  color:var(--zb-lime);
}

.zb-icona svg{width:24px;height:24px}

.zb-testo{flex:1 1 auto;min-width:0}

.zb-nome{
  display:block;
  font-size:17px;
  font-weight:700;
  color:#fff;
  letter-spacing:.2px;
}

.zb-desc{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--zb-muto);
}

.zb-freccia{
  flex:0 0 auto;
  color:#6f88ab;
  display:flex;
  transition:color .18s ease;
}

.zb-freccia svg{width:20px;height:20px}

.zb-scelta:hover .zb-freccia,
.zb-scelta:focus-visible .zb-freccia{color:var(--zb-accento)}

/* --- Accesso e piede -------------------------------------------------- */

.zb-accesso{
  margin:22px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--zb-muto);
}

.zb-accesso a{
  color:var(--zb-lime);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(190,250,3,.42);
  padding-bottom:1px;
}

.zb-accesso a:hover,
.zb-accesso a:focus-visible{color:#fff;border-bottom-color:#fff}

.zb-esplora{
  margin:14px 0 0;
  text-align:center;
  font-size:13px;
}

.zb-esplora a{
  color:#8ea4c2;
  text-decoration:none;
  border-bottom:1px solid rgba(142,164,194,.28);
  padding-bottom:1px;
}

.zb-esplora a:hover,
.zb-esplora a:focus-visible{color:#d3e0f2;border-bottom-color:#d3e0f2}

.zb-piede{
  padding-top:34px;
  text-align:center;
  font-size:12px;
  color:#6f84a4;
}

.zb-piede strong{color:#93aacb;font-weight:600}

/* --- Ingresso: una sola sequenza, all'apertura ------------------------- */

@keyframes zb-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.zb-testata,
.zb-domanda,
.zb-scelte,
.zb-accesso,
.zb-esplora{
  animation:zb-entra .5s ease-out both;
}

.zb-domanda{animation-delay:.08s}
.zb-scelte{animation-delay:.14s}
.zb-accesso{animation-delay:.22s}
.zb-esplora{animation-delay:.26s}

@media (prefers-reduced-motion:reduce){
  .zb-testata,
  .zb-domanda,
  .zb-scelte,
  .zb-accesso,
  .zb-esplora{animation:none}
  .zb-scelta,
  .zb-freccia{transition:none}
  .zb-scelta:hover{transform:none}
}

/* --- Schermi bassi e desktop -------------------------------------------- */

@media (max-height:640px){
  .zb-schermo{padding-top:26px}
  .zb-logo{width:min(220px,62%)}
  .zb-claim{font-size:14.5px;margin-top:16px}
  .zb-scelta{padding:13px 12px 13px 14px}
  .zb-icona{width:42px;height:42px;border-radius:12px}
}

@media (min-width:900px){
  .zb-schermo{max-width:470px}
  .zb-sfondo{background-position:center 30%}
}