:root {
    --cyan: #00aeef;
    --magenta: #ec008c;
    --yellow: #fff200;
    --black: #000000;
    --white: #ffffff;
    --gray-meta: #888888;
}

body { background: var(--white); font-family: 'Lexend Deca', sans-serif; margin: 0; text-transform: uppercase; color: var(--black); }

/* Dimensioni Logo */
.logo-grafichello {
    height: 35px;
    width: auto;
    fill: var(--black);
    transition: fill 0.3s ease;
}

/* Quando il menu CORE è attivo, il logo diventa bianco */
.menu-overlay.active ~ .nav-elite .logo-grafichello {
    fill: var(--white);
}

/* Nav & CORE/HOME */
.nav-elite { padding: 30px; border-bottom: 2px solid var(--black); position: sticky; top: 0; background: white; z-index: 1000; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.nav-trigger { cursor: pointer; display: flex; align-items: center; gap: 12px; }
.trigger-text { font-weight: 900; font-size: 0.9rem; letter-spacing: 2px; }
.dot { width: 14px; height: 14px; background: var(--black); border-radius: 50%; transition: 0.3s; }
.nav-trigger:hover .dot { transform: scale(1.3); background: var(--magenta); }

/* Menu Overlay */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--black); color: white; display: flex; align-items: center; padding: 50px; transform: translateY(-100%); transition: 0.5s cubic-bezier(0.8, 0, 0.2, 1); z-index: 999; }
.menu-overlay.active { transform: translateY(0); }
.nav-massive { list-style: none; padding: 0; }
.nav-massive li { margin-bottom: 20px; }
.nav-massive li a { color: white; text-decoration: none; font-size: 6vw; font-weight: 900; line-height: 1; transition: 0.3s; }

/* --- HOVER DINAMICO MENU CMYK --- */
.nav-massive li:nth-child(1) a:hover { color: var(--cyan); }
.nav-massive li:nth-child(2) a:hover { color: var(--magenta); }
.nav-massive li:nth-child(3) a:hover { color: var(--yellow); }
.nav-massive li:nth-child(4) a:hover { color: #555; } /* Grigio per Cyber su fondo nero */

/* --- SEZIONE HERO --- */
.hero-brutal { 
    padding: 120px 30px; 
    border-bottom: 2px solid var(--black); 
}

.hero-title { 
    font-size: clamp(3rem, 12vw, 10rem); 
    font-weight: 900; 
    line-height: 0.85; 
    letter-spacing: 0.04em; 
    margin: 0; 
}

.stroke {
    color: white; /* Il corpo della lettera è bianco */
    /* Creiamo un finto bordo sottile e interno usando l'ombra */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    display: inline-block;
    letter-spacing: 0.05em;
}

.hero-sub { 
    margin-top: 30px; 
    font-weight: 300; 
    letter-spacing: 3px; 
    font-size: 1.1rem; 
    color: var(--gray-meta); 
}

/* Gestione interruzioni riga: attive solo su mobile */
.m-break {
    display: block;
}

/* Su schermi grandi (Desktop), ignoriamo gli 'a capo' per far scorrere il testo */
@media (min-width: 768px) {
    .m-break {
        display: none;
    }
    .hero-sub {
        max-width: 800px; /* Evita che la riga diventi infinita */
    }
}

/* Fix per la N troppo distante: se 0.03em è ancora troppo, prova 0.02em */
.hero-title span[style*="margin-right"] {
    margin-right: 0.03em !important; 
}

/* CMYK Cards Base */
.grid-cmyk { display: grid; grid-template-columns: repeat(2, 1fr); }
.cmyk-card { min-height: 450px; padding: 60px; border-right: 1px solid #eee; border-bottom: 2px solid var(--black); transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); background: white; }
.header-card { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.cmyk-num { font-size: 1.2rem; font-weight: 900; }
.card-body i { font-size: 2.5rem; }
.content-card h2 { font-weight: 900; font-size: 2.2rem; margin: 0; line-height: 1; transition: color 0.3s; }
.sub-it { font-size: 0.85rem; color: var(--gray-meta); display: block; margin-top: 10px; font-weight: 700; transition: color 0.3s; }
.content-card p { margin-top: 25px; text-transform: none; font-size: 1.05rem; line-height: 1.6; font-weight: 300; max-width: 500px; color: #333; transition: color 0.3s; }

/* Colori delle icone e numeri di default */
.c-text { color: var(--cyan); }
.m-text { color: var(--magenta); }
.y-text { color: var(--yellow); }
.k-text { color: var(--black); }

/* --- HOVER DINAMICO CARD CMYK --- */
/* 01 Cyan */
.cmyk-card#creative:hover { background-color: var(--cyan); border-color: var(--cyan); }
/* 02 Magenta */
.cmyk-card#digital:hover { background-color: var(--magenta); border-color: var(--magenta); }
/* 03 Yellow */
.cmyk-card#visual:hover { background-color: var(--yellow); border-color: var(--yellow); }
/* 04 Black */
.cmyk-card#security:hover { background-color: var(--black); border-color: var(--black); }

/* Cambio colore testi in bianco per hover (tranne il giallo) */
.cmyk-card:hover h2, 
.cmyk-card:hover p, 
.cmyk-card:hover .sub-it, 
.cmyk-card:hover .cmyk-num, 
.cmyk-card:hover i { 
    color: white !important; 
}

/* Fix per card Gialla (testo nero su giallo) */
.cmyk-card#visual:hover h2, 
.cmyk-card#visual:hover p, 
.cmyk-card#visual:hover .sub-it, 
.cmyk-card#visual:hover .cmyk-num, 
.cmyk-card#visual:hover i { 
    color: var(--black) !important; 
}

/* Responsive */
@media (max-width: 992px) {
    .grid-cmyk { grid-template-columns: 1fr; }
    .cmyk-card { padding: 40px 30px; }
}
.footer-raw { padding: 60px 30px; text-align: center; font-weight: 900; font-size: 0.8rem; letter-spacing: 2px; }