html[data-audience="company"] [data-aud="private"],
html[data-audience="private"] [data-aud="company"] { display: none; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; background: var(--red); color: #fff; border-radius: 8px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

#chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 1.8vw, 26px) var(--gutter);
  pointer-events: none;
}
#chrome::before {
  content: ""; position: absolute; inset: 0 0 -60% 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 8, 14, .62), rgba(8, 8, 14, 0));
  pointer-events: none;
}
#chrome a, #chrome button { pointer-events: auto; }

.brand {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: clamp(.72rem, .85vw, .84rem);
  font-weight: 700; letter-spacing: .24em; text-decoration: none; color: var(--white);
}
.brand i {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px 2px rgba(255, 42, 26, .8);
}
/* Il logo in piccolo: lettere di metallo e X rossa che gira. A questa grandezza il cromo disegnato
   dal browser non si distingue da quello 3D, e questa scritta resta in scena per tutta la pagina. */
.top-logo {
  --top-chrome: linear-gradient(180deg, #fff 0%, #dfe3ea 38%, #6a707d 50%, #14161d 54%, #f1f3f7 66%, #9aa1ae 100%);
  --top-flash: linear-gradient(105deg, transparent 42%, #fff 50%, transparent 58%);
  display: inline-flex; align-items: center;
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 620; line-height: 1; letter-spacing: -.012em;
  text-decoration: none; white-space: nowrap;
}
.top-part {
  background-image: var(--top-flash), var(--top-chrome);
  background-size: 300% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: top-flash 6s ease-in-out infinite;
}
/* Sugli spigoli vicini alla X si specchia il suo rosso. */
.top-left { background-image: var(--top-flash), linear-gradient(90deg, transparent 72%, rgba(255, 43, 20, .32)), var(--top-chrome); background-size: 300% 100%, 100% 100%, 100% 100%; background-position: 130% 0, 0 0, 0 0; }
.top-right { background-image: var(--top-flash), linear-gradient(270deg, transparent 72%, rgba(255, 43, 20, .32)), var(--top-chrome); background-size: 300% 100%, 100% 100%, 100% 100%; background-position: 130% 0, 0 0, 0 0; }
@keyframes top-flash {
  0%, 72% { background-position-x: 130%, 0, 0; }
  100% { background-position-x: -30%, 0, 0; }
}
.top-x { position: relative; display: inline-block; width: .98em; height: .78em; perspective: 12em; }
.top-x-spin {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: top-x-turn 6s linear infinite;
}
@keyframes top-x-turn { to { transform: rotateY(360deg); } }
.top-x-spin b {
  position: absolute; left: 50%; top: 50%;
  width: 1.1em; height: .17em; margin: -.085em 0 0 -.55em;
  border-radius: .025em;
  background-image: linear-gradient(90deg, #a81709 0%, rgb(255, 43, 20) 24%, #ffdccc 50%, rgb(255, 43, 20) 76%, #a81709 100%);
  box-shadow: 0 0 .38em rgba(255, 43, 20, .85);
  transform: rotate(45deg);
  transform-style: preserve-3d;
}
.top-x-spin b + b { transform: rotate(-45deg); }
/* Lo spessore: di profilo la X non sparisce. */
.top-x-spin b::before, .top-x-spin b::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background-image: inherit;
  transform: translateZ(.05em);
}
.top-x-spin b::after { transform: translateZ(-.05em); }
.rm .top-part, .rm .top-x-spin { animation: none; }
.chrome-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.agency {
  font-size: clamp(.66rem, .78vw, .76rem);
  letter-spacing: .24em; color: var(--grey); font-weight: 600;
}
.langs { display: flex; gap: .7em; font-size: .76rem; font-weight: 600; letter-spacing: .12em; }
.langs a { text-decoration: none; color: var(--grey); padding: 6px 2px; transition: color .25s; }
.langs a:hover { color: var(--white); }
html[lang="it"] [data-lang-link="it"], html[lang="en"] [data-lang-link="en"] { color: var(--white); }
.chrome-cta {
  padding: .62em 1.1em; font-size: .82rem; font-weight: 600;
  border: 1px solid rgba(255, 42, 26, .7); border-radius: 8px;
  background: rgba(255, 42, 26, .08);
  box-shadow: 0 0 18px rgba(255, 42, 26, .22), inset 0 0 12px rgba(255, 42, 26, .1);
  transition: background .25s, box-shadow .25s, transform .2s;
}
.chrome-cta:hover { background: var(--red); box-shadow: 0 0 26px rgba(255, 42, 26, .6); }
.chrome-cta:active { transform: translateY(1px); }

:root {
  --ruler-ticks: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px 12px) bottom / 100% 10px no-repeat,
                 repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 60px) bottom / 100% 20px no-repeat;
}

#progress {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50;
  height: 22px; background: var(--ruler-ticks); pointer-events: none;
}
/* Le tacche passano sopra i finti siti: senza un fondo si confondono con le loro scritte. */
#progress::before {
  content: ""; position: absolute; z-index: -1; inset: -18px calc(var(--gutter) * -1) -40px;
  background: linear-gradient(to top, rgba(8, 8, 14, .82) 45%, rgba(8, 8, 14, 0));
}
#progress i {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 10px rgba(255, 42, 26, .8);
}
/* Il cursore è largo come il metro: così si sposta con un transform, senza ricalcolare la pagina. */
#progress b { position: absolute; inset: 0; }
#progress b::before {
  content: ""; position: absolute; left: -1px; bottom: -1px; width: 2px; height: 100%;
  background: var(--red); box-shadow: 0 0 10px rgba(255, 42, 26, .9);
}

/* Guida alla navigazione */
#guide {
  position: fixed; left: 50%; bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px)); z-index: 50;
  display: flex; align-items: center; gap: .6em;
  padding: .5em 1em; white-space: nowrap;
  font-size: clamp(.84rem, 1vw, .98rem); font-weight: 650;
  background: rgba(8, 8, 14, .78);
  border: 1px solid rgba(255, 42, 26, .5); border-radius: 2em;
  translate: -50% 0;
  font-family: inherit; line-height: inherit; cursor: pointer; appearance: none;
}
#guide.is-off { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
#guide span { color: var(--red); }
#guide i {
  width: .55em; height: .55em; margin-top: -.25em;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  rotate: 45deg;
  animation: guide-nudge 1.5s ease-in-out infinite;
}
@keyframes guide-nudge { 50% { transform: translate(.22em, .22em); } }

@media (max-width: 720px) {
  .agency { display: none; }
}
.rm #progress, .rm #guide, html:not(.js) #progress, html:not(.js) #guide { display: none; }