/* ======================================================= */
/* GLOBAL VARIABLES & ANIMATIONS */
/* ======================================================= */
:root {
    --solana-purple: #9945FF;
    --solana-teal: #14F199;
    --text-color: #FFFFFF; /* WHITE */
    --bg-color: #000000;
    --dark-gray: #111111;
    --lighter-gray: #1a1a1a;
    --divider-height: 8px; 
    --gold-dragon-size-desktop: 200px; 
    --pepe-robot-size-desktop: 200px; 
    --dot-size: 40px; 
    --border-thickness: 8px; 
    --red-muted: #8B0000; 
    --yellow-bright: #FFD700; 
    --roadmap-total-width: 5000px; 
    --spacing-unit: 400px; 
    --roadmap-top-text-color: var(--solana-teal);
    --roadmap-bottom-text-color: var(--text-color);
    --genesis-protocol-color: var(--solana-teal); 
    --pepe-icon-size: 200px; 
    --doge-icon-size: 120px; 
}

@keyframes flow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Animazione per l'icona Solana (da sinistra a destra e ritorno) */
@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw - clamp(70px, 10vw, 150px) - 10%)); } 
}

/* Animazione per l'icona Token (da destra a sinistra e ritorno) */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(clamp(70px, 10vw, 150px) + 10% - 100vw)); } 
}


/* ======================================================= */
/* BASE STRUCTURE STYLES (DESKTOP DEFAULT) */
/* ======================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: var(--text-color); }
body { background-color: var(--bg-color); line-height: 1.6; overflow-x: hidden; user-select: auto; }

/* HEADER & NAVIGATION */
header { width: 100%; background: rgba(0, 0, 0, 0.9); position: sticky; top: 0; z-index: 1000; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(153, 69, 255, 0.2); }
.logo { display: flex; align-items: center; font-size: 1.2em; font-weight: 800; }
.logo img { height: 40px; width: 40px; margin-right: 15px; border-radius: 50%; border: 2px solid var(--solana-teal); flex-shrink: 0; }
nav ul { list-style: none; display: flex; }
nav a { text-decoration: none; padding: 10px 15px; font-weight: 600; transition: color 0.3s; }
nav a:hover { color: var(--solana-teal); }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: 0; background-color: var(--dark-gray); min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); z-index: 1001; border: 1px solid var(--solana-purple); border-top: none; text-align: left; }
.dropdown-content a { color: var(--text-color); padding: 12px 16px; text-decoration: none; display: block; font-size: 0.9em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.dropdown-content a:hover { background-color: var(--solana-purple); color: var(--bg-color); }
.dropdown.open .dropdown-content { display: block; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5em; color: var(--solana-teal); cursor: pointer; }


/* SEZIONE & TYPOGRAPHY */
.section { padding: 120px 5% 80px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; background-color: var(--bg-color); }
#hero { min-height: 100vh; } 
.section p, .section h1, .section h2 { z-index: 150; position: relative; }
.section p { max-width: 850px; font-size: 1.15em; color: rgba(255, 255, 255, 0.9); font-weight: 300; }
.highlight { font-weight: 800; color: var(--solana-teal); text-shadow: 0 0 5px rgba(20, 241, 149, 0.7); }
.tech-emphasis { font-weight: 700; color: var(--solana-teal); text-shadow: 0 0 5px rgba(20, 241, 149, 0.7); }
.highlight-bracket { color: var(--solana-teal); font-weight: 800; text-shadow: 0 0 5px rgba(20, 241, 149, 0.7); }
.flow-text { font-weight: 900; text-shadow: 0 0 10px rgba(20, 241, 149, 0.5); background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple), var(--solana-teal)); background-size: 400% 100%; animation: flow 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section h1.flow-text { font-size: 4.5em; margin-bottom: 30px; } 
.section h2.flow-text { font-size: 3.5em; margin-bottom: 30px; display: block; /* Rimuove flex per desktop per centrare semplicemente */ } 
.flow-text-small { font-weight: 900; text-shadow: 0 0 8px rgba(20, 241, 149, 0.7); background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple)); background-size: 400% 100%; animation: flow 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-divider { width: 100%; height: var(--divider-height); background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple)); background-size: 400% 100%; animation: flow 4s linear infinite; margin: 60px 0; border-radius: 0; box-shadow: 0 0 15px rgba(153, 69, 255, 0.7); z-index: 100; }

/* ICONE DECORATIVE - POSIZIONAMENTO ASSOLUTO (DESKTOP) */
.solana-scroller, .token-logo-scroller { 
    position: absolute; 
    width: clamp(70px, 10vw, 150px); 
    height: clamp(70px, 10vw, 150px); 
    border-radius: 50%; 
    object-fit: contain; 
    pointer-events: none; 
    z-index: 5; 
    will-change: transform, opacity; 
}
.solana-logo-scroller { opacity: 1; box-shadow: 0 0 10px rgba(20, 241, 149, 0.8), 0 0 20px rgba(153, 69, 255, 0.8); top: 10%; left: 5%; animation: scrollRight 20s linear infinite alternate; }
.token-logo-scroller { opacity: 0.7; box-shadow: 0 0 15px var(--solana-teal), 0 0 30px rgba(20, 241, 149, 0.9); top: 50%; right: 5%; left: auto; animation: scrollLeft 25s linear infinite alternate; }

/* Icone Decorative Fisse (Drago, Gatto, Pepe) - DESKTOP */
.dragon-capital-icon, .dragon-team-icon, .dragon-roadmap-icon, .dragon-ai-icon, .cat-investment-icon, .pepe-tokenomics-icon, .pepe-yellow-project-core-icon {
    position: absolute; 
    z-index: 110; 
    opacity: 1; 
    pointer-events: none; 
}
.dragon-capital-icon { top: 0px; right: 5%; width: var(--gold-dragon-size-desktop); height: auto; }
.dragon-roadmap-icon { top: 50px; left: 5%; width: var(--gold-dragon-size-desktop); height: auto; transform: scaleX(-1); }
.dragon-team-icon { top: 0px; right: 5%; width: var(--gold-dragon-size-desktop); height: auto; }
.dragon-ai-icon { top: 50px; left: 5%; width: var(--gold-dragon-size-desktop); height: auto; transform: scaleX(-1); }
.cat-investment-icon { top: 0px; right: 5%; width: 200px; height: auto; } 
.pepe-tokenomics-icon { top: -10px; right: 30px; width: var(--pepe-robot-size-desktop); height: auto; z-index: 149; transform: scaleX(-1); }
.pepe-yellow-project-core-icon { top: 0px; left: 5%; width: var(--pepe-robot-size-desktop); height: auto; }

/* TOKENOMICS & HOW TO INVEST BOX STYLES */
.tokenomics-container, .investment-container { max-width: 600px; width: 100%; margin: 0 auto; text-align: left; padding: 40px; border-radius: 15px; background-color: var(--dark-gray); box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative; z-index: 150; }
.tokenomics-container::before, .investment-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 15px; padding: 10px; background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple), var(--solana-teal)); background-size: 400% 100%; animation: flow 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; box-shadow: 0 0 25px rgba(153, 69, 255, 0.5); }
.tokenomics-container ul { list-style: none; padding: 20px 0; }
.tokenomics-container li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); }
.tokenomics-item-name { display: flex; align-items: center; font-weight: 600; }
.tokenomics-icon { width: 25px; height: 25px; margin-right: 10px; border-radius: 50%; border: 1px solid var(--solana-teal); }
.investment-container .pump-fun-link-group { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; max-width: 90%; margin-left: auto; margin-right: auto; padding: 20px; }
.pump-fun-icon { width: 35px; height: 35px; object-fit: contain; border-radius: 50%; flex-shrink: 0; }
.pump-fun-text, .investment-container a.pump-fun-link { font-size: 1.8em; line-height: 1.2; margin: 0; font-weight: 900; text-shadow: 0 0 10px rgba(20, 241, 149, 0.5); text-decoration: none; transition: transform 0.3s; white-space: nowrap; background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple), var(--solana-teal)); background-size: 400% 100%; animation: flow 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.investment-container a.pump-fun-link { display: flex; align-items: center; }
.investment-container a.pump-fun-link:hover { transform: scale(1.03); }

/* ROADMAP STYLES */
#roadmap { position: relative; z-index: 150; height: auto; padding-bottom: 120px; }
.roadmap-swipe-text { color: var(--solana-teal) !important; font-weight: 600; font-size: 1.15em; max-width: 850px; margin: 0 auto; padding-top: 10px; opacity: 1; }
.roadmap-border-wrapper { position: relative; max-width: 1000px; width: 90%; height: 300px; margin: 50px auto 0; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.5); z-index: 160; }
.roadmap-border-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; padding: var(--border-thickness); background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple), var(--solana-teal)); background-size: 400% 100%; animation: flow 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; box-shadow: 0 0 40px rgba(153, 69, 255, 0.7); }
.roadmap-placeholder-box { position: relative; width: calc(100% - (var(--border-thickness) * 2)); height: calc(100% - (var(--border-thickness) * 2)); top: var(--border-thickness); left: var(--border-thickness); background-color: var(--dark-gray); border-radius: 12px; display: flex; justify-content: flex-start; align-items: center; text-align: center; z-index: 2; overflow-x: auto; overflow-y: hidden; cursor: grab; user-select: none; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; touch-action: pan-y; }
.roadmap-placeholder-box.active { cursor: grabbing; }
.roadmap-placeholder-box > * { will-change: transform, opacity; }
.roadmap-inner-line { position: absolute; width: var(--roadmap-total-width); height: 4px; background-color: var(--text-color); border-radius: 2px; z-index: 10; top: 50%; left: 0px; transform: translateY(-50%); will-change: transform; }
.roadmap-dot { position: absolute; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background-color: var(--dark-gray); border: 3px solid var(--solana-teal); box-shadow: 0 0 10px rgba(20, 241, 149, 0.8); z-index: 15; top: 50%; transform: translateY(-50%) translateX(-50%); display: flex; justify-content: center; align-items: center; overflow: hidden; will-change: transform; }
.roadmap-dot img { width: 80%; height: 80%; object-fit: contain; border-radius: 50%; }
.roadmap-dot-red-glow { border: 3px solid var(--red-muted); box-shadow: 0 0 10px var(--red-muted); }
/* Posizionamento dei dot */
.roadmap-start-dot { left: var(--spacing-unit); } 
.roadmap-pre-sale-dot { left: calc(2 * var(--spacing-unit)); } 
.roadmap-500-owners-dot { left: calc(3 * var(--spacing-unit)); } 
.roadmap-la-office-dot { left: calc(4 * var(--spacing-unit)); } 
.roadmap-moscow-meeting-dot { left: calc(5 * var(--spacing-unit)); } 
.roadmap-public-launch-dot { left: calc(8 * var(--spacing-unit)); } 
.roadmap-2000-public-owners-dot { left: calc(9 * var(--spacing-unit)); } 
.roadmap-dz-podcast-dot { left: calc(10 * var(--spacing-unit)); } 
.roadmap-staking-concept-dot { left: calc(11 * var(--spacing-unit)); } 
.roadmap-meme-icon { position: absolute; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; z-index: 2; transform: translateX(-50%); will-change: transform; }
.roadmap-pepe-icon { width: var(--pepe-icon-size); height: var(--pepe-icon-size); left: 300px; bottom: 100px; } 
.roadmap-chillguy-icon { width: 150px; height: 150px; left: 2600px; bottom: 140px; } 
.roadmap-doge-icon { width: var(--doge-icon-size); height: var(--doge-icon-size); left: 4600px; bottom: 135px; } 
.roadmap-text-container { position: absolute; z-index: 6; white-space: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; will-change: transform; top: 50%; transform: translateY(-50%) translateX(-50%); width: 200px; max-width: 200px; text-align: center;}
.roadmap-text-container .top-text { font-size: 1.1em; font-weight: 700; color: var(--roadmap-top-text-color); position: absolute; bottom: calc(var(--dot-size) / 2 + 10px); left: 50%; transform: translateX(-50%); line-height: 1.2;}
.roadmap-text-container .bottom-text { font-size: 0.9em; font-weight: 500; color: var(--roadmap-bottom-text-color); position: absolute; top: calc(var(--dot-size) / 2 + 10px); left: 50%; transform: translateX(-50%); line-height: 1.2;}
/* Posizionamento dei contenitori sui punti (riutilizziamo le posizioni dei dot) */
.roadmap-pre-sale-group { left: calc(2 * var(--spacing-unit)); }
.roadmap-500-private-owners-group { left: calc(3 * var(--spacing-unit)); }
.roadmap-la-office-group { left: calc(4 * var(--spacing-unit)); }
.roadmap-moscow-meeting-group { left: calc(5 * var(--spacing-unit)); }
.roadmap-public-launch-group { left: calc(8 * var(--spacing-unit)); }
.roadmap-2000-public-owners-group { left: calc(9 * var(--spacing-unit)); }
.roadmap-dz-podcast-group { left: calc(10 * var(--spacing-unit)); }
.roadmap-staking-concept-group { left: calc(11 * var(--spacing-unit)); }
/* Testi Speciali: SATOSHI / 2009 B.C. */
.roadmap-2009-ac-text { position: absolute; left: 50px; top: 50%; transform: translate(-50%, calc(-100% - 15px)); font-size: 1.1em; font-weight: 600; color: var(--roadmap-bottom-text-color); z-index: 6; white-space: nowrap; will-change: transform; }
.roadmap-satoshi-nakamoto-group { position: absolute; left: 50px; top: 50%; transform: translate(-50%, calc(0% + 15px)); font-size: 0.9em; font-weight: 600; color: var(--roadmap-bottom-text-color); z-index: 6; white-space: nowrap; text-align: center; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.roadmap-satoshi-nakamoto-group span { display: block; line-height: 1.2; color: var(--roadmap-bottom-text-color); }
/* Testi Speciali: FEW MOMENTS LATER / GENESIS PROTOCOL */
.roadmap-a-few-moments-later-group { position: absolute; left: calc(6 * var(--spacing-unit)); top: 50%; transform: translate(-50%, -50%); width: 250px; max-width: 250px; text-align: center;}
.roadmap-a-few-moments-later-group .main-text { font-size: 1.4em; font-weight: 700; color: var(--yellow-bright); position: relative; white-space: normal; transform: none; left: 0; top: 0;}
.roadmap-genesis-protocol-group { position: absolute; left: calc(7 * var(--spacing-unit) - 50px); top: 50%; transform: translate(-50%, -50%); width: 150px; max-width: 150px; text-align: center;}
.roadmap-genesis-protocol-group .main-text { font-size: 1.2em; font-weight: 700; color: var(--genesis-protocol-color); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap;}
.roadmap-soon-at-end { position: absolute; left: calc(12 * var(--spacing-unit)); top: 40%; font-size: 2.2em; white-space: nowrap; z-index: 10; transform: translateY(-50%); will-change: transform; }

/* CTA & FOOTER */
.cta-section { padding: 80px 5%; background-color: var(--dark-gray); text-align: center; border-radius: 20px; margin: 50px auto; max-width: 1000px; position: relative; overflow: hidden; z-index: 150; } 
.cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; padding: 8px; background: linear-gradient(90deg, var(--solana-purple), var(--solana-teal), var(--solana-purple), var(--solana-teal)); background-size: 400% 100%; animation: flow 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; box-shadow: 0 0 40px rgba(153, 69, 255, 0.7); }
.cta-section h3 { font-size: 2.5em; margin-bottom: 40px; color: var(--solana-teal); position: relative; z-index: 2; }
.cta-buttons-container { display: flex; justify-content: center; gap: 40px; margin-top: 30px; max-width: 800px; margin: 30px auto 0; position: relative; z-index: 2; }
.cta-button { display: inline-flex; align-items: center; padding: 18px 40px; background: var(--solana-purple); color: var(--text-color); text-decoration: none; border-radius: 10px; font-weight: 700; text-transform: uppercase; transition: background-color 0.3s, transform 0.3s; border: 2px solid var(--solana-teal); box-shadow: 0 0 15px var(--solana-purple); z-index: 50; }
.cta-button i { margin-right: 10px; font-size: 1.2em; color: var(--text-color) !important; transition: color 0.3s; position: relative; z-index: 999 !important; }
.cta-button:hover { background: var(--solana-teal); color: var(--bg-color); transform: translateY(-5px); box-shadow: 0 0 25px var(--solana-teal); }
.cta-button:hover i { color: var(--bg-color) !important; }
footer { background-color: var(--bg-color); padding: 40px 5%; text-align: center; position: relative; z-index: 10; border-top: 1px solid var(--dark-gray); } 
.social-links { margin-bottom: 20px; }
.social-links a { font-size: 1.5em; margin: 0 15px; text-decoration: none; transition: color 0.3s, transform 0.3s; display: inline-block; }
.social-links a i { color: var(--text-color) !important; transition: color 0.3s, transform 0.3s; position: relative; z-index: 999 !important; }
.social-links a:hover i { color: var(--solana-teal) !important; transform: translateY(-3px);}

/* ======================================================= */
/* MEDIA QUERIES (MOBILE OPTIMIZATION) */
/* ======================================================= */

@media (max-width: 768px) {
    .section { padding: 80px 4% 50px; height: auto; }
    #hero { min-height: 80vh; } 
    .section p { font-size: 1em; max-width: 95%; }
    .section h1.flow-text { font-size: 2.5em; margin-bottom: 20px; } 
    .section h2.flow-text { font-size: 2em; margin-bottom: 20px; display: block; } 
    
    /* MENU FIX: Rende il menu responsive */
    header {
        flex-direction: row; /* Mantieni in riga logo e pulsante */
        align-items: center;
        padding-bottom: 20px;
    }

    .menu-toggle {
        display: block; /* Mostra l'icona hamburger */
        order: 2; /* Sposta il pulsante a destra del logo */
    }

    nav {
        width: 100%;
        position: absolute;
        top: 80px; /* Sotto l'header */
        left: 0;
        z-index: 990;
        margin-top: 0;
    }

    nav ul {
        display: none; /* Nasconde l'elenco principale di default */
        flex-direction: column;
        width: 100%;
        text-align: left;
        background: rgba(0, 0, 0, 0.95);
        padding: 0;
    }

    nav ul.active {
        display: flex; /* Mostra il menu quando 'active' è applicato dal JS */
    }

    nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav a {
        padding: 15px 5%;
        display: block;
    }
    
    .dropdown-content {
        position: static; /* Rende il dropdown inline */
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: var(--dark-gray);
    }
    .dropdown-content a {
        padding-left: 10%; 
        background-color: var(--dark-gray);
    }
    
    /* ICONE TITOLI: Vengono tolte da 'absolute' e messe sopra il titolo */
    .section > img:is(.dragon-capital-icon, .dragon-team-icon, .cat-investment-icon, .dragon-roadmap-icon, .dragon-ai-icon, .pepe-yellow-project-core-icon, .pepe-tokenomics-icon) {
        position: static; 
        width: 50px; 
        height: 50px;
        margin: 0 auto 10px auto; 
        display: block; 
        transform: none !important; 
        opacity: 1; 
    }
    
    .section > h2.flow-text { 
        display: block; 
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* Regolazione animazioni per mobile */
    .solana-scroller, .token-logo-scroller { width: 50px; height: 50px; opacity: 0.5; }
    .token-logo-scroller { top: 70%; right: 5%; left: auto; } 
    .solana-scroller { top: 20%; left: 5%; } 
    
    @keyframes scrollRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(100vw - 50px - 8%)); } 
    }

    @keyframes scrollLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(50px + 8% - 100vw)); }
    }
    
    /* CORREZIONE PUMP.FUN (MOBILE) */
    .investment-container .pump-fun-link-group { padding: 10px; gap: 5px; }
    .investment-container a.pump-fun-link { white-space: normal; font-size: 1.2em; text-align: center; max-width: 100%; justify-content: center; }
    .pump-fun-text { font-size: 1.2em; white-space: normal; }
    .pump-fun-icon { width: 30px; height: 30px; margin: 0; }

    /* ROADMAP MOBILE */
    .roadmap-swipe-text { font-size: 0.9em; }
    .roadmap-border-wrapper { height: 280px; } 
    .roadmap-text-container { width: 150px; max-width: 150px; } 
    .roadmap-text-container .top-text, .roadmap-text-container .bottom-text { font-size: 0.8em !important; white-space: normal; max-width: 100%; left: 50%; transform: translateX(-50%); }
    .roadmap-dot { width: 30px; height: 30px; }
    .roadmap-text-container .top-text { bottom: calc(var(--dot-size) / 2 + 5px); } 
    .roadmap-text-container .bottom-text { top: calc(var(--dot-size) / 2 + 5px); } 
    .roadmap-2009-ac-text { font-size: 0.9em !important; transform: translate(-50%, calc(-100% - 10px)); left: 40px; }
    .roadmap-satoshi-nakamoto-group { font-size: 0.8em !important; transform: translate(-50%, calc(0% + 10px)); left: 40px; }
    .roadmap-satoshi-nakamoto-group span { font-size: 0.8em !important; }
    .roadmap-pepe-icon { width: 120px; height: 120px; bottom: 110px; left: 300px; } 
    .roadmap-chillguy-icon { width: 80px; height: 80px; bottom: 135px; left: 2600px; } 
    .roadmap-doge-icon { width: 100px; height: 100px; bottom: 120px; left: 4600px; } 
    .roadmap-a-few-moments-later-group { width: 180px; max-width: 180px; left: calc(6 * var(--spacing-unit)); top: 50%; transform: translate(-50%, -50%); }
    .roadmap-a-few-moments-later-group .main-text { font-size: 1.2em !important; white-space: normal; }
    .roadmap-genesis-protocol-group { left: calc(7 * var(--spacing-unit)); top: 50%; transform: translate(-50%, -50%); width: 150px; max-width: 150px; }
    .roadmap-genesis-protocol-group .main-text { font-size: 1.1em !important; top: -30px; white-space: normal; }
    .roadmap-soon-at-end { font-size: 1.8em; top: 40%; left: calc(12 * var(--spacing-unit) - 50px); white-space: normal; } 

    .cta-section { padding: 50px 4%; margin: 30px auto; }
    .cta-section h3 { font-size: 1.8em; margin-bottom: 20px; }
    .cta-buttons-container { flex-direction: column; gap: 15px; }
    .cta-button { padding: 15px 25px; font-size: 0.9em; }
    .cta-button i { font-size: 1em; }
    
    footer { padding: 30px 4%; }
    .social-links a { font-size: 1.2em; margin: 0 10px; }
}