/* Kherno · teaser d'apertura (home e pagine dei gestionali). Lo accende teaser.js. */

html.teaser-on { overflow: hidden; background: #04060a; }
html.teaser-on body { visibility: hidden; }
.teaser { visibility: visible; position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center;
  background: #04060a; color: #eef2f7; padding: max(28px, env(safe-area-inset-top)) var(--gutter, 16px) max(28px, env(safe-area-inset-bottom));
  transition: opacity .7s ease; }
.teaser.via { opacity: 0; pointer-events: none; }

/* didascalia */
.tz-cap { text-align: center; min-height: clamp(110px, 18svh, 170px); display: flex; flex-direction: column; justify-content: flex-end;
  transition: opacity .4s ease, transform .4s ease; }
.tz-cap.out { opacity: 0; transform: translateY(-10px); }
.tz-k { font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #8a94a6; margin-bottom: 10px; }
.tz-t { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(28px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.04em; margin: 0; text-wrap: balance; }

/* palco e dispositivi: dentro, ogni misura è in --u, che segue la larghezza del dispositivo */
.tz-stage { position: relative; flex: 1; width: 100%; max-width: 1100px; }
/* Dispositivi: iPhone (proporzioni di iPhone 17 Pro, 71,9 × 150 mm) e iPad Pro 11" (249,7 × 177,5 mm).
   Il metallo è un bordo con gradiente sopra la cornice nera, illuminato dall'alto a sinistra. */
.tz-dev { container-type: inline-size; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  transition: opacity .55s ease, transform .85s cubic-bezier(.2, .7, .2, 1);
  /* titanio naturale: la luce arriva dall'alto a sinistra e accende gli spigoli */
  --metallo: conic-gradient(from 210deg at 50% 50%, #e9ebee, #9a9ea4 12%, #6d7177 25%, #b9bcc1 38%, #f4f5f7 50%, #8d9197 63%, #64686e 76%, #c4c7cb 88%, #e9ebee);
  --anello: 0 0 0 .6px rgba(0, 0, 0, .45), inset 0 0 0 1.4px #000, inset 0 0 0 2.4px rgba(255, 255, 255, .06);
  border: 2.6px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--metallo) border-box;
  box-shadow: var(--anello), 0 1px 1px rgba(4, 6, 10, .25), 0 30px 60px -24px rgba(4, 6, 10, .5), 0 60px 110px -50px rgba(14, 62, 200, .35); }
.tz-dev.on { opacity: 1; transform: translate(-50%, -50%); }
.tz-dev.gone { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
/* la cornice nera è un margine dello schermo in cqw, cioè in proporzione al telefono stesso (una padding in % dipenderebbe dalla larghezza della pagina) */
.tz-phone { --u: 1cqw; width: min(300px, 70vw, (100svh - 280px) * .46); aspect-ratio: 71.9 / 150; border-radius: 17% / 8.1%; padding: 0; }
.tz-phone > .tz-scr { margin: 2.6cqw; height: calc(100% - 5.2cqw); }
/* Dynamic Island con la lente della fotocamera */
.tz-phone::after { content: ""; position: absolute; z-index: 6; top: 2.1%; left: 50%; width: 31%; height: 3.25%; transform: translateX(-50%); border-radius: 99px;
  background: radial-gradient(circle at 79% 50%, #1c2338 0 5%, #0b0e18 7.5%, #000 9%); }
/* tasto laterale a destra; i due tasti del volume a sinistra sono sue copie (larghezza del telefono: 105cqw + 12px circa) */
/* tasto laterale a destra, volume a sinistra (copie): il telefono è largo circa 103,5cqw + 5px */
.tz-phone::before { content: ""; position: absolute; top: 25%; left: calc(100% + 2.6px); width: 2.6px; height: 9.5%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #6f7379, #d4d7da 60%, #85898f); box-shadow: calc(-100cqw - 7.8px) -5.4cqw 0 #a3a7ad, calc(-100cqw - 7.8px) 17cqw 0 #a3a7ad; }
.tz-tab { --u: .46cqw; width: min(820px, 92vw, (100svh - 280px) * 1.5); aspect-ratio: 249.7 / 177.5; border-radius: 4.8% / 6.8%; padding: 0; border-width: 3px;
  --metallo: linear-gradient(145deg, #f5f6f8 0%, #c9cdd3 18%, #90959d 40%, #a9aeb5 55%, #d4d7dc 74%, #9da2aa 100%); }
.tz-tab > .tz-scr { margin: 2cqw; height: calc(100% - 4cqw); }
/* fotocamera al centro del lato lungo */
.tz-tab::after { content: ""; position: absolute; z-index: 4; top: 1%; left: 50%; width: .8cqw; height: .8cqw; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, #4a5d96 0 25%, #10142a 45%, #000 70%); }
@media (max-width: 600px) {
  .tz-tab { --u: .9cqw; width: min(92vw, (100svh - 280px) * .71); aspect-ratio: 177.5 / 249.7; border-radius: 6.8% / 4.8%; padding: 0; }
  .tz-tab > .tz-scr { margin: 2.8cqw; height: calc(100% - 5.6cqw); }
  .tz-tab::after { top: .7%; width: 1.4cqw; height: 1.4cqw; }
}
.tz-scr { position: relative; background: #fff; color: #1f2733; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  gap: calc(3 * var(--u)); font-family: var(--font-body, sans-serif); font-size: calc(4 * var(--u)); line-height: 1.3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tz-phone .tz-scr { border-radius: 15.8% / 7.6%; padding: calc(14 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u));
  /* barretta di Home in basso */
  background: linear-gradient(#0b0c0f, #0b0c0f) 50% calc(100% - 1.2%) / 34% calc(1.3 * var(--u)) no-repeat, #fff; }
.tz-phone .tz-scr.shot { background: #f6f7fa; }
/* barra di stato: ora a sinistra, batteria a destra (non sulle schermate vere, che hanno la loro) */
.tz-phone .tz-scr:not(.shot)::before { content: "9:41"; position: absolute; z-index: 3; top: 2.6%; left: 12%; font-weight: 700; font-size: calc(4.1 * var(--u)); color: #04060a; letter-spacing: .01em; }
.tz-phone .tz-scr:not(.shot)::after { content: ""; position: absolute; z-index: 3; top: 2.7%; right: 9%; width: calc(17 * var(--u)); height: calc(3.3 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cg fill='%2304060a'%3E%3Crect x='0' y='9' width='3' height='4' rx='.8'/%3E%3Crect x='4.6' y='6.5' width='3' height='6.5' rx='.8'/%3E%3Crect x='9.2' y='4' width='3' height='9' rx='.8'/%3E%3Crect x='13.8' y='1.5' width='3' height='11.5' rx='.8'/%3E%3Cpath d='M30 13.2l-2.6-3a3.6 3.6 0 0 1 5.2 0zm-4.4-5a6.2 6.2 0 0 1 8.8 0l1.6-1.8a8.6 8.6 0 0 0-12 0zm-3.4-3.8a11 11 0 0 1 15.6 0l1.6-1.8a13.4 13.4 0 0 0-18.8 0z'/%3E%3Crect x='46' y='2' width='23' height='11' rx='3' fill='none' stroke='%2304060a' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='48' y='4' width='15' height='7' rx='1.6'/%3E%3Cpath d='M70.5 6v3.2a1.8 1.8 0 0 0 0-3.2z' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat; }
.tz-tab .tz-scr { border-radius: 2.6% / 3.7%; padding: calc(6 * var(--u)) calc(7 * var(--u)); }
@media (max-width: 600px) { .tz-tab .tz-scr { border-radius: 3.7% / 2.6%; padding: calc(7 * var(--u)) calc(5 * var(--u)); } }
.tz-scr.shot { padding: 0; background: #f6f7fa; }

/* il dito: un cerchio di tocco, come nelle registrazioni dello schermo */
.tz-touch { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: rgba(94, 135, 252, .32); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 14px rgba(4, 6, 10, .35); opacity: 0;
  transition: left .55s cubic-bezier(.45, 0, .2, 1), top .55s cubic-bezier(.45, 0, .2, 1), opacity .3s, transform .15s; }
.tz-touch.on { opacity: 1; }
.tz-touch.tap { transform: scale(.78); }
.tz-touch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #5e87fc; opacity: 0; }
.tz-touch.tap::after { animation: tz-ripple .5s ease-out; }
@keyframes tz-ripple { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(2.2); } }

/* chiusura */
.tz-end { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 26px; opacity: 0; transition: opacity .8s ease; }
.tz-end.on { opacity: 1; }
.tz-end svg { width: clamp(64px, 9vw, 104px); color: #5e87fc; }
.tz-end p { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(36px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.045em; margin: 0; color: #eef2f7; text-wrap: balance; }
.tz-end span { background: linear-gradient(100deg, #5e87fc 0%, #afc5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tz-skip { position: absolute; right: var(--gutter, 16px); bottom: max(24px, env(safe-area-inset-bottom)); border: 1px solid rgba(238, 242, 247, .25);
  background: rgba(238, 242, 247, .06); color: #eef2f7; border-radius: 99px; padding: 10px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.tz-skip:hover { background: rgba(238, 242, 247, .14); }
.tz-skip:focus-visible { outline: 2px solid rgba(94, 135, 252, .7); outline-offset: 3px; }
.tz-prog { position: absolute; left: var(--gutter, 16px); bottom: max(43px, calc(env(safe-area-inset-bottom) + 19px)); width: min(160px, 30vw); height: 3px;
  border-radius: 3px; background: rgba(238, 242, 247, .16); overflow: hidden; }
.tz-prog i { display: block; height: 100%; width: 100%; background: #5e87fc; transform-origin: left; transform: scaleX(0); }

/* ---------- apertura della home: marchio e gestionali
   Niente si sposta: monogram e KHERNO restano fermi al centro, i nomi scorrono
   sotto in uno spazio di altezza fissa (prima la riga si ricentrava a ogni nome). */
.tm-box { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter, 16px); }
.tm-logo { width: clamp(72px, 9vw, 112px); color: #5e87fc; overflow: visible; }
.tm-logo circle { transform-box: fill-box; transform-origin: center; animation: tm-pop .7s cubic-bezier(.2, .9, .3, 1.35) both; }
.tm-logo circle:nth-of-type(2) { animation-delay: .12s; }
.tm-logo circle:nth-of-type(3) { animation-delay: .24s; }
.tm-logo path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: tm-draw .8s .45s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes tm-pop { from { transform: scale(0); opacity: 0; } }
@keyframes tm-draw { to { stroke-dashoffset: 0; } }
.tm-k { margin-top: clamp(22px, 3vw, 34px); font-family: var(--font-display, sans-serif); font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(48px, 9vw, 124px); line-height: 1; color: #eef2f7; opacity: 0; filter: blur(10px); transform: scale(.97);
  transition: opacity .9s ease, filter .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tm-box.s2 .tm-k { opacity: 1; filter: none; transform: none; }
.tm-zone { --fs: clamp(34px, 6vw, 84px); position: relative; width: min(900px, 100vw - 32px); height: calc(var(--fs) * 1.1 + 52px); margin-top: clamp(8px, 1.2vw, 14px); }
.tm-slogan { position: absolute; left: 0; right: 0; top: calc(var(--fs) * .18); margin: 0; font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: calc(var(--fs) * .62); letter-spacing: -.02em; line-height: 1.1; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  background: linear-gradient(100deg, #5e87fc 0%, #afc5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-box.sl .tm-slogan { opacity: 1; transform: none; }
.tm-slot { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fs) * 1.1); overflow: hidden; font-family: var(--font-display, sans-serif);
  font-weight: 900; text-transform: uppercase; font-size: var(--fs); line-height: 1.1; }
.tm-slot span { position: absolute; left: 50%; top: 0; white-space: nowrap; transform: translate(-50%, 105%); opacity: 0;
  background: linear-gradient(100deg, #5e87fc 0%, #afc5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.tm-slot span.su { transform: translate(-50%, 0); opacity: 1; }
.tm-slot span.via { transform: translate(-50%, -105%); opacity: 0; }
.tm-sec { position: absolute; left: 0; right: 0; top: calc(var(--fs) * 1.1 + 16px); margin: 0; font-family: var(--font-mono, monospace); font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .16em; text-transform: uppercase; color: #8a94a6; transition: opacity .16s; }
.tm-sec.out { opacity: 0; }
.tm-all { position: absolute; left: 0; right: 0; top: 4px; margin: 0 auto; max-width: 660px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tm-all span { padding: 9px 18px; border-radius: 99px; border: 1px solid rgba(94, 135, 252, .45); background: rgba(94, 135, 252, .1); color: #eef2f7;
  font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.3); transition-delay: var(--d); }
.tm-box.s4 .tm-all span { opacity: 1; transform: none; }
.tm-all span::before { content: "Kherno "; color: #8a94a6; font-weight: 500; }
@media (max-width: 600px) { .tm-all { max-width: 340px; } }
/* in chiusura: cinque gestionali all in one, non una piattaforma sola */
.tm-nota { position: absolute; left: 0; right: 0; top: calc(100% + clamp(40px, 6vw, 70px)); margin: 0; font-family: var(--font-display, sans-serif); font-weight: 600;
  font-size: clamp(17px, 1.9vw, 24px); letter-spacing: -.01em; color: #c9d1dc; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .6s, transform .8s cubic-bezier(.2, .7, .2, 1) .6s; }
.tm-box.s4 .tm-nota { opacity: 1; transform: none; }
/* sul telefono i gestionali vanno su tre righe (due per riga) e sforano la zona di altezza fissa:
   la nota si aggancia sotto la terza riga (pillola 44px, spazio 10px), non alla fine della zona */
@media (max-width: 600px) { .tm-nota { top: calc(4px + 3 * 44px + 2 * 10px + 28px); } }

/* ---------- mattoncini delle schermate finte */
.k-bar { display: flex; justify-content: space-between; align-items: baseline; gap: calc(2 * var(--u)); }
.k-bar b { font-size: calc(7 * var(--u)); letter-spacing: -.02em; color: #04060a; line-height: 1.1; }
.k-bar span { font-size: calc(3.4 * var(--u)); color: #5d6879; white-space: nowrap; }
.k-chips { display: flex; gap: calc(2 * var(--u)); }
.k-chips span { font-size: calc(3.6 * var(--u)); padding: calc(1.5 * var(--u)) calc(3.4 * var(--u)); border-radius: 99px; background: #eef2f7; }
.k-chips span.on { background: #04060a; color: #fff; }
.k-list { display: grid; gap: calc(2.2 * var(--u)); align-content: start; }
.k-row { display: flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(3.6 * var(--u)); border-radius: calc(3.2 * var(--u));
  background: #f4f6fa; transition: background .3s, box-shadow .3s, opacity .45s, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.k-row > span { flex: 1; display: grid; min-width: 0; }
.k-row b { font-size: calc(4.2 * var(--u)); color: #04060a; font-weight: 600; }
.k-row small { font-size: calc(3.3 * var(--u)); color: #5d6879; }
.k-row .r { font-family: var(--font-mono, monospace); font-weight: 600; font-size: calc(3.8 * var(--u)); color: #04060a; white-space: nowrap; }
.k-row em { font-style: normal; width: calc(7.5 * var(--u)); height: calc(7.5 * var(--u)); flex: 0 0 auto; border-radius: 50%; background: #0e3ec8; color: #fff;
  display: grid; place-items: center; font-size: calc(5 * var(--u)); font-weight: 700; transition: background .3s; }
.k-row.sel { background: #e9effe; box-shadow: inset 0 0 0 calc(.45 * var(--u)) #5e87fc; }
.k-row.sel em { background: #1e7f4f; }
.k-row.big b { font-size: calc(5 * var(--u)); }
.k-row.big .r { font-size: calc(5.4 * var(--u)); color: #0e3ec8; }
.k-tot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-size: calc(4 * var(--u)); color: #5d6879; }
.k-tot b { font-family: var(--font-mono, monospace); font-size: calc(6.2 * var(--u)); color: #04060a; }
.k-btn { border-radius: calc(3.2 * var(--u)); background: #0e3ec8; color: #fff; font-weight: 700; font-size: calc(4.2 * var(--u)); padding: calc(3.6 * var(--u));
  text-align: center; transition: background .3s; }
.k-btn.dark { background: #04060a; }
.k-btn.sm { font-size: calc(3.4 * var(--u)); padding: calc(2.2 * var(--u)); border-radius: calc(2 * var(--u)); }
.k-btn.ok { background: #1e7f4f; }
.k-cols { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: calc(2.6 * var(--u)); flex: 1; align-items: start; min-height: 0; }
.k-col { display: grid; gap: calc(2.2 * var(--u)); align-content: start; }
.k-col > h4, .k-h { font-family: var(--font-mono, monospace); font-size: calc(2.9 * var(--u)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5d6879; margin: 0; }
.k-card { background: #f4f6fa; border-radius: calc(2.6 * var(--u)); padding: calc(3 * var(--u)); display: grid; gap: calc(1.2 * var(--u));
  border-top: calc(1 * var(--u)) solid #c7cfdb; transition: background .4s, border-color .4s, opacity .45s, transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.k-card b { font-size: calc(4 * var(--u)); color: #04060a; font-weight: 600; }
.k-card small { font-size: calc(3.2 * var(--u)); color: #5d6879; }
.k-card .tm { font-family: var(--font-mono, monospace); font-size: calc(3.2 * var(--u)); color: #5d6879; }
.k-card.blue { border-top-color: #0e3ec8; background: #e9effe; }
.k-card.green { border-top-color: #1e7f4f; background: #e3f4ea; }
.k-card .big { font-family: var(--font-display, sans-serif); font-size: calc(9 * var(--u)); letter-spacing: -.03em; font-weight: 700; color: #04060a; font-variant-numeric: tabular-nums; }
.k-hide { opacity: 0; transform: translateY(calc(-3 * var(--u))) scale(.96); }
.k-hide.in { opacity: 1; transform: none; }
.k-ag { display: grid; grid-template-columns: calc(9 * var(--u)) repeat(3, 1fr); gap: calc(1.4 * var(--u)); font-size: calc(3 * var(--u)); color: #5d6879; flex: 1; align-content: start; }
.k-ag h4 { margin: 0; font-size: calc(3 * var(--u)); font-weight: 600; text-align: center; color: #1f2733; }
.k-ag .h { text-align: right; padding-right: calc(1 * var(--u)); align-self: center; font-family: var(--font-mono, monospace); }
.k-ag .c { background: #f4f6fa; border-radius: calc(1.6 * var(--u)); min-height: calc(8 * var(--u)); padding: calc(1.6 * var(--u)) calc(2 * var(--u)); font-weight: 600;
  display: flex; align-items: center; transition: background .35s, color .35s, transform .45s cubic-bezier(.2, .9, .3, 1.5); }
.k-ag .ev { background: #5e87fc; color: #fff; }
.k-ag .ev2 { background: #0e3ec8; color: #fff; }
.k-ag .ev3 { background: #dfe8c9; color: #2d4a1e; }
.k-ag .new { box-shadow: inset 0 0 0 calc(.4 * var(--u)) #c7cfdb; background: #fff; }
.k-ag .new.ev2 { box-shadow: none; transform: scale(1.04); background: #0e3ec8; color: #fff; }
.k-toast { position: absolute; left: 5%; right: 5%; top: 4%; z-index: 2; background: #04060a; color: #fff; border-radius: calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u));
  font-size: calc(3.8 * var(--u)); font-weight: 600; display: flex; gap: calc(2.4 * var(--u)); align-items: center;
  transform: translateY(-160%); opacity: 0; transition: transform .55s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; box-shadow: 0 10px 30px -10px rgba(4, 6, 10, .5); }
.k-toast::before { content: "✓"; display: grid; place-items: center; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #1e7f4f; flex: 0 0 auto; font-size: calc(3.6 * var(--u)); }
.k-toast.in { transform: none; opacity: 1; }
.k-prog { height: calc(2 * var(--u)); border-radius: 99px; background: #e1e7f0; overflow: hidden; }
.k-prog i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: #0e3ec8; transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.k-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2 * var(--u)); }
.k-sizes div { background: #f4f6fa; border-radius: calc(2.4 * var(--u)); padding: calc(3 * var(--u)) calc(1 * var(--u)); text-align: center; display: grid; gap: calc(.6 * var(--u)); transition: background .3s, box-shadow .3s; }
.k-sizes small { font-size: calc(3 * var(--u)); color: #5d6879; font-weight: 600; }
.k-sizes b { font-family: var(--font-mono, monospace); font-size: calc(6 * var(--u)); color: #04060a; }
.k-sizes .hit { background: #e9effe; box-shadow: inset 0 0 0 calc(.45 * var(--u)) #5e87fc; }
.k-sign { background: #fff; border: calc(.3 * var(--u)) dashed #c7cfdb; border-radius: calc(2 * var(--u)); height: calc(20 * var(--u)); display: grid; place-items: center; }
.k-sign svg { width: 82%; height: 88%; overflow: visible; }
.k-sign path { fill: none; stroke: #1a2a6c; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.45, .1, .35, 1); }
.k-sign path + path { stroke-width: 1.6; transition-duration: .5s; transition-delay: 1.2s; }
.k-sign path + path + path { stroke-width: 2.6; transition-duration: .15s; transition-delay: 1.75s; }
.k-sign.in path { stroke-dashoffset: 0; }
.k-shot { position: relative; }
.k-shot img { width: 100%; height: auto; display: block; }
.k-spot { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 30%; box-shadow: 0 0 0 calc(.8 * var(--u)) #5e87fc, 0 0 calc(6 * var(--u)) rgba(94, 135, 252, .6);
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .3s; }
.k-spot.in { opacity: 1; transform: none; }
.k-spot.pill { aspect-ratio: auto; border-radius: 99px; }
.k-cols.n2 { --n: 2; }
/* Premioo, sul telefono di chi prenota: cornice chiara, blu dell'app */
.tz-cli .tz-scr { background: #f6f7fa; }
.pm-top { display: flex; justify-content: space-between; align-items: center; }
.pm-logo { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(7.6 * var(--u)); letter-spacing: -.035em; color: #0b1530; }
.pm-logo { display: inline-flex; align-items: baseline; gap: calc(.8 * var(--u)); }
.pm-logo .pm-premi { font-family: "Plus Jakarta Sans", var(--font-display, sans-serif); color: #0B1033; }
.pm-logo .pm-oo { height: calc(5.2 * var(--u)); width: auto; color: #0A5BF5; }
.pm-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(.5 * var(--u)) #0b1530; }
.pm-card { border-radius: calc(4 * var(--u)); padding: calc(4.5 * var(--u)); background: linear-gradient(135deg, #2f6bff, #1c4fd8); color: #fff; display: grid; gap: calc(1.2 * var(--u)); }
.pm-card small { font-size: calc(3 * var(--u)); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pm-card b { font-size: calc(6.4 * var(--u)); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pm-card span { font-size: calc(3.5 * var(--u)); opacity: .9; }
.tz-cli .k-chips span.on { background: #2f6bff; }
.tz-cli .k-btn { background: #2f6bff; border-radius: 99px; }
.tz-cli .k-btn.ok { background: #1e7f4f; }
.k-chips.big span { flex: 1; text-align: center; font-size: calc(4.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(2 * var(--u)); transition: background .25s, color .25s; }
.pm-card { position: relative; overflow: hidden; }
.tz-cli .pm-card:first-of-type { min-height: calc(30 * var(--u)); align-content: end; }
.pm-card::after { content: ""; position: absolute; right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%;
  border: calc(5 * var(--u)) solid rgba(255, 255, 255, .16); box-shadow: calc(-14 * var(--u)) calc(10 * var(--u)) 0 calc(-5 * var(--u)) rgba(255, 255, 255, .1); }
.k-notif { display: flex; gap: calc(3 * var(--u)); align-items: center; padding: calc(3 * var(--u)); border-radius: calc(3.4 * var(--u)); background: #fff;
  box-shadow: 0 10px 30px -12px rgba(4, 6, 10, .35); opacity: 0; transform: translateY(calc(-6 * var(--u))) scale(.96); transition: opacity .4s, transform .55s cubic-bezier(.2, .9, .3, 1.3); }
.k-notif.in { opacity: 1; transform: none; }
.k-notif > span:last-child { display: grid; }
.k-notif b { font-size: calc(3.8 * var(--u)); color: #04060a; }
.k-notif small { font-size: calc(3.3 * var(--u)); color: #5d6879; }
.pm-ico { flex: 0 0 auto; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.4 * var(--u)); background: #2f6bff; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: calc(5 * var(--u)); font-family: var(--font-display, sans-serif); }
/* piantina della sala */
.k-tavoli { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2.4 * var(--u)); flex: 1; align-content: start; }
.k-tav { aspect-ratio: 1.45; border-radius: calc(2.6 * var(--u)); background: #f4f6fa; display: grid; place-content: center; text-align: center; gap: calc(.4 * var(--u));
  transition: background .35s, box-shadow .35s, transform .45s cubic-bezier(.2, .9, .3, 1.5); }
.k-tav b { font-size: calc(5.4 * var(--u)); color: #04060a; line-height: 1; }
.k-tav small { font-size: calc(2.9 * var(--u)); color: #5d6879; }
.k-tav.occ { background: #5e87fc; }
.k-tav.occ b, .k-tav.occ small { color: #fff; }
.k-tav.pren { background: #e9effe; box-shadow: inset 0 0 0 calc(.6 * var(--u)) #2f6bff; transform: scale(1.06); }
.k-tav.pren small { color: #2f6bff; font-weight: 600; }
@media (max-width: 600px) { .k-tavoli { grid-template-columns: repeat(3, 1fr); } .k-tav { aspect-ratio: 1.2; } }
@media (max-width: 600px) { .tz-tab .k-cols.r2 { --n: 2; } .tz-tab .k-cols.r1m { --n: 1; } }

.k-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2.4 * var(--u)); }
.k-kpis div { background: #f4f6fa; border-radius: calc(2.6 * var(--u)); padding: calc(3 * var(--u)); display: grid; gap: calc(1 * var(--u)); }
.k-kpis small { font-family: var(--font-mono, monospace); font-size: calc(2.7 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: #5d6879; }
.k-kpis b { font-family: var(--font-display, sans-serif); font-size: calc(7 * var(--u)); letter-spacing: -.03em; color: #04060a; font-variant-numeric: tabular-nums; }
.k-bars { flex: 1; min-height: calc(30 * var(--u)); display: flex; align-items: flex-end; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); background: #f4f6fa; border-radius: calc(2.6 * var(--u)); }
.k-bars i { flex: 1; height: 4%; border-radius: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 0; background: linear-gradient(#5e87fc, #0e3ec8); transition: height .7s cubic-bezier(.2, .7, .2, 1); }
.k-bars i.in { height: var(--h); }
.k-clock { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(19 * var(--u)); letter-spacing: -.04em; color: #04060a; text-align: center; line-height: 1; margin-top: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.k-clock small { display: block; font-family: var(--font-body, sans-serif); font-weight: 500; font-size: calc(4 * var(--u)); letter-spacing: 0; color: #5d6879; margin-top: calc(2 * var(--u)); }
@media (max-width: 600px) { .tz-tab .k-kpis { grid-template-columns: 1fr 1fr; } }

/* dispositivo fermo in pagina (non nel teaser) */
.disp .tz-dev { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin-inline: auto; }
.disp .tz-phone { width: min(320px, 72vw); }
.disp .tz-scr.shot img { width: 100%; height: auto; display: block; }

/* riflesso del vetro: una luce diagonale appena percettibile sopra lo schermo */
.tz-phone > .tz-scr { isolation: isolate; }
.tz-phone::before { z-index: 1; }
.tz-dev.tz-phone { overflow: visible; }
.tz-phone > .tz-scr > .vetro { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }

/* gestionali non ancora pronti: in chiusura la scritta SOON, grande, nel blu Kherno */
.tz-soon { font-family: var(--font-display, sans-serif); font-weight: 900; font-size: clamp(40px, 8.5vw, 120px); white-space: nowrap; line-height: .9; letter-spacing: .02em; text-transform: uppercase;
  color: #3d6bff; text-shadow: 0 0 60px rgba(61, 107, 255, .35); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .7s ease .9s, transform 1s cubic-bezier(.2, .8, .2, 1) .9s; }
.tz-end.on .tz-soon { opacity: 1; transform: none; }
.tz-end:has(.tz-soon) { gap: 18px; }
.tz-end:has(.tz-soon) p { font-size: clamp(30px, 4.6vw, 62px); }

/* foglio del suggerimento (upsell), come RuleSuggestionSheet dell'app vera */
.k-velo { position: absolute; inset: 0; z-index: 4; background: rgba(4, 6, 10, .55); opacity: 0; transition: opacity .3s; }
.k-velo.in { opacity: 1; }
.k-sug { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid rgba(14, 62, 200, .3); border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
  padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)); display: grid; gap: calc(3.4 * var(--u)); transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.k-sug.in { transform: none; }
.k-sug .tt { display: flex; align-items: center; gap: calc(2.2 * var(--u)); }
.k-sug .ic { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); border: 1px solid rgba(14, 62, 200, .4); display: grid; place-items: center; color: #0e3ec8; font-size: calc(4 * var(--u)); }
.k-sug .tt > span:nth-child(2) { display: grid; flex: 1; }
.k-sug small { font-family: var(--font-mono, monospace); font-size: calc(2.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: #0e3ec8; }
.k-sug em { font-style: normal; font-family: var(--font-mono, monospace); font-size: calc(3 * var(--u)); color: #5d6879; }
.k-sug .x { width: calc(8.5 * var(--u)); height: calc(8.5 * var(--u)); border-radius: calc(2 * var(--u)); background: #eceff4; display: grid; place-items: center; color: #5d6879; }
.k-sug p { margin: 0; font-size: calc(3.9 * var(--u)); line-height: 1.4; color: #1f2733; }
.k-sug .pr { display: flex; align-items: center; justify-content: space-between; padding: calc(3 * var(--u)) calc(3.6 * var(--u)); border-radius: calc(3 * var(--u)); background: #eceff4; }
.k-sug .pr > span { display: grid; }
.k-sug .pr b { font-size: calc(4.4 * var(--u)); color: #04060a; }
.k-sug .pr small { color: #5d6879; }
.k-sug .pr .eu { font-family: var(--font-mono, monospace); color: #0e3ec8; }
.k-sug .bt { display: flex; gap: calc(2 * var(--u)); }
.k-sug .bt span { flex: 1; text-align: center; padding: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); font-weight: 600; font-size: calc(3.6 * var(--u)); background: #eceff4; color: #3c414b; }
.k-sug .bt .si { background: #2f6bff; color: #fff; }