:root { --lime: #a3e635; --neon-blue: #3b82f6; --dark-blue: #0f172a; --deep-navy: #020617; --black: #000000; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }

body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
    background-color: var(--deep-navy); 
    color: #e2e8f0; 
    background-image: radial-gradient(var(--neon-blue) 0.5px, transparent 0); 
    background-size: 30px 30px; 
    background-attachment: fixed; 
    overflow-x: hidden;
    width: 100%;
}

.header-font { 
    font-family: 'Outfit', sans-serif !important; 
    font-weight: 900; 
    letter-spacing: -0.04em; 
    text-transform: uppercase;
    line-height: 0.9;
}

.clamp-hero { font-size: clamp(2.2rem, 12vw, 110px); }
.clamp-expert { font-size: clamp(1.8rem, 9vw, 70px); }
.clamp-article { font-size: clamp(1.5rem, 5vw, 40px); }

.cyber-border { border: 4px solid var(--black); }
.cyber-shadow-blue { box-shadow: 8px 8px 0px 0px var(--neon-blue); }
.cyber-shadow-hover { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cyber-shadow-hover:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px 0px var(--black); }

.halftone { background-image: radial-gradient(var(--neon-blue) 20%, transparent 20%); background-size: 4px 4px; opacity: 0.1; }

.speech-bubble { 
    position: relative; 
    background: var(--dark-blue); 
    border: 4px solid var(--black); 
    border-radius: 24px; 
    padding: 24px; 
    box-shadow: 6px 6px 0px 0px var(--black);
}
.speech-bubble:after { 
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; 
    border: 20px solid transparent; border-top-color: var(--black); 
    border-bottom: 0; border-left: 0; margin-left: -10px; margin-bottom: -20px; 
}

summary, button, .btn-fix { 
    font-family: 'Outfit', sans-serif !important; 
    list-style: none;
    cursor: pointer;
}
summary::-webkit-details-marker { display: none; }

.page-transition { transition: all 0.4s ease-in-out; }
.hidden-page { display: none; opacity: 0; }
.active-page { display: block; opacity: 1; }

.neon-text-glow { text-shadow: 0 0 15px var(--neon-blue); }
.lime-text-glow { text-shadow: 0 0 15px var(--lime); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--deep-navy); }
::-webkit-scrollbar-thumb { background: var(--black); border: 2px solid var(--neon-blue); }