/* =====================================================================================================================
   Home "forte" (20/10/2026) — si aggiunge al foglio della home (asser-ai-home.css) e vale solo dentro ".hm--forte".
   Il titolare: «sistemiamo la homepage e facciamola bella cazzuta». Cielo notturno animato, titolo enorme che compare parola
   per parola, scena 3D della gemma che legge i documenti (asser-ai-home-forte.js; senza WebGL la stessa scena in CSS),
   nastro dei documenti, percorso raccontato mentre si scorre, numeri veri, Asserina, finale grande.
   Senza questo file (o senza lo script) la home resta quella dell'11 ottobre. Con "riduci animazioni" tutto e' fermo.
   ===================================================================================================================== */
.asser-ai-app .hm--forte {
  --hf-night: #0b060a;
  --hf-ink: #140a11;
  --hf-plum: #2b1322;
  --hf-rose: #e0789f;
  --hf-pink: #f4b3cb;
  --hf-peach: #ffd2bf;
  --hf-hot: #ff6f9e;
  --hf-teal: #5fd0b5;
  --hf-line-d: rgba(255, 255, 255, 0.12);
  --hf-soft-d: rgba(255, 255, 255, 0.66);
  --hf-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* titoli piu' grandi e decisi in tutta la home forte */
.asser-ai-app .hm--forte .hm-h2,
.asser-ai-app .hm--forte .hf-h2 {
  margin: 0;
  color: var(--hm-plum);
  font-family: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.asser-ai-app .hm--forte .hm-h2--light,
.asser-ai-app .hm--forte .hf-h2--light { color: #fff; }
.asser-ai-app .hm--forte .hf-h3 {
  margin: 0;
  font-family: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.asser-ai-app .hm--forte .hm-head { max-width: 900px; }
.asser-ai-app .hm--forte .hm-sub { font-size: clamp(16px, 1.35vw, 19px); }

/* avviso in cima: scuro, si fonde con il titolo */
.asser-ai-app .hm--forte .hm-note {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #170b14 0%, #2a1220 50%, #170b14 100%);
  color: rgba(255, 255, 255, 0.86) !important;
}
@media (hover: hover) {
  .asser-ai-app .hm--forte .hm-note:hover { background: linear-gradient(90deg, #1d0e18 0%, #351628 50%, #1d0e18 100%); }
}
.asser-ai-app .hm--forte .hm-note__new { background: linear-gradient(135deg, #ff7aa8, #b0424f); }

/* ----------------------------------------------------------------------------------------------------- in cima */
.asser-ai-app .hf-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(640px, calc(100vh - var(--hm-nav) - 46px), 940px);
  padding: clamp(56px, 7vw, 100px) 0 clamp(110px, 10vw, 140px);
  overflow: hidden;
  background: radial-gradient(120% 95% at 72% 42%, #2e1424 0%, #170a12 52%, #0b060a 100%);
  color: #fff;
}
.asser-ai-app .hf-sky { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.asser-ai-app .hf-aur { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.asser-ai-app .hf-aur--a { width: 760px; height: 760px; right: -180px; top: -260px; background: radial-gradient(circle at 42% 42%, #c94a7c 0%, rgba(201, 74, 124, 0) 68%); }
.asser-ai-app .hf-aur--b { width: 620px; height: 620px; left: -220px; bottom: -300px; background: radial-gradient(circle, #5b2f8f 0%, rgba(91, 47, 143, 0) 70%); opacity: 0.45; }
.asser-ai-app .hf-aur--c { width: 460px; height: 460px; right: 26%; bottom: -230px; background: radial-gradient(circle, #2f8f80 0%, rgba(47, 143, 128, 0) 70%); opacity: 0.32; }
.asser-ai-app .hf-floor {
  position: absolute; display: block; left: -40%; right: -40%; bottom: -42%; height: 78%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(620px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 80%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 80%);
  opacity: 0.55;
}
.asser-ai-app .hf-grain {
  position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* la scena: tela WebGL sopra a tutto lo sfondo; senza WebGL la scena CSS a destra */
.asser-ai-app .hf-scene { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; }
.asser-ai-app .hf-scene canvas {
  position: absolute; left: 0; top: 0; display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease;
  /* i fogli che passano dietro al testo sfumano: il titolo resta sempre leggibile */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.22) 40%, #000 60%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.22) 40%, #000 60%);
}
.asser-ai-app .hf-hero.is-gl .hf-scene canvas { opacity: 1; }
.asser-ai-app .hf-hero.is-gl .hf-css { display: none; }
.asser-ai-app .hf-css {
  position: absolute; right: max(2vw, calc((100% - 1180px) / 2 - 40px)); top: 50%;
  width: min(44vw, 600px); height: min(44vw, 600px); margin-top: calc(min(44vw, 600px) / -2);
  perspective: 1100px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, #000 42%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, #000 42%);
}
.asser-ai-app .hf-css__halo { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 190, 0.55) 0%, rgba(255, 140, 190, 0) 62%); filter: blur(10px); }
.asser-ai-app .hf-css__ring { position: absolute; left: 12%; top: 40%; width: 76%; height: 20%; border: 1.5px solid rgba(255, 179, 207, 0.55); border-radius: 50%; box-shadow: 0 0 24px rgba(255, 143, 191, 0.35); }
.asser-ai-app .hf-css__gem { position: absolute; left: 33%; top: 30%; width: 34%; height: 40%; filter: drop-shadow(0 30px 60px rgba(224, 88, 140, 0.55)); }
.asser-ai-app .hf-css__gem svg { display: block; width: 100%; height: 100%; }
.asser-ai-app .hf-css__card {
  position: absolute; left: 50%; top: 50%; display: grid; align-content: start; gap: 7px;
  width: 112px; height: 148px; margin: -74px 0 0 -56px; padding: 12px 11px;
  border-radius: 10px; background: linear-gradient(180deg, #fffdfb, #f4ece8);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform-style: preserve-3d;
}
.asser-ai-app .hf-css__card b { display: block; padding-bottom: 6px; border-bottom: 2px solid #b0424f; color: #4b2338; font: 800 8.5px/1.25 "Manrope", system-ui, sans-serif; letter-spacing: 0.04em; }
.asser-ai-app .hf-css__card i { display: block; height: 5px; border-radius: 3px; background: #e3d9d6; }
.asser-ai-app .hf-css__card i:nth-of-type(2) { width: 72%; }
.asser-ai-app .hf-css__card i:nth-of-type(3) { width: 48%; }
.asser-ai-app .hf-css__card--1 { transform: translate3d(-230px, -150px, -80px) rotateY(24deg) rotateZ(-8deg); }
.asser-ai-app .hf-css__card--2 { transform: translate3d(210px, -170px, -140px) rotateY(-28deg) rotateZ(7deg); opacity: 0.85; }
.asser-ai-app .hf-css__card--3 { transform: translate3d(250px, 90px, 40px) rotateY(-20deg) rotateZ(-5deg); }
.asser-ai-app .hf-css__card--4 { transform: translate3d(-250px, 120px, 20px) rotateY(22deg) rotateZ(6deg); }
.asser-ai-app .hf-css__card--5 { transform: translate3d(-40px, 230px, -160px) rotateX(18deg) rotateZ(-3deg); opacity: 0.7; }
.asser-ai-app .hf-css__card--6 { transform: translate3d(40px, -250px, -200px) rotateX(-14deg) rotateZ(4deg); opacity: 0.6; }

.asser-ai-app .hf-hero__in { display: block; z-index: 1; }
.asser-ai-app .hf-hero__copy { position: relative; z-index: 1; min-width: 0; max-width: min(800px, 68%); }
.asser-ai-app .hf-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 15px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.asser-ai-app .hf-kicker .hm-dot { background: var(--hf-teal); box-shadow: 0 0 0 4px rgba(95, 208, 181, 0.18), 0 0 14px rgba(95, 208, 181, 0.8); }
.asser-ai-app .hf-h1 {
  margin: 24px 0 26px; color: #fff;
  font-family: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(44px, 5.25vw, 76px); line-height: 0.98; letter-spacing: -0.055em;
}
.asser-ai-app .hf-w { display: inline-block; }
.asser-ai-app .hf-shine {
  font-style: normal; padding-right: 0.04em;
  background: linear-gradient(100deg, #ffd2bf 0%, #ff9cc2 26%, #ff6f9e 48%, #c98cff 70%, #ffd2bf 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.asser-ai-app .hf-lead { max-width: 33em; margin: 0; color: var(--hf-soft-d); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; }
.asser-ai-app .hf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.asser-ai-app .hf-actions--center { justify-content: center; }
.asser-ai-app .hf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 30px; overflow: hidden; isolation: isolate;
  border: 1px solid transparent; border-radius: 999px;
  font: 800 16px/1.1 "Manrope", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.005em; text-align: center; cursor: pointer;
  transition: transform 0.35s var(--hf-ease), box-shadow 0.35s var(--hf-ease), background-color 0.3s, border-color 0.3s;
}
.asser-ai-app .hf-btn .hm-ic { width: 19px; height: 19px; transition: transform 0.35s var(--hf-ease); }
.asser-ai-app .hf-btn--glow {
  color: #fff !important;
  background: linear-gradient(135deg, #ff7aa8 0%, #d1477a 45%, #7d2f57 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 50px rgba(224, 88, 140, 0.45), 0 0 90px rgba(224, 88, 140, 0.22);
}
.asser-ai-app .hf-btn--glow::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-130%);
}
.asser-ai-app .hf-btn--glass {
  color: #fff !important; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (hover: hover) {
  .asser-ai-app .hf-btn:hover { transform: translateY(-3px); }
  .asser-ai-app .hf-btn:hover .hm-ic { transform: translateX(4px); }
  .asser-ai-app .hf-btn--glow:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 24px 64px rgba(224, 88, 140, 0.6), 0 0 120px rgba(224, 88, 140, 0.32); }
  .asser-ai-app .hf-btn--glass:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.34); }
}
.asser-ai-app .hf-assure { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 600; }
.asser-ai-app .hf-assure li { display: inline-flex; align-items: center; gap: 7px; }
.asser-ai-app .hf-assure .hm-ic { width: 16px; height: 16px; color: var(--hf-teal); }

/* i tre passaggi sopra la scena (Legge / Collega / Spiega), accesi a turno */
.asser-ai-app .hf-hud { position: absolute; left: 73%; bottom: -92px; z-index: 1; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; translate: -50% 0; }
.asser-ai-app .hf-hud__i {
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; padding: 10px 16px 10px 13px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(20, 10, 17, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  color: rgba(255, 255, 255, 0.5); transition: color 0.5s, border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--hf-ease);
}
.asser-ai-app .hf-hud__i::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background-color 0.5s, box-shadow 0.5s; }
.asser-ai-app .hf-hud__i b { font: 800 15px/1.2 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.01em; }
.asser-ai-app .hf-hud__i span { display: none; }
.asser-ai-app .hf-hud__i.is-on { color: #fff; border-color: rgba(255, 143, 191, 0.45); box-shadow: 0 14px 40px rgba(224, 88, 140, 0.22); transform: translateY(-3px); }
.asser-ai-app .hf-hud__i.is-on::before { background: var(--hf-hot); box-shadow: 0 0 0 5px rgba(255, 111, 158, 0.2), 0 0 16px rgba(255, 111, 158, 0.9); }
.asser-ai-app .hf-down {
  position: absolute; left: 50%; bottom: 26px; z-index: 1; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5) !important; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.asser-ai-app .hf-down i { position: relative; display: block; width: 22px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 12px; }
.asser-ai-app .hf-down i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; }
.asser-ai-app .hf-eg { position: absolute; right: 22px; bottom: 18px; margin: 0; color: rgba(255, 255, 255, 0.32) !important; }

/* ----------------------------------------------------------------------------------------------------- i documenti letti
   21/10/2026 (il titolare): niente lettere vuote e niente scorrimento: i nomi stanno fermi, pieni, nei colori ASSER */
.asser-ai-app .hf-reads { position: relative; padding: clamp(46px, 6vw, 76px) 0 clamp(54px, 7vw, 88px); overflow: hidden; background: var(--hf-night); color: #fff; }
.asser-ai-app .hf-reads::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 143, 191, 0.45), transparent); }
.asser-ai-app .hf-reads::after { content: ""; position: absolute; left: 50%; top: 40%; width: 900px; height: 420px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 74, 124, 0.22), rgba(201, 74, 124, 0)); pointer-events: none; }
.asser-ai-app .hf-reads__t { position: relative; z-index: 1; margin: 0 0 26px; color: var(--hf-pink); font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; }
.asser-ai-app .hf-reads__list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; max-width: 1060px; margin: 0 auto; padding: 0; list-style: none; }
.asser-ai-app .hf-reads__list li {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.045);
  font-family: "Sora", "Manrope", system-ui, sans-serif; font-size: clamp(18px, 2vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
}
.asser-ai-app .hf-reads__list li .hm-ic { flex: none; width: 1.05em; height: 1.05em; padding: 0.2em; border-radius: 0.35em; background: linear-gradient(135deg, #ff7aa8, #b0424f); color: #fff; box-sizing: content-box; }
.asser-ai-app .hf-reads__list li span { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.asser-ai-app .hf-reads__list li.is-a span { background-image: linear-gradient(100deg, #ffffff 0%, #ffd9e6 100%); }
.asser-ai-app .hf-reads__list li.is-b span { background-image: linear-gradient(100deg, #ffb3cf 0%, #ff6f9e 100%); }
.asser-ai-app .hf-reads__list li.is-c span { background-image: linear-gradient(100deg, #f4b3cb 0%, #c26a92 100%); }
.asser-ai-app .hf-reads__list li.is-b .hm-ic { background: linear-gradient(135deg, #c26a92, #6d2f4a); }
.asser-ai-app .hf-reads__list li.is-c .hm-ic { background: linear-gradient(135deg, #3f9a87, #1f5148); }

/* ----------------------------------------------------------------------------------------------------- riquadri "Come possiamo aiutarti oggi?" */
.asser-ai-app .hm--forte .hm-choose { padding-top: clamp(80px, 10vw, 140px); }
.asser-ai-app .hm--forte .hm-choose .hm-head { margin-bottom: clamp(30px, 4vw, 52px); }
.asser-ai-app .hm--forte .hm-tile { border-radius: 34px; }
.asser-ai-app .hm--forte .hm-tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 111, 158, 0.9), rgba(255, 111, 158, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s;
}
@media (hover: hover) {
  .asser-ai-app .hm--forte .hm-tile:hover::after { opacity: 1; }
  .asser-ai-app .hm--forte .hm-tile:hover { transform: translateY(-7px) scale(1.01); }
}
.asser-ai-app .hm--forte .hm-tile--main { background: radial-gradient(120% 120% at 85% 0%, #7a2f55 0%, #3a1729 46%, #170a12 100%); }

/* ----------------------------------------------------------------------------------------------------- il percorso raccontato */
.asser-ai-app .hf-story { position: relative; padding: clamp(84px, 10vw, 150px) 0 clamp(56px, 6vw, 90px); overflow: clip; background: linear-gradient(180deg, #0f080d 0%, #170a12 50%, #0f080d 100%); color: #fff; }
.asser-ai-app .hf-story__glow { position: absolute; left: -10%; top: 18%; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 74, 124, 0.32), rgba(201, 74, 124, 0) 65%); filter: blur(40px); pointer-events: none; }
.asser-ai-app .hf-story__head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 80px); text-align: center; }
.asser-ai-app .hf-story__head p:last-child { margin: 18px 0 0; }
.asser-ai-app .hf-story__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.asser-ai-app .hf-story__stick { position: sticky; top: calc(var(--hm-nav) + max(40px, 12vh)); }
.asser-ai-app .hf-dev {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 80px rgba(201, 74, 124, 0.16);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.asser-ai-app .hf-dev__bar { display: flex; align-items: center; gap: 7px; padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.55); font-size: 12.5px; font-weight: 700; }
.asser-ai-app .hf-dev__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.asser-ai-app .hf-dev__bar i:first-child { background: #ff6f9e; }
.asser-ai-app .hf-dev__bar span { margin-left: 8px; }
.asser-ai-app .hf-dev__screen { position: relative; height: clamp(340px, 34vw, 430px); }
.asser-ai-app .hf-dev .hm-eg { position: absolute; right: 16px; bottom: 12px; margin: 0; color: rgba(255, 255, 255, 0.3) !important; }
.asser-ai-app .hf-scr { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: grid; align-content: start; gap: 16px; padding: clamp(22px, 2.6vw, 34px); opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.6s var(--hf-ease), transform 0.8s var(--hf-ease); }
.asser-ai-app .hf-story[data-step="1"] .hf-scr--1,
.asser-ai-app .hf-story[data-step="2"] .hf-scr--2,
.asser-ai-app .hf-story[data-step="3"] .hf-scr--3 { opacity: 1; transform: none; }
.asser-ai-app .hf-scr__t { margin: 0; color: #fff; font: 800 clamp(19px, 1.8vw, 24px)/1.15 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.02em; }
.asser-ai-app .hf-scr__k { margin: 0; color: var(--hf-pink); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.asser-ai-app .hf-drop { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 92px; border: 1.5px dashed rgba(255, 143, 191, 0.45); border-radius: 20px; background: rgba(255, 143, 191, 0.06); color: rgba(255, 255, 255, 0.75); font-weight: 700; }
.asser-ai-app .hf-drop .hm-ic { width: 22px; height: 22px; color: var(--hf-pink); }
.asser-ai-app .hf-files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.asser-ai-app .hf-files li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); }
.asser-ai-app .hf-files b { grid-row: span 2; padding: 5px 7px; border-radius: 8px; background: linear-gradient(135deg, #ff7aa8, #b0424f); color: #fff; font-size: 10px; letter-spacing: 0.06em; }
.asser-ai-app .hf-files span { color: rgba(255, 255, 255, 0.86); font-size: 14px; font-weight: 700; }
.asser-ai-app .hf-files i { position: relative; display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.asser-ai-app .hf-files i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--hf-teal), #a6f0dd); }
.asser-ai-app .hf-ring { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 190px); height: clamp(150px, 15vw, 190px); margin: 4px auto 8px; }
.asser-ai-app .hf-ring svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.asser-ai-app .hf-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
.asser-ai-app .hf-ring .hf-ring__v { stroke: var(--hf-hot); stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: 60; filter: drop-shadow(0 0 8px rgba(255, 111, 158, 0.7)); }
.asser-ai-app .hf-ring span { max-width: 9em; color: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.25; text-align: center; }
.asser-ai-app .hf-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.asser-ai-app .hf-checks li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 600; }
.asser-ai-app .hf-checks .hm-ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(95, 208, 181, 0.18); color: var(--hf-teal); }
.asser-ai-app .hf-checks .is-wait { color: rgba(255, 255, 255, 0.5); }
.asser-ai-app .hf-checks .is-wait .hm-ic { background: rgba(255, 255, 255, 0.08); color: var(--hf-pink); }
.asser-ai-app .hf-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.asser-ai-app .hf-kpi span { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); }
.asser-ai-app .hf-kpi i { display: block; width: 60%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.asser-ai-app .hf-kpi b { display: block; width: 85%; height: 16px; border-radius: 5px; background: linear-gradient(90deg, #ff9cc2, #ff6f9e); }
.asser-ai-app .hf-kpi span:nth-child(2) b { width: 70%; background: linear-gradient(90deg, #a6f0dd, var(--hf-teal)); }
.asser-ai-app .hf-kpi span:nth-child(3) b { width: 55%; background: linear-gradient(90deg, #ffd2bf, #f3a37f); }
.asser-ai-app .hf-bars { display: flex; align-items: flex-end; gap: 10px; height: 84px; padding: 0 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.asser-ai-app .hf-bars i { flex: 1 1 0; height: var(--h, 50%); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, rgba(255, 143, 191, 0.95), rgba(176, 66, 79, 0.55)); transform-origin: bottom; }
.asser-ai-app .hf-todo { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.asser-ai-app .hf-todo li { position: relative; height: 12px; margin-left: 26px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.asser-ai-app .hf-todo li:nth-child(2) { width: 78%; }
.asser-ai-app .hf-todo li:nth-child(3) { width: 56%; }
.asser-ai-app .hf-todo li::before { content: ""; position: absolute; left: -26px; top: -2px; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(95, 208, 181, 0.8); }
.asser-ai-app .hf-steps { margin: 0; padding: 0; list-style: none; }
.asser-ai-app .hf-step { display: grid; align-content: center; gap: 12px; min-height: 62vh; padding: 20px 0; opacity: 0.26; transition: opacity 0.6s var(--hf-ease); }
.asser-ai-app .hf-step:first-child { min-height: 48vh; }
/* l'ultimo passo finisce dove finisce lo schermo dell'esempio: niente vuoto scuro prima dei numeri (21/10/2026) */
.asser-ai-app .hf-step:last-child { min-height: 0; align-content: start; padding: 16vh 0 0; }
.asser-ai-app .hf-story[data-step="1"] .hf-step[data-hf-step="1"],
.asser-ai-app .hf-story[data-step="2"] .hf-step[data-hf-step="2"],
.asser-ai-app .hf-story[data-step="3"] .hf-step[data-hf-step="3"] { opacity: 1; }
.asser-ai-app .hf-step__n { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(255, 143, 191, 0.7); font: 800 clamp(64px, 7vw, 110px)/0.9 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.05em; }
.asser-ai-app .hf-step small { color: var(--hf-pink); font-size: 12px; font-weight: 800; letter-spacing: 0.2em; }
.asser-ai-app .hf-step .hf-h3 { color: #fff; }
.asser-ai-app .hf-step p { max-width: 26em; margin: 0; color: var(--hf-soft-d); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }

/* ----------------------------------------------------------------------------------------------------- numeri
   21/10/2026: ogni numero nella sua scheda e grande quanto la scheda permette (non tocca piu' il vicino), "+" piccolo */
.asser-ai-app .hf-num { padding: clamp(70px, 9vw, 120px) 0; background: var(--hm-paper); }
.asser-ai-app .hf-num__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin: 0; padding: 0; list-style: none; }
.asser-ai-app .hf-num__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asser-ai-app .hf-num__i {
  position: relative; container-type: inline-size; display: grid; align-content: start; gap: 6px; min-width: 0; overflow: hidden;
  padding: clamp(22px, 2.4vw, 30px); border: 1px solid rgba(75, 35, 56, 0.08); border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6f8 100%);
  box-shadow: 0 1px 2px rgba(75, 35, 56, 0.04), 0 22px 50px rgba(75, 35, 56, 0.07);
}
.asser-ai-app .hf-num__i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff7aa8, #b0424f 55%, rgba(176, 66, 79, 0)); }
.asser-ai-app .hf-num__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 13px; background: linear-gradient(145deg, #c26a92, #4b2338); color: #fff; box-shadow: 0 10px 22px rgba(75, 35, 56, 0.2); }
.asser-ai-app .hf-num__ic .hm-ic { width: 20px; height: 20px; }
.asser-ai-app .hf-num__n {
  display: flex; align-items: flex-start; white-space: nowrap;
  font: 800 min(31cqi, 88px)/0.95 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.055em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #4b2338 0%, #b0424f 55%, #ff6f9e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.asser-ai-app .hf-num__plus { margin: 0.06em 0 0 0.04em; font-size: 0.55em; font-style: normal; line-height: 1; }
.asser-ai-app .hf-num__k { margin-top: 6px; color: var(--hm-plum); font-size: 17px; font-weight: 800; line-height: 1.25; }
.asser-ai-app .hf-num__p { color: var(--hm-muted); font-size: 14px; line-height: 1.45; }
/* tema scuro: schede di vetro e numeri luminosi (queste regole vincono sul foglio scuro generato) */
html[data-asser-theme="dark"] body .asser-ai-app .hf-num { background: #141012; }
html[data-asser-theme="dark"] body .asser-ai-app .hf-num__i { border-color: rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35); }
html[data-asser-theme="dark"] body .asser-ai-app .hf-num__n { background-image: linear-gradient(135deg, #ffffff 0%, #ffc1d8 55%, #ff6f9e 100%); }
html[data-asser-theme="dark"] body .asser-ai-app .hf-num__k { color: #fff; }
html[data-asser-theme="dark"] body .asser-ai-app .hf-num__p { color: rgba(255, 255, 255, 0.62); }

/* ----------------------------------------------------------------------------------------------------- il calendario in breve (21/10/2026)
   linea dal centro del primo al centro dell'ultimo cerchio; fatto = verde con la spunta, in corso = colori ASSER con il punto
   bianco e l'alone che pulsa, dopo = anello chiaro ben visibile; stesso aspetto nel tema chiaro e in quello scuro */
.asser-ai-app .hm--forte .hm-tl { border-color: rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); }
.asser-ai-app .hm--forte .hm-tl__list::before { top: 18px; height: 4px; margin-top: -1px; background: rgba(255, 255, 255, 0.14); }
.asser-ai-app .hm--forte .hm-tl__list::after { top: 18px; height: 4px; margin-top: -1px; background: linear-gradient(90deg, #3f9a87 0%, #7fd6c2 40%, #ff8fbf 100%); box-shadow: 0 0 14px rgba(255, 143, 191, 0.35); }
.asser-ai-app .hm--forte .hm-tl__node { width: 38px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.38); background: #1d1219; }
.asser-ai-app .hm--forte .hm-tl__list li.is-done .hm-tl__node { border-color: #47a690; background: linear-gradient(135deg, #4fb39c, #2c7a68); box-shadow: 0 6px 16px rgba(63, 154, 135, 0.35); }
.asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__node { border-color: rgba(255, 255, 255, 0.9); background: linear-gradient(135deg, #ff8fbf 0%, #e0588c 50%, #b0424f 100%); box-shadow: 0 0 0 6px rgba(255, 111, 158, 0.22), 0 10px 24px rgba(224, 88, 140, 0.45); }
.asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__node::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__node .hm-ic { display: none; }
.asser-ai-app .hm--forte .hm-tl__name { margin-top: 10px; color: rgba(255, 255, 255, 0.62); font-size: 15px; }
.asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__name { color: #fff; }
.asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__date { color: #ffb3cf; font-weight: 800; }
.asser-ai-app .hm--forte .hm-tl__date { color: rgba(255, 255, 255, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .asser-ai-app .hm--forte .hm-tl__list li.is-now .hm-tl__node { animation: hf-now 2.4s ease-in-out infinite; }
}
@keyframes hf-now { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 111, 158, 0.3), 0 10px 24px rgba(224, 88, 140, 0.45); } 50% { box-shadow: 0 0 0 12px rgba(255, 111, 158, 0), 0 10px 24px rgba(224, 88, 140, 0.45); } }
@media (max-width: 860px) {
  .asser-ai-app .hm--forte .hm-tl__list::before, .asser-ai-app .hm--forte .hm-tl__list::after { top: 19px; left: 18px; width: 4px; margin: 0 0 0 -1px; }
  .asser-ai-app .hm--forte .hm-tl__list::after { height: calc((100% - 38px) * var(--hm-p, 0)); }
  .asser-ai-app .hm--forte .hm-tl__list li { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .asser-ai-app .hm--forte .hm-tl__name { margin-top: 0; }
}

/* ----------------------------------------------------------------------------------------------------- rottamazione: il numero grande brilla */
.asser-ai-app .hm--forte .hm-count__big b:not(.is-word) {
  background: linear-gradient(135deg, #ffffff 0%, #ffc1d8 55%, #ff7aa8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------------------------------------------------- Asserina */
.asser-ai-app .hf-ask { overflow: hidden; background: radial-gradient(70% 70% at 88% 18%, rgba(244, 179, 203, 0.5) 0%, rgba(244, 179, 203, 0) 60%), linear-gradient(180deg, #fbf3f6 0%, #f6edf1 100%); }
.asser-ai-app .hf-ask__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.asser-ai-app .hf-ask__copy { min-width: 0; }
.asser-ai-app .hf-ask__copy .hm-sub { margin: 18px 0 0; }
.asser-ai-app .hf-ask__list { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.asser-ai-app .hf-ask__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.asser-ai-app .hf-ask__list li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #c26a92, #4b2338); color: #fff; box-shadow: 0 10px 22px rgba(75, 35, 56, 0.22); }
.asser-ai-app .hf-ask__list li > span .hm-ic { width: 22px; height: 22px; }
.asser-ai-app .hf-ask__list b { display: block; color: var(--hm-plum); font: 800 18px/1.25 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.015em; }
.asser-ai-app .hf-ask__list p { margin: 3px 0 0; color: var(--hm-muted); font-size: 15px; line-height: 1.5; }
.asser-ai-app .hf-ask__note { margin: 22px 0 26px; color: var(--hm-plum-2); font-size: 14px; font-weight: 700; }
.asser-ai-app .hf-ask__vis { position: relative; perspective: 1400px; }
.asser-ai-app .hf-ask__vis .hm-eg { margin: 12px 6px 0; text-align: right; }
.asser-ai-app .hf-chat {
  display: grid; gap: 14px; padding: 20px; border-radius: 32px; background: #fff;
  box-shadow: 0 2px 4px rgba(75, 35, 56, 0.05), 0 50px 110px rgba(75, 35, 56, 0.22), 0 0 0 1px rgba(75, 35, 56, 0.06);
  transform: rotateY(-9deg) rotateX(4deg); transform-origin: 30% 50%;
}
.asser-ai-app .hf-chat__head { display: flex; align-items: center; gap: 12px; }
.asser-ai-app .hf-chat__head small { display: block; color: var(--hm-plum-2); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.asser-ai-app .hf-chat__head b { color: var(--hm-plum); font: 800 18px/1.2 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.02em; }
.asser-ai-app .hf-chat__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #b0424f, #4b2338); color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(176, 66, 79, 0.3); }
.asser-ai-app .hf-chat__body { display: grid; gap: 9px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #fbf8f9, #f6f0f3); }
.asser-ai-app .hf-bub { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; }
.asser-ai-app .hf-bub--me { justify-self: end; border-bottom-right-radius: 6px; background: #4b2338; color: #fff; }
.asser-ai-app .hf-bub--ai { justify-self: start; border-bottom-left-radius: 6px; background: #fff; color: #4b2338; box-shadow: 0 0 0 1px rgba(75, 35, 56, 0.06); }
.asser-ai-app .hf-bub--table { display: grid; gap: 7px; min-width: 70%; }
.asser-ai-app .hf-bub--table small { color: #b0424f; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.asser-ai-app .hf-bub--table span { display: grid; grid-template-columns: 1fr 34%; align-items: center; gap: 10px; padding-top: 7px; border-top: 1px solid rgba(75, 35, 56, 0.08); }
.asser-ai-app .hf-bub--table span b { font-size: 12.5px; font-weight: 700; }
.asser-ai-app .hf-bub--table span i { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(176, 66, 79, 0.25), rgba(176, 66, 79, 0.6)); }
.asser-ai-app .hf-chat__acts { display: flex; flex-wrap: wrap; gap: 7px; }
.asser-ai-app .hf-chat__acts > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(75, 35, 56, 0.12); color: #4b2338; font-size: 12px; font-weight: 800; }
.asser-ai-app .hf-chat__acts > span.is-on { box-shadow: inset 0 0 0 2px #b0424f; }
.asser-ai-app .hf-chat__acts em { color: #2f7a4f; font-size: 10px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.asser-ai-app .hf-chat__acts .is-asser { background: linear-gradient(135deg, #c4515e, #b0424f 42%, #6d2f4a); color: #fff; box-shadow: 0 8px 18px rgba(176, 66, 79, 0.3); }
.asser-ai-app .hf-chat__acts .ac-coin, .asser-ai-app .hf-chat__send .ac-coin { --ac: 1.25em; }
.asser-ai-app .hf-chat__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(75, 35, 56, 0.14); color: #8a7a82; font-size: 13.5px; }
.asser-ai-app .hf-chat__send { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 6px; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, #c4515e, #b0424f 40%, #6d2f4a); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 8px 20px rgba(176, 66, 79, 0.35); }

/* ----------------------------------------------------------------------------------------------------- professionisti / prudenza / domande */
.asser-ai-app .hm--forte .hm-app { box-shadow: 0 50px 120px rgba(44, 31, 41, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; }
.asser-ai-app .hm--forte .hm-acc__item { border-radius: 22px; }

/* ----------------------------------------------------------------------------------------------------- finale */
.asser-ai-app .hf-end { position: relative; isolation: isolate; padding: clamp(110px, 14vw, 200px) 0; overflow: hidden; background: radial-gradient(90% 80% at 50% 110%, #3a1729 0%, #160a12 55%, #0b060a 100%); color: #fff; text-align: center; }
.asser-ai-app .hf-end .hf-aur--a { right: auto; left: 50%; top: auto; bottom: -420px; margin-left: -380px; }
.asser-ai-app .hf-end .hf-aur--b { left: -260px; bottom: auto; top: -260px; }
.asser-ai-app .hf-end__in { display: grid; justify-items: center; }
.asser-ai-app .hf-end__t {
  max-width: 13ch; margin: 0 auto 24px !important; font-size: clamp(46px, 8.4vw, 132px) !important; line-height: 0.92 !important; letter-spacing: -0.06em !important;
  background: linear-gradient(180deg, #ffffff 30%, #ffb3cf 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
.asser-ai-app .hf-end .hm-sub { max-width: 34em; margin: 0 auto; color: var(--hf-soft-d); }
.asser-ai-app .hf-end .hf-actions { margin-top: 38px; }
.asser-ai-app .hf-end__on { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 700; }
.asser-ai-app .hf-end__on .hm-pulse { background: var(--hf-teal); }

/* ----------------------------------------------------------------------------------------------------- movimento (solo se l'utente non ha chiesto di ridurlo) */
@media (prefers-reduced-motion: no-preference) {
  .asser-ai-app .hf-aur--a { animation: hf-drift-a 18s ease-in-out infinite alternate; }
  .asser-ai-app .hf-aur--b { animation: hf-drift-b 23s ease-in-out infinite alternate; }
  .asser-ai-app .hf-aur--c { animation: hf-drift-c 27s ease-in-out infinite alternate; }
  .asser-ai-app .hf-floor { animation: hf-floor 7s linear infinite; }
  .asser-ai-app .hf-shine { animation: hf-shine 7s linear infinite; }
  .asser-ai-app .hf-btn--glow::after { animation: hf-sheen 4.2s ease-in-out 1.6s infinite; }
  .asser-ai-app .hf-down i::after { animation: hf-wheel 1.8s ease-in-out infinite; }
  .asser-ai-app .hf-css { animation: hf-float 7s ease-in-out infinite alternate; }
  .asser-ai-app .hf-css__gem { animation: hf-gem 9s ease-in-out infinite; }
  .asser-ai-app .hf-css__ring { animation: hf-ring 12s linear infinite; }
  .asser-ai-app .hf-css__card { animation: hf-card 8s ease-in-out infinite alternate; }
  .asser-ai-app .hf-css__card--2 { animation-delay: -2s; }
  .asser-ai-app .hf-css__card--3 { animation-delay: -4s; }
  .asser-ai-app .hf-css__card--4 { animation-delay: -1s; }
  .asser-ai-app .hf-css__card--5 { animation-delay: -5s; }
  .asser-ai-app .hf-css__card--6 { animation-delay: -3s; }
  .asser-ai-app .hf-hero.is-paused .hf-aur, .asser-ai-app .hf-hero.is-paused .hf-floor, .asser-ai-app .hf-hero.is-paused .hf-css,
  .asser-ai-app .hf-hero.is-paused .hf-css * { animation-play-state: paused; }
  /* il titolo compare parola per parola */
  .asser-ai-app .hm-js .hf-w { animation: hf-word 1.1s var(--hf-ease) both; animation-delay: calc(var(--i, 0) * 75ms + 120ms); }
  .asser-ai-app .hm-js .hf-shine { animation: hf-word 1.1s var(--hf-ease) both, hf-shine 7s linear 1.4s infinite; animation-delay: calc(var(--i, 0) * 75ms + 120ms), 1.4s; }
  .asser-ai-app .hm-js .hf-kicker, .asser-ai-app .hm-js .hf-lead, .asser-ai-app .hm-js .hf-hero__copy .hf-actions, .asser-ai-app .hm-js .hf-assure, .asser-ai-app .hm-js .hf-hud {
    animation: hf-rise 1s var(--hf-ease) both;
  }
  .asser-ai-app .hm-js .hf-lead { animation-delay: 0.62s; }
  .asser-ai-app .hm-js .hf-hero__copy .hf-actions { animation-delay: 0.76s; }
  .asser-ai-app .hm-js .hf-assure { animation-delay: 0.9s; }
  .asser-ai-app .hm-js .hf-hud { animation-delay: 1.1s; }
  .asser-ai-app .hf-story[data-step="1"] .hf-files li { animation: hf-rise 0.7s var(--hf-ease) both; }
  .asser-ai-app .hf-story[data-step="1"] .hf-files li:nth-child(2) { animation-delay: 0.12s; }
  .asser-ai-app .hf-story[data-step="1"] .hf-files li:nth-child(3) { animation-delay: 0.24s; }
  .asser-ai-app .hf-story[data-step="1"] .hf-files i::after { animation: hf-fill 1.6s var(--hf-ease) 0.3s both; }
  .asser-ai-app .hf-story[data-step="2"] .hf-ring__v { animation: hf-ring-fill 2.2s var(--hf-ease) both; }
  .asser-ai-app .hf-story[data-step="2"] .hf-checks li { animation: hf-rise 0.6s var(--hf-ease) both; }
  .asser-ai-app .hf-story[data-step="2"] .hf-checks li:nth-child(2) { animation-delay: 0.35s; }
  .asser-ai-app .hf-story[data-step="2"] .hf-checks li:nth-child(3) { animation-delay: 0.7s; }
  .asser-ai-app .hf-story[data-step="2"] .hf-checks li:nth-child(4) { animation-delay: 1.05s; }
  .asser-ai-app .hf-story[data-step="3"] .hf-bars i { animation: hf-grow 1.1s var(--hf-ease) both; }
  .asser-ai-app .hf-story[data-step="3"] .hf-bars i:nth-child(2) { animation-delay: 0.08s; }
  .asser-ai-app .hf-story[data-step="3"] .hf-bars i:nth-child(3) { animation-delay: 0.16s; }
  .asser-ai-app .hf-story[data-step="3"] .hf-bars i:nth-child(4) { animation-delay: 0.24s; }
  .asser-ai-app .hf-story[data-step="3"] .hf-bars i:nth-child(5) { animation-delay: 0.32s; }
  .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-bub { animation: hf-pop 0.6s var(--hf-ease) both; }
  .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-bub--1 { animation-delay: 0.7s; }
  .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-bub--2 { animation-delay: 1.5s; }
  .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-bub--3 { animation-delay: 2.3s; }
  .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-chat { animation: hf-tilt 9s ease-in-out 1s infinite alternate; }
  .asser-ai-app .hf-chat__send::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 64%); transform: translateX(-130%); animation: hf-sheen 3.6s ease-in-out 1s infinite; }
}
@keyframes hf-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-90px, 70px, 0) scale(1.12); } }
@keyframes hf-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(120px, -60px, 0) scale(1.18); } }
@keyframes hf-drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-70px, -90px, 0) scale(0.9); } }
@keyframes hf-floor { from { background-position: 0 0, 0 0; } to { background-position: 0 72px, 0 0; } }
@keyframes hf-shine { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@keyframes hf-sheen { 0% { transform: translateX(-130%); } 40%, 100% { transform: translateX(130%); } }
@keyframes hf-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes hf-word { from { opacity: 0; transform: translateY(0.45em) rotateX(-55deg); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hf-float { from { transform: translateY(-10px); } to { transform: translateY(14px); } }
@keyframes hf-gem { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.05); } }
@keyframes hf-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hf-card { from { translate: 0 -8px; } to { translate: 0 10px; } }
@keyframes hf-fill { from { width: 0; } }
@keyframes hf-ring-fill { from { stroke-dashoffset: 314.2; } }
@keyframes hf-grow { from { transform: scaleY(0.05); } }
@keyframes hf-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes hf-tilt { from { transform: rotateY(-9deg) rotateX(4deg); } to { transform: rotateY(-3deg) rotateX(1deg) translateY(-8px); } }

/* ----------------------------------------------------------------------------------------------------- larghezze */
@media (max-width: 1100px) {
  .asser-ai-app .hf-hero__copy { max-width: min(640px, 66%); }
  .asser-ai-app .hf-hud { left: 70%; bottom: -84px; }
  .asser-ai-app .hf-css { width: min(56vw, 520px); height: min(56vw, 520px); margin-top: calc(min(56vw, 520px) / -2); right: -6vw; opacity: 0.85; }
  .asser-ai-app .hf-num__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  /* telefono e tablet: prima il testo, sotto la scena (la tela WebGL mette la gemma in basso) */
  .asser-ai-app .hf-hero { align-items: flex-start; min-height: 0; padding: 44px 0 400px; }
  .asser-ai-app .hf-hero__copy { max-width: none; }
  .asser-ai-app .hf-scene canvas { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.22) 46%, #000 64%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.22) 46%, #000 64%); }
  .asser-ai-app .hf-css { left: 50%; right: auto; top: auto; bottom: 30px; width: 360px; height: 360px; margin: 0 0 0 -180px; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .asser-ai-app .hf-css__card { width: 84px; height: 112px; margin: -56px 0 0 -42px; padding: 9px 8px; }
  .asser-ai-app .hf-css__card b { font-size: 7px; }
  .asser-ai-app .hf-css__card--1 { transform: translate3d(-138px, -96px, -60px) rotateY(24deg) rotateZ(-8deg); }
  .asser-ai-app .hf-css__card--2 { transform: translate3d(132px, -104px, -100px) rotateY(-28deg) rotateZ(7deg); }
  .asser-ai-app .hf-css__card--3 { transform: translate3d(142px, 66px, 20px) rotateY(-20deg) rotateZ(-5deg); }
  .asser-ai-app .hf-css__card--4 { transform: translate3d(-146px, 76px, 10px) rotateY(22deg) rotateZ(6deg); }
  .asser-ai-app .hf-css__card--5, .asser-ai-app .hf-css__card--6 { display: none; }
  .asser-ai-app .hf-hud { left: 50%; bottom: -372px; }
  .asser-ai-app .hf-eg { display: none; }
  .asser-ai-app .hf-hud__i { padding: 8px 13px 8px 11px; border-radius: 14px; }
  .asser-ai-app .hf-down { display: none; }
  .asser-ai-app .hf-story__grid { grid-template-columns: minmax(0, 1fr); }
  .asser-ai-app .hf-story__stick { position: relative; top: auto; }
  .asser-ai-app .hf-step { min-height: 0; padding: 26px 0 0; opacity: 1; }
  .asser-ai-app .hf-step:first-child { min-height: 0; }
  .asser-ai-app .hf-step__n { font-size: 54px; }
  .asser-ai-app .hf-steps { display: grid; gap: 6px; }
  .asser-ai-app .hf-ask__in { grid-template-columns: minmax(0, 1fr); }
  .asser-ai-app .hf-chat { transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .asser-ai-app .hm-js .hf-ask__vis.is-in .hf-chat { animation: none; }
  }
}
@media (max-width: 560px) {
  .asser-ai-app .hf-hero { padding-bottom: 360px; }
  .asser-ai-app .hf-h1 { font-size: clamp(40px, 11.6vw, 58px); letter-spacing: -0.05em; }
  .asser-ai-app .hf-br { display: none; }
  .asser-ai-app .hf-actions { flex-direction: column; align-items: stretch; }
  .asser-ai-app .hf-actions--center { align-items: center; }
  .asser-ai-app .hf-btn { width: 100%; }
  .asser-ai-app .hf-actions--center .hf-btn { width: min(100%, 360px); }
  .asser-ai-app .hf-css { width: 320px; height: 320px; margin-left: -160px; bottom: 26px; }
  .asser-ai-app .hf-hud { bottom: -334px; }
  .asser-ai-app .hf-num__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .asser-ai-app .hf-num__i { padding: 18px 16px; border-radius: 22px; }
  .asser-ai-app .hf-num__ic { width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; }
  .asser-ai-app .hf-num__k { font-size: 15px; }
  .asser-ai-app .hf-num__p { font-size: 13px; }
  .asser-ai-app .hf-reads__list { gap: 8px; }
  .asser-ai-app .hf-reads__list li { gap: 9px; padding: 9px 15px 9px 11px; font-size: 16px; }
  .asser-ai-app .hf-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .asser-ai-app .hf-dev__screen { height: 372px; }
  .asser-ai-app .hf-dev .hm-eg { position: static; padding: 0 16px 12px; text-align: right; }
  .asser-ai-app .hf-end__t { font-size: clamp(40px, 12vw, 64px) !important; }
}
@media (max-width: 380px) {
  .asser-ai-app .hf-css { transform: scale(0.88); transform-origin: 50% 100%; }
  .asser-ai-app .hf-hud__i { padding: 7px 9px; }
  .asser-ai-app .hf-hud__i b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .asser-ai-app .hf-scr { transition: none; }
  .asser-ai-app .hf-step { transition: none; }
}

/* ---- video fotorealistico della gemma, solo da telefono (21/10/2026) ------------------------------------------------
   La scena WebGL da telefono era a mezza definizione e la gemma, grande sullo schermo, sembrava disegnata: sotto i 920 px
   (se ci sono i file del video, classe hf-scene--film dal PHP) l'immagine fissa compare subito e il video, quando parte,
   la copre con una dissolvenza. Bordi sfumati: si fonde con il cielo scuro della sezione. */
.asser-ai-app .hf-film { display: none; }
@media (max-width: 920px) {
  .asser-ai-app .hf-scene--film .hf-css,
  .asser-ai-app .hf-scene--film canvas { display: none !important; }
  .asser-ai-app .hf-scene--film .hf-film {
    position: absolute; left: 50%; bottom: -56px; display: block; width: min(108vw, 480px); aspect-ratio: 1 / 1; translate: -50% 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 64%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 64%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  }
  .asser-ai-app .hf-film picture,
  .asser-ai-app .hf-film__img,
  .asser-ai-app .hf-film__vid { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  .asser-ai-app .hf-film__vid { opacity: 0; transition: opacity 0.9s ease; }
  .asser-ai-app .hf-film.is-playing .hf-film__vid { opacity: 1; }
}
@media (max-width: 560px) {
  .asser-ai-app .hf-scene--film .hf-film { bottom: -20px; }
}
/* gemma fotorealistica nella scena di riserva (21/10/2026) */
.asser-ai-app .hf-css__gem img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Esempio "Chieda ad Asserina" (21/10/2026, ritocco chiesto dal titolare): bottoni come nel riquadro vero della pratica
   (Domanda e Tabella affiancate, Rianalisi a tutta larghezza, prezzo a destra), monete piu' leggibili, etichetta
   "Esempio illustrativo" al centro (a destra la copriva il bottone della chat sul telefono). La "A" e' la gemma (tema.css). */
.asser-ai-app .hf-chat__av { width: 42px; height: 42px; }
.asser-ai-app .hf-chat__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.asser-ai-app .hf-chat__acts > span { justify-content: space-between; min-height: 40px; padding: 9px 12px; border-radius: 14px; background: #fff; }
.asser-ai-app .hf-chat__acts > .is-asser { grid-column: 1 / -1; background: linear-gradient(135deg, #c4515e, #b0424f 42%, #6d2f4a); }
.asser-ai-app .hf-chat__acts .ac-coin, .asser-ai-app .hf-chat__send .ac-coin { --ac: 1.5em; filter: drop-shadow(0 1px 2px rgba(75, 35, 56, 0.25)); }
.asser-ai-app .hf-chat__field { padding: 6px 6px 6px 18px; background: #fff; }
.asser-ai-app .hf-ask__vis .hm-eg { position: static; margin: 16px 0 0; text-align: center; color: rgba(75, 35, 56, 0.45); }

/* "ASSER AI legge" (21/10/2026): entrata a cascata e luce di lettura che passa da un documento all'altro (asser-ai-home-forte.js
   reads(); senza script o con "riduci movimento" i documenti restano fermi come prima) */
.asser-ai-app .hf-reads__list.is-reads li {
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease, border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
  transition-delay: calc(var(--ri, 0) * 75ms);
}
.asser-ai-app .hf-reads__list.is-reads.is-reads-in li { opacity: 1; transform: none; filter: none; }
.asser-ai-app .hf-reads__list.is-reads.is-reads-done li { transition-delay: 0s; }
.asser-ai-app .hf-reads__list.is-reads li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0) 64%);
  transform: translateX(-120%);
}
.asser-ai-app .hf-reads__list.is-reads.is-reads-in li.is-reading {
  transform: translateY(-3px) scale(1.035);
  border-color: rgba(255, 143, 191, 0.6); background-color: rgba(255, 120, 170, 0.13);
  box-shadow: 0 0 0 1px rgba(255, 143, 191, 0.25), 0 16px 38px rgba(201, 74, 124, 0.38);
}
.asser-ai-app .hf-reads__list.is-reads li.is-reading::after { animation: hf-read-sheen 1.15s ease-out both; }
.asser-ai-app .hf-reads__list.is-reads li.is-reading .hm-ic { animation: hf-read-ic 0.95s ease-out both; }
@keyframes hf-read-sheen { to { transform: translateX(120%); } }
@keyframes hf-read-ic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 122, 168, 0.65); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(255, 122, 168, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .asser-ai-app .hf-reads__list.is-reads li { opacity: 1; transform: none; filter: none; transition: none; }
  .asser-ai-app .hf-reads__list.is-reads li::after, .asser-ai-app .hf-reads__list.is-reads li .hm-ic { animation: none; }
}