/* Lettore presentazioni CityGraph — 22/10/2026. Colori dal DESIGN.md, accento per settore in --acc */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin-v2.woff2) format("woff2");font-weight:500 900;font-stretch:80% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}

:root{
  --notte:#0d1423;--blu:#172033;--blu-2:#223054;--rosso:#d71920;--ambra:#ffc94d;--wa:#16794a;
  --carta:#fff;--testo:#e9edf5;--sfumato:#b4bdd0;--linea:rgba(255,255,255,.14);
  --acc:#38bdf8;--acc-ink:#0d1423;
  --disp:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --gut:clamp(16px,4.2vw,56px);
  --esce:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--notte);color:var(--testo);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:var(--acc);color:var(--acc-ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambra);outline-offset:3px;border-radius:8px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg .pieno{fill:currentColor;stroke:none}

.pr{position:fixed;inset:0;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}

/* sfondo: tre luci dell'accento che si muovono piano + grana */
.pr-bg{position:absolute;inset:-20%;z-index:-2;background:radial-gradient(120% 90% at 50% 0%,var(--blu-2) 0%,var(--notte) 62%)}
.pr-bg i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(90px);opacity:.34;background:var(--acc);animation:vaga 26s ease-in-out infinite alternate}
.pr-bg i:nth-child(1){left:-6%;top:4%}
.pr-bg i:nth-child(2){right:-4%;bottom:-6%;background:var(--rosso);opacity:.2;animation-duration:31s;animation-delay:-9s}
.pr-bg i:nth-child(3){left:38%;top:46%;width:30vmax;height:30vmax;background:var(--ambra);opacity:.1;animation-duration:22s;animation-delay:-4s}
@keyframes vaga{to{transform:translate3d(9vw,-7vh,0) scale(1.18)}}
.pr-grana{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* barra in alto */
.pr-top{position:relative;z-index:5;padding:max(10px,env(safe-area-inset-top)) var(--gut) 0}
.pr-bar{display:flex;gap:5px;height:4px}
.pr-bar span{flex:1;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.pr-bar span::after{content:"";display:block;height:100%;width:100%;background:var(--carta);transform:scaleX(0);transform-origin:left}
.pr-bar span.fatto::after{transform:scaleX(1)}
.pr-bar span.ora::after{animation:riempi var(--dur,8s) linear forwards}
.pr[data-pausa] .pr-bar span.ora::after{animation-play-state:paused}
@keyframes riempi{to{transform:scaleX(1)}}
.pr-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.pr-cap{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:.9rem;color:var(--sfumato)}
.pr-cap b{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;color:var(--carta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.pr-cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-cap span:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:middle}

.pr-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--carta);transition:background .2s,transform .2s var(--esce)}
.pr-ico:hover{background:rgba(255,255,255,.12)}
.pr-ico:active{transform:scale(.92)}
.pr-ico .i-off,.pr-ico[aria-pressed="false"] .i-on{display:none}
.pr-ico[aria-pressed="false"] .i-off{display:block}
.pr-ico[aria-pressed="false"]{color:var(--sfumato)}
.pr-ico--play{width:52px;height:52px;background:var(--carta);color:var(--notte)}
.pr-ico--play:hover{background:var(--ambra)}
.pr-ico--play .i-play,.pr[data-pausa] .pr-ico--play .i-pausa{display:none}
.pr[data-pausa] .pr-ico--play .i-play{display:block}

/* palco */
.pr-stage{position:relative;flex:1;min-height:0;perspective:1600px}
.s{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(12px,3vh,40px) var(--gut) clamp(16px,3vh,40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--acc) transparent;will-change:transform,opacity,clip-path}
.s::-webkit-scrollbar{width:6px}.s::-webkit-scrollbar-thumb{background:var(--acc);border-radius:6px}
.s-in{width:100%;max-width:1180px;margin:0 auto}

/* comandi */
.pr-ctrl{position:relative;z-index:5;display:flex;align-items:center;gap:6px;padding:8px var(--gut) max(12px,env(safe-area-inset-bottom))}
.pr-num{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--sfumato);margin-left:6px;min-width:4.5em}
.pr-sp{flex:1}

/* entrate degli elementi */
[data-in]{opacity:0;transform:translate3d(0,26px,0);filter:blur(10px)}
.vivo [data-in]{animation:entra .9s var(--esce) forwards;animation-delay:var(--d,0s)}
@keyframes entra{to{opacity:1;transform:none;filter:none}}
.w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0) rotate(2deg);filter:blur(8px)}
.vivo .w{animation:entra .75s var(--esce) forwards;animation-delay:var(--d,0s)}

/* tipografia */
.h-xl{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,8.4vw,6rem);line-height:.98;letter-spacing:-.035em;color:var(--carta);text-wrap:balance}
.h-l{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5.2vw,4rem);line-height:1.02;letter-spacing:-.028em;color:var(--carta);text-wrap:balance}
.h-m{font-family:var(--disp);font-weight:800;font-size:clamp(1.65rem,3.6vw,2.75rem);line-height:1.05;letter-spacing:-.02em;color:var(--carta);text-wrap:balance}
.p-l{font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.45;color:var(--testo);max-width:44ch;text-wrap:pretty}
.p-m{font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.55;color:var(--sfumato);max-width:62ch;text-wrap:pretty}
.acc{color:var(--acc)}

/* logo app */
.pr-logo{display:grid;place-items:center;width:clamp(76px,11vw,128px);aspect-ratio:1;border-radius:28%;background:var(--carta);overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.pr-logo img{width:100%;height:100%;object-fit:contain}
.pr-logo b{font-family:var(--disp);font-weight:900;font-size:2.4rem;color:var(--acc-ink);letter-spacing:-.04em}
.pr-logo--txt{background:var(--acc)}
.pr-logo--xl{width:clamp(96px,16vw,148px)}

/* copertina */
.s-cover .s-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.s-cover .h-xl{margin:clamp(18px,3vh,30px) 0 16px}
.cov-meta{margin-top:22px;font-weight:700;font-size:.95rem;color:var(--acc)}
.fantasma{position:absolute;left:-2vw;bottom:-4vh;z-index:-1;font-family:var(--disp);font-weight:900;font-size:clamp(7rem,24vw,22rem);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;animation:scorre 40s linear infinite}
@keyframes scorre{to{transform:translateX(-30%)}}
.schermo{position:relative;border-radius:16px;overflow:hidden;background:var(--blu);aspect-ratio:1200/630;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1);transform:rotateY(-12deg) rotateX(4deg);transform-style:preserve-3d}
.schermo img{width:100%;height:100%;object-fit:cover;display:block;animation:kenburns 18s ease-in-out infinite alternate}
.schermo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%)}
@keyframes kenburns{to{transform:scale(1.12) translate(-2%,-2%)}}

/* problema */
.s-quote .s-in{max-width:1000px}
.virgolette{width:clamp(56px,8vw,96px);height:auto;color:var(--acc);stroke:none;fill:currentColor;margin-bottom:18px}
.s-quote .h-m{color:var(--acc);margin-bottom:22px}
.s-quote .p-l{font-family:var(--disp);font-weight:600;font-size:clamp(1.45rem,3.4vw,2.6rem);line-height:1.2;letter-spacing:-.015em;color:var(--carta);max-width:28ch}

/* soluzione */
.s-sol .s-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.s-sol .h-l{margin-bottom:18px}
.s-sol .schermo{transform:rotateY(10deg) rotateX(3deg)}
.s-sol .pr-logo{margin-bottom:22px}
.s-sol .p-m{color:var(--testo);font-size:clamp(1.1rem,1.9vw,1.4rem)}

/* funzioni: gettoni */
.s-fz .h-l{margin-bottom:clamp(20px,4vh,40px);max-width:16ch}
.gettoni{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0}
.gettoni li{display:flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;border-radius:999px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--linea),0 14px 30px -18px rgba(0,0,0,.6);font-weight:700;font-size:clamp(1rem,1.7vw,1.22rem);color:var(--carta);backdrop-filter:blur(6px)}
.spunta{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--acc-ink);flex:none}
.spunta svg{width:17px;height:17px;stroke-width:3}
.spunta--n{width:40px;height:40px;font-family:var(--disp);font-weight:900;font-size:1.25rem;font-variant-numeric:tabular-nums}

/* punti e vantaggi: elenco a due colonne con filetti */
.s-pt .h-l,.s-van .h-l,.s-fid .h-l,.s-faq .h-l{margin-bottom:clamp(20px,4vh,44px);max-width:22ch}
.elenco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);list-style:none;padding:0}
.elenco li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:clamp(14px,2.4vh,24px) 0;border-top:1px solid var(--linea)}
.elenco .spunta{grid-row:span 2;margin-top:2px}
.elenco b{font-family:var(--disp);font-weight:800;font-size:clamp(1.12rem,1.9vw,1.45rem);line-height:1.15;color:var(--carta);letter-spacing:-.01em}
.elenco span{color:var(--sfumato);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.5}

/* testo */
.s-tx .s-in{max-width:980px}
.s-tx .h-l{margin-bottom:26px}
.filo{display:block;height:4px;width:min(260px,40vw);background:var(--acc);border-radius:4px;margin-bottom:28px;transform-origin:left;transform:scaleX(0)}
.vivo .filo{animation:filo 1.1s var(--esce) .15s forwards}
@keyframes filo{to{transform:scaleX(1)}}
.s-tx .p-m{font-size:clamp(1.12rem,2vw,1.45rem);color:var(--testo);max-width:52ch}

/* per chi */
.s-chi .s-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;max-width:1080px}
.bersaglio{width:clamp(110px,18vw,220px);height:auto;color:var(--acc);stroke-width:1.4}
.vivo .bersaglio circle{animation:pulsa 2.4s ease-in-out infinite}
.vivo .bersaglio circle:nth-child(2){animation-delay:.3s}
@keyframes pulsa{50%{opacity:.35}}
.s-chi .h-l{margin-bottom:18px}

/* faq */
.domande{list-style:none;padding:0;display:grid;gap:0;max-width:980px}
.domande li{padding:clamp(14px,2.4vh,22px) 0;border-top:1px solid var(--linea)}
.domande b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.12rem,2vw,1.5rem);color:var(--carta);margin-bottom:8px;letter-spacing:-.01em}
.domande span{color:var(--sfumato);line-height:1.55;font-size:clamp(.98rem,1.4vw,1.1rem)}

/* fiducia */
.riga4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px);list-style:none;padding:0}
.riga4 li{padding-top:20px;border-top:3px solid var(--acc)}
.riga4 b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.1;color:var(--carta);margin-bottom:8px}
.riga4 span{color:var(--sfumato)}

/* chiamata finale */
.s-cta{text-align:center}
.s-cta .s-in{max-width:920px;display:grid;justify-items:center}
.s-cta .pr-logo{margin-bottom:26px}
.s-cta .h-xl{margin-bottom:18px}
.s-cta .p-l{margin:0 auto 34px;color:var(--sfumato)}
.bottoni{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:10px;font-weight:800;font-size:1.08rem;text-decoration:none;
  transition:transform .25s var(--esce),box-shadow .25s,background .2s;box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
.btn:hover{transform:translateY(-2px)}
.btn--acc{background:var(--acc);color:var(--acc-ink)}
.btn--acc:hover{box-shadow:0 22px 44px -16px var(--acc)}
.btn--linea{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:var(--carta)}
.btn--linea:hover{background:rgba(255,255,255,.1)}
.btn--wa{background:var(--wa);color:#fff}
.torna{margin-top:26px;color:var(--sfumato);font-size:.95rem;text-underline-offset:4px}
.vivo .btn--acc{animation:entra .9s var(--esce) forwards,respira 2.6s ease-in-out 1.6s infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + 1.4s)}
@keyframes respira{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 22%,transparent),0 18px 36px -18px rgba(0,0,0,.7)}}

/* tendina di transizione e coriandoli */
.pr-wipe{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,var(--rosso) 0%,var(--acc) 45%,var(--acc) 100%);transform:translateX(-101%)}
.pr-coriandoli{position:absolute;inset:0;z-index:6;pointer-events:none;width:100%;height:100%}

/* schermata iniziale */
.pr-start{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:var(--gut);text-align:center;
  background:radial-gradient(80% 70% at 50% 40%,color-mix(in srgb,var(--acc) 20%,var(--blu)) 0%,var(--notte) 75%);transition:opacity .6s var(--esce),visibility .6s}
.pr-start-in{display:grid;justify-items:center;max-width:720px}
.pr-start h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,7vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--carta);margin:26px 0 14px;text-wrap:balance}
.pr-start p{color:var(--sfumato);font-size:clamp(1.02rem,1.8vw,1.2rem);max-width:46ch}
.pr-go{display:inline-flex;align-items:center;gap:14px;margin:32px 0 16px;padding:0 34px 0 22px;min-height:66px;border-radius:999px;background:var(--carta);color:var(--notte);
  font-weight:800;font-size:1.15rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);transition:transform .25s var(--esce),background .2s}
.pr-go svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--acc);color:var(--acc-ink)}
.pr-go:hover:not(:disabled){transform:scale(1.04);background:var(--ambra)}
.pr-go:disabled{opacity:.5;cursor:progress}
.pr-start-nota{font-size:.9rem!important}
.pr-start-salta a{color:var(--carta);font-weight:700;text-underline-offset:4px}
.pr-start-salta{margin-top:10px}
.pr[data-stato="gira"] .pr-start{opacity:0;visibility:hidden}

/* catalogo (senza ?p=) */
.cat{position:absolute;inset:0;overflow-y:auto;padding:40px var(--gut) 80px;z-index:9;background:var(--notte)}
.cat h1{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.03em;color:var(--carta);margin-bottom:12px}
.cat > p{color:var(--sfumato);margin-bottom:24px;max-width:60ch}
.cat input{width:min(520px,100%);min-height:52px;padding:0 18px;border-radius:10px;border:1px solid var(--linea);background:var(--blu);color:var(--carta);font:inherit;font-size:1.05rem;margin-bottom:28px}
.cat input::placeholder{color:var(--sfumato)}
.cat ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 28px}
.cat a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--linea);text-decoration:none;font-weight:700;color:var(--carta)}
.cat a span{color:var(--sfumato);font-weight:400;font-size:.9rem;white-space:nowrap}
.cat a:hover{color:var(--ambra)}

/* telefono */
@media (max-width:820px){
  .s{align-content:start;padding-top:clamp(18px,4vh,36px)}
  .s-cover .s-in,.s-sol .s-in{grid-template-columns:1fr}
  .s-cover .schermo,.s-sol .schermo{transform:none;max-width:520px}
  .s-cover .schermo{order:-1;margin-bottom:6px}
  .elenco{grid-template-columns:1fr}
  .riga4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-chi .s-in{grid-template-columns:1fr}
  .bersaglio{width:84px}
  .pr-num{display:none}
  .pr-solo-desk{display:none}
  .fantasma{bottom:auto;top:30%}
  .btn{width:100%}
  .bottoni{width:100%;max-width:420px}
}
@media (max-height:560px) and (min-width:821px){.s{align-content:start}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-in],.w{filter:none;transform:none}
}