:root {
    --o-100: #141a14;
    --o-200: #1e261e;
    --o-300: #2a362a;
    --o-400: #3d4f3d;
    --o-500: #5c755c;
    --o-olive: #8ba888;
    --o-neon: #a4c2a1;
    --o-glow: rgba(139, 168, 136, 0.3);
    --bg: #050605;
}

@font-face {
    font-family: 'Terminal';
    src: local('Consolas'), local('Courier New');
}

* { box-sizing: border-box; cursor: crosshair; }

body {
    background-color: var(--bg);
    color: var(--o-olive);
    font-family: 'Terminal', monospace;
    margin: 0; padding: 0;
    overflow-x: hidden;
    text-transform: uppercase;
}

/* BACKGROUND FX */
.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 999;
    pointer-events: none;
}

.noise {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://media.giphy.com/media/oEI9uWUicG5I4/giphy.gif');
    opacity: 0.03;
    z-index: 998;
    pointer-events: none;
}

/* NAV */
.main-nav {
    background: var(--o-100);
    border-bottom: 2px solid var(--o-olive);
    padding: 10px 20px;
    position: sticky; top: 0; z-index: 1000;
}

.nav-container {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}

.blink { animation: blinker 1s linear infinite; color: var(--o-neon); }
@keyframes blinker { 50% { opacity: 0; } }

.nav-btn {
    text-decoration: none;
    color: var(--o-olive) !important;
    border: 1px solid var(--o-olive);
    padding: 8px 15px;
    font-size: 0.8rem;
    display: flex; align-items: center; gap: 8px;
}
.nav-btn:hover { background: var(--o-olive); color: var(--bg) !important; }

/* HERO & CURSOR BLINK */
.hero { padding: 80px 20px; text-align: center; border-bottom: 1px solid var(--o-300); }
.hero h1 { font-size: 5rem; margin: 0; letter-spacing: 10px; color: var(--o-neon); text-shadow: 0 0 20px var(--o-glow); }

.hero .dot {
    color: var(--o-neon);
    animation: cursor-blink 1s steps(2) infinite;
}

@keyframes cursor-blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.subtitle { margin-top: 10px; color: var(--o-500); font-size: 0.9rem; letter-spacing: 4px; }

/* LAYOUT */
.container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.grid-layout { display: grid; grid-template-columns: 350px 1fr; gap: 30px; }

.card { background: rgba(20, 26, 20, 0.8); border: 1px solid var(--o-300); margin-bottom: 30px; overflow: hidden; }
.card-header { background: var(--o-200); padding: 8px 15px; border-bottom: 1px solid var(--o-300); font-size: 0.75rem; color: var(--o-neon); display: flex; align-items: center; gap: 10px; }

/* STATUS BOX */
.status-box { padding: 20px; }
.status-indicator { display: flex; align-items: center; gap: 15px; font-size: 1.2rem; margin-bottom: 15px; }
.status-dot { width: 12px; height: 12px; background: #222; }
.online { background: var(--o-olive); box-shadow: 0 0 15px var(--o-olive); }
.dnd { background: #6b2a2a; }
.idle { background: #6b5d2a; }

.activity-log { background: #000; padding: 10px; font-size: 0.75rem; color: var(--o-500); border-left: 3px solid var(--o-olive); }
.session-timer { margin-top: 10px; font-size: 0.7rem; color: var(--o-olive); opacity: 0.8; }

/* INNER CARDS */
.skin-link, .spotify-link { text-decoration: none; display: block; padding: 15px; }
.skin-inner, .spotify-inner {
    border: 1px dashed var(--o-olive); padding: 15px;
    text-align: center; color: var(--o-olive); transition: 0.3s;
}
.skin-link:hover .skin-inner, .spotify-link:hover .spotify-inner { background: var(--o-olive); color: var(--bg); }

/* CONTENT & SKILLS */
.content-body { padding: 25px; color: #fff; }
.content-body p { margin-bottom: 10px; border-left: 2px solid var(--o-300); padding-left: 15px; }
.skills-grid { padding: 20px; }
.skill-item { margin-bottom: 15px; }
.bar { height: 10px; background: #000; border: 1px solid var(--o-300); margin-top: 5px; }
.fill { height: 100%; background: var(--o-olive); }

/* FOOTER */
.footer { border-top: 2px solid var(--o-olive); padding: 30px 20px; background: var(--o-100); margin-top: 50px; }
.footer-content { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
#secret-trigger { font-size: 2.5rem; cursor: pointer; }

@media (max-width: 900px) {
    .grid-layout { grid-template-columns: 1fr; }
    .hero h1 { font-size: 3rem; }
}