:root { 
    --bg: #E3E2DE; 
    --text: #1B0E0D; 
    --accent: #C72A09; 
    --neon: #31EF07; 
    --muted: #8A7F78; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'General Sans', sans-serif; 
    background-color: var(--bg); 
    color: var(--text); 
    overflow-x: hidden; 
    min-height: 100vh; 
    position: relative; 
}

/* Noise texture overlay */
body::before { 
    content: ''; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"); 
    mix-blend-mode: multiply; 
    pointer-events: none; 
    z-index: 1000; 
}

.font-clash { 
    font-family: 'Clash Grotesk', sans-serif; 
    font-weight: 700; 
    letter-spacing: -0.04em; 
    line-height: 0.85; 
}

.gradient-text { 
    color: var(--accent); 
}

.neon-border { 
    border: 1px solid rgba(27, 14, 13, 0.15); 
    box-shadow: 0 4px 20px rgba(27, 14, 13, 0.08); 
}

.glow { 
    box-shadow: 0 0 0 1px rgba(27, 14, 13, 0.1); 
}

.section-grid { 
    background: rgba(27, 14, 13, 0.02); 
}

.particle-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    opacity: 0.3; 
    filter: grayscale(100%); 
}

.floating { 
    animation: floating 6s ease-in-out infinite; 
}

@keyframes floating { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-15px); } 
}

.pulse { 
    animation: pulse 4s ease-in-out infinite; 
}

@keyframes pulse { 
    0%, 100% { opacity: 0.8; } 
    50% { opacity: 1; } 
}

.scroll-snap { 
    scroll-snap-type: y mandatory; 
}

.scroll-section { 
    scroll-snap-align: start; 
}

.table-grid { 
    background: rgba(27, 14, 13, 0.03); 
    border: 1px solid rgba(27, 14, 13, 0.1); 
    backdrop-filter: blur(10px); 
}

.card-hover { 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 12px 24px rgba(27, 14, 13, 0.15); 
    border-color: var(--accent); 
}

.timeline-dot { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: var(--accent); 
    position: absolute; 
    left: -6px; 
    top: 8px; 
    box-shadow: 0 0 8px var(--accent); 
}

/* Custom hover animation for links */
a { 
    position: relative; 
    text-decoration: none; 
}

a.neon-hover::after { 
    content: ''; 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    background-color: var(--neon); 
    transform: scaleX(0); 
    transform-origin: bottom right; 
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

a.neon-hover:hover::after { 
    transform: scaleX(1); 
    transform-origin: bottom left; 
}

/* Image hover effect */
img.high-contrast { 
    filter: contrast(1.2) grayscale(100%); 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

img.high-contrast:hover { 
    transform: scale(1.05); 
    filter: contrast(1.4) grayscale(100%); 
}

/* Button styles */
.btn-accent { 
    background-color: var(--accent); 
    color: white; 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.btn-accent:hover { 
    background-color: #9e1f00; 
    box-shadow: 0 0 0 2px var(--neon); 
}

.btn-outline { 
    border: 1px solid var(--text); 
    color: var(--text); 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.btn-outline:hover { 
    border-color: var(--neon); 
    color: var(--neon); 
}