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 {
    max-width: unset;
    padding-inline: 0
}

.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;
}

.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 .highlighted {
        scale: 1.1;
    }
}

/* ^ 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;
}

.viewer-layout .controls {
    position: absolute;
    bottom: -15px;
    z-index: 10;
    gap: 10px;
}

.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;
}