* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #000;
    height: 100%;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #000;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-attachment: fixed;
}

/* Forzatura background nero su tutti i browser mobili */
html, body {
    background: #000 !important;
    background-color: #000 !important;
}

/* Specifico per il supporto theme-color */
:root {
    color-scheme: dark;
    --theme-color: #000000;
}

/* Fix per la status bar su mobile */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --theme-color: #000000;
    }
}

/* Forza address bar nera su tutti i browser */
html {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Supporto specifico per Safari mobile */
@supports (-webkit-appearance: none) {
    html, body {
        background: #000000 !important;
        background-color: #000000 !important;
    }
}

/* Supporto per viewport dinamico */
@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* Assicura che il background nero si estenda al browser bar mobile */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
        background: #000000 !important;
        background-color: #000000 !important;
    }
}

/* Specifico per dispositivi con notch */
@supports (padding: max(0px)) {
    body {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        background: #000 !important;
    }
}

/* Forza il background nero per tutti i mobile browsers */
@media screen and (max-width: 768px) {
    html, body {
        background-color: #000 !important;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    /* Fix per iOS Safari status bar */
    body {
        padding-top: env(safe-area-inset-top);
        background: linear-gradient(to bottom, #000 0%, #000 100%) !important;
    }
    
    /* Assicura che l'area della status bar sia nera */
    body::before {
        content: '';
        position: fixed;
        top: -20px;
        left: 0;
        width: 100%;
        height: 40px;
        background-color: #000;
        z-index: -1;
    }
}

/* CSS specifico per Chrome mobile */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    html {
        background-color: #000 !important;
    }
}

/* Effetto particelle animate di sfondo */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    contain: layout style paint;
    will-change: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #5263ff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 6px rgba(82, 99, 255, 0.6);
    will-change: transform, opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style paint;
    background: radial-gradient(circle, #5263ff 0%, #5263ff 70%, transparent 100%);
}

/* Particelle iniziali veloci - un solo ciclo */
.particle.fast-initial {
    animation: fastFloat 3s ease-in-out forwards;
    -webkit-animation: fastFloat 3s ease-in-out forwards;
}

/* Particelle continue lente - ESATTAMENTE come le veloci, partono automaticamente */
.particle.slow-continuous {
    animation: slowFloat 8s infinite ease-in-out;
    -webkit-animation: slowFloat 8s infinite ease-in-out;
    /* Nessun animation-play-state: paused - partono subito come le veloci */
}

/* Manteniamo per compatibilità ma non necessario */
.particle.slow-continuous.active {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

/* Fallback per compatibilità */
.particle.slow-continuous[style*="running"] {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

/* Posizionamento particelle veloci iniziali */
.particle.fast-initial:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; -webkit-animation-delay: 0s; }
.particle.fast-initial:nth-child(2) { left: 22%; top: 60%; animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
.particle.fast-initial:nth-child(3) { left: 38%; top: 30%; animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
.particle.fast-initial:nth-child(4) { left: 52%; top: 70%; animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
.particle.fast-initial:nth-child(5) { left: 68%; top: 15%; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.particle.fast-initial:nth-child(6) { left: 82%; top: 50%; animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
.particle.fast-initial:nth-child(7) { left: 15%; top: 80%; animation-delay: 0.03s; -webkit-animation-delay: 0.03s; }
.particle.fast-initial:nth-child(8) { left: 45%; top: 10%; animation-delay: 0.08s; -webkit-animation-delay: 0.08s; }
.particle.fast-initial:nth-child(9) { left: 75%; top: 75%; animation-delay: 0.13s; -webkit-animation-delay: 0.13s; }
.particle.fast-initial:nth-child(10) { left: 92%; top: 35%; animation-delay: 0.18s; -webkit-animation-delay: 0.18s; }
.particle.fast-initial:nth-child(11) { left: 12%; top: 45%; animation-delay: 0.23s; -webkit-animation-delay: 0.23s; }
.particle.fast-initial:nth-child(12) { left: 28%; top: 85%; animation-delay: 0.28s; -webkit-animation-delay: 0.28s; }

/* Posizionamento particelle lente continue - scaglionate ogni 1s per flusso continuo */
.particle.slow-continuous:nth-child(13) { left: 18%; top: 35%; animation-delay: 0s; -webkit-animation-delay: 0s; }
.particle.slow-continuous:nth-child(14) { left: 42%; top: 55%; animation-delay: 1s; -webkit-animation-delay: 1s; }
.particle.slow-continuous:nth-child(15) { left: 65%; top: 25%; animation-delay: 2s; -webkit-animation-delay: 2s; }
.particle.slow-continuous:nth-child(16) { left: 85%; top: 70%; animation-delay: 3s; -webkit-animation-delay: 3s; }
.particle.slow-continuous:nth-child(17) { left: 25%; top: 15%; animation-delay: 4s; -webkit-animation-delay: 4s; }
.particle.slow-continuous:nth-child(18) { left: 55%; top: 80%; animation-delay: 5s; -webkit-animation-delay: 5s; }
.particle.slow-continuous:nth-child(19) { left: 75%; top: 40%; animation-delay: 6s; -webkit-animation-delay: 6s; }
.particle.slow-continuous:nth-child(20) { left: 35%; top: 65%; animation-delay: 7s; -webkit-animation-delay: 7s; }
.particle.slow-continuous:nth-child(21) { left: 12%; top: 50%; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.particle.slow-continuous:nth-child(22) { left: 48%; top: 20%; animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.particle.slow-continuous:nth-child(23) { left: 72%; top: 60%; animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }
.particle.slow-continuous:nth-child(24) { left: 90%; top: 30%; animation-delay: 3.5s; -webkit-animation-delay: 3.5s; }
.particle.slow-continuous:nth-child(25) { left: 30%; top: 75%; animation-delay: 4.5s; -webkit-animation-delay: 4.5s; }
.particle.slow-continuous:nth-child(26) { left: 60%; top: 45%; animation-delay: 5.5s; -webkit-animation-delay: 5.5s; }
.particle.slow-continuous:nth-child(27) { left: 80%; top: 15%; animation-delay: 6.5s; -webkit-animation-delay: 6.5s; }
.particle.slow-continuous:nth-child(28) { left: 40%; top: 85%; animation-delay: 7.5s; -webkit-animation-delay: 7.5s; }

/* 8 particelle lente aggiuntive per maggiore densità - timing più frequente */
.particle.slow-continuous:nth-child(29) { left: 14%; top: 25%; animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
.particle.slow-continuous:nth-child(30) { left: 38%; top: 40%; animation-delay: 0.75s; -webkit-animation-delay: 0.75s; }
.particle.slow-continuous:nth-child(31) { left: 62%; top: 65%; animation-delay: 1.25s; -webkit-animation-delay: 1.25s; }
.particle.slow-continuous:nth-child(32) { left: 88%; top: 55%; animation-delay: 1.75s; -webkit-animation-delay: 1.75s; }
.particle.slow-continuous:nth-child(33) { left: 22%; top: 10%; animation-delay: 2.25s; -webkit-animation-delay: 2.25s; }
.particle.slow-continuous:nth-child(34) { left: 52%; top: 85%; animation-delay: 2.75s; -webkit-animation-delay: 2.75s; }
.particle.slow-continuous:nth-child(35) { left: 78%; top: 30%; animation-delay: 3.25s; -webkit-animation-delay: 3.25s; }
.particle.slow-continuous:nth-child(36) { left: 32%; top: 55%; animation-delay: 3.75s; -webkit-animation-delay: 3.75s; }

/* Animazione veloce iniziale - si ferma dopo un ciclo */
@keyframes fastFloat {
    0% {
        transform: translate3d(0, 100vh, 0) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        transform: translate3d(0, 50vh, 0) scale(0.8);
    }
    15% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    85% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0.3;
        transform: translate3d(0, -20vh, 0) scale(1.1);
    }
}

@-webkit-keyframes fastFloat {
    0% {
        -webkit-transform: translate3d(0, 100vh, 0) scale(0);
        transform: translate3d(0, 100vh, 0) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        -webkit-transform: translate3d(0, 50vh, 0) scale(0.8);
        transform: translate3d(0, 50vh, 0) scale(0.8);
    }
    15% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
    85% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translate3d(0, -20vh, 0) scale(1.1);
        transform: translate3d(0, -20vh, 0) scale(1.1);
    }
}

/* Animazione lenta continua - loop infinito */
@keyframes slowFloat {
    0% {
        transform: translate3d(0, 100vh, 0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    25% {
        opacity: 0.8;
        transform: translate3d(0, 0, 0) scale(1);
    }
    75% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translate3d(0, -100vh, 0) scale(1.2);
        opacity: 0;
    }
}

@-webkit-keyframes slowFloat {
    0% {
        -webkit-transform: translate3d(0, 100vh, 0) scale(0);
        transform: translate3d(0, 100vh, 0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    25% {
        opacity: 0.8;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
    75% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        -webkit-transform: translate3d(0, -100vh, 0) scale(1.2);
        transform: translate3d(0, -100vh, 0) scale(1.2);
        opacity: 0;
    }
}

.site-main {
    position: relative;
    z-index: 1;
}

.section {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 7rem 2rem 6rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform .9s ease;
}

.section-spacer {
    height: 0;
}
@media (max-width: 768px) {
    .section-spacer { height: 10rem; }
}

#home.section {
    min-height: 100vh;
}

.section.visible {
    opacity: 1;
    transform: none;
}

#home.section {
    padding: 0;
    min-height: 100vh;
}

/* Logo Animation */
.logo {
    font-size: 5rem;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s ease 0.2s;
}

.section.active .logo {
    opacity: 1;
    transform: scale(1);
    animation: pulse-other 2s ease-in-out infinite;
}

.logo:hover {
    transform: scale(1.1);
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pulse-other {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Home section specific layout */
#home {
    justify-content: center;
}

/* Combined logo and tagline container */
.logo-tagline-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
    opacity: 0;
    transition: all 0.8s ease 0.2s;
}

#home.active .logo-tagline-container {
    opacity: 1;
}

#home .logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    animation: none !important;
    letter-spacing: 0;
}

#home.active .logo {
    animation: pulse 2s ease-in-out infinite;
    letter-spacing: 0;
}

#home .logo:hover {
    transform: scale(1.1) !important;
    animation-play-state: paused;
    letter-spacing: 0;
}

/* Tagline sotto il logo */
.tagline {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-size: 1.2rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    color: #ccc;
    opacity: 0;
    transition: all 0.8s ease 0.8s;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 1rem;
}

.tagline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5263ff, transparent);
    transition: width 1s ease 1.5s;
    transform: translateX(-50%);
}

#home.active .tagline {
    opacity: 1;
}

#home.active .tagline::after {
    width: 100%;
}

#home .menu {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}
#home .menu.info {
    bottom: 30% !important;
}
#home .menu.info2 {
    bottom: 24% !important;
}

/* Menu animations */
.menu {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.5s;
}

.section.active .menu {
    opacity: 1;
    transform: translateY(0);
}

#home.active .menu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.menu a {
    color: #aaa;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    padding: 0.3rem 0.8rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Menu buttons with underline effect like tagline */
#home .menu a, #about .menu a {
    position: relative;
    border: none !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0.8rem;
    transition: color 0.3s ease;
}

#home .menu a::after, #about .menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5263ff, transparent);
    transition: width 0.5s ease;
    transform: translateX(-50%);
}

#home .menu a:hover, #about .menu a:hover {
    color: #5263ff !important;
    background: transparent !important;
    border: none !important;
    text-shadow: 0 0 10px rgba(82, 99, 255, 0.5);
    box-shadow: none !important;
    transform: none !important;
}

#home .menu a:hover::after, #about .menu a:hover::after {
    width: 100%;
}

/* Special styling for Rewind button */
#contact .menu a {
    position: relative;
    color: #aaa !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-align: center;
    border: none !important;
    background: transparent !important;
    text-shadow: none;
    box-shadow: none;
    padding: 0.5rem 0.8rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

#contact .menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5263ff, transparent);
    transition: width 0.5s ease;
    transform: translateX(-50%);
}

#contact .menu a:hover {
    color: #5263ff !important;
    transform: none;
    background: transparent !important;
    border: none !important;
    text-shadow: 0 0 10px rgba(82, 99, 255, 0.5);
    box-shadow: none;
}

#contact .menu a:hover::after {
    width: 100%;
}

.menu-separator {
    color: #c1c1c1;
    font-size: 1rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

/* Content Sections */
.content-text {
    font-size: 1.5rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
    max-width: 800px;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease 0.3s;
}

.section.visible .content-text {
    opacity: 1;
    transform: translateY(0);
}

.section.visible .logo {
    animation-play-state: running;
}

/* About Us specific styling */
#about .content-text {
    font-size: 18px;
}

/* Colore blu per i grassetti */
strong {
    color: #5263ff;
}

/* Colore blu per la M nel logo */
.logo-m {
    color: #5263ff;
    text-shadow: 0 0 20px rgba(82, 99, 255, 0.5);
    animation: glow-m 3s ease-in-out infinite;
}

@keyframes glow-m {
    0%, 100% {
        text-shadow: 0 0 20px rgba(82, 99, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(82, 99, 255, 0.8), 0 0 40px rgba(82, 99, 255, 0.3);
    }
}

/* Contact specific styling */
#contact .content-text {
    font-size: 1.5rem;
    font-weight: 300;
}

#contact .content-text a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 0.2rem 0;
}

#contact .content-text a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5263ff, transparent);
    transition: width 1s ease 1.5s;
    transform: translateX(-50%);
}

/* Nuova regola specifica per far apparire la riga */
.section.visible #contact .content-text a::after,
#contact.visible .content-text a::after,
#contact.visible .contact-email::after {
    width: 100%;
}

#contact .content-text a:hover::after {
    width: 100%;
}

#contact .content-text a:hover {
    color: #5263ff;
    text-shadow: 0 0 10px rgba(82, 99, 255, 0.5);
}

/* Copyright */
.site-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.8rem 2rem;
    font-size: 0.7rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    color: #888;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}
.footer-legal {
    font-size: .62rem;
    color: #555;
    letter-spacing: .04em;
}

.site-footer a {
    color: #aa4444;
    text-decoration: none;
    transition: color 0.3s ease;
}
.site-footer a:hover {
    color: #cc6666;
}
.footer-associate-btn {
    color: #aa4444 !important;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    display: inline;
    margin-bottom: 0;
}
.footer-associate-btn:hover {
    color: #cc6666 !important;
    background: none;
    border-color: transparent;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #5263ff;
    animation: bounce 2s infinite, pulse-blue 2s infinite;
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
    text-shadow: 0 0 10px rgba(82, 99, 255, 0.5);
}

@keyframes pulse-blue {
    0%, 100% {
        text-shadow: 0 0 10px rgba(82, 99, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(82, 99, 255, 0.8), 0 0 30px rgba(82, 99, 255, 0.3);
    }
}

.section.active .scroll-indicator {
    opacity: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo {
        font-size: 2.8rem;
        font-weight: 800;
        margin-bottom: 2rem;
    }
    
    /* Ensure logo is positioned above tagline on mobile */
    .logo-tagline-container {
        top: 40% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }

    #home .logo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 2.8rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    #home .logo:hover {
        transform: scale(1.1) !important;
    }

    .menu {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .menu a {
        font-size: 0.9rem;
        white-space: nowrap;
        padding: 0.3rem 0.5rem;
    }

    /* Hide "About Us" text and show "About" on mobile */
    .menu a[onclick*="about"]::before {
        content: "About";
    }
    
    .menu a[onclick*="about"] {
        font-size: 0;
    }
    
    .menu a[onclick*="about"]::before {
        font-size: 0.9rem;
    }

    .menu-separator {
        display: inline;
    }

    .section {
        padding: 6rem 1rem 5rem !important;
    }

    .content-text {
        font-size: 0.9rem;
        padding: 0 0.5rem;
        text-align: center;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    /* About Us specific mobile styling */
    #about .content-text {
        font-size: 0.8rem;
        line-height: 1.4;
        padding: 0 0.5rem;
        max-width: 95%;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    /* Contact specific mobile styling */
    #contact .content-text {
        font-size: 1rem;
        text-align: center;
        padding: 0 0.8rem;
        margin-bottom: 1rem;
    }

    #contact .content-text .motto {
        font-size: 1rem !important;
    }

    .copyright {
        bottom: 0.5rem;
        left: 0.5rem;
        font-size: 0.6rem;
    }

    /* Mobile logo-tagline container */
    .tagline {
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #home .menu {
        bottom: 15% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }

    /* Ensure all sections are properly centered on mobile */
    .section {
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 0.5rem !important;
    }

    /* Specific adjustments for logo positioning */
    .logo {
        font-size: 2.8rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

    /* Enhanced Safari mobile optimization for particles */
    .particles {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        will-change: auto;
        contain: layout style paint;
    }

    .particle {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform, opacity;
        contain: layout style paint;
        /* Reduce particle count on mobile for better performance */
        width: 2px;
        height: 2px;
        box-shadow: 0 0 4px rgba(82, 99, 255, 0.5);
    }

    /* Mobile-specific particle positioning - closer together and faster start */
    .particle.fast-initial:nth-child(1) { left: 15% !important; top: 25% !important; animation-delay: 0s !important; }
    .particle.fast-initial:nth-child(2) { left: 30% !important; top: 45% !important; animation-delay: 0.08s !important; }
    .particle.fast-initial:nth-child(3) { left: 45% !important; top: 20% !important; animation-delay: 0.16s !important; }
    .particle.fast-initial:nth-child(4) { left: 60% !important; top: 55% !important; animation-delay: 0.24s !important; }
    .particle.fast-initial:nth-child(5) { left: 75% !important; top: 30% !important; animation-delay: 0.32s !important; }
    .particle.fast-initial:nth-child(6) { left: 85% !important; top: 65% !important; animation-delay: 0.40s !important; }
    .particle.fast-initial:nth-child(7) { left: 25% !important; top: 70% !important; animation-delay: 0.05s !important; }
    .particle.fast-initial:nth-child(8) { left: 55% !important; top: 15% !important; animation-delay: 0.12s !important; }
    .particle.fast-initial:nth-child(9) { left: 40% !important; top: 60% !important; animation-delay: 0.20s !important; }
    .particle.fast-initial:nth-child(10) { left: 70% !important; top: 40% !important; animation-delay: 0.28s !important; }    .particle.fast-initial:nth-child(11) { left: 20% !important; top: 50% !important; animation-delay: 0.36s !important; }
    .particle.fast-initial:nth-child(12) { left: 65% !important; top: 75% !important; animation-delay: 0.44s !important; }
      /* Tutte le particelle slow-continuous sono ora visibili */    /* Tutte le particelle sono ora visibili per massime prestazioni visive */
}

/* Enhanced Safari iOS optimizations */
@supports (-webkit-overflow-scrolling: touch) {
    .particles {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: auto;
        contain: layout style paint;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .particle {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        will-change: transform, opacity;
        contain: layout style paint;
        /* Simplified animation for iOS Safari */
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

/* iOS Safari specific improvements */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 812px) {
    .particles {
        /* Reduce animation complexity on iOS */
        opacity: 0.8;
    }
    
    .particle {
        /* Simpler particle style for iOS */
        box-shadow: 0 0 3px rgba(82, 99, 255, 0.4);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
    }    /* Tutte le particelle sono ora visibili su dispositivi piccoli */
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .particle {
        animation: none;
        -webkit-animation: none;
        opacity: 0.3;
        /* Show static particles with reduced opacity */
        animation: staticFloat 8s infinite linear;
        -webkit-animation: staticFloat 8s infinite linear;
    }
}

@keyframes staticFloat {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
}

@-webkit-keyframes staticFloat {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
}

/* iOS Safari specific optimizations via JavaScript detection */
body.ios-safari .particles {
    /* Enhanced performance for iOS Safari */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    opacity: 0.9;
}

body.ios-safari .particle {
    /* Optimized particles for iOS Safari */
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    box-shadow: 0 0 4px rgba(82, 99, 255, 0.5);
    width: 2.5px;
    height: 2.5px;
}

/* Tutte le particelle sono ora visibili su iOS Safari */

/* Mobile-specific particle animation approach */
@media (max-width: 768px) {
    /* Override any paused state for slow particles on mobile */
    .particle.slow-continuous {
        animation-play-state: running !important;
        -webkit-animation-play-state: running !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force all slow particles to start immediately on mobile - bypassing JS control */
    body.mobile-force-particles .particle.slow-continuous {
        animation: slowFloat 8s infinite ease-in-out !important;
        -webkit-animation: slowFloat 8s infinite ease-in-out !important;
        animation-play-state: running !important;
        -webkit-animation-play-state: running !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateZ(0) !important;
    }
    
    /* Stagger the mobile particle starts using pure CSS delays */
    body.mobile-force-particles .particle.slow-continuous:nth-child(13) { animation-delay: 0.1s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(14) { animation-delay: 0.3s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(15) { animation-delay: 0.5s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(16) { animation-delay: 0.7s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(17) { animation-delay: 0.9s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(18) { animation-delay: 1.1s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(19) { animation-delay: 1.3s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(20) { animation-delay: 1.5s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(21) { animation-delay: 1.7s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(22) { animation-delay: 1.9s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(23) { animation-delay: 2.1s !important; }
    body.mobile-force-particles .particle.slow-continuous:nth-child(24) { animation-delay: 2.3s !important; }
}

/* iOS Safari additional fixes */
@supports (-webkit-overflow-scrolling: touch) {
    body.mobile-force-particles .particle.slow-continuous {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-animation-fill-mode: both !important;
        animation-fill-mode: both !important;
    }
}

/* ===================================================
   FIXED HEADER
   =================================================== */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 2.5rem;
    transition: background .4s, border-color .4s;
}

.site-header.scrolled {
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(82,99,255,.12);
}

.header-logo {
    font-size: 1.45rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    transition: opacity .3s;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.header-logo:hover { opacity: .8; }
.header-wordmark {
    letter-spacing: -.01em;
    text-transform: uppercase;
    font-weight: 900;
}
.header-x {
    font-size: 1.4rem;
    font-weight: 200;
    color: #c1c1c1;
    letter-spacing: 0;
    margin: 0;
}
.header-revolut-logo {
    height: 20px;
    width: auto;
    opacity: .75;
    filter: brightness(1.2);
    position: relative;
    top: 1px;
}

.header-nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.header-nav a {
    color: #aaa;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .3s;
}
.header-nav a:hover { color: #fff; }

/* Hamburger for mobile */
.header-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.header-menu-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #aaa;
    transition: all .3s;
}

.header-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.header-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.header-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ===================================================
   HERO SECTION
   =================================================== */
.hero-content {
    text-align: center;
    max-width: 820px;
    width: 100%;
    padding: 0 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease .15s, transform 1s ease .15s;
}

#home.visible .hero-content {
    opacity: 1;
    transform: none;
}

.hero-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #5263ff;
    font-weight: 700;
    margin-bottom: 1.6rem;
}

.hero-wordmark {
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: 900;
    line-height: .9;
    color: #fff;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
    animation: heroGlow 4s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { text-shadow: 0 0 80px rgba(82,99,255,.08); }
    50%       { text-shadow: 0 0 120px rgba(82,99,255,.22), 0 0 200px rgba(82,99,255,.08); }
}

.hero-x-wrap {
    text-align: center;
    margin-bottom: .6rem;
    margin-top: -.4rem;
}
.hero-x {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 200;
    color: #c1c1c1;
    letter-spacing: 0;
}
.hero-partner-logo {
    display: block;
    margin: 0 auto 1.6rem;
    opacity: .65;
    filter: brightness(1.15);
}

.hero-tagline {
    font-size: clamp(.9rem, 2vw, 1.15rem);
    color: #bbb;
    font-weight: 300;
    letter-spacing: .08em;
    margin-bottom: 2.8rem;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #5263ff, #7b8cff);
    color: #fff;
    text-decoration: none;
    padding: .9rem 2.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .04em;
    transition: all .3s;
}
.hero-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(82,99,255,.45);
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    color: #ccc;
    text-decoration: none;
    padding: .9rem 2.2rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: .88rem;
    letter-spacing: .04em;
    transition: all .3s;
}
.hero-cta-secondary:hover {
    border-color: rgba(82,99,255,.5);
    color: #fff;
    transform: translateY(-3px);
}

/* Scroll arrow */
.hero-scroll-arrow {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease 1.4s;
    cursor: pointer;
}

#home.visible .hero-scroll-arrow {
    opacity: 1;
}

.scroll-line {
    width: 1px;
    height: 52px;
    background: linear-gradient(to bottom, rgba(82,99,255,.9), transparent);
    animation: scrollDown 2.2s ease-in-out infinite;
    transform-origin: top;
}

@keyframes scrollDown {
    0%   { transform: scaleY(0); opacity: 0; }
    30%  { opacity: 1; }
    60%  { transform: scaleY(1); opacity: .5; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* ===================================================
   CONTACT SECTION
   =================================================== */
.contact-container {
    text-align: center;
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s ease .2s, transform .9s ease .2s;
}

#contact.visible .contact-container {
    opacity: 1;
    transform: none;
}

.contact-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #5263ff;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.contact-tagline {
    font-size: 1.1rem;
    font-style: italic;
    color: #ccc;
    letter-spacing: .06em;
    margin-bottom: 2.2rem;
}

.contact-email {
    display: inline-block;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: -.01em;
    transition: color .3s, text-shadow .3s;
    position: relative;
}

.contact-email::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5263ff, transparent);
    transition: width 1s ease;
    transform: translateX(-50%);
}

#contact.visible .contact-email::after {
    width: 100%;
}

.contact-email:hover {
    color: #7b8cff;
    text-shadow: 0 0 30px rgba(82,99,255,.4);
}

/* ===================================================
   MOBILE HEADER + HERO
   =================================================== */
@media (max-width: 768px) {
    .site-header {
        padding: 1rem 1.4rem;
    }

    .header-nav {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: rgba(0,0,0,.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 199;
        padding: 5rem 2rem 3rem;
        animation: navFadeIn .3s ease;
    }

    @keyframes navFadeIn {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: none; }
    }

    .header-nav.open { display: flex; }

    .header-nav a {
        padding: 1.2rem 2rem;
        font-size: 1.15rem;
        letter-spacing: .15em;
        border-bottom: 1px solid rgba(255,255,255,.06);
        width: 100%;
        text-align: center;
        color: #ccc;
    }

    .header-menu-toggle { display: flex; z-index: 200; position: relative; }

    .hero-wordmark {
        letter-spacing: -.02em;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta-primary, .hero-cta-secondary {
        width: min(280px, 100%);
        justify-content: center;
    }

    .section {
        padding: 3rem 1.2rem 2rem;
    }

    #home.section {
        padding: 0;
    }
}