@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;900&display=swap");

:root{
  --red:#e60000;
  --black:#0b0b0d;
  --white:#fff;
  --max:1200px;
  --pad:22px;

  /* movimento icone */
  --floatJump: 26px;
  --floatZoom: 1.14;
}

/* RESET */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:Poppins,system-ui,Arial,sans-serif;
  background:#fff;
  color:#111;
}
a{ color:inherit; }

/* TOPBAR */
.topbar{
  position:fixed;
  top:0; left:0; width:100%;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px var(--pad);
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}

.logo{
  height:20px;
  width:auto;
  display:block;
}

.menu{ display:flex; gap:22px; }
.menu a{
  text-decoration:none;
  color:var(--white);
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:16px;
  padding:8px 0;
  position:relative;
}
.menu a.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:var(--red); border-radius:99px;
}

/* HERO */
.hero{
  position:relative;
  min-height:70vh;
  overflow:hidden;
  background:var(--black);
}
.heroVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: brightness(1.12) contrast(1.05);
}
.heroFallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:none;
}
body.no-video .heroFallback{ display:block; }
body.no-video .heroVideo{ display:none; }

.heroOverlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
}



.heroInner{
  position:relative; z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:260px var(--pad) 80px;
  color:#000;
}

.heroTitle{
  margin:0;
  font-size: clamp(24px, 3.4vw, 54px);
line-height: 1.05;

  font-weight:900;
  opacity:0;
  transform:translateX(-70px);
  animation:slideIn 1.1s ease-out .12s forwards;
}
@keyframes slideIn{ to{ opacity:1; transform:translateX(0); } }

/* ORB 3D (HERO) */
.orb3d{
  position:absolute;
  right: clamp(16px, 6vw, 90px);
  top: clamp(90px, 14vh, 150px);
  width: clamp(180px, 26vw, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events:none;
  z-index: 1;

  background:
    radial-gradient(closest-side at 32% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 72%),
    radial-gradient(closest-side at 60% 62%, rgba(230,0,0,.22) 0%, rgba(230,0,0,.08) 26%, rgba(230,0,0,0) 58%),
    radial-gradient(closest-side at 70% 78%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 36%, rgba(0,0,0,0) 64%),
    radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 70%);

  box-shadow:
    0 40px 90px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -18px 40px rgba(0,0,0,.22);

  filter: saturate(1.05);
  opacity: .95;

  animation: orbFloatHero 8s ease-in-out infinite;
}
.orb3d::before{
  content:"";
  position:absolute; inset: 10% 12% 12% 10%;
  border-radius:50%;
  background: radial-gradient(closest-side at 30% 28%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
  filter: blur(1px);
  opacity: .9;
}
.orb3d::after{
  content:"";
  position:absolute;
  left: 18%;
  top: 22%;
  width: 14%;
  aspect-ratio:1/1;
  border-radius:50%;
  background: rgba(230,0,0,.85);
  box-shadow: 0 10px 25px rgba(230,0,0,.25);
  animation: orbDot 6.5s ease-in-out infinite;
  opacity: .9;
}
@keyframes orbFloatHero{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(-10px, 10px, 0) rotate(6deg); }
}
@keyframes orbDot{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(22px, 34px, 0); }
}

/* INDICE (sotto video) */
.indice{
  position:relative;
  border-top:4px solid var(--red);
  padding:44px var(--pad) 70px;
  overflow:hidden;
  background:
    radial-gradient(closest-side at 65% 40%, rgba(230,0,0,.08), rgba(230,0,0,0) 60%),
    radial-gradient(closest-side at 60% 55%, rgba(0,0,0,.08), rgba(0,0,0,0) 62%),
    radial-gradient(closest-side at 72% 62%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    #f2f2f4;
}

/* sfumata nera in basso */
.indice::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:260px;
  background: linear-gradient(
    180deg,
    rgba(242,242,244,0) 0%,
    rgba(11,11,13,0.55) 55%,
    rgba(11,11,13,1) 100%
  );
  pointer-events:none;
  z-index:0;
}

/* layout 3 colonne */
.indiceInner{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;

  display:grid;
  grid-template-columns: 72px minmax(520px, 1fr) minmax(280px, 420px);
  gap:60px;
  align-items:start;
}

/* rail sinistro */
.leftRail{
  grid-column: 1;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-top: 6px;
}

.verticalName{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:900;
  letter-spacing:1.6px;
  font-size:14px;
  margin:0;
  padding-top: 8px;
  color: var(--red);
}

/* Icone social sotto, in verticale */
.leftSocial{
  margin-top: 2px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.leftSocial .sI{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.35);
  color: rgba(0,0,0,.70);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.leftSocial .sI:hover{
  transform: translateY(-1px);
  border-color: rgba(230,0,0,.35);
  color: rgba(230,0,0,.95);
  background: rgba(255,255,255,.55);
}
.sSvg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.sFill{
  fill: currentColor;
  stroke: none;
}

/* griglia servizi */
.servicesGrid{
  grid-column: 2;
  position:relative;
  display:grid;
  grid-template-columns: 260px 1fr;
  column-gap: 34px;
  row-gap: 26px;
  padding-top: 18px;
  z-index:1;
}

.svcName{
  text-decoration:none;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding-bottom: 10px;
  border-bottom:1px solid rgba(0,0,0,.18);
}

.svcInfo strong{
  display:block;
  font-weight:900;
  margin-bottom:6px;
}
.svcInfo span{
  display:block;
  color:rgba(0,0,0,.65);
  font-weight:500;
  line-height:1.4;
  max-width: 46ch;
}

/* blocco destro */
.indiceRight{
  grid-column: 3;
  position:relative;
  text-align:right;
  align-self:start;
  padding-top: 18px;
  z-index:1;
}

.indiceRight .rightBig{
  position:relative;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:clamp(18px, 2.2vw, 34px);
  color:rgba(0,0,0,.85);
  line-height:1.05;
}

.indiceRight .rightSmall{
  position:relative;
  margin-top:10px;
  font-weight:600;
  letter-spacing:1px;
  font-size:13px;
  color:rgba(0,0,0,.55);
}
.indiceRight .rightSmall::before{
  content:"";
  display:block;
  width:64px;
  height:3px;
  background:var(--red);
  margin:14px 0 0 auto;
  border-radius:99px;
}

/* =========================
   ICONE FLUTTUANTI (SOLO QUI)
   più sparse + SEO non tocca footer
   ========================= */

/* 1) icona nel “vuoto” centro↔destra */
.servicesGrid::before{
  content:"</>";
  position:absolute;
  right: -18px;
  top: 74px;
  width: 60px; height: 60px;
  display:grid; place-items:center;
  border:2px solid rgba(11,11,13,.10);
  border-radius: 18px;
  color: rgba(11,11,13,.20);
  font-weight: 900;
  pointer-events:none;
  z-index:0;
  animation: jumpSpinB 3.15s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 2) UX */
.indiceRight::before{
  content:"UX";
  position:absolute;
  right: 260px;
  top: 64px;
  width: 74px; height: 74px;
  border-radius: 999px;
  display:grid; place-items:center;
  border:2px solid rgba(230,0,0,.20);
  color: rgba(11,11,13,.24);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  animation: jumpSpinA 3.05s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 3) WP */
.indiceRight::after{
  content:"WP";
  position:absolute;
  right: 120px;
  top: 182px;
  width: 66px; height: 66px;
  border-radius: 999px;
  display:grid; place-items:center;
  border:2px solid rgba(230,0,0,.18);
  color: rgba(11,11,13,.22);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  animation: jumpSpinB 3.25s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 4) PC */
.indiceRight .rightBig::before{
  content:"PC";
  position:absolute;
  right: 210px;
  top: 152px;
  width: 72px; height: 72px;
  border-radius: 18px;
  display:grid; place-items:center;
  border:2px solid rgba(11,11,13,.10);
  color: rgba(11,11,13,.20);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  transform: rotate(-8deg);
  animation: jumpSpinC 3.05s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 5) SEO (spostata SU + un filo a sinistra) */
.indiceRight .rightBig::after{
  content:"SEO";
  position:absolute;
  right: 64px;
  top: 214px;
  width: 78px; height: 78px;
  border-radius: 22px;
  display:grid; place-items:center;
  border:2px solid rgba(11,11,13,.10);
  color: rgba(11,11,13,.20);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  transform: rotate(7deg);
  animation: jumpSpinD 3.35s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 6) {} */
.indiceRight .rightSmall::after{
  content:"{}";
  position:absolute;
  right: 300px;
  top: 152px;
  width: 54px; height: 54px;
  display:grid; place-items:center;
  border:2px solid rgba(11,11,13,.10);
  border-radius: 16px;
  color: rgba(11,11,13,.20);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  animation: jumpSpinC 2.9s cubic-bezier(.2,.9,.2,1) infinite;
}

/* 7) IT */
.indiceRight .rightSmall span{ position:relative; z-index:1; } /* solo sicurezza */
.indiceRight .rightSmall{
  position:relative;
}
.indiceRight .rightSmall i{ display:none; } /* se per caso hai tag strani */
.indiceRight .rightSmall em{ display:none; }
.indiceRight .rightSmall b{ font-weight:inherit; }

.indiceRight .rightSmall::marker{ content:""; }

.indiceRight .rightSmall{
  /* niente */
}
.indiceRight .rightSmall::before{
  /* la barretta rossa resta sopra, già definita */
}

.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall::before{
  /* ok */
}

/* IT come pseudo separato (non tocca altro testo) */
.indiceRight .rightSmall{
  /* niente */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

/* IT (cerchio piccolo) */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}

/* IT vero e proprio */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

/* IT (final) */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}

/* IT pseudo: */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}

/* IT posizionato */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

.indiceRight .rightSmall{
  /* ok */
}

/* IT (in alto a destra, riempie spazio senza allinearsi) */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

/* IT come pseudo aggiuntivo SENZA sovrascrivere barretta: uso outline su un secondo layer */
.indiceRight .rightSmall{
  /* ok */
}
.indiceRight .rightSmall{
  /* ok */
}

/* IT: uso un elemento fantasma con box-shadow via background? No: semplice, aggiungo un secondo pseudo via filter:
   --> soluzione pulita: IT lo faccio con un ulteriore pseudo su .indiceRight usando box-shadow? NO.
   Quindi: IT lo metto su .indiceRight usando un "drop" che NON collide con UX/WP: uso un altro selettore reale: .indiceRight .rightSmall em? No.
   Visto che non vogliamo toccare HTML, uso un SOLO IT: lo metto su servicesGrid (zona centro-destra) invece. */

/* IT (cerchio) spostato nel vuoto vicino </> per non interferire con la barretta rossa */
.servicesGrid::after{
  content:"IT";
  position:absolute;
  right: -92px;
  top: 190px;
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border:2px solid rgba(230,0,0,.14);
  border-radius: 999px;
  color: rgba(11,11,13,.20);
  font-weight:900;
  pointer-events:none;
  z-index:0;
  animation: jumpSpinA 2.8s cubic-bezier(.2,.9,.2,1) infinite;
}

/* ANIMAZIONI (1 transform per elemento = niente conflitti) */
@keyframes jumpSpinA{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  30%    { transform: translateY(calc(var(--floatJump) * -1)) rotate(10deg) scale(var(--floatZoom)); }
  60%    { transform: translateY(calc(var(--floatJump) * .55)) rotate(-8deg) scale(.98); }
}
@keyframes jumpSpinB{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  35%    { transform: translateY(calc(var(--floatJump) * .85)) rotate(-14deg) scale(var(--floatZoom)); }
  70%    { transform: translateY(calc(var(--floatJump) * -0.65)) rotate(9deg) scale(.99); }
}
@keyframes jumpSpinC{
  0%,100%{ transform: translateY(0) rotate(-8deg) scale(1); }
  40%    { transform: translateY(calc(var(--floatJump) * -0.85)) rotate(6deg) scale(var(--floatZoom)); }
  75%    { transform: translateY(calc(var(--floatJump) * .55)) rotate(-10deg) scale(.98); }
}
@keyframes jumpSpinD{
  0%,100%{ transform: translateY(0) rotate(7deg) scale(1); }
  35%    { transform: translateY(var(--floatJump)) rotate(-10deg) scale(calc(var(--floatZoom) + .04)); }
  70%    { transform: translateY(calc(var(--floatJump) * -0.55)) rotate(12deg) scale(.99); }
}

/* FOOTER */
.footer{
  background:var(--black);
  color:var(--white);
  padding:40px var(--pad) 20px;
}
.footerInner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:22px;
}
.footerBrand{ font-weight:900; letter-spacing:1px; }
.footerSmall{ margin-top:8px; color:rgba(255,255,255,.75); font-size:14px; }
.footerTitle{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:13px;
  margin-bottom:10px;
  color:rgba(255,255,255,.85);
}
.footerLink{
  display:block;
  margin:8px 0;
  text-decoration:none;
  color:rgba(255,255,255,.85);
}
.footerBottom{
  max-width:var(--max);
  margin:20px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.70);
  font-size:13px;
}

/* BOTÃO FIXO */
.floatingHelp{
  position:fixed;
  right:18px; bottom:18px;
  z-index:999;
  background:var(--red);
  color:var(--white);
  text-decoration:none;
  font-weight:900;
  padding:12px 14px;
  border-radius:16px;
}

/* MENU MOBILE TOGGLE */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--white);
  font-size:28px;
  font-weight:900;
  cursor:pointer;
  padding:6px 10px;
}

/* MOBILE */
@media (max-width: 900px){
  .menu a{ font-size:14px; }
  .heroInner{ padding-top:130px; }

  .nav-toggle{ display:block; }

  .menu{
    display:none;
    flex-direction:column;
    gap:18px;
    background:rgba(0,0,0,.92);
    position:absolute;
    top:56px;
    right:var(--pad);
    padding:18px 16px;
    border-radius:12px;
  }
  .menu.is-open{ display:flex; }

  /* indice in colonna */
  .indiceInner{ display:block; }
  .leftRail{
    width:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-top:0;
  }
  .verticalName{
    writing-mode:horizontal-tb;
    transform:none;
    margin:0 0 10px;
  }
  .leftSocial{
    flex-direction: row;
    justify-content:flex-start;
    margin-top: 0;
    gap: 10px;
  }

  .servicesGrid{ grid-template-columns: 1fr; }
  .indiceRight{ display:none; }

  /* orb hero off su mobile */
  .orb3d{ display:none; }

  /* icone extra (pseudo) meglio spegnerle su mobile */
  .servicesGrid::before,
  .servicesGrid::after{
    display:none;
    content:none;
  }
}
/* =========================
   ICON POP/BOOM + RIEMPI SPAZIO
   (incolla in FONDO al CSS)
   ========================= */

/* base comune (non rompe layout) */
.indiceInner, .servicesGrid, .indiceRight { position: relative; }
.indiceRight::before,
.indiceRight::after,
.indiceRight .rightBig::before,
.indiceRight .rightBig::after,
.indiceRight .rightSmall::before,
.indiceRight .rightSmall::after,
.servicesGrid::before,
.servicesGrid::after,
.indiceInner::before,
.indiceInner::after{
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .55;
  filter: blur(0px);
}

/* ============ POSIZIONI (più “piene”) ============ */
/* UX (più in alto, più centrale) */
.indiceRight::before{
  right: 265px !important;
  top: 52px !important;
}
/* WP (un po’ più a destra e su) */
.indiceRight::after{
  right: 10px !important;
  top: 172px !important;
}
/* PC (più centrale) */
.indiceRight .rightBig::before{
  right: 210px !important;
  top: 222px !important;
}
/* SEO (SU + un filo a sinistra: NON tocca più il footer) */
.indiceRight .rightBig::after{
  right: 78px !important;
  top: 222px !important;
}
/* {} (più in basso, verso il centro) */
.indiceRight .rightSmall::before{
  right: 250px !important;
  top: 40px !important;
}
/* IT (più a sinistra nel “vuoto”) */
.indiceRight .rightSmall::after{
  right: 330px !important;
  top: 100px !important;
}
/* </> nel vuoto centro↔destra */
.servicesGrid::before{
  right: -330px !important;
  top: 148px !important;
}
/* seconda iconcina nel vuoto (aggiunge “peso” visivo) */
.servicesGrid::after{
  content: "DEV" !important;
  position: absolute !important;
  right: -92px !important;
  top: 185px !important;
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(11,11,13,.10) !important;
  border-radius: 16px !important;
  color: rgba(11,11,13,.20) !important;
  font-weight: 900 !important;
}

/* 2 extra “ghost icons” (riempiono lo spazio ma restano leggere) */
.indiceInner::before{
  content:"UI" !important;
  position:absolute !important;
  right: 220px !important;
  top: 180px !important;
  width: 150px !important;
  height: 150px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid rgba(230,0,0,.12) !important;
  border-radius:999px !important;
  color: rgba(11,11,13,.18) !important;
  font-weight: 900 !important;
  opacity: .45 !important;
}
.indiceInner::after{
  content:"</>" !important;
  position:absolute !important;
  right: 120px !important;
  top: 100px !important;
  width: 44px !important;
  height: 44px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid rgba(11,11,13,.10) !important;
  border-radius: 14px !important;
  color: rgba(11,11,13,.18) !important;
  font-weight: 900 !important;
  opacity: .45 !important;
  transform: rotate(8deg);
}

/* ============ EFFETTO “PICCOLA → BOOM → PICCOLA” ============ */
/* controlli rapidi */
:root{
  --mini: .72;     /* quanto piccole stanno “a riposo” */
  --boom: 2.2;    /* quanto “boom” fanno */
  --jump: 28px;    /* quanto saltano */
}

/* assegna animazioni diverse (così non “boommano” tutte insieme) */
.indiceRight::before{                 animation: popBoomA 5.8s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceRight::after{                  animation: popBoomB 6.2s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceRight .rightBig::before{       animation: popBoomC 6.0s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceRight .rightBig::after{        animation: popBoomD 6.4s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceRight .rightSmall::before{     animation: popBoomE 5.6s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceRight .rightSmall::after{      animation: popBoomF 6.1s cubic-bezier(.2,.9,.2,1) infinite !important; }
.servicesGrid::before{                animation: popBoomG 5.9s cubic-bezier(.2,.9,.2,1) infinite !important; }
.servicesGrid::after{                 animation: popBoomH 6.3s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceInner::before{                 animation: popBoomI 6.8s cubic-bezier(.2,.9,.2,1) infinite !important; }
.indiceInner::after{                  animation: popBoomJ 7.1s cubic-bezier(.2,.9,.2,1) infinite !important; }

/* Keyframes: 0-20% mini, poi float, poi BOOM, poi settle */
@keyframes popBoomA{
  0%,100%{ transform: translate(0,0) scale(var(--mini)) rotate(0deg); }
  25%    { transform: translate(0, calc(var(--jump) * -1)) scale(.92) rotate(6deg); }
  55%    { transform: translate(8px, calc(var(--jump) * .55)) scale(.95) rotate(-6deg); }
  68%    { transform: translate(-6px, -4px) scale(var(--boom)) rotate(12deg); }
  82%    { transform: translate(0,0) scale(.96) rotate(-4deg); }
}
@keyframes popBoomB{
  0%,100%{ transform: translate(0,0) scale(var(--mini)) rotate(0deg); }
  28%    { transform: translate(6px, calc(var(--jump) * .8)) scale(.9) rotate(-10deg); }
  58%    { transform: translate(-6px, calc(var(--jump) * -0.6)) scale(.96) rotate(8deg); }
  72%    { transform: translate(2px, 0) scale(calc(var(--boom) + .06)) rotate(-14deg); }
  86%    { transform: translate(0,0) scale(.97) rotate(4deg); }
}
@keyframes popBoomC{
  0%,100%{ transform: translate(0,0) scale(var(--mini)) rotate(-8deg); }
  30%    { transform: translate(0, calc(var(--jump) * -1)) scale(.9) rotate(6deg); }
  60%    { transform: translate(10px, calc(var(--jump) * .55)) scale(.96) rotate(-10deg); }
  74%    { transform: translate(-4px, -2px) scale(var(--boom)) rotate(10deg); }
  88%    { transform: translate(0,0) scale(.97) rotate(-8deg); }
}
@keyframes popBoomD{
  0%,100%{ transform: translate(0,0) scale(var(--mini)) rotate(7deg); }
  26%    { transform: translate(6px, var(--jump)) scale(.9) rotate(-10deg); }
  58%    { transform: translate(-6px, calc(var(--jump) * -0.55)) scale(.96) rotate(12deg); }
  70%    { transform: translate(0, -2px) scale(calc(var(--boom) + .08)) rotate(-12deg); }
  86%    { transform: translate(0,0) scale(.97) rotate(7deg); }
}
@keyframes popBoomE{
  0%,100%{ transform: translate(0,0) scale(.68) rotate(0deg); }
  35%    { transform: translate(4px, calc(var(--jump) * -0.7)) scale(.9) rotate(10deg); }
  62%    { transform: translate(-4px, 8px) scale(.95) rotate(-8deg); }
  76%    { transform: translate(0, -2px) scale(1.24) rotate(12deg); }
  90%    { transform: translate(0,0) scale(.92) rotate(0deg); }
}
@keyframes popBoomF{
  0%,100%{ transform: translate(0,0) scale(.68) rotate(0deg); }
  32%    { transform: translate(-4px, 10px) scale(.9) rotate(-12deg); }
  60%    { transform: translate(6px, calc(var(--jump) * -0.55)) scale(.95) rotate(10deg); }
  74%    { transform: translate(0, 0) scale(1.22) rotate(-10deg); }
  90%    { transform: translate(0,0) scale(.92) rotate(0deg); }
}
@keyframes popBoomG{
  0%,100%{ transform: translate(0,0) scale(.7) rotate(10deg); }
  28%    { transform: translate(0, calc(var(--jump) * -0.8)) scale(.92) rotate(2deg); }
  62%    { transform: translate(8px, 10px) scale(.95) rotate(-6deg); }
  76%    { transform: translate(-2px, -2px) scale(1.26) rotate(14deg); }
  90%    { transform: translate(0,0) scale(.92) rotate(10deg); }
}
@keyframes popBoomH{
  0%,100%{ transform: translate(0,0) scale(.68) rotate(-6deg); }
  34%    { transform: translate(6px, 10px) scale(.9) rotate(8deg); }
  62%    { transform: translate(-6px, calc(var(--jump) * -0.55)) scale(.95) rotate(-8deg); }
  74%    { transform: translate(0, 0) scale(1.24) rotate(10deg); }
  90%    { transform: translate(0,0) scale(.92) rotate(-6deg); }
}
@keyframes popBoomI{
  0%,100%{ transform: translate(0,0) scale(.66) rotate(0deg); }
  40%{ transform: translate(8px, -10px) scale(.9)
}
/* ===== Floating Help: versione “bolla” elegante ===== */
.floatingHelp{
  position: fixed;
  left: 0; top: 0;                 /* verrà mosso da JS */
  width: 58px;
  height: 58px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(230, 0, 0, 0.14); /* rosso trasparente */
  border: 1px solid rgba(230, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: rgba(230, 0, 0, 0.95);
  font-weight: 900;
  text-decoration: none;

  box-shadow:
    0 14px 40px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) translate(-50%, -50%);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  z-index: 9999;
}

/* se vuoi tenere il testo lungo, lo stringiamo */
.floatingHelp{
  font-size: 12px;
  letter-spacing: .3px;
  padding: 0;
}
.floatingHelp:hover{
  background: rgba(230, 0, 0, 0.22);
  border-color: rgba(230, 0, 0, 0.40);
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) translate(-50%, -50%) scale(1.08);
}

/* Mobile: resta fisso in basso a destra (niente follower) */
@media (max-width: 900px){
  .floatingHelp{
    left: auto;
    top: auto;
    right: 16px;
    bottom: 16px;
    transform: none;
  }
}