body {
  background-image: radial-gradient(circle, var(--color-layer) 1px, transparent 1px);
  background-size: 50px 50px;
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  background-image: radial-gradient(circle, var(--color-cta) 1px, transparent 1px);
  background-size: 50px 50px;
}

.background {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.2;
}

.floatingCard {
  position: absolute;
  width: 80px;
  height: 120px;
  border-radius: 6px;
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 5px var(--color-primary);
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}

#card1 {
  top: 15%;
  left: 10%;
  transform: rotate(10deg);
  background-image: url(./../img/bg1.jpeg);
}
#card2 {
  top: 75%;
  right: 10%;
  transform: rotate(-20deg);
  background-image: url(./../img/bg2.jpeg);
}
#card3 {
  top: 60%;
  left: 45%;
  transform: rotate(5deg);
  background-image: url(./../img/bg3.jpeg);
}
#card4 {
  top: 5%;
  right: 40%;
  transform: rotate(-15deg);
  background-image: url(./../img/bg4.jpeg);
}
#card5 {
  top: 40%;
  left: 18%;
  transform: rotate(25deg);
  background-image: url(./../img/bg5.jpeg);
}
#card6 {
  top: 85%;
  left: 5%;
  transform: rotate(-5deg);
  background-image: url(./../img/bg6.jpeg);
}
#card7 {
  top: 10%;
  right: 15%;
  transform: rotate(0deg);
  background-image: url(./../img/bg7.jpeg);
}
#card8 {
  top: 30%;
  left: 70%;
  transform: rotate(-70deg);
  background-image: url(./../img/bg8.jpeg);
}

@media (max-width: 767.98px) {
  header h1 {
    font-size: 30px;
    margin-inline: 15px 20px;
  }

  header .name {
    flex-direction: row-reverse;
  }

  header.v4 .h100 {
    justify-content: space-between;
  }

  header.v4 .name {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
  }

  header.v4 nav {
    position: fixed;
    width: 100%;
    height: 100vh;
    inset: 0;
    left: unset;
    right: 0;
    gap: 20px;
    z-index: 95;
    box-shadow: -10px 0 10px #0000004d;
    background-color: var(--color-bg);
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
    overscroll-behavior: contain;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header.v4 .sidebarToggle {
    width: 30px;
    height: 22.5px;
  }

  header.v4 .sidebarToggle div {
    height: 4px;
    border-radius: 2px;
  }

  header.v4.open nav {
    transform: translateX(0);
  }

  header.v4 nav ul {
    width: 100%;
    flex-direction: column;
    font-size: 1.3rem;
    gap: 15px;
    padding: 0 30px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  header.v4 nav ul::-webkit-scrollbar {
    display: none;
  }

  header .close {
    font-size: 40px;
    top: 30px;
    right: 30px;
  }

  header .scannerLine {
    margin-block: 0 !important;
  }
}

@media (min-width: 768px) {
  header.v4 .sidebarToggle {
    display: none;
  }

  header.v4 nav {
    all: unset;
    display: block !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  header .close {
    display: none;
  }

  header .scannerLine {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  header h1 {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  header {
    display: flex;
    justify-content: center;
  }

  header > .h100 {
    padding-inline: 20px !important;
  }

  header img {
    margin-inline: 0 10px !important;
  }

  header ul {
    gap: 14px;
  }
}

@media (max-width: 991.98px) {
  header.v4 > .bt {
    padding-inline: 10px;
  }

  header ul {
    gap: 8px;
  }

  header img {
    margin-right: 1px !important;
  }
}

header li > * {
  color: var(--color-primary);
  position: relative;
  padding: 5px 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

header li > *::before,
header li > *::after {
  content: "";
  position: absolute;
  bottom: 3px;
  height: 1px;
  background-color: var(--color-cta);
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 2px currentColor;
}

header li > *::before {
  left: 50%;
  width: 0;
  transform-origin: center;
}

header li > *::after {
  right: 50%;
  width: 0;
  transform-origin: center;
}

header li > *:hover::before,
header li > *:hover::after {
  opacity: 1;
  width: 50%;
  transition:
    width 0.4s ease-out,
    opacity 0.3s ease;
}

header li > *:hover {
  color: var(--color-cta);
}

h1 {
  font-family: "Orbitron", sans-serif;
}

h1,
.navItem,
header .loginBtn,
.go,
.skill span,
.reviews span,
.reviews i,
.rating i {
  text-shadow: 0 0 1.8px currentColor;
}

#loginPage > .body {
  padding: 20px;
  padding-bottom: 0;
}

.switcher {
  height: 50px;
  margin-bottom: 20px;
}

.switcher button {
  height: 100%;
  z-index: 2;
  background: none;
  border: none;
  color: var(--color-text);
  transition: color 0.3s ease-in-out;
}

.switcher button:focus {
  color: var(--color-cta);
}

.switcher button.active {
  color: var(--color-bg);
}

.switcher .slide {
  position: absolute;
  inset: 0;
  width: 50%;
  background-color: var(--color-primary) !important;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
}

#loginPage .content {
  transition: transform 0.3s ease-in-out;
}

#loginPage h3 {
  margin-bottom: 10px;
}

#loginPage .form {
  min-width: 100%;
  padding: 0 30px;
  gap: 10px;
}

@media (max-width: 767.98px) {
  #loginPage > .body {
    padding-inline: 10px;
  }

  #loginPage .form {
    padding-inline: 20px;
  }
}

#loginPage .form .body {
  width: unset;
  padding: 15px;
  padding-bottom: 30px;
  margin-top: 0;
}

#loginPage .input {
  padding: 10px;
}

#loginPage .note {
  font-size: 14px;
  line-height: 1.1;
}

.item.checkbox {
  cursor: pointer;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
}

.item.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.item.checkbox i {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  margin-right: 10px;
  transition: none;
  font-size: 20px;
  color: transparent;
}

.item.checkbox i::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.item.checkbox input:checked ~ i {
  color: var(--color-cta);
}

.item.checkbox input:focus ~ i {
  border-color: var(--color-cta);
}

#useTerms {
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: 80px 50px !important;
  overflow: scroll;
  z-index: 50;
  z-index: 100;
}

#useTerms h2 {
  color: var(--color-primary) !important;
  padding-inline: 60px;
  margin-bottom: 30px;
}

#useTerms h3 {
  font-size: 30px !important;
  margin-bottom: 8px !important;
}

#useTerms p {
  margin-bottom: 25px;
}

@media (max-width: 767.98px) {
  #useTerms h2 {
    margin-bottom: 15px;
  }
}

#useTerms i {
  color: var(--color-primary) !important;
}

@media (max-width: 1199.98px) {
  #useTerms {
    padding-inline: 80px !important;
  }
}

@media (max-width: 991.98px) {
  #useTerms {
    padding-inline: 50px !important;
  }
}

@media (max-width: 767.98px) {
  #useTerms {
    padding-inline: 30px !important;
  }
}

.hero {
  height: unset !important;
  padding-top: 90px !important;
}

@media (min-width: 768px) {
  .hero img.pc {
    display: block !important;
  }

  .hero img.smartphone {
    display: none;
  }
}

.features .flex-col:hover,
.info.v2 .card:hover {
  box-shadow: 0 0 6px 2px var(--color-primary);
}

.counter .number {
  font-family: "Orbitron", sans-serif;
  font-size: 80px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .jumbotron {
    padding: 30px;
  }

  .jumbotron h2,
  .faq h2 {
    font-size: 38px;
  }

  .logoclouds h2 {
    font-size: 30px !important;
  }
}

.intro.v2.parallax {
  height: 45vh;
}

.pricing h2 {
  margin-bottom: 50px !important;
}

.pricing .highlighted {
  scale: 1;
  box-shadow: 0 0 6px 2px var(--color-primary);
}

.pricing .badge {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 1px var(--color-primary);
}

.pricing h3 {
  font-size: 1.6rem;
  margin-bottom: 5px;
}

.pricing ul {
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .pricing {
    margin-block: 80px !important;
  }

  .pricing .highlighted {
    scale: 1;
  }

  .pricing .plan {
    min-height: auto;
    padding-block: 10px;
    gap: 0;
  }

  .pricing .planHeader {
    background: none;
    border: none;
    text-align: left;
    padding: 30px 20px 0;
    cursor: pointer;
    width: 100%;
    gap: 5px;
  }

  .pricing .planBody {
    height: 0;
    padding: 10px;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
  }

  .pricing .planHeader::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
  }

  .pricing .plan.selected .planHeader::after {
    transform: rotate(180deg);
  }

  .pricing .planHeader h3,
  .pricing .planHeader em {
    margin: 0;
  }
}

@media (min-width: 1200px) {
  .pricing .col {
    margin-bottom: 20px;
  }

  .pricing .highlighted {
    scale: 1.1;
  }
}

#Contatti {
  padding-top: 50px;
}

/* ^ Glitch effect */
.glitch .title {
  margin: 0 0 10px;
  line-height: 90%;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
}

.glitch .title::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -2px;
  width: 100%;
  height: 100%;
  text-shadow: 2px 0 #a10897;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noiseAnim2 1.5s linear infinite alternate-reverse;
  z-index: 1;
}

.glitch .title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 2px;
  width: 100%;
  height: 100%;
  text-shadow: -2px 0 #05d003;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noiseAnim 1.2s linear infinite alternate-reverse;
  z-index: 3;
}

@keyframes noiseAnim {
  0% {
    clip: rect(83px, 9999px, 81px, 0);
  }
  5% {
    clip: rect(5px, 9999px, 97px, 0);
  }
  10% {
    clip: rect(68px, 9999px, 11px, 0);
  }
  15.0% {
    clip: rect(76px, 9999px, 81px, 0);
  }
  20% {
    clip: rect(66px, 9999px, 65px, 0);
  }
  25% {
    clip: rect(21px, 9999px, 74px, 0);
  }
  30.0% {
    clip: rect(11px, 9999px, 85px, 0);
  }
  35% {
    clip: rect(14px, 9999px, 37px, 0);
  }
  40% {
    clip: rect(77px, 9999px, 94px, 0);
  }
  45% {
    clip: rect(52px, 9999px, 44px, 0);
  }
  50% {
    clip: rect(71px, 9999px, 52px, 0);
  }
  55.0% {
    clip: rect(91px, 9999px, 100px, 0);
  }
  60.0% {
    clip: rect(86px, 9999px, 12px, 0);
  }
  65% {
    clip: rect(33px, 9999px, 58px, 0);
  }
  70% {
    clip: rect(28px, 9999px, 90px, 0);
  }
  75% {
    clip: rect(82px, 9999px, 84px, 0);
  }
  80% {
    clip: rect(59px, 9999px, 82px, 0);
  }
  85.0% {
    clip: rect(41px, 9999px, 61px, 0);
  }
  90% {
    clip: rect(21px, 9999px, 19px, 0);
  }
  95% {
    clip: rect(33px, 9999px, 58px, 0);
  }
  100% {
    clip: rect(89px, 9999px, 31px, 0);
  }
}

@keyframes noiseAnim2 {
  0% {
    clip: rect(34px, 9999px, 43px, 0);
  }
  5% {
    clip: rect(63px, 9999px, 58px, 0);
  }
  10% {
    clip: rect(21px, 9999px, 56px, 0);
  }
  15.0% {
    clip: rect(52px, 9999px, 57px, 0);
  }
  20% {
    clip: rect(85px, 9999px, 2px, 0);
  }
  25% {
    clip: rect(47px, 9999px, 91px, 0);
  }
  30.0% {
    clip: rect(83px, 9999px, 8px, 0);
  }
  35% {
    clip: rect(23px, 9999px, 30px, 0);
  }
  40% {
    clip: rect(79px, 9999px, 46px, 0);
  }
  45% {
    clip: rect(5px, 9999px, 98px, 0);
  }
  50% {
    clip: rect(56px, 9999px, 16px, 0);
  }
  55.0% {
    clip: rect(40px, 9999px, 76px, 0);
  }
  60.0% {
    clip: rect(87px, 9999px, 9px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 5px, 0);
  }
  70% {
    clip: rect(70px, 9999px, 7px, 0);
  }
  75% {
    clip: rect(16px, 9999px, 92px, 0);
  }
  80% {
    clip: rect(50px, 9999px, 1px, 0);
  }
  85.0% {
    clip: rect(19px, 9999px, 1px, 0);
  }
  90% {
    clip: rect(34px, 9999px, 13px, 0);
  }
  95% {
    clip: rect(93px, 9999px, 9px, 0);
  }
  100% {
    clip: rect(25px, 9999px, 18px, 0);
  }
}

.faq h2.title {
  padding-inline: 0;
}

hr {
  box-shadow:
    inset 0 0 5px rgba(234, 188, 82, 0.8),
    0 0 10px var(--color-primary),
    0 0 20px rgba(234, 188, 82, 0.4);
}

.prev .fas,
.next .fas,
.close .fas {
  text-shadow:
    0 0 5px var(--color-primary),
    0 0 15px var(--color-primary),
    0 0 30px var(--color-primary);
}

.chatbot .fas {
  text-shadow: none;
}

.scannerLine {
  width: 90%;
  height: 2px !important;
  position: relative;
  background-color: var(--color-layer);
  margin-block: 20px !important;
}

.scannerLine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-cta), transparent);
  animation: scanAnimation 4s infinite linear;
}

@keyframes scanAnimation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

.cta {
  font-family: "Orbitron", sans-serif;
  animation: ctaGlow 2s infinite alternate;
}

.cta.invert {
  animation: none;
}

@keyframes ctaGlow {
  0% {
    box-shadow:
      0 0 5px var(--color-cta),
      0 0 10px var(--color-cta);
  }
  100% {
    box-shadow:
      0 0 10px var(--color-cta),
      0 0 20px var(--color-cta),
      0 0 30px var(--color-cta);
  }
}

.articles.v1 img {
  z-index: 0;
}

@keyframes digitalSpark {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
    opacity: 0.8;
  }
}

.fa-lock.animate {
  animation: lock 1.2s ease-out forwards;
  transform-origin: top center;
}

@keyframes lock {
  0% {
    transform: translateY(-40px) rotateX(90deg) scale(0.6);
    opacity: 0;
  }
  60% {
    transform: translateY(0) rotateX(0) scale(1.05); /* Lieve overshoot */
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.fa-key.animate {
  animation: key 1.1s ease-out forwards; /* Cambiato timing e easing */
  transform-origin: 50% 50%;
}

@keyframes key {
  0% {
    transform: scale(0.5) rotate(-90deg); /* Meno rotazione iniziale */
    opacity: 0;
  }
  60% {
    transform: scale(1.05) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.gradient-stage {
  width: 100%;
  height: 100%;
  position: relative;
}

.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
}

#three-container {
  width: 100%;
  height: 100%;
}

#three-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: auto;
}

.viewer-layout {
  position: relative;
  height: 60vh;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  cursor: grab;
}

.viewer-layout:active {
  cursor: grabbing;
}

.viewer-container {
  height: 100%;
  position: relative;
}

.gradient-stage {
  height: 100%;
  position: relative;
}

@media (min-width: 768px) {
  .viewer-layout {
    height: 85vh;
    aspect-ratio: 2/3;
    margin-left: auto;
  }
}

canvas {
  scale: 2.2;
}

.hero .body {
  z-index: 10;
}

.marquee .flex-center {
  width: 400px;
}

.logoclouds img {
  filter: brightness(10) !important;
  scale: 0.9 !important;
}

.marquee.animating .content {
  animation-duration: 40s;
}