/* =========================================
   1. VARIABLES & RESET (Cyber Palette)
   ========================================= */
   
:root {
    --primary: #3a0ca3;
    --primary-glow: #4cc9f0;
    --gold: #ffb703;
    --gold-dim: #b8860b;
    --black: #050505;
    --dark: #111111;
    --grey: #1a1a1a;
    --white: #ffffff;
    --text-muted: #888888;
    
    --font-main: 'Poppins', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'Fira Code', monospace;

    --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { 
    background-color: var(--black); 
    color: var(--white); 
    font-family: var(--font-main); 
    overflow-x: hidden;
    padding-top: 30px; /* Space for System Bar */
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
::selection { background: var(--gold); color: var(--black); }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -1px; }
.highlight { color: var(--gold); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mono-font { font-family: var(--font-mono); }
.outline-text { 
    -webkit-text-stroke: 1px rgba(255,255,255,0.3); 
    color: transparent; 
}

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.section { padding: 100px 0; position: relative; overflow: hidden; }
.bg-dark { background: var(--dark); }
.bg-light { background: #f4f4f4; color: var(--black); }
.bg-black { background: var(--black); }
.bg-vibe { background: #1a0b2e; }

/* Buttons */
.btn { 
    padding: 15px 35px; border-radius: 0px; font-weight: 700; 
    text-transform: uppercase; text-decoration: none; display: inline-block;
    transition: all 0.3s var(--ease); font-family: var(--font-display);
    letter-spacing: 1px; clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
    border: none; cursor: pointer;
}
.btn-accent { background: var(--primary); color: var(--white); border: 1px solid var(--primary); }
.btn-accent:hover { background: transparent; box-shadow: 0 0 20px var(--primary); }
.btn-outline { border: 1px solid var(--white); color: var(--white); margin-left: 15px; }
.btn-outline:hover { background: var(--white); color: var(--black); }
.btn-gold-solid { background: var(--gold); color: var(--black); font-size: 1.2rem; padding: 20px 50px; }
.btn-gold-solid:hover { transform: scale(1.05); box-shadow: 0 0 30px var(--gold); }
.btn-nav { font-size: 0.9rem; padding: 10px 25px; background: var(--gold); color: #000; border: none; }

/* =========================================
   NEW: SYSTEM BAR
   ========================================= */
.system-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 35px;
    background: #000; border-bottom: 1px solid #333; z-index: 10000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; font-family: var(--font-mono); font-size: 0.75rem;
    color: #666; letter-spacing: 1px;
}
.sys-item { display: inline-flex; align-items: center; margin-right: 20px; }
.sys-val { color: var(--primary-glow); margin-left: 5px; font-weight: bold; }
.sys-val.warning { color: var(--gold); }
.led { width: 8px; height: 8px; background: #0f0; border-radius: 50%; display: inline-block; box-shadow: 0 0 5px #0f0; margin-right: 5px; }
.blink { animation: blink-led 1s infinite alternate; }
@keyframes blink-led { from { opacity: 1; } to { opacity: 0.3; } }
@media (max-width: 768px) {
    .system-bar { justify-content: center; font-size: 0.65rem; }
    .sys-center, .sys-right { display: none; }
}


/* =========================================
   1. SYSTEM BAR (LA BARRA IN ALTO)
   ========================================= */
/* Assicurati che il div con i dati verdi/blu abbia questa classe o simile */
.system-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px; /* Altezza fissa */
    background: #000; /* Sfondo nero per coprire il contenuto sotto */
    z-index: 1001; /* Deve essere SOPRA a tutto, anche al menu */
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #222;
}

/* =========================================
   2. HEADER & NAV (MENU PRINCIPALE)
   ========================================= */
.header { 
    position: fixed; 
    width: 100%; 
    /* Parte e RIMANE a 35px dall'alto (sotto la system bar) */
    top: 35px; 
    z-index: 1000; /* Z-index inferiore alla system bar (1001) */
    padding: 25px 0; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    mix-blend-mode: difference; 
}

/* QUANDO SCROLLI */
.header.scrolled { 
    /* IMPORTANTE: Non mettiamo top: 0, ma lasciamo top: 35px */
    top: 35px !important; 
    padding: 15px 0; /* Si compatta */
    background: #000000 !important; /* Diventa nero solido */
    mix-blend-mode: normal; /* Torna normale */
    border-bottom: 1px solid #333; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
}

/* ... (Il resto delle classi nav-container, logo, ecc. rimangono uguali) ... */
.nav-container { display: flex; justify-content: space-between; align-items: center; }

.logo { 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--white); 
    font-family: var(--font-display); 
    text-decoration: none; 
    letter-spacing: -1px;
}
.dot { color: var(--gold); }
.nav-menu { display: flex; list-style: none; gap: 30px; align-items: center; }
.nav-link { 
    color: var(--white); text-decoration: none; font-weight: 500; 
    font-size: 0.9rem; text-transform: uppercase; position: relative; letter-spacing: 1px;
}
.nav-link::after { 
    content: ''; position: absolute; width: 0; height: 2px; 
    bottom: -5px; left: 0; background: var(--gold); transition: 0.3s; 
}
.nav-link:hover::after { width: 100%; }
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 2px; margin: 6px auto; background: var(--white); transition: 0.3s; }

/* Hamburger */
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 2px; margin: 6px auto; background: var(--white); transition: 0.3s; }


/* =========================================
   3. HERO & NEW CANVAS
   ========================================= */
.hero { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    overflow: hidden; 
    
    /* SFONDO IMMAGINE RICHIESTO */
    background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    
    /* Fissa lo sfondo per effetto parallasse durante lo scroll */
    background-attachment: fixed; 
}

/* Canvas Background (La Rete Neurale) */
#neural-canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    /* Opacità ridotta per far vedere l'immagine sotto, ma mantenere l'effetto tech */
    opacity: 0.5; 
    pointer-events: none; /* Permette di cliccare attraverso il canvas */
}

/* Overlay scuro per rendere leggibile il testo sopra l'immagine */
.hero-overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(5,5,5,1) 100%); 
    z-index: 1; 
}

.hero-content { 
    position: relative; 
    z-index: 2; /* Porta il testo sopra canvas e overlay */
    text-align: center; 
    pointer-events: none; 
}

.hero-btns, .btn { pointer-events: auto; } /* Riabilita i click sui bottoni */

.hero-subtitle { 
    font-size: 1.2rem; 
    color: #e0e0e0; /* Reso un po' più chiaro per contrasto */
    margin-bottom: 30px; 
    margin-top: 20px; 
    line-height: 1.6; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Ombra per leggibilità */
}

/* Glitch CSS (Invariato) */
.glitch-wrapper { position: relative; display: inline-block; }
.hero-title { font-size: 5rem; margin: 0; line-height: 1; color: var(--white); position: relative; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -1px 0 red; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -1px 0 blue; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-2 5s infinite linear alternate-reverse; }
.layer-2 { display: none; }

@keyframes glitch-anim-1 {
  0% { clip: rect(20px, 9999px, 10px, 0); } 100% { clip: rect(80px, 9999px, 90px, 0); }
}
@keyframes glitch-anim-2 {
  0% { clip: rect(60px, 9999px, 70px, 0); } 100% { clip: rect(10px, 9999px, 30px, 0); }
}

.scroll-down { 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 0.8rem; 
    letter-spacing: 3px; 
    color: var(--white); 
    animation: bounce 2s infinite; 
    z-index: 5; 
    text-shadow: 0 2px 4px rgba(0,0,0,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);} }


/* =========================================
   4. MARQUEE & TICKER
   ========================================= */
.marquee-strip { background: var(--gold); padding: 15px 0; overflow: hidden; white-space: nowrap; transform: rotate(-2deg) scale(1.05); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); position: relative; z-index: 5; }
.marquee-content { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--black); display: inline-block; animation: scroll-left 20s linear infinite; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* STILE PER LA STRISCIA INVERSA */
.marquee-strip.reverse {
    transform: rotate(-2deg) scale(1.05); /* Pende dal lato opposto */
    background: var(--white); /* Sfondo bianco per contrasto con l'altra gialla */
    color: var(--black);
    z-index: 4; /* Sta leggermente sotto l'altra visivamente */
    margin-top: -30px; /* Si sovrappone leggermente per effetto 'caos' */
    border: 2px solid var(--black);
}

.marquee-content.scroll-reverse {
    animation: scroll-right 20s linear infinite;
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* Stock Ticker */
.stock-ticker { background: #111; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 10px 0; overflow: hidden; white-space: nowrap; }
.ticker-wrap { display: inline-block; animation: scroll-left 30s linear infinite; }
.ticker-item { display: inline-block; margin-right: 40px; font-family: var(--font-mono); font-size: 0.9rem; color: #fff; }
.ticker-item .up { color: #27c93f; }
.ticker-item .down { color: #ff5f56; }

/* =========================================
   5. ABOUT & TILT IMAGE
   ========================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.image-wrapper-tilt { perspective: 1000px; }
.img-frame { width: 100%; border: 2px solid var(--gold); padding: 10px; transform: rotateY(15deg) rotateX(5deg); transition: 0.5s; }
.img-frame img { width: 100%; display: block; filter: grayscale(100%); transition: 0.5s; }
.image-wrapper-tilt:hover .img-frame { transform: rotateY(0) rotateX(0); box-shadow: 0 0 50px rgba(255, 183, 3, 0.2); }
.image-wrapper-tilt:hover img { filter: grayscale(0%); }
.signature { font-family: 'Brush Script MT', cursive; font-size: 2.5rem; color: var(--gold); margin-top: 20px; transform: rotate(-5deg); }

/* =========================================
   6. TERMINAL SIMULATOR
   ========================================= */
.terminal-window { background: rgba(20, 20, 20, 0.95); border-radius: 8px; border: 1px solid #333; box-shadow: 0 10px 40px rgba(0,0,0,0.5); font-family: var(--font-mono); overflow: hidden; max-width: 800px; margin: 0 auto; min-height: 300px; }
.terminal-header { background: #333; padding: 10px 15px; display: flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.terminal-title { color: #ccc; font-size: 0.8rem; margin-left: 10px; }
.terminal-body { padding: 20px; color: #27c93f; font-size: 1rem; line-height: 1.6; }
.cursor { animation: blink 1s infinite; font-weight: bold; color: var(--white); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* =========================================
   NEW: THE MONOLITH (3D CUBE)
   ========================================= */
.perspective-section { perspective: 1000px; overflow: visible; }
.scene { width: 200px; height: 200px; margin: 50px auto; perspective: 600px; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); animation: spin-cube 10s infinite linear; }
.cube__face { position: absolute; width: 200px; height: 200px; border: 2px solid var(--primary-glow); line-height: 200px; font-size: 40px; font-weight: bold; color: var(--white); text-align: center; background: rgba(58, 12, 163, 0.2); box-shadow: 0 0 20px rgba(76, 201, 240, 0.5); }
.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes spin-cube {
  0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); }
  100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); }
}

/* =========================================
   NEW: ROI CALCULATOR
   ========================================= */

.roi-calculator {
    display: flex;
    flex-direction: column;
}

/* Crea una griglia interna per gli input (tranne il risultato finale) */
.roi-calculator .calc-row {
    margin-bottom: 15px;
}

/* Opzionale: Se vuoi due colonne su desktop */
@media (min-width: 768px) {
    .roi-calculator {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Due colonne */
        gap: 20px;
    }
    
    /* Il box del risultato occupa tutta la larghezza in basso */
    .result-box {
        grid-column: 1 / -1; 
        margin-top: 20px;
    }
}

/* =========================================
   ROADMAP TIMELINE (GABARA EDITION)
   ========================================= */

.roadmap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0 100px 0; /* Extra padding in basso per il finale */
}

/* La Linea Verticale Centrale */
.roadmap::after {
    content: '';
    position: absolute;
    width: 4px;
    background: var(--gold);
    top: 0;
    bottom: 0; /* Arriva fino in fondo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.3); /* Bagliore dorato */
}

/* ITEMS GENERALI */
.roadmap-item {
    padding: 20px 40px;
    position: relative;
    background: transparent;
    width: 50%;
    z-index: 1; /* Sta sopra la linea */
}

/* Posizionamento Zig-Zag Desktop */
.roadmap-item.left {
    left: 0;
    text-align: right;
    padding-right: 60px; /* Spazio per il pallino */
}

.roadmap-item.right {
    left: 50%;
    text-align: left;
    padding-left: 60px; /* Spazio per il pallino */
}

/* I PALLINI (Dots) sulla linea */
.roadmap-item::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--black);
    border: 4px solid var(--gold);
    border-radius: 50%;
    top: 30px; /* Allineato col titolo */
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.5); /* Bordo esterno nero per stacco */
}

/* Posizione Pallini Desktop */
.roadmap-item.left::after { right: -12px; }
.roadmap-item.right::after { left: -12px; }

/* Effetto Hover sul Pallino */
.roadmap-item:hover::after {
    background: var(--gold);
    transform: scale(1.3);
    box-shadow: 0 0 15px var(--gold);
}

/* CONTENUTO DEL BOX */
.rm-content {
    padding: 30px;
    background: #111; /* Leggermente più scuro per contrasto */
    position: relative;
    border: 1px solid #333;
    border-left: 4px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover sulla card */
.roadmap-item:hover .rm-content {
    transform: scale(1.03) translateY(-5px);
    background: #1a1a1a;
    border-color: #555;
    border-left-color: var(--gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}

/* Tipografia */
.rm-date {
    font-family: var(--font-mono);
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.roadmap-item h3 {
    margin: 5px 0 15px;
    font-size: 1.5rem;
    color: var(--white);
}

.text-danger { color: #ff5f56 !important; }

/* =========================================
   ROADMAP FINALE: CENTRATO & ESPLOSIVO (ULTRA EVIDENTE)
   ========================================= */

/* Posizionamento Centrale in fondo */
.roadmap-item.full-center {
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    margin-top: 100px; /* Aumentato lo spazio */
    padding: 0;
    z-index: 10;
}

/* Rimuoviamo i pallini standard per il finale */
.roadmap-item.full-center::after { display: none; }

/* Grafica del Box "Breaking Point" - POTENZIATA */
.rm-content.breaking-point {
    background: #000; /* Nero assoluto */
    border: 4px solid #ff0000; /* Bordo rosso puro più spesso */
    padding: 70px 50px; /* Padding aumentato */
    max-width: 900px; /* Box più largo */
    width: 95%;
    text-align: center;
    /* Ombra rossa molto più intensa e diffusa */
    box-shadow: 0 0 80px rgba(255, 0, 0, 0.6), inset 0 0 30px rgba(255, 0, 0, 0.2);
    position: relative;
    /* Leggera pulsazione dell'intero box */
    animation: box-pulse 2s infinite alternate;
}

@keyframes box-pulse {
    from { transform: scale(1); box-shadow: 0 0 80px rgba(255, 0, 0, 0.6); }
    to { transform: scale(1.02); box-shadow: 0 0 120px rgba(255, 0, 0, 0.8); }
}

/* Connettore Specifico per il Finale */
.roadmap-item.full-center::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; /* Linea più spessa */
    height: 100px;
    background: linear-gradient(to bottom, var(--gold) 0%, #ff0000 100%); /* Gradiente più netto */
    z-index: -1;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); /* Bagliore sulla linea */
}

/* Titoli e Animazioni Finale - INGRANDITI */
.climax-title-big {
    font-size: 5rem; /* Molto più grande */
    font-weight: 900;
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin: 30px 0;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.glitch-text-effect {
    color: #ff0000; /* Rosso puro */
    display: inline-block;
    /* Animazione più veloce e aggressiva */
    animation: rage-shake-hard 0.1s infinite; 
    text-shadow: 2px 2px 0px #000, -2px -2px 0px rgba(255,0,0,0.5);
}

@keyframes rage-shake-hard {
    0% { transform: translate(0, 0) rotate(0deg) skew(0deg); }
    25% { transform: translate(-4px, 4px) rotate(-2deg) skew(2deg); }
    50% { transform: translate(4px, -2px) rotate(2deg) skew(-2deg); }
    75% { transform: translate(-2px, -4px) rotate(-1deg) skew(1deg); }
    100% { transform: translate(2px, 2px) rotate(1deg) skew(0deg); }
}

/* Testo descrittivo più grande */
.rm-content.breaking-point p {
    font-size: 1.3rem !important;
    line-height: 1.6;
}

/* Mobile Adjust */
@media (max-width: 768px) {
    .climax-title-big { font-size: 3rem; }
    .rm-content.breaking-point { padding: 40px 20px; }
    .roadmap-item.full-center { margin-top: 60px; }
    .roadmap-item.full-center::before { height: 60px; top: -60px; }
}

/* =========================================
   LOUNGE & CARDS
   ========================================= */
.humidor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.cigar-card { border: 1px solid #333; padding: 30px; background: linear-gradient(180deg, #111 0%, #0a0a0a 100%); position: relative; transition: 0.4s; }
.cigar-card:hover { border-color: var(--gold); transform: translateY(-5px); }
.rating { position: absolute; top: 20px; right: 20px; color: var(--gold); font-family: var(--font-mono); border: 1px solid var(--gold); padding: 5px 10px; }
.notes { color: #888; font-size: 0.9rem; font-style: italic; margin-top: 10px; }
.bar-mini { width: 100%; height: 4px; background: #333; margin-top: 15px; }
.bar-mini .fill { height: 100%; background: var(--gold); }

/* =========================================
   CRYPTO & UTILITIES
   ========================================= */
.crypto-box { background: #111; border: 1px solid #333; padding: 30px; max-width: 600px; margin: 30px auto; border-radius: 10px; }
.crypto-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; padding: 15px 0; font-family: var(--font-mono); color: #ccc; }
.crypto-row:last-child { border-bottom: none; }
.coin { color: var(--gold); font-weight: bold; }
.addr { font-size: 0.8rem; word-break: break-all; margin: 0 15px; }

.calendar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.cal-item { background: #1a1a1a; padding: 20px; border-left: 4px solid #333; transition: 0.3s; }
.cal-item.active { border-color: var(--gold); background: #222; }
.cal-item.past { opacity: 0.5; }
.cal-date { font-weight: bold; font-size: 1.5rem; color: #fff; margin-bottom: 5px; }
.cal-item h4 { color: var(--primary-glow); margin-bottom: 5px; }

/* =========================================
   7. LOGO GRID
   ========================================= */
.logo-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; opacity: 0.6; }
.logo-item { font-size: 3rem; color: #aaa; transition: 0.3s; }
.logo-item:hover { color: var(--gold); transform: scale(1.1); filter: drop-shadow(0 0 10px var(--gold)); opacity: 1; }

/* =========================================
   8. COMPARISON TABLE
   ========================================= */
.comparison-table { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #333; border: 1px solid #333; margin-top: 40px; }
.comparison-table > div { background: var(--dark); padding: 20px; display: flex; align-items: center; }
.col-head { font-weight: 700; font-size: 1.1rem; background: #222 !important; text-transform: uppercase; }
.comparison-table .highlight { color: var(--gold); font-weight: 700; background: rgba(255, 183, 3, 0.05) !important; }

/* =========================================
   9. PARALLAX SECTION
   ========================================= */
.section-parallax { background-attachment: fixed; background-size: cover; background-position: center; height: 500px; display: flex; align-items: center; justify-content: center; position: relative; }
.parallax-overlay { background: rgba(0,0,0,0.6); padding: 40px; border: 2px solid var(--white); text-align: center; backdrop-filter: blur(5px); }
.parallax-overlay h2 { font-size: 2.5rem; color: var(--white); }

/* =========================================
   10. AUDIO VISUALIZER
   ========================================= */
.music-player { display: flex; align-items: center; gap: 30px; max-width: 600px; margin: 0 auto; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
.album-art { width: 100px; height: 100px; border-radius: 5px; overflow: hidden; position: relative; }
.album-art img { width: 100%; height: 100%; object-fit: cover; }
.vinyl-effect { position: absolute; inset: 0; background: repeating-radial-gradient(#000 0, #000 2px, transparent 3px, transparent 4px); opacity: 0.3; }
.track-info { text-align: left; flex: 1; }
.track-info h3 { margin: 0; color: var(--gold); font-size: 1.2rem; }
.track-info p { margin: 5px 0 15px; font-size: 0.9rem; color: #ccc; }
.audio-bars { display: flex; gap: 3px; height: 30px; align-items: flex-end; }
.audio-bars .bar { width: 5px; background: var(--primary-glow); animation: sound 0.5s infinite alternate; }
.bar:nth-child(odd) { animation-duration: 0.4s; background: var(--gold); }
@keyframes sound { 0% { height: 5px; } 100% { height: 100%; } }

/* =========================================
   11. GLASSMORPHISM CARDS
   ========================================= */
.bg-gradient { background: linear-gradient(135deg, #111 0%, #222 100%); position: relative; }
.bg-gradient::before { content: ''; position: absolute; top: -50px; left: -50px; width: 300px; height: 300px; background: var(--primary); filter: blur(150px); opacity: 0.4; }
.glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }
.glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 15px; transition: 0.3s; }
.glass-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.08); border-color: var(--gold); }
.glass-card h3 { color: var(--white); margin-bottom: 10px; font-size: 1.3rem; }

/* =========================================
   13. CODE SNIPPET STYLE
   ========================================= */
.code-window { background: #1e1e1e; border-radius: 6px; padding: 20px; font-family: var(--font-mono); border-left: 4px solid var(--gold); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
pre { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #d4d4d4; }
.kwd { color: #569cd6; } .cls { color: #4ec9b0; } .str { color: #ce9178; } .func { color: #dcdcaa; } .this { color: #569cd6; }

/* =========================================
   14. SKILLS & ACCORDION
   ========================================= */
.skill-wrapper { margin-bottom: 25px; }
.skill-label { display: flex; justify-content: space-between; margin-bottom: 5px; font-weight: 600; }
.skill-bar-bg { height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
.skill-bar-fill { height: 100%; background: var(--primary); width: 0; transition: width 1.5s ease; }
.skill-bar-fill.gold { background: var(--gold); }

.accordion { margin-top: 40px; }
.acc-item { border-bottom: 1px solid #333; }
.acc-head { padding: 20px; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; }
.acc-head:hover { color: var(--gold); }
.acc-head::after { content: '+'; font-size: 1.5rem; }
.acc-item.active .acc-head::after { content: '-'; color: var(--gold); }
.acc-body { max-height: 0; overflow: hidden; transition: 0.4s; color: #999; padding: 0 20px; }
.acc-item.active .acc-body { max-height: 200px; padding-bottom: 20px; }

/* =========================================
   15. PROCESS & HACKER FORM
   ========================================= */
.process-steps { display: flex; gap: 30px; margin-top: 50px; }
.step { flex: 1; border-top: 2px solid #ddd; padding-top: 20px; position: relative; }
.step-num { font-size: 3rem; font-weight: 700; color: #eee; position: absolute; top: -35px; background: var(--white); padding-right: 10px; }
.step h3 { margin-top: 10px; font-size: 1.5rem; }

.hacker-form { display: inline-flex; align-items: center; border-bottom: 2px solid var(--gold); padding: 10px; margin-top: 30px; font-family: var(--font-mono); }
.prompt { color: var(--gold); margin-right: 10px; font-weight: bold; }
.hacker-form input { background: transparent; border: none; color: var(--white); outline: none; width: 250px; font-family: var(--font-mono); }
.hacker-form button { background: transparent; border: none; color: var(--gold); cursor: pointer; font-weight: bold; }
.hacker-form button:hover { text-shadow: 0 0 10px var(--gold); }

/* =========================================
   ANIMATIONS & DECORATION
   ========================================= */
.animate-fade-up { opacity: 0; transform: translateY(50px); transition: 0.8s; }
.animate-fade-left { opacity: 0; transform: translateX(50px); transition: 0.8s; }
.animate-fade-right { opacity: 0; transform: translateX(-50px); transition: 0.8s; }
.animate-zoom { opacity: 0; transform: scale(0.8); transition: 0.8s; }
.is-visible { opacity: 1; transform: translate(0) scale(1); }

.floating-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }
.shape { position: absolute; opacity: 0.1; filter: blur(50px); animation: float 10s infinite alternate; }
.s1 { top: 20%; left: 10%; width: 300px; height: 300px; background: var(--primary); }
.s2 { bottom: 20%; right: 10%; width: 200px; height: 200px; background: var(--gold); animation-delay: 2s; }
@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); } }

/* LOADER */
.loader { position: fixed; inset: 0; background: #000; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); transition: 0.5s; }
.loader-text { color: var(--gold); margin-bottom: 10px; animation: blink 0.5s infinite; }
.loader-bar { width: 200px; height: 2px; background: #333; }
.loader-progress { width: 0; height: 100%; background: var(--gold); transition: width 2s ease-in-out; }
.loader.hide { opacity: 0; pointer-events: none; }

/* 3D Cards */
.cards-3d-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.card-3d { background: rgba(255,255,255,0.05); padding: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); transition: 0.4s; }
.card-3d:hover { transform: translateY(-10px) rotateX(5deg); background: rgba(255,255,255,0.1); border-color: var(--primary); }
.size-lg { font-size: 2.5rem; margin-bottom: 20px; display: block; }

/* FOOTER */
.footer { background: #080808; padding: 80px 0 20px; border-top: 1px solid #222; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer h3 { color: var(--gold); font-size: 2rem; margin-bottom: 10px; }
.footer ul li { margin-bottom: 10px; }
.footer a { color: #777; text-decoration: none; transition: 0.3s; }
.footer a:hover { color: var(--white); }
.footer-bottom { text-align: center; color: #444; font-size: 0.8rem; border-top: 1px solid #111; padding-top: 20px; }

/* MOBILE RESPONSIVE */
@media (max-width: 968px) {
    .hero-title { font-size: 3rem; }
    .grid-2, .comparison-table, .stats-flex, .process-steps, .cards-3d-grid, .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .roadmap::after { left: 40px; }
    .roadmap-item { width: 100%; padding-left: 70px; padding-right: 25px; }
    .roadmap-item.left, .roadmap-item.right { left: 0; text-align: left; }
    .roadmap-item.left::after, .roadmap-item.right::after { left: 30px; }
    
    .nav-menu { position: fixed; left: -100%; top: 35px; flex-direction: column; background: #000; width: 100%; height: calc(100vh - 35px); justify-content: center; transition: 0.4s; }
    .nav-menu.active { left: 0; }
    .hamburger { display: block; z-index: 1001; }
    .comparison-table { overflow-x: scroll; display: flex; flex-direction: column; }
    .comparison-table .row-item { text-align: left; border-bottom: 1px solid #444; }
    .section-parallax { height: 300px; }
}

/* SYSTEM DIAGNOSTICS MODAL - FIXED */
.sys-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(5px); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s;
}
.sys-modal-overlay.open { opacity: 1; pointer-events: auto; }

.sys-modal-window {
    background: #0a0a0a; border: 1px solid var(--gold);
    width: 95%; max-width: 900px; /* Allargato per far stare i dati */
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(255, 183, 3, 0.15);
    font-family: var(--font-mono);
    display: flex; flex-direction: column;
    max-height: 90vh; /* Evita che esca dallo schermo su laptop piccoli */
}

.sys-modal-header {
    background: #111; padding: 15px 20px; border-bottom: 1px solid #333;
    display: flex; align-items: center; gap: 15px; color: #666; font-size: 0.8rem;
    flex-shrink: 0;
}

.sys-modal-body { 
    padding: 30px; 
    overflow-y: auto; /* Permette lo scroll se i dati sono tanti */
}

/* GRIGLIA FIX */
.diag-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Due colonne */
    gap: 30px 40px; /* Più spazio orizzontale tra le colonne */
}

/* ITEM FIX - Il cuore della correzione */
.diag-item {
    border-bottom: 1px solid #222; 
    padding-bottom: 8px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 20px; /* Spazio minimo tra etichetta e valore */
    min-width: 0; /* Trucco CSS per evitare overflow nei flex container */
}

.diag-item label { 
    color: #666; 
    font-size: 0.75rem; 
    white-space: nowrap; /* IMPEDISCE DI ANDARE A CAPO */
    flex-shrink: 0; /* L'etichetta non si deve mai rimpicciolire */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.diag-item span { 
    color: var(--white); 
    font-weight: bold; 
    text-align: right;
    
    /* Gestione testi lunghi */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Occupa tutto lo spazio disponibile */
    min-width: 0; /* Fondamentale per far funzionare text-overflow */
}

/* GPU Specifico: Se è il primo elemento, fallo estendere su due colonne */
.diag-grid > .diag-item:first-child {
    grid-column: 1 / -1; /* Occupa tutta la larghezza */
}

.sys-code-block {
    background: #000; padding: 15px; border-left: 3px solid var(--primary);
    font-size: 0.7rem; color: var(--gold); word-break: break-all;
    line-height: 1.4;
    margin-top: 30px;
}

/* MEDIA QUERY: Su schermi piccoli passa a 1 colonna per leggibilità */
@media (max-width: 800px) {
    .diag-grid { grid-template-columns: 1fr; gap: 15px; }
    .sys-modal-window { width: 100%; height: 100%; max-width: none; border-radius: 0; border: none; }
}

/* =========================================
   FIX SPECIFICO PER VEDERE TUTTA LA GPU
   ========================================= */

/* 1. Modifica il contenitore della riga GPU */
/* Seleziona il primo elemento della griglia (la riga GPU) */
.diag-grid > .diag-item:first-child {
    /* Allinea l'etichetta "GPU RENDERER" in alto, non al centro */
    align-items: flex-start; 
}

/* 2. Modifica il valore testuale della GPU */
#gpu-val {
    /* Permette al testo di andare a capo su nuove righe */
    white-space: normal !important;
    
    /* Rende visibile tutto il testo, rimuovendo il taglio */
    overflow: visible !important;
    text-overflow: clip !important; 
    
    /* Forza l'interruzione delle parole lunghe se superano il bordo */
    word-break: break-word; 
    
    /* Allinea a sinistra per una migliore leggibilità quando è su più righe */
    text-align: left;
    
    /* Un piccolo margine per allinearlo visivamente con l'etichetta a sinistra */
    margin-top: 3px;
}

/* ANIMAZIONE PAURA (TREMOLIO) */
@keyframes shiver {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    10% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    20% { transform: translate(-2px, 0px) rotate(0.5deg); }
    30% { transform: translate(1px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(0.5deg); }
    50% { transform: translate(-1px, 2px) rotate(-0.5deg); }
    60% { transform: translate(-2px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-0.5deg); }
    80% { transform: translate(-1px, -1px) rotate(0.5deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-0.5deg); }
}

.scared-text {
    display: inline-block; /* Necessario per animare lo span */
    animation: shiver 0.15s infinite linear; /* Velocità frenetica */
    color: var(--gold); /* Mantiene il colore oro */
    text-shadow: 0 0 5px rgba(255, 183, 3, 0.5); /* Alone di sudore/paura */
}


/* =========================================
   PURE CSS ROCKET & ANIMATION
   ========================================= */

/* Posizionamento del Razzo nel contenitore destro */
.css-rocket-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /* L'animazione muove l'intero container */
    animation: rocket-fly-diagonal 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* 1. CORPO DEL RAZZO */
.css-rocket {
    position: absolute;
    width: 50px;
    height: 140px;
    background-color: var(--gold); /* Giallo Gabara */
    border-radius: 50% 50% 10px 10px; /* Forma a proiettile */
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.2); /* Ombra interna per volume 3D */
    
    /* Posizione iniziale (verrà mossa dall'animazione) */
    left: 20%; 
    bottom: -100px;
    transform: rotate(45deg); /* Inclinazione di volo */
    z-index: 10;
}

/* 2. OBLO (Finestrino) */
.rocket-window {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: #1a1a1a;
    border: 3px solid #e0a100;
    border-radius: 50%;
}

/* 3. ALETTE (Fins) */
.rocket-fin {
    position: absolute;
    bottom: 10px;
    width: 0; 
    height: 0;
    border-style: solid;
}

.rocket-fin-left {
    left: -15px;
    border-width: 0 15px 30px 0;
    border-color: transparent #d49500 transparent transparent; /* Giallo scuro */
}

.rocket-fin-right {
    right: -15px;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent transparent #d49500; /* Giallo scuro */
}

.rocket-fin-center {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 4px;
    height: 30px;
    background-color: #d49500;
}

/* 4. FUOCO (Propulsione) */
.rocket-fire {
    position: absolute;
    top: 100%;
    left: 10%;
    width: 80%;
    height: 60px;
    background: linear-gradient(to bottom, #ff5f56, transparent);
    border-radius: 0 0 20px 20px;
    animation: flame-pulse 0.1s infinite alternate;
    opacity: 0.8;
}

.rocket-fire-core {
    position: absolute;
    top: 100%;
    left: 25%;
    width: 50%;
    height: 30px;
    background: linear-gradient(to bottom, #fff, transparent); /* Nucleo bianco caldo */
    border-radius: 0 0 20px 20px;
    filter: blur(2px);
    animation: flame-pulse 0.1s infinite alternate-reverse;
}

/* ANIMAZIONI */

/* Il volo attraverso la sezione */
@keyframes rocket-fly-diagonal {
    0% {
        transform: translate(0, 150px) scale(0.8); /* Parte dal basso */
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate(400px, -600px) scale(1.2); /* Esce in alto a destra */
        opacity: 0; /* Svanisce alla fine */
    }
}

/* Tremolio del fuoco */
@keyframes flame-pulse {
    from { height: 60px; }
    to { height: 75px; transform: scaleX(1.1); }
}

/* RESPONSIVE: Su mobile mettiamo il testo sopra e il razzo sotto */
@media (max-width: 768px) {
    .container.relative { flex-direction: column; text-align: center !important; }
    .tacon-text { max-width: 100% !important; text-align: center !important; margin-bottom: 50px; }
    .tacon-visual { width: 100%; height: 300px; }
    /* Aggiusta traiettoria su schermi piccoli */
    @keyframes rocket-fly-diagonal {
        0% { transform: translate(-50px, 100px); opacity: 0; }
        100% { transform: translate(200px, -400px); opacity: 0; }
    }
}


/* =========================================
   FAKE COMMIT HISTORY STYLES (REFINED)
   ========================================= */

#commit-section {
    border-bottom: 1px solid #333;
    background: #000; /* Nero assoluto per contrasto */
    padding: 60px 0;
}

.commit-graph-wrapper {
    margin-top: 30px;
    padding: 15px;
    background: #0d1117; /* Sfondo scuro GitHub */
    border: 1px solid #30363d;
    border-radius: 8px;
    
    /* Gestione dello scroll orizzontale se lo schermo è piccolo */
    overflow-x: auto; 
    white-space: nowrap;
    
    /* Scrollbar personalizzata sottile */
    scrollbar-width: thin;
    scrollbar-color: var(--gold) #0d1117;
}

/* LA GRIGLIA: Il cuore della modifica */
.commit-grid {
    display: grid;
    /* 7 righe fisse (Lun-Dom) */
    grid-template-rows: repeat(7, 10px); 
    /* Flusso in colonne (settimane) */
    grid-auto-flow: column; 
    gap: 3px; /* Spaziatura tra i blocchi */
    width: max-content; /* Si allarga quanto serve */
}

.commit-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #161b22; /* Colore 'vuoto' base */
    transition: all 0.2s ease;
}

/* Effetto Hover */
.commit-box:hover {
    transform: scale(1.5);
    z-index: 10;
    box-shadow: 0 0 10px var(--gold);
    border: 1px solid #fff;
}

/* Colori Livelli (Verde GitHub acceso) */
.level-0 { background-color: #161b22; }
.level-1 { background-color: #0e4429; }
.level-2 { background-color: #006d32; }
.level-3 { background-color: #26a641; }
.level-4 { 
    background-color: #39d353; 
    box-shadow: 0 0 4px #39d353; /* Leggero alone per i massimi */
}

.commit-footer {
    display: flex;
    justify-content: space-between; /* Separa numero e legenda */
    align-items: flex-end;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 20px;
}

.commit-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #8b949e;
    font-family: var(--font-mono);
}

.legend-box { width: 10px; height: 10px; border-radius: 2px; }

/* Tooltip */
.commit-tooltip {
    position: fixed;
    background: rgba(10, 10, 10, 0.95);
    color: #fff;
    padding: 8px 12px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none;
    display: none;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    font-family: var(--font-mono);
}