@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --mech-border: 1px solid #27272a; /* zinc-800 */
    --mech-border-active: 1px solid #84cc16; /* lime-500 */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #09090b; /* zinc-950 */
    color: #e4e4e7; /* zinc-200 */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #09090b; 
}
::-webkit-scrollbar-thumb {
    background: #27272a; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3f3f46; 
}

/* Utility for mechanical corners */
.mech-corner {
    clip-path: polygon(
        0 10px, 
        10px 0, 
        100% 0, 
        100% calc(100% - 10px), 
        calc(100% - 10px) 100%, 
        0 100%
    );
}

.mech-corner-sm {
    clip-path: polygon(
        0 4px, 
        4px 0, 
        100% 0, 
        100% calc(100% - 4px), 
        calc(100% - 4px) 100%, 
        0 100%
    );
}

/* CRT/Scanline effect overlay for that high-tech feel */
.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.1) 50%,
        rgba(0,0,0,0.1)
    );
    background-size: 100% 4px;
    pointer-events: none;
}

/* Glitch Animation for Logo on Hover */
@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

.glitch-hover:hover {
    animation: glitch 0.2s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #84cc16;
}