/**
 * Pagina d'anteprima — sezioni della pagina principale. Animazioni pensate solo per questa pagina:
 * cielo che cambia luce, titolo che si apre a parole, parola a palette, auto che arriva e frena, logo che si disegna,
 * controlli collegati all'auto, strada che si percorre scorrendo, contachilometri, anello per categorie,
 * telefono «da solo» che impazzisce e si calma con l'interruttore, scena di Opsy Road, scheda che si gira a messaggio inviato.
 */

@property --tz-p1x { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
@property --tz-p1y { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --tz-p2x { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@property --tz-p2y { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
@property --tz-p3x { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --tz-p3y { syntax: "<percentage>"; inherits: false; initial-value: 70%; }

/* ======================================================================
   HERO
   ====================================================================== */
.tz-hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-68px - env(safe-area-inset-top, 0px));
  padding-top: calc(68px + env(safe-area-inset-top, 0px) + clamp(2rem, 6vw, 4.5rem));
  overflow: hidden;
  text-align: center;
  background: #fff;
}

/* Cielo: tre macchie di luce che si spostano piano, come la luce del giorno. */
.tz-aurora {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(42% 46% at var(--tz-p1x) var(--tz-p1y), #dce8ff 0%, #dce8ff00 100%),
    radial-gradient(34% 40% at var(--tz-p2x) var(--tz-p2y), #fff0d2 0%, #fff0d200 100%),
    radial-gradient(48% 42% at var(--tz-p3x) var(--tz-p3y), #e2f4ff 0%, #e2f4ff00 100%),
    linear-gradient(180deg, #f7faff 0%, #fff 75%);
  animation: tz-sky 22s ease-in-out infinite alternate;
}
@keyframes tz-sky {
  33% { --tz-p1x: 30%; --tz-p1y: 35%; --tz-p2x: 70%; --tz-p2y: 22%; --tz-p3x: 40%; --tz-p3y: 60%; }
  66% { --tz-p1x: 10%; --tz-p1y: 50%; --tz-p2x: 92%; --tz-p2y: 30%; --tz-p3x: 75%; --tz-p3y: 80%; }
  100% { --tz-p1x: 25%; --tz-p1y: 15%; --tz-p2x: 78%; --tz-p2y: 5%; --tz-p3x: 55%; --tz-p3y: 55%; }
}
/* Raggi di sole dall'angolo in alto a destra, che oscillano appena. */
.tz-aurora i { position: absolute; top: -30%; right: -10%; width: 22%; height: 140%; transform-origin: 50% 0; background: linear-gradient(180deg, #ffffffcc, #ffffff00 70%); filter: blur(18px); opacity: .7; animation: tz-ray 14s ease-in-out infinite alternate; }
.tz-aurora i:nth-child(1) { --r: 28deg; }
.tz-aurora i:nth-child(2) { --r: 42deg; width: 12%; animation-duration: 18s; animation-delay: -4s; }
.tz-aurora i:nth-child(3) { --r: 56deg; width: 16%; animation-duration: 11s; animation-delay: -7s; opacity: .5; }
@keyframes tz-ray { from { transform: rotate(var(--r)); } to { transform: rotate(calc(var(--r) + 9deg)); } }

/* Pavimento a quadretti in prospettiva sotto l'auto, che si accende dal centro. */
.tz-hero__grid {
  position: absolute; left: -25%; right: -25%; bottom: -8%; height: 46%; z-index: -1;
  background-image: linear-gradient(#0250ff14 1px, transparent 1px), linear-gradient(90deg, #0250ff14 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(var(--tz-floor, 0%) 70% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(var(--tz-floor, 0%) 70% at 50% 0%, #000 30%, transparent 100%);
  animation: tz-floor 2.2s var(--tz-ease-out) 1.6s both;
}
@property --tz-floor { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes tz-floor { to { --tz-floor: 60%; } }

.tz-hero__in { position: relative; }

.tz-soon {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  padding: 0.42rem 0.95rem 0.42rem 0.7rem; border-radius: 999px;
  background: #ffffffc7; box-shadow: inset 0 0 0 1px var(--tz-line), 0 8px 24px #01083b0f;
  color: var(--im-color-navy); font-size: 0.86rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: tz-drop .9s var(--tz-ease-spring) .1s both;
}
/* Puntino «in arrivo»: si riempie a spicchi come un caricamento che non finisce mai. */
.tz-soon__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--tz-blue) var(--tz-angle), #0250ff26 0); animation: tz-load 2.4s linear infinite; }
@keyframes tz-load { from { --tz-angle: 0deg; } to { --tz-angle: 360deg; } }
@keyframes tz-drop { from { opacity: 0; transform: translateY(-18px) scale(.9); } }

.tz-hero__title {
  margin: 1.25rem auto 0; max-width: 15ch;
  color: var(--im-color-navy);
  font-size: clamp(2.3rem, 7.4vw, 4.6rem); font-weight: 820; line-height: 1.04; letter-spacing: -0.045em;
  perspective: 800px;
}
@media (min-width: 900px) { .tz-hero__title { max-width: 18ch; } }
/* Parole che si aprono dal basso come pagine. */
.tz-words { display: block; }
.tz-w { display: inline-block; transform-origin: 50% 100%; animation: tz-unfold .9s var(--tz-ease-out) calc(.25s + var(--i) * 90ms) both; }
@keyframes tz-unfold { from { opacity: 0; transform: translateY(.35em) rotateX(-85deg); filter: blur(8px); } }
/* Parola che cambia a palette, lettera per lettera, come i tabelloni delle stazioni. */
.tz-flip { position: relative; display: inline-block; color: var(--tz-blue); white-space: nowrap; }
.tz-flip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 0.09em; border-radius: 1em; background: linear-gradient(90deg, var(--tz-blue), var(--tz-sky)); transform-origin: 0 50%; animation: tz-underline .8s var(--tz-ease-out) 1.2s both; }
.tz-flip.is-swap::after { animation: tz-underline .7s var(--tz-ease-out) .25s both; }
@keyframes tz-underline { from { transform: scaleX(0); } }
.tz-fl { display: inline-block; transform-origin: 50% 55%; backface-visibility: hidden; }
.tz-fl.is-in { animation: tz-flap-in .45s var(--tz-ease-out) calc(var(--i) * 22ms) both; }
.tz-fl.is-out { animation: tz-flap-out .22s ease-in calc(var(--i) * 10ms) both; }
@keyframes tz-flap-in { from { opacity: 0; transform: rotateX(-100deg); } }
@keyframes tz-flap-out { to { opacity: 0; transform: rotateX(100deg); } }

.tz-hero__lead { max-width: 38rem; margin: 1.15rem auto 0; color: var(--im-color-text-muted); font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.6; animation: tz-fade .9s ease 1s both; }
.tz-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.7rem; animation: tz-fade .9s ease 1.2s both; }
@keyframes tz-fade { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 480px) { .tz-hero__actions .tz-btn { flex: 1 1 100%; } }

/* —— Palco dell'auto —— */
.tz-stage { position: relative; padding: clamp(4.5rem, 9vw, 6rem) 1rem clamp(5.5rem, 10vw, 7rem); }
.tz-car { position: relative; width: min(880px, 92vw); aspect-ratio: 2000 / 714; margin-inline: auto; }
/* Ombra sotto l'auto: nasce quando l'auto si ferma. */
.tz-car::before { content: ""; position: absolute; left: 6%; right: 4%; bottom: -3%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, #01083b38, #01083b00); filter: blur(4px); animation: tz-shadow 1.7s var(--tz-ease-out) .45s both; }
@keyframes tz-shadow { 0%, 55% { opacity: 0; transform: scaleX(.4) translateX(-60%); } }

/* L'auto entra da sinistra inclinata dalla velocità, frena oltre il punto e si assesta. */
.tz-car__body { position: absolute; inset: 0; animation: tz-arrive 1.7s var(--tz-ease-out) .45s both; }
@keyframes tz-arrive {
  0% { transform: translateX(-120vw) skewX(-16deg); }
  62% { transform: translateX(2.2%) skewX(4deg); }
  78% { transform: translateX(-0.6%) skewX(-1.2deg); }
  100% { transform: none; }
}
.tz-car__img { position: relative; width: 100%; height: auto; transform-origin: 70% 100%; animation: tz-brake 1.7s ease-out .45s both; }
@keyframes tz-brake { 0%, 55% { transform: none; } 66% { transform: rotate(1.1deg) translateY(1.2%); } 82% { transform: rotate(-0.35deg); } 100% { transform: none; } }
.tz-car__mirror { position: absolute; left: 0; top: 99%; width: 100%; height: auto; transform: scaleY(-1); opacity: .16; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 32%); mask-image: linear-gradient(to top, #000 0%, transparent 32%); pointer-events: none; }
/* Scie della velocità dietro l'auto. */
.tz-car__streaks { position: absolute; inset: 0; pointer-events: none; }
.tz-car__streaks i { position: absolute; right: 96%; height: 2px; width: 46%; border-radius: 2px; background: linear-gradient(90deg, #0250ff00, #0250ff70); transform-origin: 100% 50%; animation: tz-streak 1.7s var(--tz-ease-out) .45s both; }
.tz-car__streaks i:nth-child(1) { top: 30%; }
.tz-car__streaks i:nth-child(2) { top: 48%; width: 60%; animation-delay: .5s; }
.tz-car__streaks i:nth-child(3) { top: 63%; width: 38%; animation-delay: .55s; }
.tz-car__streaks i:nth-child(4) { top: 79%; width: 52%; animation-delay: .48s; }
@keyframes tz-streak { 0% { opacity: 1; transform: scaleX(2.2); } 60% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } }
/* Lampo del faro: stella di luce che ruota e si spegne, ogni tanto. */
.tz-car__flare { position: absolute; left: 92.5%; top: 54%; width: 22%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; background: radial-gradient(circle, #fff 0 5%, #d6e6ff 9%, #ffffff00 34%), conic-gradient(from 0deg, #ffffff00 0 8%, #9cc2ff99 10%, #ffffff00 12% 33%, #9cc2ff99 35%, #ffffff00 37% 58%, #9cc2ff99 60%, #ffffff00 62% 83%, #9cc2ff99 85%, #ffffff00 87%); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%); mask-image: radial-gradient(circle, #000 15%, transparent 60%); opacity: 0; animation: tz-flare 7s ease-out 2.1s infinite; }
@keyframes tz-flare { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 6% { opacity: 1; transform: scale(1.1) rotate(25deg); } 16% { opacity: 0; transform: scale(.7) rotate(60deg); } 100% { opacity: 0; } }

/* Linee: l'arco del marchio sopra l'auto e i fili che collegano i controlli. */
.tz-car__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tz-swoosh { fill: none; stroke: url(#tz-swoosh-g); stroke-width: 0.85; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tz-draw 1.5s var(--tz-ease-out) 1.95s forwards; }
.tz-hot__line { stroke: #0250ff59; stroke-width: 0.32; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tz-draw .6s ease-out calc(2.75s + var(--d) * .2s) forwards; }
@keyframes tz-draw { to { stroke-dashoffset: 0; } }
/* Punti sull'auto: un satellite che gira intorno, come un controllo in corso. */
.tz-hot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; background: var(--tz-blue); box-shadow: 0 0 0 3px #fff, 0 4px 10px #0250ff55; animation: tz-pop .5s var(--tz-ease-spring) calc(2.6s + var(--d) * .2s) both; }
.tz-hot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--tz-blue) 0 2.5px, transparent 3px); animation: tz-orbit 2.4s linear infinite; }
@keyframes tz-orbit { to { transform: rotate(360deg); } }
@keyframes tz-pop { from { opacity: 0; transform: scale(0); } }
.tz-chips { margin: 0; padding: 0; list-style: none; }
.tz-chip { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.75rem 0.42rem 0.55rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line), 0 10px 24px #01083b14; color: var(--im-color-navy); font-size: 0.84rem; font-weight: 700; white-space: nowrap; translate: -50% -50%; animation: tz-chip-in .7s var(--tz-ease-spring) calc(3.05s + var(--d) * .2s) both; }
.tz-chip--l { translate: -18% -50%; }
.tz-chip--r { translate: -82% -50%; }
.tz-chip i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tz-ice); color: var(--tz-blue); font-size: 0.85rem; }
/* Visto verde che arriva dopo: controllo superato. */
.tz-chip::after { content: "\F26E"; font-family: bootstrap-icons; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: 0.1rem; border-radius: 50%; background: var(--im-color-success); color: #fff; font-size: 0.8rem; font-weight: 400; animation: tz-pop .45s var(--tz-ease-spring) calc(3.6s + var(--d) * .2s) both; }
@keyframes tz-chip-in { from { opacity: 0; transform: scale(.5) translateY(10px); filter: blur(6px); } }
@media (max-width: 640px) {
  .tz-chip { padding: 0; gap: 0; font-size: 0; translate: -50% -50%; }
  .tz-chip i { width: 2.1rem; height: 2.1rem; font-size: 0.95rem; }
  .tz-chip::after { position: absolute; right: -0.3rem; top: -0.3rem; width: 0.95rem; height: 0.95rem; font-size: 0.66rem; }
}

/* ======================================================================
   DUE STRADE
   ====================================================================== */
.tz-switch { position: relative; display: none; grid-template-columns: 1fr 1fr; max-width: 22rem; margin: 0 auto 2rem; padding: 0.3rem; border-radius: 16px; background: var(--tz-ice); }
.tz-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; border: 0; border-radius: 12px; background: none; color: var(--im-color-text-muted); font-weight: 700; cursor: pointer; transition: color .3s; }
.tz-switch button[aria-selected="true"] { color: var(--tz-blue); }
.tz-switch__pill { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0.3rem; width: calc(50% - 0.3rem); border-radius: 12px; background: #fff; box-shadow: 0 6px 16px #01083b14; transition: transform .45s var(--tz-ease-spring); }
.tz-switch[data-on="find"] .tz-switch__pill { transform: translateX(100%); }

.tz-road { --p: 0; position: relative; display: grid; grid-template-columns: 1fr 170px 1fr; row-gap: clamp(1.4rem, 3vw, 2.2rem); max-width: 1040px; margin-inline: auto; padding-bottom: 1rem; }
.tz-road__lane { position: absolute; top: 3.2rem; bottom: 0; left: 50%; width: 60px; translate: -50% 0; border-radius: 30px; background: linear-gradient(90deg, #e3e9f5, #eef2fa 20% 80%, #e3e9f5); box-shadow: inset 0 0 0 2px #fff; overflow: hidden; }
/* Riga di mezzeria che scorre con la pagina: sembra di guidare. */
.tz-road__lane::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; translate: -50% 0; background: repeating-linear-gradient(180deg, #fff 0 18px, transparent 18px 38px); background-position: 0 calc(var(--p) * 600px); }
.tz-road__done { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p) * 100%); background: linear-gradient(180deg, #0250ff00, #0250ff26); }
.tz-road__car { position: absolute; left: 50%; top: calc(var(--p) * 100%); translate: -50% -50%; filter: drop-shadow(0 8px 10px #0250ff4d); transition: top .12s linear; }
.tz-road__car svg { transform: rotate(180deg); animation: tz-wiggle 1.6s ease-in-out infinite; }
@keyframes tz-wiggle { 50% { transform: rotate(182deg) translateX(1px); } }
.tz-road__side { display: flex; align-items: center; gap: 0.5rem; color: var(--im-color-navy); font-weight: 800; font-size: 1.15rem; }
.tz-road__side i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 11px; background: var(--tz-ice); color: var(--tz-blue); font-size: 1rem; }
.tz-road__side--sell { grid-column: 1; justify-content: flex-end; }
.tz-road__side--find { grid-column: 3; }

.tz-step { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.tz-step__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.45rem; }
.tz-step__node i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: #fff; color: var(--im-color-text-muted); font-size: 1.45rem; box-shadow: 0 0 0 1px var(--tz-line), 0 10px 22px #01083b10; transition: background .5s, color .5s, transform .6s var(--tz-ease-spring), border-radius .6s; }
.tz-step__node span { padding: 0.15rem 0.6rem; border-radius: 999px; background: #fff; color: var(--im-color-navy); font-size: 0.82rem; font-weight: 750; white-space: nowrap; box-shadow: 0 0 0 1px var(--tz-line); }
.tz-step.is-on .tz-step__node i { background: var(--tz-blue); color: #fff; border-radius: 50%; transform: rotate(360deg) scale(1.05); box-shadow: 0 0 0 6px #0250ff1f, 0 12px 26px #0250ff4d; }
.tz-step__card { padding: 1.1rem 1.25rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line); color: var(--im-color-text-muted); line-height: 1.5; opacity: .45; transition: opacity .6s, transform .7s var(--tz-ease-out), box-shadow .6s, color .6s; }
.tz-step__card--sell { transform: translateX(-24px); text-align: right; }
.tz-step__card--find { transform: translateX(24px); }
.tz-step__t { display: none; }
.tz-step.is-on .tz-step__card { opacity: 1; transform: none; color: var(--im-color-text); box-shadow: 0 0 0 1.5px #0250ff40, 0 16px 34px #01083b12; }

@media (max-width: 767.98px) {
  .tz-switch { display: grid; }
  .tz-road { grid-template-columns: 64px 1fr; row-gap: 1.1rem; }
  .tz-road__lane { left: 32px; top: 0; width: 46px; }
  .tz-road__side { display: none; }
  .tz-step { grid-template-columns: 64px 1fr; }
  .tz-step__node { grid-column: 1; grid-row: 1; }
  .tz-step__node i { width: 50px; height: 50px; border-radius: 16px; font-size: 1.2rem; }
  .tz-step__node span { display: none; }
  .tz-step__card { grid-column: 2; grid-row: 1; text-align: left; transform: translateX(16px); }
  .tz-step__t { display: block; margin-bottom: 0.2rem; color: var(--im-color-navy); font-size: 0.95rem; }
  /* Si vede un percorso alla volta: l'altro gira come una carta. */
  .tz-road[data-side="sell"] .tz-step__card--find, .tz-road[data-side="find"] .tz-step__card--sell { visibility: hidden; opacity: 0 !important; transform: perspective(600px) rotateY(80deg); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .tz-road[data-side] .tz-step__card { transition: opacity .5s .2s, transform .6s var(--tz-ease-out) .2s, box-shadow .6s, color .6s, visibility 0s .2s; }
}

/* ======================================================================
   36 CONTROLLI
   ====================================================================== */
.tz-checks__in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 992px) { .tz-checks__in { grid-template-columns: 1fr 1.05fr; } }
.tz-checks__text .tz-h2 { max-width: 14ch; }
/* Contachilometri: ogni cifra è un rullo che gira e si ferma, la seconda fa un giro in più. */
.tz-odo { display: inline-flex; gap: 0.04em; margin-inline: 0.06em; padding: 0 0.12em; border-radius: 0.2em; background: linear-gradient(180deg, #e7efff, #f7faff 45% 55%, #e7efff); box-shadow: inset 0 0 0 2px #fff, inset 0 2px 8px #0250ff26; vertical-align: -0.08em; }
.tz-odo__d { display: block; height: 1.1em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22% 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22% 78%, transparent); }
.tz-odo__d > span { display: flex; flex-direction: column; color: var(--tz-blue); line-height: 1.1; font-variant-numeric: tabular-nums; transition: transform 2.2s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--k, 0) * .25s); }
.tz-odo__d > span > b { display: block; height: 1.1em; font-weight: inherit; }

.tz-ring { position: relative; display: grid; gap: 1.6rem; align-items: center; justify-items: center; }
/* Anello e voci affiancati solo se c'è spazio (non nella colonna stretta tra 992 e 1199 px). */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1200px) { .tz-ring { grid-template-columns: auto 1fr; } }
.tz-ring__svg { width: min(250px, 70vw); height: auto; transform: rotate(-90deg); overflow: visible; }
.tz-ring__bg { fill: none; stroke: #e8eef9; stroke-width: 11; }
.tz-ring__seg { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 0 1; stroke-dashoffset: calc(-1 * var(--off)); transition: stroke-dasharray 1s var(--tz-ease-out) calc(.4s + var(--i) * .28s), stroke-width .3s, opacity .3s; }
.tz-ring__seg:nth-of-type(2) { stroke: #0250ff; }
.tz-ring__seg:nth-of-type(3) { stroke: #2a6dff; }
.tz-ring__seg:nth-of-type(4) { stroke: #5a8fff; }
.tz-ring__seg:nth-of-type(5) { stroke: #89b0ff; }
.tz-ring__seg:nth-of-type(6) { stroke: var(--tz-gold); }
.is-in .tz-ring__seg { stroke-dasharray: var(--len) 1; }
.tz-ring.is-hot .tz-ring__seg { opacity: .35; }
.tz-ring.is-hot .tz-ring__seg.is-hot { opacity: 1; stroke-width: 15; }
.tz-ring__mid { position: absolute; display: grid; justify-items: center; line-height: 1.1; pointer-events: none; }
.tz-ring__mid i { color: var(--tz-blue); font-size: 1.2rem; }
.tz-ring__mid b { color: var(--im-color-navy); font-size: 2.3rem; font-weight: 820; letter-spacing: -0.04em; }
.tz-ring__mid span { color: var(--im-color-text-muted); font-size: 0.82rem; font-weight: 600; }
/* Il centro dell'anello sta sull'anello anche a due colonne. */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1200px) { .tz-ring__mid { left: calc(min(250px, 70vw) / 2); top: 50%; translate: -50% -50%; } }
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1199.98px) { .tz-ring__mid { top: calc(min(250px, 70vw) / 2); left: 50%; translate: -50% -50%; } }
.tz-ring__legend { display: grid; gap: 0.5rem; width: 100%; max-width: 22rem; margin: 0; padding: 0; list-style: none; }
.tz-ring__legend li { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.6rem 0.8rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line); color: var(--im-color-navy); font-weight: 650; cursor: default; opacity: 0; transform: translateX(20px); transition: opacity .6s calc(.5s + var(--i) * .28s), transform .7s var(--tz-ease-out) calc(.5s + var(--i) * .28s), box-shadow .25s, background .25s; }
.is-in .tz-ring__legend li { opacity: 1; transform: none; }
.tz-ring__legend li span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-ring__legend li i { color: var(--tz-blue); }
.tz-ring__legend li b { display: grid; place-items: center; min-width: 2rem; height: 1.75rem; padding: 0 0.4rem; border-radius: 9px; background: var(--tz-ice); color: var(--tz-blue); font-size: 0.9rem; }
.tz-ring__legend li.is-hot { background: #f5f8ff; box-shadow: 0 0 0 1.5px var(--tz-blue); }
.tz-ring__legend li:focus-visible { outline: 3px solid #0250ff55; outline-offset: 2px; }
/* Sul telefono niente «passaggio sopra» che resta appiccicato dopo il tocco: si tocca e basta. */
.tz-ring__legend li, .tz-ring__seg { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .tz-ring__legend li:hover { background: #f5f8ff; box-shadow: 0 0 0 1.5px var(--tz-blue); } }

/* ======================================================================
   DA SOLO / CON INTERMEDIAUTO
   ====================================================================== */
/* Telefono «da solo»: notifiche che piovono e il telefono che vibra. Con l'interruttore le notifiche finiscono in un
   vortice dentro la sfera blu, la sfera si allarga e scopre lo schermo calmo con le nostre risposte. */
.tz-calm { --tz-alarm: #e5483a; max-width: 1000px; margin-inline: auto; }

/* —— Interruttore grande —— */
.tz-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 460px); margin: 0 auto; padding: 0.35rem; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line), 0 14px 34px #01083b14; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tz-toggle:focus-visible { outline: 3px solid #0250ff55; outline-offset: 4px; }
.tz-toggle__l, .tz-toggle__r { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 52px; padding: 0 0.6rem; border-radius: 999px; font-weight: 750; font-size: clamp(0.88rem, 2.6vw, 1rem); white-space: nowrap; transition: color .45s; }
.tz-toggle__l { color: #fff; }
.tz-toggle__r { color: var(--im-color-text-muted); }
.tz-toggle__l i, .tz-toggle__r i { font-size: 1.15em; }
.tz-toggle__knob { position: absolute; top: 0.35rem; bottom: 0.35rem; left: 0.35rem; width: calc(50% - 0.35rem); border-radius: 999px; background: linear-gradient(135deg, #ff6b5a, #e5483a); box-shadow: 0 8px 20px #e5483a55; transition: transform .6s var(--tz-ease-spring), background .5s, box-shadow .5s; }
[data-mode="us"] .tz-toggle__knob { transform: translateX(100%); background: linear-gradient(135deg, #3a8bff, #0250ff); box-shadow: 0 8px 22px #0250ff66; }
[data-mode="us"] .tz-toggle__l { color: var(--im-color-text-muted); }
[data-mode="us"] .tz-toggle__r { color: #fff; }
/* Ditino che invita a toccare, solo finché non l'hai fatto. */
.tz-toggle__hint { position: absolute; z-index: 2; right: 18%; bottom: -1.4rem; color: var(--im-color-navy); font-size: 1.9rem; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 6px #01083b33); transition: opacity .3s; }
.tz-calm.is-hint .tz-toggle__hint { opacity: 1; animation: tz-tap-hint 1.1s ease-in-out infinite; }
@keyframes tz-tap-hint { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 45% { transform: translate(-4px, -10px) rotate(-12deg) scale(.9); } }
.tz-calm.is-hint .tz-toggle { animation: tz-toggle-glow 1.1s ease-in-out infinite; }
@keyframes tz-toggle-glow { 50% { box-shadow: 0 0 0 1px var(--tz-line), 0 0 0 8px #0250ff1f, 0 14px 34px #01083b14; } }

/* —— Palco —— */
.tz-calm__stage { display: grid; gap: clamp(1.6rem, 4vw, 3rem); justify-items: center; align-items: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 860px) { .tz-calm__stage { grid-template-columns: auto minmax(0, 360px); justify-content: center; } }

/* —— Telefono —— */
.tz-phone { position: relative; width: min(310px, 82vw); aspect-ratio: 9 / 18.6; padding: 10px; border-radius: 46px; background: linear-gradient(145deg, #f7f9fc, #dde3ee); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #cfd7e5, 0 40px 80px #01083b2e, 0 10px 24px #01083b14; transition: box-shadow .8s; }
.tz-phone::before { content: ""; position: absolute; z-index: 5; top: 20px; left: 50%; width: 84px; height: 22px; translate: -50% 0; border-radius: 20px; background: #cfd6e2; }
.tz-phone__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: linear-gradient(180deg, #fff4f2 0%, #ffe6e2 100%); isolation: isolate; }
[data-mode="alone"].is-live .tz-phone { animation: tz-buzz 2.6s ease-in-out .8s infinite; }
@keyframes tz-buzz { 0%, 14%, 100% { transform: none; } 2%, 6%, 10% { transform: translateX(-3px) rotate(-1.2deg); } 4%, 8%, 12% { transform: translateX(3px) rotate(1.2deg); } }
[data-mode="us"] .tz-phone { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #cfd7e5, 0 40px 90px #0250ff33, 0 0 0 10px #0250ff0d; }

.tz-phone__status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 26px 0; color: var(--im-color-navy); font-size: 0.78rem; }
.tz-phone__bat { position: relative; width: 24px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; }
.tz-phone__bat::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 5px; border-radius: 1px; background: currentColor; }
.tz-phone__bat i { position: absolute; left: 2.5px; top: 2.5px; bottom: 2.5px; width: 3px; border-radius: 1.5px; background: var(--tz-alarm); transition: width 1.2s ease 1.2s, background .6s 1.2s; }
[data-mode="us"] .tz-phone__bat i { width: 16px; background: var(--im-color-success); }

/* —— Tempesta di notifiche —— */
.tz-storm { position: absolute; inset: 0; padding: 52px 12px 12px; }
.tz-storm__clock { color: #5b2a26; text-align: center; font-size: clamp(2.6rem, 11vw, 3.3rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; transition: opacity .4s, transform .5s; }
.tz-storm__count { width: fit-content; margin: 0.45rem auto 0.8rem; padding: 0.18rem 0.65rem; border-radius: 999px; background: var(--tz-alarm); color: #fff; font-size: 0.72rem; font-weight: 700; box-shadow: 0 6px 14px #e5483a55; transition: opacity .4s, transform .5s; }
.tz-storm__count b { font-variant-numeric: tabular-nums; }
.is-live[data-mode="alone"] .tz-storm__count { animation: tz-count-beat 1.3s ease-in-out infinite; }
@keyframes tz-count-beat { 50% { transform: scale(1.08); } }
.tz-noti { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Il <li> fa il vortice, la scheda dentro fa la caduta: due movimenti che non si pestano i piedi. */
.tz-noti li { transition: transform .75s cubic-bezier(.55, 0, .85, .35) calc(var(--i) * 70ms), opacity .5s ease calc(.25s + var(--i) * 70ms); }
.tz-noti__card { display: flex; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 16px; background: #ffffffeb; box-shadow: 0 6px 16px #5b2a261a; transform: rotate(var(--r)); }
.tz-js .tz-calm:not(.is-live) .tz-noti__card { opacity: 0; }
.is-live .tz-noti__card { animation: tz-noti-drop .7s var(--tz-ease-spring) calc(.3s + var(--i) * .42s) both; }
@keyframes tz-noti-drop { from { opacity: 0; transform: translateY(-46px) scale(.9) rotate(0); } }
.tz-noti__app { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: #fff; font-size: 0.85rem; }
.tz-noti__t { display: grid; min-width: 0; line-height: 1.25; }
.tz-noti__t small { color: var(--im-color-text-muted); font-size: 0.64rem; }
.tz-noti__t b { color: var(--im-color-navy); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-noti__t span { color: #4b5563; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-mode="us"] .tz-noti li { opacity: 0; transform: translate(var(--vx, 0), var(--vy, 300px)) rotate(var(--vr, 180deg)) scale(.06); }
[data-mode="us"] .tz-storm__clock, [data-mode="us"] .tz-storm__count { opacity: 0; transform: scale(.6); }

/* —— Sfera che inghiotte e poi si allarga —— */
.tz-orb { position: absolute; z-index: 3; left: 50%; bottom: 34px; display: grid; place-items: center; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fb0ff, #0250ff 70%); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 26px #0250ff66; opacity: 0; transform: scale(0); }
[data-mode="us"] .tz-orb { animation: tz-orb 1.5s var(--tz-ease-out) forwards; }
@keyframes tz-orb {
  0% { opacity: 0; transform: scale(0) rotate(-90deg); }
  18% { opacity: 1; transform: scale(1.15) rotate(0); }
  45% { transform: scale(.9); }
  60% { transform: scale(1.3); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.5); }
}
/* Gorgo intorno alla sfera mentre risucchia. */
.tz-orb::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: conic-gradient(from 0deg, #0250ff00, #0250ff59, #ffb02059, #0250ff00); -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 46%, transparent 72%); mask-image: radial-gradient(circle, transparent 42%, #000 46%, transparent 72%); animation: tz-swirl .6s linear infinite; }
@keyframes tz-swirl { to { transform: rotate(360deg); } }

/* —— Schermo calmo —— */
.tz-zen { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; padding: 56px 16px 16px; background: radial-gradient(120% 60% at 50% 0%, #dceaff 0%, #f3f8ff 45%, #fff 100%); clip-path: circle(0 at 50% calc(100% - 63px)); transition: clip-path .5s ease-in; }
[data-mode="us"] .tz-zen { clip-path: circle(150% at 50% calc(100% - 63px)); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1) .95s; }
.tz-zen__hi { display: flex; align-items: center; gap: 0.35rem; color: #b26b00; font-size: 0.78rem; font-weight: 700; }
.tz-zen__hi i { color: var(--tz-gold); font-size: 1rem; }
.tz-zen__t { margin: 0.15rem 0 0.7rem; color: var(--im-color-navy); font-size: 1.45rem; font-weight: 820; letter-spacing: -0.03em; }
.tz-zen__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tz-zen__list li { display: flex; align-items: center; gap: 0.55rem; color: var(--im-color-navy); font-size: 0.78rem; font-weight: 600; line-height: 1.25; opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .3s; }
.tz-zen__list li i { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #b8cff8; color: transparent; font-size: 0.8rem; transition: background .3s, color .3s, box-shadow .3s; }
[data-mode="us"] .tz-zen__list li { opacity: 1; transform: none; transition: opacity .5s calc(1.6s + var(--i) * .22s), transform .6s var(--tz-ease-out) calc(1.6s + var(--i) * .22s); }
[data-mode="us"] .tz-zen__list li i { background: var(--tz-blue); color: #fff; box-shadow: 0 4px 10px #0250ff40; transition: background .3s calc(1.85s + var(--i) * .22s), color .3s calc(1.85s + var(--i) * .22s), box-shadow .3s calc(1.85s + var(--i) * .22s); }
.tz-zen__noti { display: flex; gap: 0.55rem; margin-top: 0.9rem; padding: 0.6rem 0.65rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #d3e2ff, 0 12px 26px #0250ff26; opacity: 0; transform: translateY(30px) scale(.95); transition: opacity .3s, transform .3s; }
[data-mode="us"] .tz-zen__noti { opacity: 1; transform: none; transition: opacity .5s 3.2s, transform .8s var(--tz-ease-spring) 3.2s; }
/* In fondo, la tazza che fuma: il tempo che ti resta. */
.tz-zen__relax { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: auto; color: var(--im-color-text-muted); font-size: 0.74rem; font-weight: 650; opacity: 0; transition: opacity .3s; }
[data-mode="us"] .tz-zen__relax { opacity: 1; transition: opacity .8s 3.8s; }
.tz-cup { position: relative; display: block; width: 44px; height: 54px; }
.tz-cup b { position: absolute; left: 0; bottom: 0; color: #c98a3d; font-size: 2.1rem; line-height: 1; }
.tz-cup i { position: absolute; bottom: 30px; width: 4px; height: 16px; border-radius: 4px; background: #c9b8a6; opacity: 0; animation: tz-steam 2.4s ease-in-out infinite; }
.tz-cup i:nth-child(1) { left: 9px; }
.tz-cup i:nth-child(2) { left: 16px; animation-delay: .8s; }
.tz-cup i:nth-child(3) { left: 23px; animation-delay: 1.6s; }
@keyframes tz-steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-14px) translateX(3px) scaleY(1.2) rotate(8deg); } }

/* —— Lancetta dello stress e frase —— */
.tz-calm__side { display: grid; gap: 1.2rem; width: 100%; max-width: 360px; text-align: center; }
.tz-meter svg { width: min(230px, 70%); margin: 0 auto; overflow: visible; }
.tz-meter__arc { fill: none; stroke: url(#tz-meter-g); stroke-width: 14; stroke-linecap: round; }
.tz-meter__needle { transform-origin: 100px 100px; transform: rotate(-62deg); transition: transform 1.6s var(--tz-ease-spring) 1s; }
.tz-meter__needle line { stroke: var(--im-color-navy); stroke-width: 5; stroke-linecap: round; transform-origin: 100px 100px; }
.tz-meter__needle circle { fill: var(--im-color-navy); }
.is-live[data-mode="alone"] .tz-meter__needle { transform: rotate(64deg); transition: transform 2.6s var(--tz-ease-out) .3s; }
.is-live[data-mode="alone"] .tz-meter__needle line { animation: tz-needle .9s ease-in-out 3s infinite; }
@keyframes tz-needle { 50% { transform: rotate(5deg); } }
.tz-meter__label { margin-top: 0.4rem; color: var(--im-color-text-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tz-meter__val { display: grid; font-size: 1.6rem; font-weight: 820; letter-spacing: -0.03em; }
.tz-meter__val span { grid-area: 1 / 1; transition: opacity .5s, transform .6s var(--tz-ease-spring); }
.tz-meter__hi { color: var(--tz-alarm); }
.tz-meter__lo { color: var(--im-color-success); opacity: 0; transform: translateY(12px); }
[data-mode="us"] .tz-meter__hi { opacity: 0; transform: translateY(-12px); }
[data-mode="us"] .tz-meter__lo { opacity: 1; transform: none; transition-delay: 1.8s; }
.tz-calm__say { display: grid; }
.tz-calm__say p { grid-area: 1 / 1; padding: 1rem 1.1rem; border-radius: 18px; line-height: 1.55; transition: opacity .5s, transform .6s var(--tz-ease-out); }
.tz-calm__alone { background: #fff6f5; box-shadow: inset 0 0 0 1px #fde3df; color: #5b2a26; }
.tz-calm__alone b { color: #b42318; }
.tz-calm__us { background: var(--tz-ice); box-shadow: inset 0 0 0 1px #d3e2ff; color: var(--im-color-navy); opacity: 0; transform: translateY(10px); }
.tz-calm__us b { color: var(--tz-blue); }
[data-mode="us"] .tz-calm__alone { opacity: 0; transform: translateY(-10px); }
[data-mode="us"] .tz-calm__us { opacity: 1; transform: none; transition-delay: 2s; }
@media (max-width: 859.98px) { .tz-meter svg { width: 190px; } .tz-meter__val { font-size: 1.35rem; } }

/* ======================================================================
   PUBBLICITÀ OPSY ROAD
   ====================================================================== */
.tz-ad-sec { padding-top: 0; }
.tz-ad {
  --mx: 0; --my: 0;
  position: relative; display: grid; overflow: hidden; isolation: isolate;
  border-radius: 30px; text-decoration: none; color: inherit;
  background: linear-gradient(160deg, #e8f2ff 0%, #f4f8ff 45%, #fff6e4 100%);
  box-shadow: 0 0 0 1px #dbe6fb, 0 30px 70px #0250ff1f;
  transition: transform .5s var(--tz-ease-out), box-shadow .5s;
}
.tz-ad:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px #0250ff59, 0 36px 80px #0250ff2e; }
/* Bordo luminoso che gira intorno alla pubblicità. */
.tz-ad::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--tz-angle), transparent 0 70%, #ffb020 80%, #0250ff 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: tz-load 6s linear infinite; pointer-events: none; }
@media (min-width: 900px) { .tz-ad { grid-template-columns: 1.1fr 1fr; align-items: center; } }

.tz-ad__scene { position: relative; height: clamp(220px, 32vw, 320px); overflow: hidden; }
.tz-ad__sun { position: absolute; right: 14%; top: 14%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0 45%, #ffe08a 46% 60%, #ffe08a00 61%); translate: calc(var(--mx) * -6px) calc(var(--my) * -6px); }
.tz-ad__sun::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: repeating-conic-gradient(#ffd56a55 0 6deg, transparent 6deg 24deg); -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%); mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%); animation: tz-orbit 30s linear infinite; }
.tz-ad__cloud { position: absolute; width: 90px; height: 28px; border-radius: 30px; background: #fff; box-shadow: 22px -12px 0 4px #fff, 50px -4px 0 0 #fff; opacity: .95; animation: tz-cloud 26s linear infinite; }
.tz-ad__cloud--1 { top: 18%; left: 0; }
.tz-ad__cloud--2 { top: 34%; left: 0; scale: .7; animation-duration: 38s; animation-delay: -18s; opacity: .8; }
@keyframes tz-cloud { from { transform: translateX(120vw); } to { transform: translateX(-160px); } }
/* Città disegnata con sfumature, che scorre piano dietro la strada. */
.tz-ad__city { position: absolute; left: 0; right: 0; bottom: 46px; height: 46%; translate: calc(var(--mx) * -10px) 0; background:
  linear-gradient(#c9dbff, #c9dbff) 2% 100% / 7% 62% no-repeat,
  linear-gradient(#d7e4ff, #d7e4ff) 10% 100% / 10% 88% no-repeat,
  linear-gradient(#c9dbff, #c9dbff) 21% 100% / 6% 50% no-repeat,
  linear-gradient(#d7e4ff, #d7e4ff) 30% 100% / 9% 74% no-repeat,
  linear-gradient(#c9dbff, #c9dbff) 41% 100% / 6% 96% no-repeat,
  linear-gradient(#d7e4ff, #d7e4ff) 52% 100% / 11% 60% no-repeat,
  linear-gradient(#c9dbff, #c9dbff) 64% 100% / 7% 80% no-repeat,
  linear-gradient(#d7e4ff, #d7e4ff) 75% 100% / 9% 54% no-repeat,
  linear-gradient(#c9dbff, #c9dbff) 87% 100% / 8% 90% no-repeat,
  linear-gradient(#d7e4ff, #d7e4ff) 98% 100% / 8% 66% no-repeat;
  opacity: .9;
}
.tz-ad__road { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #dfe6f2; box-shadow: inset 0 4px 0 #cbd6ea; }
.tz-ad__road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: repeating-linear-gradient(90deg, #fff 0 26px, transparent 26px 52px); animation: tz-dash .5s linear infinite; }
@keyframes tz-dash { to { background-position: -52px 0; } }
/* Cono che arriva e macchinina che lo salta, sempre in sincronia (stessa durata). */
.tz-ad__cone { position: absolute; bottom: 38px; left: 0; width: 26px; height: 34px; background: linear-gradient(#fff 0 0) 50% 38% / 70% 5px no-repeat, linear-gradient(#fff 0 0) 50% 68% / 85% 5px no-repeat, linear-gradient(180deg, #ff8a1f, #f26b00); clip-path: polygon(38% 0, 62% 0, 100% 92%, 100% 100%, 0 100%, 0 92%); animation: tz-cone 2.4s linear infinite; }
@keyframes tz-cone { from { left: 105%; } to { left: -10%; } }
.tz-ad__car { position: absolute; left: 22%; bottom: 30px; width: 24%; min-width: 92px; transform-origin: 50% 100%; animation: tz-hop 2.4s linear infinite; }
.tz-ad__car svg { width: 100%; height: auto; }
@keyframes tz-hop {
  0%, 34% { transform: none; animation-timing-function: ease-in-out; }
  38% { transform: scale(1.06, .9); animation-timing-function: ease-out; }
  58% { transform: translateY(-82px) rotate(-6deg); animation-timing-function: ease-in; }
  80% { transform: translateY(0) rotate(2deg); }
  84% { transform: scale(1.08, .88); }
  90%, 100% { transform: none; }
}
/* Chiave che gira su se stessa come una moneta. */
.tz-ad__key { position: absolute; left: 30%; top: 14%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc53d 60%, #f5a300); color: #7a4b00; font-size: 1.3rem; box-shadow: 0 8px 18px #ff9f0a55; animation: tz-coin 2.4s linear infinite; translate: calc(var(--mx) * 8px) calc(var(--my) * 8px); }
@keyframes tz-coin { 0% { transform: perspective(200px) rotateY(0) translateY(0); } 50% { transform: perspective(200px) rotateY(180deg) translateY(-6px); } 100% { transform: perspective(200px) rotateY(360deg) translateY(0); } }

.tz-ad__text { position: relative; z-index: 1; padding: clamp(1.4rem, 4vw, 2.6rem); }
.tz-ad__title { color: var(--im-color-navy); font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 820; letter-spacing: -0.035em; line-height: 1.08; }
.tz-ad__title span { display: block; background: linear-gradient(100deg, var(--tz-blue), var(--tz-sky) 60%, #ff9f0a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tz-ad__lead { margin-top: 0.8rem; color: var(--im-color-text-muted); }
.tz-ad__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 1.4rem; }
.tz-ad__stats span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: #ffffffb3; box-shadow: inset 0 0 0 1px #dbe6fb; color: var(--im-color-text-muted); font-size: 0.88rem; white-space: nowrap; }
.tz-ad__stats b { color: var(--im-color-navy); font-variant-numeric: tabular-nums; }
.tz-ad__stats i { color: var(--tz-blue); }
.tz-ad__stats span:last-child i { color: var(--tz-gold); }

/* ======================================================================
   CONTATTI
   ====================================================================== */
.tz-contact__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 992px) { .tz-contact__in { grid-template-columns: 0.9fr 1.1fr; } }
.tz-reach { display: grid; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.tz-reach a { display: flex; align-items: center; gap: 0.9rem; min-width: 0; padding: 0.8rem 1rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line); color: inherit; text-decoration: none; transition: box-shadow .25s, transform .35s var(--tz-ease-spring); }
.tz-reach a:hover, .tz-reach a:focus-visible { transform: translateX(4px); box-shadow: 0 0 0 1.5px var(--tz-blue), 0 14px 30px #01083b12; }
.tz-reach__ic { display: grid; place-items: center; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: 14px; background: var(--tz-ice); color: var(--tz-blue); font-size: 1.2rem; transition: transform .6s var(--tz-ease-spring); }
.tz-reach__ic--wa { background: #e7f9ee; color: #128c4b; }
.tz-reach a:hover .tz-reach__ic { transform: perspective(300px) rotateY(360deg); }
.tz-reach__t { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.tz-reach__t b { color: var(--im-color-navy); }
.tz-reach__t span { color: var(--im-color-text-muted); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-reach__go { color: var(--tz-blue); transition: transform .3s; }
.tz-reach a:hover .tz-reach__go { transform: translateX(3px); }

/* Scheda che si gira: davanti il modulo, dietro il grazie. */
.tz-card3d { display: grid; perspective: 1400px; }
.tz-card3d__front, .tz-card3d__back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1s var(--tz-ease-out); }
.tz-card3d__back { transform: rotateY(-180deg); display: grid; align-content: center; justify-items: center; gap: 0.8rem; padding: 2rem; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line), 0 24px 60px #01083b14; text-align: center; }
.tz-card3d.is-flipped .tz-card3d__front { transform: rotateY(180deg); pointer-events: none; }
.tz-card3d.is-flipped .tz-card3d__back { transform: none; }
.tz-card3d__back h3 { color: var(--im-color-navy); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.tz-card3d__back p { max-width: 26rem; color: var(--im-color-text-muted); }
.tz-done { width: 84px; height: 84px; }
.tz-done circle, .tz-done path { fill: none; stroke: var(--im-color-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.tz-card3d.is-flipped .tz-done circle { animation: tz-draw .8s var(--tz-ease-out) .6s forwards; }
.tz-card3d.is-flipped .tz-done path { animation: tz-draw .5s var(--tz-ease-out) 1.2s forwards; }

.tz-form { display: grid; gap: 0.9rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--tz-line), 0 24px 60px #01083b14; }
.tz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tz-intent { min-width: 0; margin: 0 0 0.3rem; padding: 0; border: 0; }
.tz-intent__opts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.3rem; border-radius: 16px; background: var(--tz-ice); }
.tz-intent legend { margin-bottom: 0.5rem; padding: 0 0.2rem; color: var(--im-color-navy); font-size: 0.9rem; font-weight: 700; }
.tz-intent label { position: relative; z-index: 1; cursor: pointer; }
.tz-intent input { position: absolute; opacity: 0; pointer-events: none; }
.tz-intent label span { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; border-radius: 12px; color: var(--im-color-text-muted); font-weight: 700; font-size: 0.92rem; white-space: nowrap; transition: color .3s; }
.tz-intent input:checked + span { color: var(--tz-blue); }
.tz-intent input:focus-visible + span { outline: 2px solid #0250ff66; outline-offset: -2px; }
.tz-intent__pill { position: absolute; left: 0.3rem; bottom: 0.3rem; width: calc((100% - 0.6rem) / 3); height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px #01083b14; transform: translateX(calc(var(--ix, 0) * 100%)); transition: transform .45s var(--tz-ease-spring); }
@media (max-width: 400px) { .tz-intent label span i { display: none; } }

.tz-row2 { display: grid; gap: 0.9rem; }
@media (min-width: 576px) { .tz-row2 { grid-template-columns: 1fr 1fr; } }
/* Campi con etichetta che sale, e bordo di luce che gira mentre scrivi. */
.tz-field { position: relative; border-radius: 14px; }
.tz-field::before { content: ""; position: absolute; inset: -2px; border-radius: 16px; background: conic-gradient(from var(--tz-angle), #0250ff, #3a8bff, #ffb020, #0250ff); opacity: 0; transition: opacity .3s; z-index: 0; }
.tz-field:focus-within::before { opacity: 1; animation: tz-load 3s linear infinite; }
.tz-field input, .tz-field textarea { position: relative; z-index: 1; display: block; width: 100%; padding: 1.45rem 0.95rem 0.5rem; border: 1.5px solid var(--tz-line); border-radius: 14px; background: #fff; color: var(--im-color-text); font-size: 1rem; outline: none; resize: vertical; transition: border-color .2s; }
.tz-field:focus-within input, .tz-field:focus-within textarea { border-color: transparent; }
.tz-field textarea { min-height: 7.5rem; }
.tz-field label { position: absolute; z-index: 2; left: 0.95rem; top: 1rem; max-width: calc(100% - 1.9rem); color: var(--im-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform-origin: 0 0; transition: transform .25s var(--tz-ease-out), color .25s; }
.tz-field label small { font-size: 0.82em; }
.tz-field input:focus + label, .tz-field input:not(:placeholder-shown) + label,
.tz-field textarea:focus + label, .tz-field textarea:not(:placeholder-shown) + label { transform: translateY(-0.62rem) scale(.78); color: var(--tz-blue); font-weight: 650; }
.tz-field.is-bad input, .tz-field.is-bad textarea { border-color: var(--im-color-danger); }

.tz-check { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--im-color-text); font-size: 0.92rem; cursor: pointer; }
.tz-check input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: 0.12rem; accent-color: var(--tz-blue); }
.tz-check.is-bad span { color: var(--im-color-danger); }
.tz-info { margin-top: -0.4rem; padding-left: 1.8rem; font-size: 0.86rem; color: var(--im-color-text-muted); }
.tz-info summary { width: fit-content; color: var(--tz-blue); font-weight: 600; cursor: pointer; }
.tz-info p { margin-top: 0.4rem; line-height: 1.5; }
.tz-form__err { padding: 0.65rem 0.9rem; border-radius: 12px; background: var(--im-color-danger-soft); color: var(--im-color-danger-text); font-size: 0.92rem; font-weight: 600; animation: tz-shake .45s; }
@keyframes tz-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* Invio: il testo esce, una barra percorre il pulsante. */
.tz-send { width: 100%; }
.tz-send__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #ffffffb3; transform: scaleX(0); transform-origin: 0 50%; }
.tz-send.is-busy { pointer-events: none; }
.tz-send.is-busy .tz-send__t { opacity: .7; }
.tz-send.is-busy i { animation: tz-fly .9s ease-in-out infinite; }
.tz-send.is-busy .tz-send__bar { animation: tz-bar 1.4s var(--tz-ease-out) forwards; }
@keyframes tz-fly { 50% { transform: translate(4px, -3px) rotate(-8deg); } }
@keyframes tz-bar { to { transform: scaleX(.9); } }