* {
    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: 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;
    }
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.section.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

.section.prev {
    opacity: 0;
    transform: scale(1.2);
    z-index: 5;
}

.section.next {
    opacity: 0;
    transform: scale(0.8);
    z-index: 5;
}

/* 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: #555;
    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.active .content-text {
    opacity: 1;
    transform: translateY(0);
}

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

.section:not(.active) .logo {
    animation-play-state: paused;
}

/* 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.active #contact .content-text a::after,
#contact.active .content-text a::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 */
.copyright {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    font-size: 0.7rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    color: #444;
    z-index: 1000;
}

.copyright a {
    color: #aa4444;
    text-decoration: none;
    transition: color 0.3s ease;
}

.copyright a:hover {
    color: #cc6666;
}

/* 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: 45% !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: 0.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;
    }
}