/* ========================================
   ZEROLAB Creative — Biglietto da visita digitale
   Pagine del team (chiara/, antonio/, moreno/): si aprono dal QR o dall'NFC,
   quasi sempre da telefono. Usa i colori e i font di style.css.
   ======================================== */

body.bz{background:var(--zero-night);color:var(--soft-ivory);padding-bottom:env(safe-area-inset-bottom)}
.bz-wrap{max-width:560px;margin:0 auto;padding:0 1.25rem}

/* ---- Barra in alto ---- */
.bz-top{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .4s,box-shadow .4s}
.bz-top.scrolled{background:rgba(18,20,24,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--border-dark)}
.bz-top-inner{max-width:560px;margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.bz-logo{display:flex;align-items:baseline;gap:.4rem}
.bz-save-mini{font-family:var(--ff-head);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft-ivory);border:1px solid rgba(240,110,53,.5);padding:.55em 1em;display:flex;align-items:center;gap:.5em;transition:background .3s,border-color .3s}
.bz-save-mini:hover{background:rgba(240,110,53,.12);border-color:var(--glow-orange)}
.bz-save-mini svg{width:14px;height:14px;color:var(--glow-orange)}

/* ---- Apertura ---- */
.bz-hero{position:relative;overflow:hidden;padding:5.6rem 0 3rem}
.bz-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:bzFloat 14s ease-in-out infinite alternate}
.bz-glow-a{width:340px;height:340px;background:var(--glow-orange);top:-80px;left:-140px}
.bz-glow-b{width:380px;height:380px;background:var(--creative-violet);top:220px;right:-190px;animation-delay:-6s;opacity:.4}
@keyframes bzFloat{to{transform:translate(40px,60px) scale(1.1)}}

.bz-id{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:end;margin-bottom:1.4rem}
.bz-photo{position:relative;width:clamp(118px,34vw,170px)}
.bz-photo::before{content:"";position:absolute;inset:0;transform:translate(8px,8px);border:1px solid rgba(240,110,53,.6)}
.bz-photo img{position:relative;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;background:var(--graphite)}
.bz-photo.no-photo img{display:none}
.bz-photo.no-photo::after{content:attr(data-initials);position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;background:var(--graphite);font-family:var(--ff-head);font-size:3rem;font-weight:900;color:var(--glow-orange)}
.bz-live{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-head);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--soft-ivory);margin-bottom:.9rem}
.bz-live i{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:bzPing 2s infinite}
@keyframes bzPing{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.bz-role{display:block;font-family:var(--ff-head);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow-orange);margin-top:.7rem;line-height:1.5}
.bz-name{font-family:var(--ff-head);font-size:clamp(2.3rem,11vw,3.4rem);font-weight:900;line-height:.92;letter-spacing:-.045em}
.bz-lead{font-size:1.02rem;line-height:1.6;color:var(--text-light-muted);margin-bottom:1.6rem}
.bz-lead strong{color:var(--soft-ivory);font-weight:600}

/* Bottone principale: salva in rubrica */
.bz-save{position:relative;display:flex;align-items:center;gap:1rem;width:100%;padding:1.05rem 1.3rem;background:var(--gradient-brand);background-size:200% 100%;color:#fff;text-align:left;box-shadow:0 14px 40px rgba(171,55,207,.28);overflow:hidden;transition:background-position .6s var(--ease),transform .3s var(--ease)}
.bz-save:hover{background-position:100% 0;transform:translateY(-2px)}
.bz-save:active{transform:scale(.98)}
.bz-save::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:bzShine 3.6s ease-in-out 1.5s infinite}
@keyframes bzShine{0%{left:-60%}35%,100%{left:130%}}
.bz-save-ico{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(18,20,24,.25)}
.bz-save-ico svg{width:24px;height:24px}
.bz-save-txt{display:flex;flex-direction:column;line-height:1.25}
.bz-save-txt strong{font-family:var(--ff-head);font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.bz-save-txt small{font-size:.8rem;opacity:.85}
.bz-save-arr{margin-left:auto;font-size:1.3rem}

/* Azioni rapide */
.bz-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.6rem}
.bz-act{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.95rem .25rem .8rem;border:1px solid var(--border-dark);background:rgba(232,227,217,.03);font-family:var(--ff-head);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-ivory);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.bz-act:hover{border-color:rgba(240,110,53,.5);background:rgba(240,110,53,.06);transform:translateY(-2px)}
.bz-act svg{width:22px;height:22px;color:var(--glow-orange)}
.bz-act-wa svg{color:#25D366}

.bz-scroll{display:flex;width:max-content;margin-left:auto;margin-right:auto;flex-direction:column;align-items:center;gap:.4rem;margin-top:2rem;font-family:var(--ff-head);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-light-muted)}
.bz-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--glow-orange),transparent);animation:bzDrop 2s ease-in-out infinite}
@keyframes bzDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- Titoli di sezione ---- */
.bz-sec{padding:4.5rem 0}
.bz-label{display:block;font-family:var(--ff-head);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--glow-orange);margin-bottom:.8rem}
.bz-title{font-family:var(--ff-head);font-size:clamp(2rem,8.5vw,2.8rem);font-weight:900;line-height:1.02;letter-spacing:-.035em;margin-bottom:1rem}
.bz-intro{color:var(--text-light-muted);line-height:1.65;max-width:34ch}

/* ---- Lavori: carosello ---- */
.bz-works{padding:2rem 0 3.5rem;background:linear-gradient(180deg,var(--zero-night),#1a1a20 40%,var(--zero-night))}
.bz-works-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.bz-nav{display:none;gap:.5rem}
.bz-nav button{width:46px;height:46px;border:1px solid var(--border-dark);color:var(--soft-ivory);font-size:1.1rem;transition:border-color .3s,background .3s,opacity .3s}
.bz-nav button:hover{border-color:var(--glow-orange);background:rgba(240,110,53,.08)}
.bz-nav button:disabled{opacity:.3;pointer-events:none}

.bz-track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(1.25rem,calc((100vw - 560px)/2 + 1.25rem));padding:.5rem max(1.25rem,calc((100vw - 560px)/2 + 1.25rem)) 1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bz-track::-webkit-scrollbar{display:none}
.bz-slide{position:relative;flex:none;width:min(78vw,330px);aspect-ratio:4/5;scroll-snap-align:start;overflow:hidden;background:var(--graphite);border:1px solid var(--border-dark);transition:transform .5s var(--ease),opacity .5s,border-color .3s}
.bz-slide img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bz-slide:hover img{transform:scale(1.05)}
.bz-slide:hover{border-color:rgba(240,110,53,.5)}
.bz-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,13,16,.55) 65%,rgba(12,13,16,.94));pointer-events:none}
.bz-slide-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:1.3rem 1.2rem 1.25rem}
.bz-tag{display:inline-block;font-family:var(--ff-head);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--zero-night);background:var(--soft-ivory);padding:.4em .7em;margin-bottom:.7rem}
.bz-tag.t-invito{background:var(--glow-orange)}
.bz-tag.t-sito{background:#8fd3ff}
.bz-tag.t-software{background:#c7a6ff}
.bz-slide-title{display:block;font-family:var(--ff-head);font-size:1.35rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff}
.bz-slide-go{display:inline-flex;align-items:center;gap:.4em;margin-top:.55rem;font-family:var(--ff-head);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow-orange)}
.bz-slide-cta{display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:var(--gradient-brand)}
.bz-slide-cta::after{display:none}
.bz-slide-cta .bz-cta-big{font-family:var(--ff-head);font-size:2.3rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:#fff;margin-bottom:1rem}
.bz-slide-cta p{color:rgba(255,255,255,.88);line-height:1.5;margin-bottom:1.3rem}
.bz-slide-cta .bz-slide-go{color:#fff;font-size:.8rem}

.bz-progress{display:flex;align-items:center;gap:1rem;max-width:560px;margin:.4rem auto 0;padding:0 1.25rem}
.bz-bar{flex:1;height:2px;background:var(--border-dark);position:relative;overflow:hidden}
.bz-bar span{position:absolute;inset:0;background:var(--gradient-text);transform-origin:left;transform:scaleX(.08);transition:transform .25s}
.bz-count{font-family:var(--ff-head);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--text-light-muted);font-variant-numeric:tabular-nums}
.bz-count b{color:var(--soft-ivory)}
.bz-hint{font-family:var(--ff-head);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-light-muted);display:flex;align-items:center;gap:.5em}
.bz-hint i{font-style:normal;display:inline-block;animation:bzNudge 1.6s ease-in-out infinite}
@keyframes bzNudge{50%{transform:translateX(6px)}}

/* ---- Frase ---- */
.bz-quote{padding:4.5rem 0;text-align:left}
.bz-quote p{font-family:var(--ff-head);font-size:clamp(1.7rem,7.2vw,2.4rem);font-weight:800;line-height:1.15;letter-spacing:-.03em}
.bz-quote em{font-style:normal;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ---- Di cosa mi occupo: schede che si impilano scorrendo ---- */
.bz-stack{display:grid;gap:1rem;margin-top:2rem}
.bz-card{position:sticky;top:calc(5.5rem + var(--i) * 14px);padding:1.7rem 1.5rem 1.8rem;background:linear-gradient(160deg,#24222a,#17181d);border:1px solid rgba(232,227,217,.1);box-shadow:0 -12px 40px rgba(0,0,0,.35);overflow:hidden}
.bz-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-text)}
.bz-card-num{position:absolute;right:1rem;top:.4rem;font-family:var(--ff-head);font-size:5.5rem;font-weight:900;line-height:1;letter-spacing:-.06em;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.22}
.bz-card-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,110,53,.35);color:var(--glow-orange);margin-bottom:1.1rem}
.bz-card-ico svg{width:22px;height:22px}
.bz-card h3{font-family:var(--ff-head);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.6rem}
.bz-card p{color:var(--text-light-muted);line-height:1.65;font-size:.98rem}

/* ---- Come lavoro: linea del tempo chiara ---- */
.bz-light{background:var(--soft-ivory);color:var(--text-dark)}
.bz-light .bz-intro{color:var(--text-dark-muted)}
.bz-steps{position:relative;margin-top:2.4rem;padding-left:2.6rem}
.bz-steps::before,.bz-steps-fill{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:rgba(18,20,24,.1)}
.bz-steps-fill{background:var(--gradient-text);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
.bz-step{position:relative;padding-bottom:2.2rem}
.bz-step:last-child{padding-bottom:0}
.bz-step-dot{position:absolute;left:-2.6rem;top:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--soft-ivory);border:2px solid rgba(18,20,24,.18);font-family:var(--ff-head);font-size:.62rem;font-weight:900;color:var(--text-dark-muted);transition:background .4s,border-color .4s,color .4s}
.bz-step.on .bz-step-dot{background:var(--glow-orange);border-color:var(--glow-orange);color:#fff}
.bz-step-when{display:block;font-family:var(--ff-head);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);margin-bottom:.3rem}
.bz-step h3{font-family:var(--ff-head);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.45rem;line-height:1.2}
.bz-step p{color:var(--text-dark-muted);line-height:1.65}

/* ---- Il team ---- */
.bz-team{display:grid;gap:.75rem;margin-top:1.4rem}
.bz-mate{display:flex;align-items:center;gap:1rem;padding:.8rem;border:1px solid var(--border-dark);transition:border-color .3s,background .3s}
.bz-mate:hover{border-color:rgba(240,110,53,.5);background:rgba(240,110,53,.05)}
.bz-mate img{width:58px;height:58px;object-fit:cover;object-position:top;background:var(--graphite)}
.bz-mate strong{display:block;font-family:var(--ff-head);font-size:1.05rem;font-weight:800}
.bz-mate small{color:var(--text-light-muted);font-size:.85rem}
.bz-mate span:last-child{margin-left:auto;color:var(--glow-orange);padding-right:.5rem}

/* ---- Chiusura ---- */
.bz-end{position:relative;overflow:hidden;padding:5rem 0 4rem;text-align:center}
.bz-end .bz-glow-a{top:auto;bottom:-160px;left:-120px}
.bz-end .bz-title{max-width:14ch;margin-left:auto;margin-right:auto}
.bz-end .bz-intro{margin:0 auto 2rem}
.bz-wa{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;max-width:420px;margin:0 auto .75rem;padding:1.15rem;background:#25D366;color:#0b2e17;font-family:var(--ff-head);font-size:1.05rem;font-weight:800;transition:transform .3s var(--ease),box-shadow .3s}
.bz-wa:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(37,211,102,.25)}
.bz-wa svg{width:24px;height:24px}
.bz-save-alt{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;max-width:420px;margin:0 auto;padding:1.05rem;border:1px solid rgba(232,227,217,.2);font-family:var(--ff-head);font-weight:700;transition:border-color .3s,background .3s}
.bz-save-alt:hover{border-color:var(--glow-orange);background:rgba(240,110,53,.06)}
.bz-save-alt svg{width:20px;height:20px;color:var(--glow-orange)}
.bz-mail{display:inline-block;margin-top:1.6rem;color:var(--text-light-muted);border-bottom:1px solid rgba(232,227,217,.2);padding-bottom:2px}

.bz-foot{border-top:1px solid var(--border-dark);padding:2rem 0 3rem;text-align:center;font-size:.8rem;color:var(--text-light-muted);line-height:1.8}
.bz-foot a{border-bottom:1px solid rgba(232,227,217,.15)}
.bz-foot .logo-text{font-size:1.1rem}

/* ---- Barra fissa in basso (telefono) ---- */
.bz-dock{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:8800;display:flex;gap:.5rem;max-width:520px;margin:0 auto;transform:translateY(160%);transition:transform .5s var(--ease)}
.bz-dock.show{transform:none}
.cookie-banner.visible ~ .bz-dock{transform:translateY(160%)}
.bz-dock a{display:flex;align-items:center;justify-content:center;gap:.55rem;height:54px;font-family:var(--ff-head);font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.bz-dock-save{flex:1;background:var(--gradient-brand);color:#fff;font-size:.95rem}
.bz-dock-save svg{width:20px;height:20px}
.bz-dock-wa{width:54px;background:#25D366;color:#0b2e17}
.bz-dock-wa svg{width:24px;height:24px}

/* ---- Messaggio dopo il salvataggio ---- */
.bz-toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));z-index:9000;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--soft-ivory);color:var(--zero-night);font-family:var(--ff-head);font-size:.85rem;font-weight:700;padding:.85em 1.2em;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:opacity .35s,transform .35s var(--ease);width:max-content;max-width:calc(100vw - 2rem);text-align:center}
.bz-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- Schermi grandi ---- */
@media (min-width:760px){
  .bz-hero{padding-top:7rem}
  .bz-nav{display:flex}
  .bz-slide{width:300px}
  .bz-dock{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bz-glow,.bz-save::after,.bz-scroll i,.bz-hint i{animation:none}
}