/* Versione a reel: ogni schermata occupa tutto lo schermo e scatta alla successiva, come un reel.
   Barra a segmenti in alto (come le storie), un solo messaggio per reel. */
html { scroll-snap-type: y mandatory; }
.reel-page { background: var(--nd-bg); }

.reels { display: block; }
.reel { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; isolation: isolate; }
.r-in { position: relative; z-index: 1; width: 100%; max-width: 560px; margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.r-top { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.r-bottom { margin-top: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.r-center { margin-block: auto; }

.r-light { background: var(--nd-bg); color: var(--nd-ink); }
.r-dark { background: var(--nd-band); color: var(--nd-band-ink); }

/* Tipografia dei reel */
.r-h1 { margin: 0; font-family: var(--nd-display); font-weight: 400; color: #fff; font-size: clamp(2.9rem, 13.5vw, 4.2rem); line-height: .98; letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.r-h1 em { font-style: italic; }
.r-h2 { margin: 22px 0 0; font-family: var(--nd-display); font-weight: 400; font-size: clamp(2.5rem, 11.5vw, 3.5rem); line-height: 1; letter-spacing: -.02em; color: var(--nd-ink); text-wrap: balance; }
.r-h2 em { font-style: italic; color: var(--nd-muted); }
.r-body { margin: 20px 0 0; max-width: 30ch; font-size: 1.08rem; line-height: 1.55; color: var(--nd-ink2); }
.r-big { margin: 22px 0 0; font-family: var(--nd-display); font-size: clamp(2.6rem, 12vw, 3.7rem); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.r-big.small { font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.15; }
.r-dark { color: var(--nd-band-ink); }

/* Entrata: il contenuto di ogni reel entra quando il reel è attivo */
html.js .reel .r-in > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .reel.on .r-in > * { opacity: 1; transform: none; }
html.js .reel.on .r-in > *:nth-child(2) { transition-delay: .12s; }
html.js .reel.on .r-in > *:nth-child(3) { transition-delay: .24s; }
.reel .nd-mark { transition-delay: .7s; }
.reel .nd-mark + .nd-mark { transition-delay: 1.3s; }
.reel.on .nd-mark { background-size: 100% .11em; }

/* Reel 1 · foto */
.r-hero { background: #0B1424; }
.r-photo { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 55%; z-index: -2; }
.r-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,16,34,.55) 0%, rgba(7,16,34,0) 22%, rgba(7,16,34,0) 50%, rgba(7,16,34,.8) 100%); }
.r-hint { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; z-index: 2;
  font: 500 .7rem/1 var(--nd-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); animation: hint 1.8s ease-in-out infinite; }
.r-hint::after { content: ""; display: block; width: 1px; height: 18px; margin: 8px auto 0; background: currentColor; }
@keyframes hint { 50% { transform: translate(-50%, 5px); opacity: .5; } }

/* Reel 2 · il rumore: notifiche sparse che svaniscono */
.noise { position: absolute; inset: 0; z-index: 0; padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
.noise span { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); max-width: 60%; padding: 9px 13px; border-radius: 14px;
  background: var(--surface); color: var(--nd-ink2); box-shadow: 0 6px 20px rgba(11,27,51,.08); font-size: .82rem; font-weight: 700; white-space: nowrap;
  opacity: 0; filter: blur(0); transition: opacity .5s ease var(--d), filter 1.2s ease calc(var(--d) + 1.4s), transform .6s ease var(--d); }
.r-problem.on .noise span { opacity: .9; filter: blur(2.5px); }

/* Reel 4 · questionario */
.quiz { position: relative; z-index: 1; width: calc(100% - 48px); max-width: 512px; margin: auto auto calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 22px 20px; border-radius: 28px; background: var(--surface); box-shadow: 0 18px 40px rgba(11,27,51,.12); display: grid; gap: 14px; }
.quiz-bar { height: 4px; border-radius: 4px; background: var(--nd-line); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 30%; background: var(--nd-grad); transform-origin: left; transform: scaleX(0); transition: transform 1.2s ease .5s; }
.r-quiz.on .quiz-bar i { transform: scaleX(1); }
.quiz-n { margin: 0; font: 500 .72rem/1 var(--nd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nd-muted); }
.quiz-q { margin: 0; font-family: var(--nd-display); font-size: 1.55rem; line-height: 1.15; color: var(--nd-ink); }
.quiz-scale { display: flex; justify-content: space-between; align-items: center; padding-inline: 4px; }
.quiz-scale span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c); transition: background-color .3s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.r-quiz.on .quiz-scale span:nth-child(4) { background: var(--c); transform: scale(1.18); transition-delay: 1.3s; }

/* Reel 5 · feed che si ordina per affinità */
.feed { position: relative; z-index: 1; list-style: none; width: calc(100% - 48px); max-width: 512px; margin: auto auto calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0; display: grid; gap: 10px; }
.feed li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 10px 26px rgba(11,27,51,.09); transition: transform .8s cubic-bezier(.65,0,.25,1); }
.feed img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.feed li > div { display: grid; gap: 4px; min-width: 0; }
.feed b { font-size: .98rem; color: var(--nd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed span { font-size: .8rem; color: var(--nd-muted); }
.feed i { display: block; height: 5px; border-radius: 5px; background: var(--nd-line); position: relative; overflow: hidden; }
.feed i::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--nd-grad); border-radius: 5px; transform-origin: left; transform: scaleX(0); transition: transform .9s ease .2s; }
.r-feed.on .feed i::before { transform: none; }
.feed em { font: 500 .85rem/1 var(--nd-mono); font-style: normal; color: var(--nd-ink); }

/* Reel finale */

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: y proximity; }
  .r-hint, .noise span, .feed li, .quiz-bar i, .quiz-scale span { animation: none; transition: none; }
}

.r-hero .r-bottom { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* ================= Versione 2 ================= */

/* Reel scuri: il testo segue lo sfondo (che si inverte nel tema scuro) */
.r-dark .r-h2, .r-dark .r-big{ color: inherit; }
.r-dark .r-h2 em, .r-dark .r-big em{ color: inherit; opacity: .6; }
.r-dark .r-body { color: inherit; opacity: .75; }
.r-dark .nd-label, .r-dark .nd-label span { color: inherit; }
.r-dark .nd-label { opacity: .75; }
.r-big em { font-style: italic; }
.r-top { padding-top: calc(118px + env(safe-area-inset-top, 0px)); }
.r-center { padding-top: 72px; }

/* Box traslucido in alto */
.rbar { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.rbox { max-width: 536px; margin-inline: auto; padding: 10px 10px 10px 14px; border-radius: 20px; pointer-events: auto; color: #fff;
  background: rgba(10, 20, 38, .32); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 26px rgba(5,15,35,.18); transition: background-color .3s, color .3s; }
.rbar.on-light .rbox { color: var(--nd-ink); background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(11,27,51,.08), 0 8px 26px rgba(11,27,51,.08); }
.rbox-row { display: flex; align-items: center; gap: 10px; }

.rchap { font: 500 .72rem/1.2 var(--nd-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rseg { display: flex; gap: 3px; margin-top: 10px; }
.rseg i { flex: 1; height: 3px; border-radius: 3px; background: currentColor; opacity: .22; position: relative; overflow: hidden; }
.rseg i.done { opacity: .55; }
.rseg i.now { opacity: 1; }

/* Indice */

@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }

/* Reel: tante app, una sola */
.merge { position: relative; z-index: 1; flex: 1; min-height: 0; margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
.merge-field { position: absolute; left: 50%; top: 50%; width: min(92vw, 56vh, 480px); aspect-ratio: 1; transform: translate(-50%, -50%); animation: orbit 80s linear infinite; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mt { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(1);
  transition: transform .95s cubic-bezier(.7,0,.25,1) var(--d), opacity .4s ease calc(var(--d) + .6s); }
.mt > span { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 7px; transform: translate(-50%, -24px); animation: counter 80s linear infinite; }
@keyframes counter { to { rotate: -360deg; } }
.mt i { display: block; width: 44px; height: 44px; border-radius: 13px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.18); }
.mt em { font: 500 .62rem/1 var(--nd-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .8; transition: opacity .3s; }
.merge.merged .mt { transform: rotate(var(--a)) translate(0px) rotate(calc(-1 * var(--a))) scale(.2); opacity: 0; }
.merge.merged .mt em { opacity: 0; }
.merge-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.7); display: grid; justify-items: center; gap: 12px; opacity: 0;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,1.4,.4,1); }
.merge.done .merge-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.merge-icon { position: relative; width: 92px; height: 92px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.merge-icon::before { content: ""; position: absolute; inset: -46px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(187,45,206,.45), rgba(30,66,186,0) 68%); opacity: 0; transition: opacity 1.2s ease .2s; }
.merge.done .merge-icon::before { opacity: 1; }
.merge-icon .brand-mark { width: 54px; height: 54px; background: #123F73; }
.merge-name { font-weight: 700; letter-spacing: .1em; font-size: 1.15rem; }
.merge-replay { position: absolute; z-index: 2; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid currentColor; background: transparent; color: inherit; font: 500 .72rem/1 var(--nd-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: .7; }

/* Scelta del percorso */
.paths { display: grid; gap: 10px; margin-top: 26px; }
.path { display: grid; gap: 4px; padding: 18px 46px 18px 18px; border-radius: 20px; border: 1px solid var(--nd-line); background: var(--surface); color: var(--nd-ink);
  text-align: left; cursor: pointer; font: inherit; position: relative; transition: transform .15s, border-color .2s; }
.path::after { content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--nd-accent); }
.path b { font-family: var(--nd-display); font-weight: 400; font-size: 1.55rem; line-height: 1; }
.path span { font-size: .92rem; color: var(--nd-ink2); }
.path:active { transform: scale(.98); }
.path.picked { border-color: var(--nd-accent); }
.paths-hint { margin: 18px 0 0; font: 500 .72rem/1.4 var(--nd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nd-muted); }

/* Persone affini */

.p1 { --x: 18%; --y: 18%; --c: linear-gradient(135deg,#F06139,#F59A5B); --d: .4s; }
.p2 { --x: 82%; --y: 16%; --c: linear-gradient(135deg,#2FB37A,#7AD9A8); --d: .55s; }
.p3 { --x: 12%; --y: 70%; --c: linear-gradient(135deg,#6A3FD1,#A98CF2); --d: .7s; }
.p4 { --x: 88%; --y: 72%; --c: linear-gradient(135deg,#2E9BD6,#86CDF2); --d: .85s; }
.p5 { --x: 50%; --y: 88%; --c: linear-gradient(135deg,#D43998,#F27BC0); --d: 1s; }

/* Settimana compatta */

/* Elenchi "non solo eventi" e "per chi" */

/* Folla: le persone affini si accendono */
.crowd { position: relative; z-index: 1; flex: 1; margin: 10px 24px calc(64px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(7, 1fr); align-content: center; gap: 14px; }
.crowd i { justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nd-line); transition: background .5s, transform .5s, opacity .5s; transition-delay: var(--d); }
.r-reach.on .crowd i { opacity: .55; }
.r-reach.on .crowd i.aff { opacity: 1; background: var(--nd-grad); transform: scale(1.25); box-shadow: 0 4px 14px rgba(139,30,186,.3); }

/* Formula Insights */

 
 

/* Opportunity gap */

/* Investitori */
.revs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.revs li { display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 4px 6px; padding-block: 20px; border-top: 1px solid var(--nd-line); }
.revs li:last-child { border-bottom: 1px solid var(--nd-line); }
.revs span { grid-row: 1 / 3; font-family: var(--nd-display); font-size: 2.6rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--nd-ink); }
.revs b { font-family: var(--nd-display); font-weight: 400; font-size: 1.55rem; line-height: 1.05; }
.revs p { margin: 0; color: var(--nd-ink2); font-size: .95rem; }
.cyc { position: relative; z-index: 1; width: min(76vw, 44vh, 320px); aspect-ratio: 1; margin: auto; }
.cyc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cyc circle { fill: none; stroke: currentColor; stroke-opacity: .2; stroke-width: 2; }
.cyc .cyc-run { stroke: url(#none); stroke: #7FB8FF; stroke-opacity: 1; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .22 .78; animation: spin 6s linear infinite; }
.cy { position: absolute; width: 112px; margin-left: -56px; padding: 9px 10px; border-radius: 16px; text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.25;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(127,140,162,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c1 { left: 50%; top: -4%; } .c2 { left: 86%; top: 66%; } .c3 { left: 14%; top: 66%; }

/* Contatti */

.r-route .paths { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .merge-field, .mt > span, .cyc .cyc-run { animation: none; }
  .mt, .merge-core, .crowd i { transition: none; }
}

/* ================= Effetti "video" ================= */
/* Reel con foto di sfondo: sempre scuri, testo bianco */
.r-shot { background: #0B1424 !important; color: #fff !important; }
.r-shot .r-photo { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
.r-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,16,34,.55) 0%, rgba(7,16,34,.25) 35%, rgba(7,16,34,.85) 100%); }
.r-shot .r-h2, .r-shot .r-big, .r-shot .r-body, .r-shot .nd-label, .r-shot .nd-label span { color: #fff; }
.r-shot .r-h2 em { color: rgba(255,255,255,.7); opacity: 1; }
.r-problem .noise span { background: rgba(255,255,255,.9); color: #0B1B33; }

.r-contact::before { background: rgba(7,16,34,.72); }

/* Zoom lento sulle foto, come in un video */
.reel .r-photo { transform: scale(1.12); transition: transform 9s cubic-bezier(.2,.6,.3,1); }
.reel.on .r-photo { transform: scale(1); }

/* Titoli che entrano parola per parola */
.reel .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.9,.25,1), filter .6s ease; transition-delay: calc(var(--i) * 55ms + 180ms); }
.reel.on .w { opacity: 1; transform: none; filter: blur(0); }
html.js .reel .r-in > .r-h1, html.js .reel .r-in > .r-h2, html.js .reel .r-in > .r-big { opacity: 1; transform: none; transition: none; }

/* Segmento attivo che si riempie come il timer delle storie */
.rseg i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }
.rseg i.now::after { animation: tick 6s linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }

/* Piccolo "respiro" quando un reel diventa attivo */
.reel .r-in { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.reel:not(.on) .r-in { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .reel .w { transition: none; opacity: 1; transform: none; filter: none; }
  .reel .r-photo { transition: none; transform: none; }
  .rseg i.now::after { animation: none; transform: scaleX(1); }
}

/* ================= Versione 3 ================= */
/* Scala del questionario con i valori */
.quiz-scale { gap: 4px; padding-inline: 0; }
.quiz-scale span { width: auto; height: auto; border: 0; border-radius: 0; display: grid; justify-items: center; gap: 7px; flex: 1; background: none !important; transform: none !important; }
.quiz-scale b { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; font: 700 .95rem/1 var(--f-body); color: var(--nd-ink);
  transition: background-color .3s, color .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.quiz-scale em { font-style: normal; font-size: .62rem; line-height: 1.15; text-align: center; color: var(--nd-muted); }
.r-quiz.on .quiz-scale span:nth-child(4) b { background: var(--c); color: #fff; transform: scale(1.15); transition-delay: 1.3s; }
.r-quiz.on .quiz-scale span:nth-child(4) em { color: var(--nd-ink); font-weight: 700; }

/* Nia: dai gusti alle proposte */

@keyframes feed-in { to { opacity: .25; transform: translateY(26px) scale(.9); } }

@keyframes think { 50% { transform: scale(1.12) rotate(-8deg); } }

/* In gruppo o da solo */
.modes { position: relative; z-index: 1; width: calc(100% - 48px); max-width: 512px; margin: auto auto calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.modes article { display: grid; gap: 4px; padding: 16px 18px; border-radius: 22px; color: #fff; background: rgba(10,20,38,.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease var(--d), transform .8s cubic-bezier(.2,.9,.3,1) var(--d); }
.r-group.on .modes article { opacity: 1; transform: none; }
.modes .m-k { margin: 6px 0 0; font: 500 .66rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.modes b { font-family: var(--nd-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.modes article > p:last-child { margin: 0; font-size: .9rem; line-height: 1.45; opacity: .85; }
.av-group, .av-solo { display: flex; align-items: center; }
.av-group i, .av-solo i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.9); }
.av-group i + i { margin-left: -8px; }
.av-solo span { width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(255,255,255,.8); font-weight: 700; font-size: .9rem; }

/* Aree dell'app: carosello di card da scorrere di lato */

.r-h2.small-h { font-size: clamp(2rem, 9vw, 2.6rem); margin-top: 14px; }

/* Logo che torna all'inizio */

/* Azioni principali sopra l'indice */

@media (prefers-reduced-motion: reduce) {
   .modes article { transition: none; animation: none; opacity: 1; transform: none; }
  
}

/* ================= Indice a capitoli (v4) ================= */

/* Sottosezioni che si aprono sotto la card */

/* Azioni: una riga discreta in fondo */

/* ================= Colori (v5): blu dell'app per le selezioni, gradiente solo per Nia e la frase chiave ================= */
.reel-page {
  --app-blue: #489DFE;
  --app-blue-soft: rgba(72,157,254,.14);
  --nd-grad: linear-gradient(var(--app-blue), var(--app-blue));
  --nia: var(--app-blue);
  --nd-accent: var(--app-blue);
}
/* Il gradiente resta solo qui: la sottolineatura di "ti conosce" e "ti porta fuori" */
.reel-page .nd-mark { background-image: linear-gradient(100deg, #F06139, #D43998 35%, #8B1EBA 65%, #1E42BA); }

/* Selezioni */

.path.picked { border-color: var(--app-blue); box-shadow: inset 0 0 0 1px var(--app-blue); }

.crowd i.aff, .r-reach.on .crowd i.aff { background: var(--app-blue); box-shadow: 0 4px 14px rgba(72,157,254,.35); }

.feed em { color: var(--app-blue); }

/* Bagliori: blu, non viola */
.merge-icon::before { background: radial-gradient(circle, rgba(72,157,254,.4), rgba(72,157,254,0) 68%); }

/* Pallini e avatar: colori pieni, niente sfumature */
 .av-group i, .av-solo i, .vg-p { background-image: none !important; }
.p1, .vg-p.p1 { background-color: #F06139 !important; } .p2, .vg-p.p2 { background-color: #2FB37A !important; }
.p3, .vg-p.p3 { background-color: #6A3FD1 !important; } .p4, .vg-p.p4 { background-color: #2E9BD6 !important; } .p5, .vg-p.p5 { background-color: #D43998 !important; }
.av-group i, .av-solo i { background: var(--c); }

/* Barre e anelli delle grafiche */
.vf-row i::before{ background: var(--app-blue) !important; }
 .pick-img { background: var(--app-blue-soft); }

/* ================= Reel Chi sono ================= */

.me-av { position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: var(--app-blue); }
.me-av img, .me-av span { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; border: 3px solid var(--nd-bg); }
.me-av span { display: grid; place-items: center; background: var(--surface); color: var(--nd-ink); font-family: var(--nd-display); font-size: 2.4rem; }
.me-av.has-photo span { display: none; }

.me-role { margin: 6px 0 0; font: 500 .72rem/1 var(--nd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--app-blue); }
.me-xp { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.me-xp li { display: grid; grid-template-columns: 5.2rem minmax(0,1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding-block: 12px; border-top: 1px solid var(--nd-line); }
.me-xp li:last-child { border-bottom: 1px solid var(--nd-line); }
.me-xp time { grid-row: 1 / 3; font: 500 .66rem/1.5 var(--nd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nd-muted); }
.me-xp b { font-size: .98rem; color: var(--nd-ink); }
.me-xp span { font-size: .86rem; color: var(--nd-ink2); }

/* ================= v6 ================= */
/* Contenitore a schermo intero: la pagina non scorre, scattano solo i reel (stabile anche su iPhone) */
html { scroll-snap-type: none; }
html.reel-root, html.reel-root body { height: 100%; overflow: hidden; }
.reels { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { height: 100%; min-height: 0; }

/* Etichette senza icone */
.nd-label:not(:has(span))::before { content: none; }

/* Tante app: nomi leggibili prima dell'unione */
.mt em { font-size: .7rem; opacity: 1; letter-spacing: .05em; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.r-merge.on .mt > span { animation-duration: 80s; }
.mt i { width: 48px; height: 48px; border-radius: 14px; }

/* Pulsante in vetro, elegante */
.glass-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 20px; margin-top: 22px; border-radius: 99px; border: 0; cursor: pointer;
  color: #fff; text-decoration: none; font: 600 .95rem/1 var(--f-body); letter-spacing: .01em;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.25); transition: background-color .2s, transform .15s; }
.glass-btn:active { transform: scale(.97); }
.glass-btn i { width: 32px; height: 32px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.glass-btn i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 2px solid #0B1B33; border-top: 2px solid #0B1B33; transform: translate(-65%, -50%) rotate(45deg); }

/* Aree dell'app */
.r-area::before { background: linear-gradient(180deg, rgba(7,16,34,.35) 0%, rgba(7,16,34,0) 30%, rgba(7,16,34,.15) 55%, rgba(7,16,34,.88) 100%); }
.area-cap { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.area-cap .r-h2 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); margin-top: 14px; }
.area-line { margin: 10px 0 0; max-width: 32ch; font-size: .98rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.r-area .r-in { transition: opacity .35s ease, transform .5s ease; }
.r-area.panel-open .area-cap { opacity: 0; transform: translateY(20px); pointer-events: none; }
.area-panel { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(104px + env(safe-area-inset-top, 0px)) 0 calc(40px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--nd-bg) 82%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2);
  color: var(--nd-ink); opacity: 0; transform: translateY(6%); pointer-events: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.25,1); }
.area-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.ap-in { position: relative; display: grid; gap: 12px; max-width: 512px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }

.ap-title { margin: 4px 0 0; font-family: var(--nd-display); font-weight: 400; font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.05; }
.ap-text { margin: 0; color: var(--nd-ink2); line-height: 1.55; }
.area-panel .viz { background: var(--surface); box-shadow: 0 10px 28px rgba(11,27,51,.08); }
.area-panel .gain div { background: var(--surface); }
.area-panel .ap-in > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1); }
.area-panel.open .ap-in > * { opacity: 1; transform: none; }
.area-panel.open .ap-in > *:nth-child(2) { transition-delay: .08s; } .area-panel.open .ap-in > *:nth-child(3) { transition-delay: .14s; }
.area-panel.open .ap-in > *:nth-child(4) { transition-delay: .2s; } .area-panel.open .ap-in > *:nth-child(5) { transition-delay: .3s; } .area-panel.open .ap-in > *:nth-child(6) { transition-delay: .4s; }

/* Nia: la mappa */
.nm-top { padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
.nm { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px max(24px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }

.nm-map { flex: 0 1 auto; width: min(100%, 44vh); margin-inline: auto; }
.nm-map .node.sel { border-color: var(--app-blue); box-shadow: 0 0 0 4px rgba(72,157,254,.3), 0 6px 18px rgba(18,63,115,.3); }
.nm-map .me { background: var(--app-blue); box-shadow: 0 0 0 6px rgba(72,157,254,.2), 0 6px 18px rgba(72,157,254,.35); }
.nm-map .me::after { border-color: rgba(72,157,254,.5); }
.nm-pick { grid-template-columns: 60px minmax(0,1fr); padding: 12px; }
.nm-pick .pick-img { width: 60px; height: 60px; }
.nm-pick .aff i::before { background: var(--app-blue); }

/* Discover */
.dchat { position: relative; z-index: 1; width: calc(100% - 48px); max-width: 512px; margin: auto auto calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.dchat > * { opacity: 0; transform: translateY(12px); transition: opacity .45s ease var(--d), transform .55s cubic-bezier(.2,.9,.3,1) var(--d); }
.r-discover.on .dchat > * { opacity: 1; transform: none; }
.dc-me { justify-self: end; max-width: 84%; margin: 0; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--app-blue); color: #fff; font-size: .95rem; line-height: 1.4; }
.dc-typing { justify-self: start; margin: 0; display: flex; gap: 5px; padding: 13px 15px; border-radius: 18px; background: rgba(127,140,162,.2); }
.dc-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; animation: blink 1s infinite; }
.dc-typing i:nth-child(2) { animation-delay: .15s; } .dc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; } }
.r-discover.on .dc-typing { animation: hideTyping .1s linear 2.3s forwards; }
@keyframes hideTyping { to { opacity: 0; height: 0; padding: 0; margin: -6px 0; } }
.dc-nia { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: start; }
.dc-nia img { width: 34px; height: 32px; object-fit: contain; margin-top: 6px; }
.dc-card { display: grid; gap: 4px; padding: 16px; border-radius: 20px; background: #fff; color: #0B1B33; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.dc-badge { justify-self: start; padding: 4px 9px; border-radius: 99px; background: rgba(72,157,254,.14); color: #2F6FDE; font: 500 .62rem/1 var(--nd-mono); letter-spacing: .12em; text-transform: uppercase; }
.dc-card b { font-size: 1.05rem; margin-top: 4px; }
.dc-card > span:not(.dc-badge):not(.dc-cta) { font-size: .84rem; color: #5A6578; }
.dc-cta { justify-self: start; margin-top: 8px; padding: 9px 16px; border-radius: 99px; background: #0B1B33; color: #fff; font-weight: 700; font-size: .84rem; }
.dc-note { margin: 4px 0 0; font-size: .82rem; line-height: 1.4; opacity: .7; }

/* Strumenti: elenco su sfondo chiaro */

/* Insights: ricerca che si scrive da sola */
.isearch { position: relative; z-index: 1; width: calc(100% - 48px); max-width: 512px; margin: 26px auto 0; display: grid; gap: 12px; }
.is-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 99px; background: #fff; color: #0B1B33; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.is-bar::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid #7A8597; border-radius: 50%; box-shadow: 5px 5px 0 -3.5px #7A8597; }
.is-caret { width: 2px; height: 20px; background: var(--app-blue); animation: blink .9s steps(1) infinite; }
.is-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.is-res li { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; padding: 12px 14px; border-radius: 16px;
  background: rgba(127,140,162,.14); box-shadow: inset 0 0 0 1px rgba(127,140,162,.28);
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease var(--d), transform .5s ease var(--d); }
.r-ins.found .is-res li { opacity: 1; transform: none; }
.is-res span { font: 500 .66rem/1.2 var(--nd-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.is-res b { font-size: .92rem; text-align: right; }
.is-res i { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: rgba(127,140,162,.25); position: relative; overflow: hidden; }
.is-res i::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--app-blue); border-radius: 5px; transform-origin: left; transform: scaleX(0); transition: transform .9s ease calc(var(--d) + .2s); }
.is-res i.lo::before { background: #FEC458; }
.r-ins.found .is-res i::before { transform: none; }
.is-res li.tip { grid-template-columns: 1fr; background: var(--app-blue); color: #fff; box-shadow: none; }
.is-res li.tip b { text-align: left; font-size: 1rem; }
.is-foot { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }

.r-ins .glass-btn { color: inherit; margin-top: 14px; }
:root[data-theme="dark"] .r-ins .glass-btn, .r-ins .glass-btn { box-shadow: inset 0 0 0 1px rgba(127,140,162,.5), 0 10px 30px rgba(0,0,0,.2); }

@media (max-height: 700px) {
  .nm-map { width: min(100%, 38vh); }
  .is-res li { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .area-panel, .area-panel .ap-in > *, .dchat > *, .is-res li { transition: none; }
}

.merge.reset .mt, .merge.reset .merge-core { transition: none !important; }

.area-panel .nd-label { color: var(--nd-muted); opacity: 1; }
.area-panel .nd-label span { color: var(--nd-ink); }

/* ================= v7 ================= */
/* Nia: radar, niente strade */

.nm-map { background: var(--surface) !important; }

.radar-sweep { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, rgba(72,157,254,0) 0deg, rgba(72,157,254,0) 300deg, rgba(72,157,254,.16) 355deg, rgba(72,157,254,0) 360deg);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 71%); mask: radial-gradient(circle, #000 0 70%, transparent 71%);
  animation: sweep 4.5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.nm-map .nodes, .nm-map .me { z-index: 1; }
.nm-map .node { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none; } }
.area-panel { cursor: pointer; }
.ap-hint { margin: 8px 0 0; text-align: center; font: 500 .66rem/1 var(--nd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--nd-muted); }
/* Tante app: tutto dentro lo schermo e lontano dai testi */
.merge { margin-top: 18px; margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.merge-field { width: min(80vw, 38vh, 360px); }
.mt i { width: 42px; height: 42px; border-radius: 12px; box-shadow: none; }
/* Icona dell'app pulita, senza ombra né alone */
.merge-icon { box-shadow: none; outline: 1px solid rgba(255,255,255,.18); outline-offset: 6px; }
.merge-icon::before { content: none; }

/* ================= v8 ================= */
/* Icona al centro: nessun contorno */
.merge-icon { outline: none; }
/* App: ferme e distanziate, sempre dentro la loro area (mai sopra i testi) */
.merge { margin-top: 10px; overflow: hidden; }
.merge-field { width: min(90vw, 44vh, 340px); animation: none; }
.mt > span { animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--d) * -6); }
@keyframes bob { 50% { transform: translate(-50%, -27px); } }
.merge.merged .mt > span { animation: none; }
/* Nia: nessun tasto, solo una scritta che cambia */
.nm-caprow { min-height: 40px; display: flex; align-items: center; }

@keyframes capIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .mt > span { animation: none; }  }

/* ================= v9: squircle iOS (smussamento 60%) e movimento leggero ================= */
.reel-page, .pg { --squircle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20d%3D%27M%2060%200%20c%2014.001%200%2021.002%200%2026.35%202.725%20a%2025%2025%200%200%201%2010.925%2010.925%20c%202.725%205.348%202.725%2012.348%202.725%2026.35%20L%20100%2060%20c%200%2014.001%200%2021.002%20-2.725%2026.35%20a%2025%2025%200%200%201%20-10.925%2010.925%20c%20-5.348%202.725%20-12.348%202.725%20-26.35%202.725%20L%2040%20100%20c%20-14.001%200%20-21.002%200%20-26.35%20-2.725%20a%2025%2025%200%200%201%20-10.925%20-10.925%20c%20-2.725%20-5.348%20-2.725%20-12.348%20-2.725%20-26.35%20L%200%2040%20c%200%20-14.001%200%20-21.002%202.725%20-26.35%20a%2025%2025%200%200%201%2010.925%20-10.925%20c%205.348%20-2.725%2012.348%20-2.725%2026.35%20-2.725%20Z%27/%3E%3C/svg%3E"); }
.merge-icon, .mt i { border-radius: 0; -webkit-mask: var(--squircle) center / 100% 100% no-repeat; mask: var(--squircle) center / 100% 100% no-repeat; }
.mt i { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
/* Le app ondeggiano appena, ognuna con il suo ritmo */
.mt > span { transform: translate(-50%, -21px); animation: drift var(--t, 5s) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -5); }
.mt:nth-child(3n) > span { --t: 6.2s; animation-name: drift2; }
.mt:nth-child(3n+1) > span { --t: 5.4s; }
.mt:nth-child(3n+2) > span { --t: 4.6s; animation-name: drift3; }
@keyframes drift  { from { transform: translate(-50%, -21px) rotate(-2deg); } to { transform: translate(calc(-50% + 4px), -27px) rotate(2deg); } }
@keyframes drift2 { from { transform: translate(calc(-50% + 3px), -24px) rotate(2deg); } to { transform: translate(calc(-50% - 4px), -19px) rotate(-1.5deg); } }
@keyframes drift3 { from { transform: translate(calc(-50% - 3px), -20px) rotate(1deg); } to { transform: translate(calc(-50% + 3px), -26px) rotate(-2deg); } }
.merge.merged .mt > span { animation: none; }
@media (prefers-reduced-motion: reduce) { .mt > span { animation: none; } }

.r-merge .mt > span, .r-merge.on .mt > span { animation-duration: var(--t, 5s); }
/* Fluttuano, senza ruotare */
@keyframes drift  { from { transform: translate(-50%, -19px); } to { transform: translate(calc(-50% + 2px), -26px); } }
@keyframes drift2 { from { transform: translate(calc(-50% + 2px), -24px); } to { transform: translate(calc(-50% - 2px), -17px); } }
@keyframes drift3 { from { transform: translate(calc(-50% - 2px), -18px); } to { transform: translate(calc(-50% + 1px), -25px); } }
/* Nia: barra di ricerca che si scrive da sola */
.nm-caprow { min-height: 52px; display: block; }
.nm-bar { height: 50px; box-shadow: 0 10px 26px rgba(11,27,51,.1), inset 0 0 0 1px var(--nd-line); background: var(--surface); color: var(--nd-ink); }
.nm-bar .is-q { white-space: nowrap; overflow: hidden; }

/* ================= v10: barre del browser e schermi bassi ================= */
/* Scorre la pagina (non più un contenitore fisso): Safari e Chrome riducono la barra mentre scorri */
html.reel-root { scroll-snap-type: y mandatory; }
html.reel-root, html.reel-root body { height: auto; overflow: visible; overflow-x: clip; }
.reels { position: static; inset: auto; overflow: visible; scroll-snap-type: none; }
/* Ogni momento è alto quanto lo schermo con le barre ridotte, ma tiene i contenuti
   sopra lo spazio che la barra occupa quando è aperta */
.reel-page { --bar-gap: 0px; }
@supports (height: 100lvh) { .reel-page { --bar-gap: calc(100lvh - 100svh); } }
.reel { height: 100vh; height: 100lvh; min-height: 0; padding-bottom: var(--bar-gap); box-sizing: border-box; }
.r-hint { bottom: calc(18px + var(--bar-gap) + env(safe-area-inset-bottom, 0px)); }
.merge-replay { bottom: calc(24px + var(--bar-gap) + env(safe-area-inset-bottom, 0px)); }
.area-panel { padding-bottom: calc(40px + var(--bar-gap) + env(safe-area-inset-bottom, 0px)); }

/* Momento 2: i biglietti restano nella parte alta, lontani dal testo */
.noise { inset: auto; top: calc(92px + env(safe-area-inset-top, 0px)); left: 0; right: 0; height: 34%; padding-top: 0; overflow: hidden; }
.noise span { max-width: 74%; font-size: .78rem; padding: 8px 12px; }
.r-problem .noise span:nth-child(1) { --y: 10% !important; }
.r-problem .noise span:nth-child(2) { --y: 4% !important; --x: 40% !important; }
.r-problem .noise span:nth-child(3) { --y: 38% !important; }
.r-problem .noise span:nth-child(4) { --y: 52% !important; --x: 40% !important; }
.r-problem .noise span:nth-child(5) { --y: 76% !important; }

/* Titoli lunghi più compatti */
.r-h2.small-h { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
@media (max-height: 720px) {
  .r-h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .r-top { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
  .dchat, .isearch { gap: 8px; }
  .dc-card { padding: 12px 14px; }
  .is-res li { padding: 8px 12px; }
}

html.reel-root { overflow-anchor: none; }

/* ================= v11: altezza reale dello schermo (iOS 26) ================= */
/* --reel-h e --bar-gap li calcola lo script; senza script resta la misura standard */
.reel { height: var(--reel-h, 100lvh); padding-bottom: var(--bar-gap, 0px); }

/* ================= v12: scorrimento come TikTok ================= */
/* Niente scorrimento animato di default (non deve combattere con il dito) */
html.reel-root { scroll-behavior: auto; scroll-snap-type: y mandatory; }
/* Ogni momento è alto esattamente quanto lo schermo visibile: così si scatta sempre di un momento */
.reel { height: var(--reel-h, 100svh); scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: var(--bar-gap, 0px); }

/* ================= v13: barra a sezioni, riempimento a gradiente (come le storie) ================= */
.rseg { gap: 5px; }
.rseg i { height: 4px; opacity: 1; background: color-mix(in srgb, currentColor 22%, transparent); }
.rseg i.done, .rseg i.now { opacity: 1; }
.rseg i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: none !important;
  background: linear-gradient(90deg, #F06139, #D43998 40%, #8B1EBA 70%, #1E42BA);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.rseg i.done::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rseg i::after { transition: none; } }

/* ================= v14: linee del colore del testo (bianche sui momenti scuri, nere su quelli chiari) ================= */
.rseg i { background: color-mix(in srgb, currentColor 25%, transparent); }
.rseg i::after { background: currentColor; }
.rbar.on-light .rbox { color: #0B1B33; }

/* ================= v15: scorrimento fluido ================= */
/* La pagina non scorre: scorrono solo i momenti, dentro un contenitore alto quanto l'area visibile
   (sopra la barra di Safari). L'altezza non cambia mai, quindi niente scatti risalendo. */
html.reel-root, html.reel-root body { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-snap-type: none; }
html.reel-root body { background: #0B1424; }
.reels { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { height: 100%; padding-bottom: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.reel-page { --bar-gap: 0px; }

/* Le animazioni girano solo nel momento che stai guardando */
.reel:not(.on) *, .reel:not(.on)::before, .reel:not(.on)::after { animation-play-state: paused !important; }

/* Parole che entrano: senza sfocatura (su iPhone pesa) */
.reel .w { filter: none !important; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1); transition-delay: calc(var(--i) * 45ms + 150ms); }
/* Zoom delle foto più leggero */
.reel .r-photo { will-change: auto; }
.reel.on .r-photo { will-change: transform; }

/* ================= v28: niente burger né contatore — la barra si tocca e si allarga sulle sezioni ================= */
.rbox { padding: 10px 14px; transition: background-color .3s, color .3s, border-radius .35s; }
.rbox-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.rbox-row .brand-mark { flex: none; width: 20px; height: 20px; background: currentColor; }
.rbox-row .rchap { flex: 1; min-width: 0; }
/* Freccina: dice che la barra si apre; un piccolo saltello all'inizio per farsi notare */
.rchev { flex: none; width: 24px; height: 24px; border-radius: 50%; position: relative; background: color-mix(in srgb, currentColor 14%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.rchev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); }
.rbar.open .rchev { transform: rotate(180deg); }
.rbar:not(.open) .rchev { animation: chev-hint 1.6s ease 1.2s 2; }
@keyframes chev-hint { 0%, 100% { translate: 0 0; } 30% { translate: 0 3px; } 55% { translate: 0 0; } 75% { translate: 0 2px; } }
.rnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.rbar.open .rnav { grid-template-rows: 1fr; }
.rnav-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .25s ease; }
.rbar.open .rnav-in { opacity: 1; transition-delay: .08s; }
.rnav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 12px; }
.rnav-item { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; text-decoration: none;
  font: 600 .86rem/1.15 var(--f-body); color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); -webkit-tap-highlight-color: transparent; }
.rnav-item:active { background: color-mix(in srgb, currentColor 18%, transparent); }
.rnav-item.here { background: #fff; color: #0B1B33; }
.rbar.on-light .rnav-item.here { background: #0B1B33; color: #fff; }
.rnav-item.off { opacity: .55; }
.rnav-link { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

.rbar.open .rseg { opacity: 0; }
.rseg { transition: opacity .25s; }
.rbar.open .rbox { background: rgba(10, 20, 38, .55); }
.rbar.open.on-light .rbox { background: rgba(255,255,255,.82); }
@media (prefers-reduced-motion: reduce) { .rnav, .rnav-in, .rchev { transition: none; } .rbar .rchev { animation: none !important; } }

/* ================= v29: icone nel menu, frase in DM Sans ================= */
.rnav-item { gap: 9px; }
.rnav-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rnav-item.here svg { opacity: 1; }

/* ================= v29b: menu aperto — le linee restano sopra le sezioni e si evidenzia quella scelta ================= */
.rbar.open .rseg { opacity: 1; }
.rseg i { transition: opacity .25s, transform .25s; }
.rbar.open .rseg i:not(.seg-pick) { opacity: .35; }
.rbar.open .rseg i.seg-pick { transform: scaleY(1.5); }
.rbar.open .rseg i.seg-pick::after { transform: scaleX(1); }

/* ================= v30 ================= */
/* Tante app, una sola: unione più rapida e più compatta */
.mt { transition: transform .8s cubic-bezier(.7,0,.25,1) calc(var(--d) * .6), opacity .35s ease calc(var(--d) * .6 + .5s); }

/* Perché può crescere: le etichette stanno sul cerchio, l'arco che gira ci passa sotto */
.cy { transform: translateY(-50%); }
.c1 { left: 50%; top: 15.3%; } .c2 { left: 80%; top: 67.3%; } .c3 { left: 20%; top: 67.3%; }

/* Cosa dimostreremo: quattro prove in griglia e un percorso con il punto in cui siamo */
.r-proof .r-top { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.pv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.pv-c { display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 10px 26px rgba(11,27,51,.07);
  opacity: 0; transform: translateY(12px); }
.r-proof.on .pv-c { animation: pv-in .6s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
@keyframes pv-in { to { opacity: 1; transform: none; } }
.pv-i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--app-blue-soft); color: var(--app-blue); }
.pv-i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-c b { font-size: .92rem; line-height: 1.22; }
.pv-c > span:last-child { font-size: .76rem; line-height: 1.35; color: var(--nd-ink2); }
.pv-k { margin: 0 0 14px; font: 500 .66rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nd-muted); }
.road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.road::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 2px; background: var(--nd-line); }
.road::after { content: ""; position: absolute; left: 12.5%; top: 7px; height: 2px; width: 0; background: var(--app-blue); }
.r-proof.on .road::after { animation: road-fill 1.2s cubic-bezier(.6,0,.2,1) .5s forwards; }
@keyframes road-fill { to { width: 50%; } }
.road li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.road i { width: 16px; height: 16px; border-radius: 50%; background: var(--nd-bg); box-shadow: inset 0 0 0 2px var(--nd-line); z-index: 1; }
.road li.done i { background: var(--app-blue); box-shadow: none; }
.road li.now i { background: #fff; box-shadow: inset 0 0 0 4px var(--app-blue), 0 0 0 0 rgba(72,157,254,.5); }
.r-proof.on .road li.now i { animation: road-ping 1.8s ease-out 1.7s infinite; }
@keyframes road-ping { 0% { box-shadow: inset 0 0 0 4px var(--app-blue), 0 0 0 0 rgba(72,157,254,.5); } 100% { box-shadow: inset 0 0 0 4px var(--app-blue), 0 0 0 12px rgba(72,157,254,0); } }
.road span { font: 500 .62rem/1.3 var(--nd-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--nd-muted); }
.road li.done span, .road li.now span { color: var(--nd-ink); }
.road em { position: absolute; top: -30px; padding: 4px 8px; border-radius: 99px; background: var(--app-blue); color: #fff; font: 700 .64rem/1 var(--f-body); font-style: normal; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pv-c { opacity: 1; transform: none; } .r-proof.on .pv-c, .r-proof.on .road::after, .r-proof.on .road li.now i { animation: none; } .road::after { width: 50%; } }

/* ================= v31: il contenitore riempie l'area visibile reale (Android, browser interni delle app);
   su iPhone resta alto quanto l'area sicura sopra la barra di Safari ================= */
.reels { top: 0; bottom: 0; height: auto; }
@supports (-webkit-touch-callout: none) { .reels { bottom: auto; height: 100vh; height: 100svh; } }

/* ================= v32 ================= */
/* Nia: mappa grande e ferma, zone di affinità traslucide. Il riquadro della proposta ha altezza fissa,
   così la mappa non cambia mai dimensione */
.nm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.nm-map { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; justify-self: center; align-self: center; margin: 0; border-radius: 50%;
  background: transparent !important; box-shadow: none; overflow: visible; }
.nm-map .map-bg { overflow: visible; }
.nm-map .zone { stroke: rgba(72,157,254,.35); stroke-width: 1; }
.nm-map .z3 { fill: rgba(72,157,254,.06); }
.nm-map .z2 { fill: rgba(72,157,254,.10); }
.nm-map .z1 { fill: rgba(72,157,254,.16); }

.nm-map .radar-sweep { border-radius: 50%; -webkit-mask: none; mask: none; }
.nm-map .me { width: 36px; height: 36px; font-size: .7rem; }
.nm-map .node { transition: left .9s cubic-bezier(.3,.8,.3,1), top .9s cubic-bezier(.3,.8,.3,1), width .5s ease, height .5s ease, margin .5s ease, background-color .4s, border-width .3s; border-width: 2px; }

.nm-pick { height: 86px; min-height: 86px; box-sizing: border-box; align-content: center; }

/* Strumenti per le aziende: spunte che si completano, voci che si aprono */
.tks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.tk { border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 8px 22px rgba(11,27,51,.06), inset 0 0 0 1px var(--nd-line); overflow: hidden; }
.tk-h { width: 100%; display: grid; grid-template-columns: 24px 22px minmax(0,1fr) 14px; align-items: center; gap: 10px; padding: 14px 14px; border: 0; background: none; color: var(--nd-ink); font: 700 .98rem/1.2 var(--f-body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-c { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--nd-line); position: relative; transition: background-color .35s, box-shadow .35s; }
.tk-c::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border-right: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.2,1.6,.4,1) .1s; }
.tk.ok .tk-c { background: var(--app-blue); box-shadow: none; }
.tk.ok .tk-c::after { transform: rotate(45deg) scale(1); }
.tk-ic { width: 22px; height: 22px; fill: none; stroke: var(--nd-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.tk.ok .tk-ic { stroke: var(--app-blue); }
.tk-ch { width: 8px; height: 8px; border-right: 2px solid var(--nd-muted); border-bottom: 2px solid var(--nd-muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .3s; }
.tk.open .tk-ch { transform: rotate(225deg) translate(-2px,-2px); }
.tk-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1); }
.tk.open .tk-d { grid-template-rows: 1fr; }
.tk-d p { min-height: 0; overflow: hidden; margin: 0; padding: 0 16px 0 80px; font-size: .86rem; line-height: 1.45; color: var(--nd-ink2); }
.tk.open .tk-d p { padding-bottom: 14px; }
.tk-hint { margin: 12px 2px 0; font: 500 .62rem/1.3 var(--nd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nd-muted); }
@media (prefers-reduced-motion: reduce) { .tk-c, .tk-c::after, .tk-d, .tk-ch { transition: none; } }

/* Insights: la ricerca si scrive, poi lascia il posto agli indicatori */
.is-bar { transition: opacity .35s ease, transform .45s cubic-bezier(.6,0,.3,1), max-height .45s cubic-bezier(.6,0,.3,1) .15s, margin .45s ease .15s; max-height: 60px; }
.r-ins.found .is-bar { opacity: 0; transform: scale(.92) translateY(-8px); max-height: 0; margin-bottom: -12px; }
.is-cap { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-family: var(--nd-display); font-size: 1.4rem; line-height: 1.15; transition: opacity .5s ease .45s, max-height .45s ease .15s; }
.r-ins.found .is-cap { max-height: 60px; opacity: 1; }
.r-ins .is-res li { transition-delay: calc(var(--d) + .55s); }
.r-ins .is-res i::before { transition-delay: calc(var(--d) + .8s); }

/* ================= v33 ================= */
/* Nia: un elemento traslucido al centro che si espande in tutta la mappa */
.nm { grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; }
.nm-stage { position: relative; min-height: 0; }

.nm-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 .86rem/1 var(--f-body); color: var(--nd-ink); transition: opacity .3s ease; white-space: nowrap; }
.nm-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-blue); animation: nm-dot 1.2s ease-in-out infinite; }
@keyframes nm-dot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.nm-map .z3 { fill: rgba(72,157,254,.05); }
.nm-map .z2 { fill: rgba(72,157,254,.09); }
.nm-map .z1 { fill: rgba(72,157,254,.15); }
.nm-map .zone { stroke: rgba(72,157,254,.25); }

.nm-map .me { width: 32px; height: 32px; font-size: .64rem; }
/* Proposta scelta: compare solo quando c'è, niente scritte di attesa */
.nm-pick { height: 76px; min-height: 76px; padding: 10px 12px; grid-template-columns: 54px minmax(0,1fr); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }

.nm-pick .pick-img { width: 54px; height: 54px; }
.nm-pick .pick-title { font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {  .nm-pick { transition: none; } .nm-wait i { animation: none; } }

/* Insights: dopo la ricerca la domanda diventa secondaria, piccola a sinistra */
.is-cap { font-family: var(--f-body); font-size: .86rem; font-weight: 600; line-height: 1.3; opacity: 0; display: flex; align-items: center; gap: 8px; text-align: left; }
.r-ins.found .is-cap { opacity: .7; }
.is-cap::before { content: ""; flex: none; width: 11px; height: 11px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: 4px 4px 0 -3px currentColor; }

/* Menu: tasto tema */

/* ================= v34: radar sempre visibile, "Sto cercando" in basso al posto della proposta ================= */
.nm-stage { position: relative; min-height: 0; }
.nm-stage .nm-map { position: absolute; left: 50%; top: 50%; width: var(--sq, 300px); height: var(--sq, 300px);
  margin: calc(var(--sq, 300px) / -2) 0 0 calc(var(--sq, 300px) / -2); aspect-ratio: auto; max-width: none; border-radius: 50%;
  background: transparent !important; box-shadow: none; overflow: visible; opacity: 1; }
.nm-stage .radar-sweep { border-radius: 50%; }
/* Le foto delle proposte: cerchi semplici, foto ancorata dentro (niente spostamenti su Safari) */
.nm-map .node { display: block; box-sizing: border-box; -webkit-appearance: none; appearance: none; line-height: 0; font-size: 0; overflow: hidden; border-radius: 50%; }
.nm-map .node img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nm-slot { position: relative; height: 76px; }
.nm-slot .nm-wait { position: absolute; inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: 46px; padding: 0 20px; border-radius: 23px;
  background: rgba(72,157,254,.10); box-shadow: inset 0 0 0 1px rgba(72,157,254,.28); opacity: 1; transition: opacity .35s ease; }
.nm-slot .nm-pick { position: absolute; inset: 0; height: 76px; }
.nm-slot.found .nm-wait { opacity: 0; }
.nm-slot.found .nm-pick { opacity: 1; transform: none; }
.nm-slot:not(.found) .nm-pick { opacity: 0; transform: translateY(10px); }
/* Scheda della proposta: foto sempre centrata in verticale, titolo su una riga */
.nm-slot .nm-pick { align-items: center; align-content: center; }
.nm-pick .pick-img { align-self: center; }
.nm-pick .pick-main { min-width: 0; align-content: center; gap: 2px; }
.nm-pick .pick-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= v36: etichette delle zone del radar, leggibili e allineate in colonna in alto ================= */
.zl { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.zl span { position: absolute; left: 50%; top: var(--y); translate: -50% -50%; white-space: nowrap;
  font: 600 .68rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #3F6FB0; }
:root[data-theme="dark"] .zl span { color: #8DB8F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zl span { color: #8DB8F2; } }
.zl span { padding: 3px 8px; border-radius: 99px; background: var(--nd-bg); box-shadow: inset 0 0 0 1px rgba(72,157,254,.3); }

/* ================= v38 ================= */
.cn { text-transform: none; }
/* Frase sotto il cerchio: corpo del testo, non titolo */
.r-body { margin: 0; font-family: var(--f-body); font-size: 1.05rem; line-height: 1.55; font-weight: 400; max-width: 34ch; opacity: .85; }
/* La tesi: più parole, carattere un po' più piccolo per non diventare un muro di testo */
.r-big.thesis { font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1.08; }
/* Cosa dimostreremo: spazio tra le schede e "A che punto siamo", e per l'etichetta "Siamo qui" */
.r-proof .r-bottom { padding-top: 46px; }
.road { margin-top: 34px; }
.pv-k { margin-bottom: 0; }
/* Spunte degli strumenti: segno di spunta disegnato e centrato nel cerchio */
.tk-c::after { content: none; }
.tk.ok .tk-c { background: var(--app-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
/* Spotted: richieste che si alternano nello stesso riquadro */
.viz-spot.cyc { align-content: center; box-sizing: border-box; }
html.js .feat .viz-spot.cyc > p:not(.vf-cap) { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .4s ease; }
html.js .feat .viz-spot.cyc.go > p:not(.vf-cap) { opacity: 1; transform: none; }
html.js .feat .viz-spot.cyc.go > p:nth-child(2) { transition-delay: .5s; }
html.js .feat .viz-spot.cyc.go > p:nth-child(3) { transition-delay: 1s; }
.viz-spot.cyc .vf-cap { transition: opacity .35s ease; }
.viz-spot.cyc:not(.go) .vf-cap { opacity: 0; }
/* Chi sono: più aria tra nome e ruolo */
.me-role { margin-top: 12px; }
/* I momenti scuri restano scuri in qualsiasi tema (nel tema scuro diventano scuri solo quelli chiari) */
.r-dark { background-color: #0B1B33; color: #F2F5FA; }

/* ================= v40: Nia — il titolo compare al centro e sfuma, poi resta solo il radar ================= */
.r-niamap .nm-top { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; padding-top: 0; z-index: 2; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.r-niamap.intro-done .nm-top { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.r-niamap .nm { padding-top: calc(96px + env(safe-area-inset-top, 0px)); opacity: 0; transition: opacity .7s ease .25s; }
.r-niamap.intro-done .nm { opacity: 1; }
/* Niente pallini piccoli: le proposte compaiono solo quando Nia le trova */
.nm-map .node:not(.lit) { opacity: 0; }
.nm-map .node { transition: left .9s cubic-bezier(.3,.8,.3,1), top .9s cubic-bezier(.3,.8,.3,1), width .5s ease, height .5s ease, margin .5s ease, opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .r-niamap .nm-top, .r-niamap .nm { transition: none; } }
/* Ogni momento si aggancia esattamente al suo inizio */
.reel { scroll-margin: 0; }
/* "Perché può crescere": la prima parte è un titolo (serif), il resto testo normale */
.r-body-h { display: block; margin-bottom: 6px; font-family: var(--nd-display); font-size: 1.7rem; line-height: 1.12; font-weight: 400; opacity: 1; }
.r-body:has(.r-body-h) { opacity: 1; }
.r-body:has(.r-body-h) { color: rgba(242,245,250,.82); }
.r-body .r-body-h { color: #F2F5FA; }

/* ================= v44: accesso anticipato (email o WhatsApp) ================= */
.ea { margin-top: 22px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); display: grid; gap: 8px; }

.ea-row { display: flex; gap: 8px; margin-top: 4px; }
.ea-row input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 99px; border: 0; background: #fff; color: #0B1B33; font: 500 16px var(--f-body); outline: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.ea-row input:focus { box-shadow: inset 0 0 0 2px var(--app-blue); }
.ea-btn { flex: none; height: 48px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--app-blue); color: #fff; font: 700 .95rem var(--f-body); cursor: pointer; }
.ea-btn:active { transform: scale(.97); }
.ea-note { margin: 2px 4px 0; font-size: .8rem; line-height: 1.4; opacity: .75; }
.ea.err .ea-note { color: #FFC2B3; opacity: 1; }
.ea.ok .ea-note { color: #A6E3B8; opacity: 1; font-weight: 600; }
.ea.busy .ea-btn { opacity: .6; pointer-events: none; }

/* ================= v45: Contatti — un solo riquadro traslucido con due scelte ================= */
.r-contact .r-h2 { margin-bottom: 0; }
.cbox { margin-top: 22px; padding: 14px; border-radius: 26px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

.cpane { padding: 16px 4px 4px; animation: cp-in .4s ease; }
@keyframes cp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cp-t { margin: 0; font-family: var(--nd-display); font-size: 1.45rem; line-height: 1.12; }
.cp-d { margin: 6px 0 0; font-size: .92rem; line-height: 1.45; opacity: .8; }
/* il modulo vive dentro il riquadro: niente secondo riquadro */
.cbox .ea { margin-top: 14px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {  .cpane { transition: none; animation: none; } }
.cbox .ea { grid-template-columns: minmax(0, 1fr); }
.ea-row { min-width: 0; }
.ea-row input { width: 100%; }
/* Le due schede occupano lo stesso spazio: il riquadro non cambia altezza passando dall'una all'altra */
.cbox { display: grid; grid-template-columns: minmax(0, 1fr); }
.cbox .cpane { grid-row: 2; grid-column: 1; }
.cbox .cpane[hidden] { display: block !important; visibility: hidden; pointer-events: none; animation: none; }
/* Richiesta di informazioni: campo di testo dentro il riquadro */
.rq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.rq textarea { width: 100%; box-sizing: border-box; min-height: 84px; padding: 12px 16px; border-radius: 18px; border: 0; background: #fff; color: #0B1B33; font: 500 16px/1.4 var(--f-body); resize: none; outline: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.rq textarea:focus { box-shadow: inset 0 0 0 2px var(--app-blue); }
.rq .ea-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ================= v50: Contatti — due chip in basso, il riquadro si apre sopra con un movimento morbido ================= */
.cbox { margin-top: 22px; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: block; }
.cpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.3,.8,.2,1); }
.cbox[data-tab="app"] .cpanel, .cbox[data-tab="info"] .cpanel { grid-template-rows: 1fr; }
.cpanel-in { min-height: 0; overflow: hidden; }
.cpanel-glass { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; padding: 16px; border-radius: 24px;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0; transform: translateY(16px) scale(.98); transform-origin: 50% 100%; transition: opacity .35s ease, transform .6s cubic-bezier(.3,.8,.2,1); }
.cbox[data-tab="app"] .cpanel-glass, .cbox[data-tab="info"] .cpanel-glass { opacity: 1; transform: none; transition: opacity .45s ease .08s, transform .6s cubic-bezier(.3,.8,.2,1); }
/* le due schede occupano lo stesso spazio e si danno il cambio sfumando */
.cbox .cpane { grid-row: 1; grid-column: 1; padding: 0; animation: none; opacity: 1; visibility: visible; transition: opacity .35s ease .12s, visibility 0s; }
.cbox .cpane[hidden] { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.cchips { display: flex; gap: 8px; }
.cchip { flex: 1; min-width: 0; height: 50px; padding: 0 12px; border: 0; border-radius: 99px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 .9rem/1.15 var(--f-body); color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .35s ease, color .35s ease, transform .2s ease; }
.cchip:active { transform: scale(.97); }
.cchip[aria-expanded="true"] { background: #fff; color: #0B1B33; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cpanel, .cpanel-glass, .cbox .cpane, .cchip { transition: none; } }
.cbox .cpane { align-self: center; }
/* v52: ogni scelta alta quanto il suo contenuto, stesso spazio sopra e sotto; il cambio di altezza è animato */
.cpanel-glass { display: block; padding: 18px; overflow: hidden; box-sizing: border-box; transition: opacity .35s ease, transform .6s cubic-bezier(.3,.8,.2,1), height .45s cubic-bezier(.3,.8,.2,1); }
.cbox[data-tab="app"] .cpanel-glass, .cbox[data-tab="info"] .cpanel-glass { transition: opacity .45s ease .08s, transform .6s cubic-bezier(.3,.8,.2,1), height .45s cubic-bezier(.3,.8,.2,1); }
.cbox .cpane { align-self: auto; animation: cp-fade .4s ease; }
.cbox .cpane[hidden] { display: none !important; }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
.cbox .cpane > :last-child { margin-bottom: 0; }
.cbox .cp-t { margin-top: 0; }
/* campo nascosto contro i programmi automatici */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rq.err .ea-note { color: #FFC2B3; opacity: 1; }
.rq.ok .ea-note { color: #A6E3B8; opacity: 1; font-weight: 600; }
.rq.busy .ea-btn { opacity: .6; pointer-events: none; }

/* v54: le chip non si dissolvono (la dissolvenza spegne la sfocatura per mezzo secondo): entrano solo scivolando,
   e hanno un fondo semitrasparente che regge anche senza sfocatura */
html.js .reel .r-in > .cbox { opacity: 1; transform: none; transition: none; }
.cchips { transform: translateY(14px); transition: transform .7s cubic-bezier(.2,.8,.2,1) .2s; }
.r-contact.on .cchips { transform: none; }
/* Chip uguali agli altri pulsanti traslucidi del sito (es. "Scopri di più") */
.cchip { height: 48px; font: 600 .95rem/1.1 var(--f-body); letter-spacing: .01em; color: #fff; background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.25); }
.cchip[aria-expanded="true"] { background: #fff; color: #0B1B33; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cpanel-glass { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .cchips { transform: none; transition: none; } }
/* L'autocompilazione di Safari non colora di giallo i campi */
.ea-row input:-webkit-autofill, .ea-row input:-webkit-autofill:hover, .ea-row input:-webkit-autofill:focus,
.rq textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset !important; -webkit-text-fill-color: #0B1B33 !important; caret-color: #0B1B33; transition: background-color 9999s ease 0s; }
.ea-row input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 60px #fff inset, inset 0 0 0 2px var(--app-blue) !important; }

/* ================= v57 ================= */
/* Sottolineature con le estremità arrotondate: una linea disegnata sotto la parola che si allunga */
.reel .nd-mark { position: relative; background: none !important; padding-bottom: 0; white-space: nowrap; }
.reel .nd-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .11em; border-radius: 99px;
  background: linear-gradient(100deg, #F06139, #D43998 35%, #8B1EBA 65%, #1E42BA); transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.6,0,.2,1) .7s; }
.reel .nd-mark + .nd-mark::after { transition-delay: 1.3s; }
.reel.on .nd-mark::after, html:not(.js) .reel .nd-mark::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .reel .nd-mark::after { transition: none; transform: scaleX(1); } }

/* ================= v58: le aree in una fila di card che scorre da sola ================= */

/* le card entrano dal basso quando il momento si apre */

.nd-label .cn { color: inherit; }

/* ================= v60: le aree come un mazzo di card ================= */
.r-overview .r-top { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
.deck2 { position: relative; z-index: 1; flex: 1; min-height: 0; margin: 22px 0 calc(34px + env(safe-area-inset-bottom, 0px)); }
.dc { position: absolute; left: 50%; top: 50%; width: min(78vw, 340px); height: min(100%, calc(min(78vw, 340px) * 1.38));
  margin: 0; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 40px rgba(11,27,51,.22);
  transition: transform .65s cubic-bezier(.3,.8,.2,1), opacity .45s ease; }
.dc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,12,26,.72), rgba(5,12,26,0) 42%); }
.dc span { position: absolute; left: 20px; right: 20px; top: 20px; z-index: 1; display: grid; gap: 5px; color: #fff; }
.dc b { font-family: var(--nd-display); font-weight: 400; font-size: 1.9rem; line-height: 1.02; }
.dc small { font-size: .9rem; line-height: 1.3; opacity: .88; }
/* posizioni nel mazzo: davanti dritta, dietro leggermente ruotate */
.dc[data-pos="0"] { z-index: 4; transform: translate(-50%, -50%); }
.dc[data-pos="1"] { z-index: 3; transform: translate(calc(-50% + 14px), calc(-50% - 12px)) rotate(5deg) scale(.95); }
.dc[data-pos="2"] { z-index: 2; transform: translate(calc(-50% - 16px), calc(-50% - 20px)) rotate(-6deg) scale(.9); }
.dc[data-pos="3"] { z-index: 1; transform: translate(-50%, calc(-50% - 24px)) rotate(0deg) scale(.86); opacity: 0; }
/* la card scartata vola via di lato ruotando, sopra alle altre */
.dc.out { z-index: 5; transform: translate(calc(-50% - 125%), calc(-50% + 30px)) rotate(-18deg); opacity: 0; transition: transform .6s cubic-bezier(.5,0,.75,.4), opacity .5s ease .1s; }
.dc.back { transition: none; }
.dc:active { filter: brightness(.95); }
/* il mazzo entra dal basso quando il momento si apre */
.r-overview .deck2 { opacity: 0; transform: translateY(24px); transition: opacity .6s ease .3s, transform .8s cubic-bezier(.2,.8,.2,1) .3s; }
.r-overview.on .deck2 { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dc, .r-overview .deck2 { transition: none; } .r-overview .deck2 { opacity: 1; transform: none; } }
/* testo sotto un titolo: un po' di respiro */
.r-h2 + .r-body { margin-top: 16px; }

/* v66: finale delicato — le card si dissolvono, restano i nomi delle aree attorno all'icona di CEnTRO */
.dc { cursor: default; }
.dc.out { z-index: 5; }
.deck2.done .dc { opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .9s ease, transform 1.1s cubic-bezier(.3,.7,.2,1); }
.deck2 { --R: min(35vw, 140px, 30vh); }
 .dk-core{ position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
/* cerchio */

/* icona esattamente al centro; il nome sta sotto senza spostarla */
.dk-core { width: 76px; height: 76px; transform: translate(-50%, -50%) scale(.8); transition: opacity .8s ease .25s, transform 1.1s cubic-bezier(.2,.9,.25,1) .25s; }
.dk-icon { position: absolute; inset: 0; display: grid; place-items: center; background: #fff;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat; mask: var(--squircle) center / 100% 100% no-repeat; }
.dk-icon .brand-mark { width: 44px; height: 44px; background: #123F73; }
.dk-core { filter: drop-shadow(0 10px 22px rgba(11,27,51,.18)); }
.dk-core b { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font-weight: 700; letter-spacing: .1em; font-size: .9rem; color: var(--nd-ink); white-space: nowrap; }
/* nomi delle aree in chip traslucide, appoggiate sul cerchio a distanze uguali */

 .deck2.done .dk-core { opacity: 1; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) { .deck2 .dc, .dk-core{ transition: none; } }
/* chip tutte uguali: la disposizione si legge simmetrica */
.deck2 { --R: min(31vw, 132px, 28vh); }

/* tema scuro: chip del cerchio con lo stesso traslucido dei pulsanti dei contatti */

/* ================= v70: Il tuo profilo — dalla vetrina social al profilo CEnTRO ================= */

/* le due facce del profilo stanno nello stesso spazio */

/* il passaggio */

/* ================= v70: Aree — le card diventano app, fluttuano, collassano nel logo ================= */
.deck2 { --gap-x: min(27vw, 108px); --gap-y: 64px; }
.dk-app, .dk-core { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.dk-app { display: grid; justify-items: center; gap: 8px; opacity: 0;
  transform: translate(calc(-50% + var(--gx) * var(--gap-x) * .4), calc(-50% + var(--gy) * var(--gap-y) * .4)) scale(.5);
  transition: opacity .55s ease var(--d), transform .8s cubic-bezier(.2,1.1,.3,1) var(--d); }
.dk-app i { width: 64px; height: 64px; display: grid; place-items: center; background: linear-gradient(145deg, var(--c1), var(--c2));
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat; mask: var(--squircle) center / 100% 100% no-repeat; }
.dk-app svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dk-app span { font: 600 .78rem/1 var(--f-body); color: var(--nd-ink); white-space: nowrap; }
/* le card escono rimpicciolendosi mentre compaiono le app */
.deck2.apps .dc { opacity: 0; transform: translate(-50%, -50%) scale(.35); transition: opacity .5s ease, transform .7s cubic-bezier(.5,0,.3,1); }
.deck2.apps .dk-app { opacity: 1; transform: translate(calc(-50% + var(--gx) * var(--gap-x)), calc(-50% + var(--gy) * var(--gap-y))); }
.deck2.apps .dk-app i { animation: app-float 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -6); }
@keyframes app-float { from { translate: 0 -3px; } to { translate: 0 4px; } }
/* collasso verso il centro */
.deck2.merge .dk-app { opacity: 0; transform: translate(-50%, -50%) scale(.2); transition: opacity .45s ease calc(var(--d) + .25s), transform .7s cubic-bezier(.7,0,.25,1) var(--d); }
.deck2.merge .dk-app span { opacity: 0; transition: opacity .2s; }
/* il logo emerge */
.dk-core { width: 84px; height: 84px; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .6s ease, transform .9s cubic-bezier(.2,1.4,.4,1); }
.deck2.logo .dk-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dk-core .dk-icon .brand-mark { width: 48px; height: 48px; }
@media (prefers-reduced-motion: reduce) { .dk-app, .dk-core, .deck2.apps .dc { transition: none; } .deck2.apps .dk-app i { animation: none; } }

/* ================= v72: profili a widget (utente e azienda) ================= */

/* ================= v72: tema chiaro — anche i momenti scuri senza foto diventano chiari, con una tonalità appena diversa ================= */
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) { background-color: #E9EEF5; color: #0B1B33; }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .r-body:has(.r-body-h) { color: #46536A; }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .r-body .r-body-h { color: #0B1B33; }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .cy { color: #0B1B33; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px #D5DDE8, 0 8px 20px rgba(11,27,51,.06); }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .cyc .cyc-run { stroke: var(--app-blue); }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .glass-btn { color: #0B1B33; background: #fff; box-shadow: 0 8px 24px rgba(11,27,51,.1); }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .glass-btn i { background: #0B1B33; }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .glass-btn i::before { border-color: #fff; }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .dc-card { box-shadow: 0 14px 34px rgba(11,27,51,.12); }
:root:not([data-theme="dark"]) .r-dark:not(.r-shot) .is-res li.tip { color: #fff; }
/* profili più compatti: il blocco segue il contenuto, così su schermi bassi scatta l'adattamento */

/* ================= v77: vetrine dei profili — il "social" si dissolve e resta ciò che conta ================= */
.sv { position: relative; z-index: 1; flex: none; width: calc(100% - 48px); max-width: 360px; margin: 18px auto 0; }
.sv-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; padding: 16px; border-radius: 26px; background: var(--surface, #fff);
  box-shadow: 0 0 10px rgba(102,173,255,.14), 0 14px 34px rgba(11,27,51,.08); color: var(--nd-ink); }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-head > div { min-width: 0; display: grid; gap: 3px; }
.sv-head b { font-size: 1.02rem; }
.sv-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.sv-logo { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: linear-gradient(145deg, #C4553A, #EB9B85); color: #fff; font: 700 1.05rem var(--f-body);
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat; mask: var(--squircle) center / 100% 100% no-repeat; }
/* testi che si scambiano nello stesso posto */
.sv-swap { display: grid; font-size: .8rem; color: var(--nd-ink2); }
.sv-swap i { grid-area: 1 / 1; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .6s ease, transform .6s ease; }
.sv-swap .b { opacity: 0; transform: translateY(6px); }
/* zone con un elemento "social" e uno "vero" sovrapposti */
.sv-mid { display: grid; }
.sv-mid > * { grid-area: 1 / 1; }
.sv-noise { transition: opacity .7s ease, filter .7s ease, transform .7s ease; }
.sv-real { opacity: 0; transform: translateY(8px); transition: opacity .7s ease .35s, transform .7s cubic-bezier(.2,.8,.2,1) .35s; }
.sv-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.sv-stats p { margin: 0; display: grid; gap: 1px; }
.sv-stats b { font-size: 1.08rem; }
.sv-stats span { font-size: .7rem; color: var(--nd-ink2); }
.sv-pass { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.sv-pass span { padding: 7px 11px; border-radius: 99px; background: rgba(72,157,254,.12); color: #2F6FDE; font: 600 .76rem/1 var(--f-body); }
.sv-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sv-photos figure { position: relative; margin: 0; }
.sv-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.sv-photos i { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 99px; background: rgba(0,0,0,.45); color: #fff; font: 600 .62rem/1 var(--f-body); font-style: normal; }
.sv-photos i svg { width: 11px; height: 11px; fill: #FF5A7A; }
.sv-btnrow, .sv-gbtns { display: grid; gap: 6px; }
.sv-btnrow { grid-template-columns: 1fr 1fr; }
.sv-gbtns { grid-template-columns: repeat(4, 1fr); }
.sv-btnrow span, .sv-gbtns span { height: 32px; display: grid; place-items: center; border-radius: 99px; background: var(--nd-bg); font: 600 .74rem var(--f-body); box-shadow: inset 0 0 0 1px var(--nd-line); }
.sv-btnrow .pri { background: #2F6FDE; color: #fff; box-shadow: none; }
.sv-line { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--nd-ink2); align-self: center; }
.sv-line em { margin-right: 4px; padding: 3px 7px; border-radius: 99px; background: rgba(72,157,254,.14); color: #2F6FDE; font: 500 .58rem/1 var(--nd-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; vertical-align: 2px; }
/* azienda: scheda "da motore di ricerca" */
.sv-biz { padding-top: 12px; }
.sv-cover { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 92px; border-radius: 16px; overflow: hidden; }
.sv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-ad { justify-self: start; margin-bottom: -6px; padding: 3px 7px; border-radius: 6px; background: var(--nd-bg); font: 700 .62rem var(--f-body); color: var(--nd-ink2); box-shadow: inset 0 0 0 1px var(--nd-line); }
.sv-also { display: grid; gap: 3px; font-size: .74rem; color: var(--nd-ink2); }
.sv-also b { color: var(--nd-ink); font-size: .78rem; }
/* il passaggio */
.clean .sv-noise { opacity: 0; filter: blur(6px); transform: scale(.97); pointer-events: none; }
.clean .sv-real { opacity: 1; transform: none; }
.clean .sv-swap .a { opacity: 0; transform: translateY(-6px); }
.clean .sv-swap .b { opacity: 1; transform: none; }
.clean .sv-ad { visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.sv-foot { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.sv-foot .glass-btn { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .sv-noise, .sv-real, .sv-swap i { transition: none; } }
:root:not([data-theme="dark"]) .r-light .glass-btn { color: #0B1B33; background: #fff; box-shadow: 0 8px 24px rgba(11,27,51,.1), inset 0 0 0 1px #E2E8F0; }
:root:not([data-theme="dark"]) .r-light .glass-btn i { background: #0B1B33; }
:root:not([data-theme="dark"]) .r-light .glass-btn i::before { border-color: #fff; }
/* pagine dei profili: i widget sono sempre visibili */

.sv-ad { margin: 0 0 -8px; padding: 0; background: none; box-shadow: none; color: #0B1B33; font: 700 .72rem/1.2 var(--f-body); max-height: 20px; overflow: hidden; }
.clean .sv-ad { visibility: visible; max-height: 0; margin-bottom: -14px; transition: opacity .5s ease, max-height .6s ease .3s, margin .6s ease .3s; }
:root[data-theme="dark"] .sv-ad { color: #F2F5FA; }
.sv-foot { padding-top: 14px; }

/* ================= v81: vetrine — titolo "social", scarabocchio, titolo vero ================= */
.sv-title { position: relative; display: grid; }
.sv-title > .r-h2 { grid-area: 1 / 1; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.sv-title .tt-b { opacity: 0; transform: translateY(10px); }
.swap .sv-title .tt-a { opacity: 0; transform: translateY(-6px); transition-delay: .1s; }
.swap .sv-title .tt-b { opacity: 1; transform: none; transition-delay: .25s; }
.scribble { position: absolute; left: -4%; top: 4%; width: 108%; height: 92%; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: #E8453C; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.6,0,.3,1), opacity .4s ease; }
.reel.scrib .scribble path { stroke-dashoffset: 0; }
.reel.swap .scribble path { opacity: 0; transition: stroke-dashoffset .75s cubic-bezier(.6,0,.3,1), opacity .4s ease .1s; }
.sv-logo { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .sv-title > .r-h2, .scribble path { transition: none; } }

/* ================= v82: tesi — evidenziatore che passa di parola in parola ================= */
.thesis .tu { position: relative; white-space: nowrap; z-index: 0; }
.thesis .tu::before { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; top: .5em; bottom: .02em; border-radius: .14em;
  background: rgba(72,157,254,.38); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.6,0,.2,1); }
.thesis .tu.lit::before { transform: scaleX(1); }
:root[data-theme="dark"] .thesis .tu::before, .r-dark.r-shot .thesis .tu::before { background: rgba(72,157,254,.45); }
.thesis .nw { white-space: nowrap; }
.thesis em { display: block; margin-top: .55em; }

/* Contatti: foto a tutto schermo, velo leggero, tasti e riquadro traslucidi; le foto cambiano in dissolvenza */
.cphotos { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0B1424; }
.cph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 40%); opacity: 0; transition: opacity 1s cubic-bezier(.4,0,.2,1); }
.cph.on { opacity: 1; }
.r-contact::before { background: linear-gradient(180deg, rgba(7,16,34,.22) 0%, rgba(7,16,34,0) 22%, rgba(7,16,34,0) 52%, rgba(7,16,34,.5) 100%) !important; }
.r-contact .cchip { color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.18); }
.r-contact .cchip[aria-expanded="true"] { background: rgba(255,255,255,.88); color: #0B1B33; }
.r-contact .cpanel-glass { color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.18); }
.r-contact .ea-row input, .r-contact .rq textarea { background: rgba(255,255,255,.9); }
.r-contact .r-h2, .r-contact .nd-label, .r-contact .nd-label span { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.25); }
.r-contact .r-h2 em { color: rgba(255,255,255,.82); }
/* tema chiaro: lo stesso velo, ma chiaro */
:root:not([data-theme="dark"]) .r-contact { background: #E9EEF5 !important; }
:root:not([data-theme="dark"]) .r-contact::before { background: linear-gradient(180deg, rgba(233,238,245,.18) 0%, rgba(233,238,245,0) 22%, rgba(233,238,245,0) 55%, rgba(233,238,245,.45) 100%) !important; }
:root:not([data-theme="dark"]) .r-contact .r-h2, :root:not([data-theme="dark"]) .r-contact .nd-label, :root:not([data-theme="dark"]) .r-contact .nd-label span { color: #0B1B33; text-shadow: 0 1px 14px rgba(255,255,255,.5); }
:root:not([data-theme="dark"]) .r-contact .r-h2 em { color: #34435C; }
:root:not([data-theme="dark"]) .r-contact .cchip, :root:not([data-theme="dark"]) .r-contact .cpanel-glass { color: #0B1B33; background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 30px rgba(11,27,51,.12); }
:root:not([data-theme="dark"]) .r-contact .cchip[aria-expanded="true"] { background: rgba(11,27,51,.85); color: #fff; }
:root:not([data-theme="dark"]) .r-contact .ea.err .ea-note, :root:not([data-theme="dark"]) .r-contact .rq.err .ea-note { color: #C2361F; }
:root:not([data-theme="dark"]) .r-contact .ea.ok .ea-note, :root:not([data-theme="dark"]) .r-contact .rq.ok .ea-note { color: #1E7A3C; }
.r-copy { position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: 500 .66rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.r-copy .cn { text-transform: none; }
:root:not([data-theme="dark"]) .r-copy { color: rgba(11,27,51,.6); }
@media (prefers-reduced-motion: reduce) { .cph { transition: none; } }
/* Profilo utente nel reel: il tag con la chiocciola resta, sotto il mestiere */
.sv-tag, .sv-sub { display: block; font-size: .8rem; line-height: 1.3; color: var(--nd-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tag { color: var(--app-blue); font-weight: 600; }
/* Contatti: aperta una scelta, il titolo si toglie e lascia vedere la foto */
.r-contact .r-in > .nd-label, .r-contact .r-in > .r-h2 { transition: opacity .35s ease .1s, visibility 0s; }
.r-contact[data-tab="app"] .r-in > .nd-label, .r-contact[data-tab="app"] .r-in > .r-h2,
.r-contact[data-tab="info"] .r-in > .nd-label, .r-contact[data-tab="info"] .r-in > .r-h2 { opacity: 0; visibility: hidden; text-shadow: none; transition: opacity .15s linear, visibility 0s .15s; }
/* stretta di mano: sugli schermi verticali sale un po', così le mani restano sopra al riquadro */
.cph[data-ph="info"] { transform-origin: 50% 0; transition: opacity 1s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.22,1,.36,1); }
@media (max-aspect-ratio: 4/5) {
  .r-contact[data-tab="info"] .cph[data-ph="info"] { transform: translateY(-25%) scale(1.25); }
}
/* il titolo sparisce di colpo e pulito: niente ombra né parole che restano indietro */
.r-contact[data-tab="app"] .r-in > .r-h2 *, .r-contact[data-tab="info"] .r-in > .r-h2 * { transition: none !important; }
.r-contact[data-tab="app"] .r-in > .r-h2, .r-contact[data-tab="app"] .r-in > .nd-label { text-shadow: none; transition: opacity .15s linear, visibility 0s .15s; }
/* testo leggibile anche col velo leggero: un'ombra morbida dietro al titolo */
.r-contact .r-h2, .r-contact .nd-label { text-shadow: 0 1px 18px rgba(0,0,0,.35); }
:root:not([data-theme="dark"]) .r-contact .r-h2, :root:not([data-theme="dark"]) .r-contact .nd-label { text-shadow: 0 0 20px rgba(255,255,255,.85), 0 0 4px rgba(255,255,255,.6); }
/* profili nei reel: la scheda sta al centro tra titolo e testo in basso */
.r-uprof .sv, .r-bprof .sv { margin-top: auto; margin-bottom: auto; }
.r-uprof .sv-foot, .r-bprof .sv-foot { margin-top: 0; }
/* Apertura e problema seguono il tema: nel chiaro velo leggero chiaro e testo scuro */
:root:not([data-theme="dark"]) .r-hero, :root:not([data-theme="dark"]) .r-problem { background: #E9EEF5 !important; color: #0B1B33 !important; }
:root:not([data-theme="dark"]) .r-hero::before, :root:not([data-theme="dark"]) .r-problem::before { background: linear-gradient(180deg, rgba(233,238,245,.22) 0%, rgba(233,238,245,0) 22%, rgba(233,238,245,0) 50%, rgba(233,238,245,.72) 100%) !important; }
:root:not([data-theme="dark"]) .r-hero .r-h1, :root:not([data-theme="dark"]) .r-problem .r-h2, :root:not([data-theme="dark"]) .r-problem .r-body, :root:not([data-theme="dark"]) .r-problem .nd-label, :root:not([data-theme="dark"]) .r-problem .nd-label span { color: #0B1B33 !important; text-shadow: 0 0 22px rgba(255,255,255,.85), 0 0 4px rgba(255,255,255,.6); }
:root:not([data-theme="dark"]) .r-hero .r-h1 em, :root:not([data-theme="dark"]) .r-problem .r-h2 em { color: #34435C !important; }
:root:not([data-theme="dark"]) .r-hero .r-hint { color: rgba(11,27,51,.65); }
/* tema chiaro: niente alone bianco attorno ai titoli sulle foto, solo la sfumatura dell'immagine */
:root:not([data-theme="dark"]) .r-hero .r-h1, :root:not([data-theme="dark"]) .r-problem .r-h2, :root:not([data-theme="dark"]) .r-problem .r-body, :root:not([data-theme="dark"]) .r-problem .nd-label,
:root:not([data-theme="dark"]) .r-contact .r-h2, :root:not([data-theme="dark"]) .r-contact .nd-label { text-shadow: none !important; }
:root:not([data-theme="dark"]) .r-hero::before { background: linear-gradient(180deg, rgba(233,238,245,.2) 0%, rgba(233,238,245,0) 20%, rgba(233,238,245,0) 48%, rgba(233,238,245,.55) 66%, rgba(233,238,245,.9) 100%) !important; }
:root:not([data-theme="dark"]) .r-problem::before { background: linear-gradient(180deg, rgba(233,238,245,.2) 0%, rgba(233,238,245,0) 22%, rgba(233,238,245,0) 50%, rgba(233,238,245,.6) 68%, rgba(233,238,245,.9) 100%) !important; }
/* Contatti, tema chiaro: il bianco sale dal basso fino al titolo, sopra la foto resta piena */
:root:not([data-theme="dark"]) .r-contact::before { background: linear-gradient(180deg, rgba(233,238,245,.15) 0%, rgba(233,238,245,0) 20%, rgba(233,238,245,0) 42%, rgba(233,238,245,.55) 60%, rgba(233,238,245,.88) 78%, rgba(233,238,245,.95) 100%) !important; }
/* Apertura: la foto è scura, quindi anche nel tema chiaro resta il velo scuro con il testo bianco */
:root:not([data-theme="dark"]) .r-hero { background: #0B1424 !important; color: #fff !important; }
:root:not([data-theme="dark"]) .r-hero::before { background: linear-gradient(180deg, rgba(7,16,34,.55) 0%, rgba(7,16,34,0) 22%, rgba(7,16,34,0) 50%, rgba(7,16,34,.8) 100%) !important; }
:root:not([data-theme="dark"]) .r-hero .r-h1 { color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,.3) !important; }
:root:not([data-theme="dark"]) .r-hero .r-h1 em { color: inherit !important; }
:root:not([data-theme="dark"]) .r-hero .r-hint { color: rgba(255,255,255,.75); }
/* Contatti: sempre scuri, anche nel tema chiaro */
:root:not([data-theme="dark"]) .r-contact { background: #0B1424 !important; color: #fff !important; }
:root:not([data-theme="dark"]) .r-contact::before { background: linear-gradient(180deg, rgba(7,16,34,.22) 0%, rgba(7,16,34,0) 22%, rgba(7,16,34,0) 52%, rgba(7,16,34,.5) 100%) !important; }
:root:not([data-theme="dark"]) .r-contact .r-h2, :root:not([data-theme="dark"]) .r-contact .nd-label, :root:not([data-theme="dark"]) .r-contact .nd-label span { color: #fff !important; text-shadow: 0 1px 18px rgba(0,0,0,.35) !important; }
:root:not([data-theme="dark"]) .r-contact .r-h2 em { color: rgba(255,255,255,.82) !important; }
:root:not([data-theme="dark"]) .r-contact .cchip, :root:not([data-theme="dark"]) .r-contact .cpanel-glass { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.18); }
:root:not([data-theme="dark"]) .r-contact .cchip[aria-expanded="true"] { background: rgba(255,255,255,.88); color: #0B1B33; }
:root:not([data-theme="dark"]) .r-contact .ea.err .ea-note, :root:not([data-theme="dark"]) .r-contact .rq.err .ea-note { color: #FFC2B3; }
:root:not([data-theme="dark"]) .r-contact .ea.ok .ea-note, :root:not([data-theme="dark"]) .r-contact .rq.ok .ea-note { color: #A6E3B8; }
:root:not([data-theme="dark"]) .r-copy { color: rgba(255,255,255,.75); }
/* Il problema: sempre scuro, anche nel tema chiaro */
:root:not([data-theme="dark"]) .r-problem { background: #0B1424 !important; color: #fff !important; }
:root:not([data-theme="dark"]) .r-problem::before { background: linear-gradient(180deg, rgba(7,16,34,.55) 0%, rgba(7,16,34,.25) 35%, rgba(7,16,34,.85) 100%) !important; }
:root:not([data-theme="dark"]) .r-problem .r-h2, :root:not([data-theme="dark"]) .r-problem .r-body, :root:not([data-theme="dark"]) .r-problem .nd-label, :root:not([data-theme="dark"]) .r-problem .nd-label span { color: #fff !important; text-shadow: none !important; }
:root:not([data-theme="dark"]) .r-problem .r-h2 em { color: rgba(255,255,255,.7) !important; }
/* Il problema, tema chiaro: velo blu più tenue, come nei contatti */
:root:not([data-theme="dark"]) .r-problem::before { background: linear-gradient(180deg, rgba(7,16,34,.25) 0%, rgba(7,16,34,0) 28%, rgba(7,16,34,.08) 50%, rgba(7,16,34,.62) 100%) !important; }
:root:not([data-theme="dark"]) .r-problem .r-h2, :root:not([data-theme="dark"]) .r-problem .r-body, :root:not([data-theme="dark"]) .r-problem .nd-label { text-shadow: 0 1px 18px rgba(0,0,0,.35) !important; }
/* Apertura, tema chiaro: velo blu più tenue, come nei contatti */
:root:not([data-theme="dark"]) .r-hero::before { background: linear-gradient(180deg, rgba(7,16,34,.28) 0%, rgba(7,16,34,0) 22%, rgba(7,16,34,0) 50%, rgba(7,16,34,.55) 100%) !important; }
/* profili nei reel: spazio sempre presente tra titolo, scheda e testo in basso */
.r-uprof > .r-top, .r-bprof > .r-top { padding-bottom: 28px; }
.r-uprof .sv-foot, .r-bprof .sv-foot { padding-top: 28px; }
/* Per chi investe: le risposte entrano nell'algoritmo e ne escono possibilità */
.iv { position: relative; z-index: 1; width: min(calc(100% - 48px), 380px); aspect-ratio: 1; margin: 6px auto 0; container-type: size; }
.iv > span { position: absolute; left: 50%; top: 50%; }
.iv-a, .iv-o { white-space: nowrap; padding: 8px 13px; border-radius: 99px; font: 600 .8rem/1 var(--f-body); transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); opacity: 0; }
.iv-a { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.iv-o { color: #0B1B33; background: #fff; box-shadow: 0 10px 24px rgba(72,157,254,.25); }
.iv-core { width: 26cqw; height: 26cqw; margin: -13cqw 0 0 -13cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(72,157,254,.55), rgba(72,157,254,.12) 62%, transparent 72%); }
.iv-core .brand-mark { width: 11cqw; height: 11cqw; background: #fff; }
.iv-core::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35); opacity: 0; }
.r-value.on .iv-a { animation: iv-in 2.6s cubic-bezier(.45,0,.2,1) var(--d) both; }
.r-value.on .iv-o { animation: iv-out .9s cubic-bezier(.22,1.3,.36,1) var(--d) both, iv-float 5s ease-in-out calc(var(--d) + 1s) infinite; }
.r-value.on .iv-core { animation: iv-pulse 1.2s ease 2.3s both; }
.r-value.on .iv-core::after { animation: iv-ring 1.4s ease-out 2.6s both; }
@keyframes iv-in {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.15cqw), calc(var(--y) * 1.15cqh)); }
  18%, 52% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.3); }
}
@keyframes iv-out {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
}
@keyframes iv-float {
  0%, 100% { transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
  50% { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.04cqw), calc(var(--y) * 1.04cqh - 1cqh)); }
}
@keyframes iv-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes iv-ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) {
  .r-value .iv-a { display: none; }
  .r-value .iv-o { opacity: 1; animation: none !important; }
}
.r-meet .glass-btn, .r-try .glass-btn { margin-top: 18px; }
.r-value .nw { white-space: nowrap; }
:root:not([data-theme="dark"]) .r-value .iv-a { color: #0B1B33; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(11,27,51,.12); }
:root:not([data-theme="dark"]) .r-value .iv-core .brand-mark { background: #2F6FDE; }
/* Moduli dentro le slide (provare l'app, incontro): si aprono sul posto, il tasto lascia il posto al riquadro */
.sbox { display: grid; }
.sbox-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.3,.8,.2,1); }
.sbox.open .sbox-p { grid-template-rows: 1fr; }
.sbox-in { min-height: 0; overflow: hidden; }
.sbox .cpanel-glass { display: block; margin-top: 16px; padding: 18px; border-radius: 24px; color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(10px); transition: opacity .4s ease .1s, transform .6s cubic-bezier(.3,.8,.2,1); }
.sbox.open .cpanel-glass { opacity: 1; transform: none; }
.sbox .ea { margin-top: 14px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sbox .rq { margin-top: 0; }
.sbox .ea-row input, .sbox .rq textarea { background: rgba(255,255,255,.9); }
.sbox [data-sopen] { justify-self: start; transition: opacity .25s ease, transform .3s ease; }
.sbox.open [data-sopen] { display: none; }
/* Per chi investe: domande che si compilano, risultati in grafici, la persona che si arricchisce e il ventaglio di possibilità */
.r-value { --iv-card: rgba(255,255,255,.08); --iv-line: rgba(255,255,255,.16); --iv-ink: #fff; --iv-ink2: rgba(255,255,255,.7); --iv-dot: rgba(255,255,255,.18); }
:root:not([data-theme="dark"]) .r-value { --iv-card: #fff; --iv-line: rgba(11,27,51,.08); --iv-ink: #0B1B33; --iv-ink2: #5B6B84; --iv-dot: #E3E9F2; }
.iv2 { position: relative; z-index: 1; width: min(calc(100% - 48px), 360px); height: min(330px, 46svh); margin: 10px auto 0; container-type: size; }
.iv-ph { position: absolute; inset: 0; opacity: 0; }
.r-value.on .iq { animation: iv-fade-in .35s ease .1s both, iv-fade-out .4s ease 6.3s forwards; }
.r-value.on .ig { animation: iv-fade-in .4s ease 6.5s both, iv-fade-out .4s ease 12.6s forwards; }
.r-value.on .ip { animation: iv-fade-in .5s ease 12.9s both; }
@keyframes iv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes iv-fade-out { from { opacity: 1; } to { opacity: 0; } }
.iv-box { border-radius: 26px; background: var(--iv-card); box-shadow: inset 0 0 0 1px var(--iv-line), 0 16px 40px rgba(11,27,51,.12); color: var(--iv-ink); }

/* 1. il questionario: una domanda alla volta, la risposta si seleziona */
.iq-c { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: 14px; padding: 22px 20px 18px; border-radius: 26px; background: var(--iv-card); box-shadow: inset 0 0 0 1px var(--iv-line), 0 16px 40px rgba(11,27,51,.12); color: var(--iv-ink); opacity: 0; }
.iq-c small { font: 500 .66rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--app-blue); }
.iq-c b { font: 400 1.35rem/1.2 var(--nd-display); }
.iq-s { display: flex; gap: 8px; }
.iq-s i { flex: 1; height: 34px; border-radius: 12px; background: var(--iv-dot); }
.iq-l { display: flex; justify-content: space-between; margin-top: -6px; font-size: .72rem; color: var(--iv-ink2); }
.iq-l em { font-style: normal; }
.r-value.on .iq-c { animation: iq-show 1.5s ease calc(.3s + var(--k) * 1.5s) both; }
.r-value.on .iq-s i.iq-y { animation: iq-pick .35s ease calc(.95s + var(--k) * 1.5s) both; }
@keyframes iq-show { 0% { opacity: 0; transform: translateY(14px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes iq-pick { from { background: var(--iv-dot); transform: scale(1); } 60% { transform: scale(1.14); } to { background: var(--app-blue); transform: scale(1); } }

/* 2. i risultati: tre grafici che scorrono uno dopo l'altro */
.ig { overflow: hidden; border-radius: 26px; background: var(--iv-card); box-shadow: inset 0 0 0 1px var(--iv-line), 0 16px 40px rgba(11,27,51,.12); color: var(--iv-ink); }
.ig-p { height: 100cqh; box-sizing: border-box; padding: 20px 20px 16px; display: grid; grid-template-rows: auto 1fr; }
.ig-h { margin: 0 0 6px; font: 500 .66rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--app-blue); }
.r-value.on .ig-roll { animation: ig-roll 6s cubic-bezier(.65,0,.35,1) 6.6s both; }
@keyframes ig-roll { 0%, 30% { transform: translateY(0); } 40%, 66% { transform: translateY(-100cqh); } 76%, 100% { transform: translateY(-200cqh); } }
/* radar dei tratti, che si apre e poi respira */
.rd { width: 100%; height: 100%; overflow: visible; }
.rd-g { fill: none; stroke: var(--iv-dot); stroke-width: 1; }
.rd-v { fill: rgba(72,157,254,.28); stroke: var(--app-blue); stroke-width: 2; stroke-linejoin: round; }
.rd-t { font: 600 9px var(--f-body); fill: var(--iv-ink2); }
/* ciambella dei gusti */
.dn { display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: 14px; }
.dn svg { width: 100%; transform: rotate(-90deg); }
.dn-bg { fill: none; stroke: var(--iv-dot); stroke-width: 6; }
.dn-s { fill: none; stroke-width: 6; stroke-dasharray: 0 100; stroke-dashoffset: var(--o); }
.r-value.on .dn-s { animation: dn-grow .8s cubic-bezier(.22,1,.36,1) calc(9.2s + var(--k) * .25s) both; }
@keyframes dn-grow { to { stroke-dasharray: var(--v) calc(100 - var(--v)); } }
.dn-l { display: grid; gap: 9px; font-size: .78rem; }
.dn-l span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.dn-l i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
/* barre degli interessi */
.ig-bars { display: grid; align-content: center; gap: 4px; }
.ig-r { display: grid; grid-template-columns: 5.5em 1fr 2em; align-items: center; gap: 10px; padding: 6px 0; font-size: .84rem; }
.ig-r b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ig-r i { height: 8px; border-radius: 99px; background: var(--iv-dot); overflow: hidden; position: relative; }
.ig-r i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #8FC2FF, var(--app-blue)); transform-origin: left; transform: scaleX(0); }
.r-value.on .ig-r i::before { animation: ig-bar .8s cubic-bezier(.22,1,.36,1) calc(11.2s + var(--k) * .15s) both; }
@keyframes ig-bar { to { transform: scaleX(1); } }

/* 3. la persona: i suoi tratti le girano attorno, ci entrano dentro, poi intorno compaiono le possibilità */
.ip-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 40cqw; display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 24px; background: var(--iv-card); box-shadow: inset 0 0 0 1px var(--iv-line), 0 16px 40px rgba(11,27,51,.14); color: var(--iv-ink); }
.ip-card img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--app-blue); margin-bottom: 4px; }
.ip-card b { font-size: .98rem; }
.ip-card small { font-size: .72rem; color: var(--iv-ink2); }
.ip-card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--app-blue); opacity: 0; }
.r-value.on .ip-card { animation: ip-pop .6s cubic-bezier(.22,1.3,.36,1) 12.9s both, ip-glow 1s ease 15.2s; }
.r-value.on .ip-card::after { animation: ip-ring 1.1s ease-out 15.2s both; }
@keyframes ip-pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ip-glow { 40% { transform: scale(1.06); } }
@keyframes ip-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.ip-t { position: absolute; left: 50%; top: 50%; white-space: nowrap; padding: 7px 12px; border-radius: 99px; font: 600 .76rem/1 var(--f-body); color: var(--iv-ink); background: var(--iv-card); box-shadow: inset 0 0 0 1px var(--iv-line), 0 8px 20px rgba(11,27,51,.12); opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
.r-value.on .ip-t { animation: ip-t-in .5s cubic-bezier(.22,1.3,.36,1) calc(13.4s + var(--k) * .3s) both, ip-t-merge .6s cubic-bezier(.6,0,.4,1) calc(14.7s + var(--k) * .08s) forwards; }
@keyframes ip-t-in { from { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.2cqw), calc(var(--y) * 1.2cqh)) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); } }
@keyframes ip-t-merge { from { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); } to { opacity: 0; transform: translate(-50%, -50%) translate(0, -8cqh) scale(.25); } }
.ip-o { position: absolute; left: 50%; top: 50%; white-space: nowrap; padding: 7px 12px; border-radius: 99px; font: 600 .78rem/1 var(--f-body); color: #0B1B33; background: #fff; box-shadow: 0 8px 20px rgba(72,157,254,.25); transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); opacity: 0; }
:root:not([data-theme="dark"]) .r-value .ip-o { background: var(--app-blue); color: #fff; }
.r-value.on .ip-o { animation: iv-out .8s cubic-bezier(.22,1.3,.36,1) calc(15.7s + var(--k) * .09s) both, iv-float 5s ease-in-out calc(16.8s + var(--k) * .2s) infinite; }
@media (prefers-reduced-motion: reduce) {
  .r-value .iq, .r-value .ig, .r-value .ip-t { display: none; }
  .r-value .ip, .r-value .ip-card, .r-value .ip-o { opacity: 1 !important; animation: none !important; }
}
/* risultati: un unico scorrimento continuo, come uno scroll verso il basso */
.ig { -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); }
.ig-roll { padding: 18px 0 30px; }
.ig-p { height: auto; padding: 8px 20px 18px; display: block; }
.ig-p .rd { height: 210px; }
.ig-p .dn { padding: 4px 0 6px; }
.r-value.on .ig-roll { animation: ig-scroll 5.6s cubic-bezier(.45,.05,.55,.95) 6.7s both; }
@keyframes ig-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100cqh)); } }
.r-value.on .dn-s { animation-delay: calc(8.2s + var(--k) * .22s); }
.r-value.on .ig-r i::before { animation-delay: calc(9.9s + var(--k) * .15s); }
/* box del profilo senza bordo blu (resta solo attorno alla foto) */
.ip-card::after { content: none; }
/* titoletto sopra al testo */
.iv-k { margin: 0 0 6px; font: 600 1.05rem/1.3 var(--f-body); color: inherit; }
.r-value .r-body { margin-top: 0; }
/* soft skill: quattro indicatori circolari che si riempiono */
.gks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 4px 0; }
.gk { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.gk svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.gk-b { fill: none; stroke: var(--iv-dot); stroke-width: 4.5; }
.gk-v { fill: none; stroke: var(--app-blue); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0 100; }
.gk b { position: absolute; top: 21px; left: 0; right: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.gk span { font-size: .76rem; color: var(--iv-ink2); }
.r-value.on .gk-v { animation: gk-fill 1s cubic-bezier(.22,1,.36,1) calc(8.3s + var(--k) * .18s) both; }
@keyframes gk-fill { to { stroke-dasharray: var(--v) calc(100 - var(--v)); } }
/* più contenuto da scorrere: tempi allungati */
.r-value.on .ig-roll { animation: ig-scroll 7s cubic-bezier(.45,.05,.55,.95) 6.7s both; }
.r-value.on .dn-s { animation-delay: calc(9.8s + var(--k) * .22s); }
.r-value.on .ig-r i::before { animation-delay: calc(11.6s + var(--k) * .15s); }
.r-value.on .ig { animation: iv-fade-in .4s ease 6.5s both, iv-fade-out .4s ease 14s forwards; }
.r-value.on .ip { animation: iv-fade-in .5s ease 14.3s both; }
.r-value.on .ip-card { animation: ip-pop .6s cubic-bezier(.22,1.3,.36,1) 14.3s both, ip-glow 1s ease 16.6s; }
.r-value.on .ip-t { animation: ip-t-in .5s cubic-bezier(.22,1.3,.36,1) calc(14.8s + var(--k) * .3s) both, ip-t-merge .6s cubic-bezier(.6,0,.4,1) calc(16.1s + var(--k) * .08s) forwards; }
.r-value.on .ip-o { animation: iv-out .8s cubic-bezier(.22,1.3,.36,1) calc(17.1s + var(--k) * .09s) both, iv-float 5s ease-in-out calc(18.2s + var(--k) * .2s) infinite; }
/* l'animazione del valore sta al centro e più grande */
.r-value .iv2 { margin: auto; height: min(400px, 56svh); width: min(calc(100% - 40px), 380px); }
.r-value > .r-top { padding-bottom: 8px; }
/* Un vero questionario: titolo grande al centro */
.r-quest .r-in { text-align: center; }
.r-quest .r-h2 { font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1.02; }
.r-quest .r-body { max-width: 30ch; margin-inline: auto; }
.r-quest .nd-label { justify-content: center; text-align: center; margin-inline: auto; }
/* Un vero questionario: al centro in verticale, allineato a sinistra */
.r-quest .r-in { text-align: left; }
.r-quest .nd-label { justify-content: flex-start; text-align: left; margin-inline: 0; }
.r-quest .r-body { margin-inline: 0; max-width: 32ch; }