/* ============================================
   MATRIX TERMINAL PORTFOLIO - THE MATRIX AESTHETIC
   Glowing green monospaced text, dark cyberpunk vibe,
   retro-futuristic terminal windows, digital rain
   ============================================ */

:root {
    --matrix-green: #00ff41;
    --matrix-green-dark: #00cc33;
    --matrix-green-dim: #00aa22;
    --bg-black: #0a0a0a;
    --bg-dark: #111111;
    --bg-terminal: #0d0d0d;
    --text-green: #00ff41;
    --text-dim: #00cc33;
    --text-faint: #008822;
    --accent-pink: #ff00aa;
    --scanline: rgba(0, 255, 65, 0.03);
    --glow: 0 0 5px #00ff41, 0 0 10px #00ff41;
    --glow-strong: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41;
    --font-mono: 'Share Tech Mono', 'VT323', 'Courier New', monospace;
    --font-terminal: 'VT323', monospace;
    --border-green: #00ff41;
    --line-height-readable: 1.65;
    --letter-spacing-mono: 0.5px;
    /* Enhanced Hero Typography System */
    --font-hero: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
    --font-subtitle: 'Inter', system-ui, -apple-system, sans-serif;
    --font-typewriter: 'Share Tech Mono', 'VT323', monospace;
    --hero-title-size: 58px;
    --hero-subtitle-size: 16px;
    --typewriter-size: 19px;
}

/* Base Reset & Body */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-black);
    color: var(--text-green);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Matrix Digital Rain Background */
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.65;
}

#matrix-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Container */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* ============================================
   FEATURE 1: HERO BACKGROUND CYBERPUNK CITYSCAPE
   Subtle atmospheric layer behind hero console
   ============================================ */
.hero-console {
    background: var(--bg-terminal);
    border: 2px solid var(--border-green);
    border-radius: 4px;
    margin-bottom: 24px;
    box-shadow: var(--glow-strong);
    overflow: hidden;
    position: relative;
}

/* Hero background image layer - low opacity, multiply blend, respects scanlines */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.13;
    filter: contrast(1.15) saturate(0.85) hue-rotate(5deg);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Ensure scanline overlay stays above bg but below content */
.hero-console::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        var(--scanline) 2px,
        var(--scanline) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.terminal-chrome {
    background: #1a1a1a;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-green);
    position: relative;
    z-index: 3;
}

.chrome-dots {
    display: flex;
    gap: 6px;
    margin-right: 16px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #333;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.chrome-title {
    font-family: var(--font-terminal);
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 2px;
    flex: 1;
    text-align: center;
}

.hero-content {
    padding: 32px 28px;
    position: relative;
    z-index: 2;
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    flex-wrap: wrap;
}

.status-label {
    color: var(--text-faint);
    font-family: var(--font-terminal);
}

.status-value {
    color: var(--matrix-green);
    font-weight: bold;
    padding: 2px 8px;
    border: 1px solid var(--border-green);
    background: rgba(0, 255, 65, 0.05);
}

.status-value.online {
    animation: pulse 2s infinite ease-in-out;
}

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

/* ============================================
   ENHANCED HERO TYPOGRAPHY SYSTEM
   High-impact fonts, refined hierarchy, preserved glitch
   Inter for subtitles + mission (distinctive modern contrast)
   VT323/Share Tech Mono for title + typewriter (immersive Matrix)
   ============================================ */

.hero-title {
    font-family: var(--font-hero);
    font-size: var(--hero-title-size);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 8px;
    letter-spacing: 6px;
    text-shadow: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 32px #00ff41;
    text-transform: uppercase;
}

.hero-title .glitch {
    position: relative;
    display: inline-block;
}

.hero-title .glitch::before,
.hero-title .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-title .glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--accent-pink);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

.hero-title .glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--matrix-green);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 1.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    20% { clip: rect(65px, 9999px, 119px, 0); }
    40% { clip: rect(33px, 9999px, 85px, 0); }
    60% { clip: rect(85px, 9999px, 140px, 0); }
    80% { clip: rect(15px, 9999px, 60px, 0); }
    100% { clip: rect(50px, 9999px, 105px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 119px, 0); }
    20% { clip: rect(31px, 9999px, 94px, 0); }
    40% { clip: rect(85px, 9999px, 140px, 0); }
    60% { clip: rect(15px, 9999px, 60px, 0); }
    80% { clip: rect(50px, 9999px, 105px, 0); }
    100% { clip: rect(33px, 9999px, 85px, 0); }
}

.hero-subtitle {
    font-family: var(--font-subtitle);
    font-size: var(--hero-subtitle-size);
    font-weight: 600;
    color: #aaffaa; /* improved contrast for readability */
    letter-spacing: 2.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
    text-shadow: 0 0 3px rgba(0, 255, 65, 0.6);
}

.typewriter-container {
    font-family: var(--font-typewriter);
    font-size: var(--typewriter-size);
    font-weight: 400;
    margin-bottom: 22px;
    min-height: 30px;
    color: var(--matrix-green);
    letter-spacing: 1px;
}

.typewriter {
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.cursor {
    animation: blink 1s step-end infinite;
    color: var(--matrix-green);
}

@keyframes blink {
    50% { opacity: 0; }
}

.mission-objective {
    border-left: 3px solid var(--border-green);
    padding-left: 16px;
    font-size: 15px;
    max-width: 620px;
    color: #ccffcc; /* refined contrast */
    font-family: var(--font-subtitle);
    line-height: 1.72;
    letter-spacing: 0.3px;
}

/* Prominent Node Link Button in Hero */
.hero-actions {
    margin-top: 28px;
    display: flex;
    justify-content: flex-start;
}

.node-link-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--matrix-green);
    color: var(--matrix-green);
    font-family: var(--font-terminal);
    font-size: 15px;
    padding: 14px 32px;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow: var(--glow);
    overflow: hidden;
    min-width: 260px;
}

.node-link-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 65, 0.35),
        transparent
    );
    transition: left 0.6s;
}

.node-link-btn:hover {
    background: rgba(0, 255, 65, 0.08);
    box-shadow: var(--glow-strong);
    color: #fff;
    border-color: #fff;
}

.node-link-btn:hover::before {
    left: 250%;
}

.node-link-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 3px #00ff41;
}

.node-link-btn .btn-text {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: var(--glow);
}

.node-link-btn .btn-sub {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-faint);
    margin-top: 2px;
}

/* Terminal Navigation Tabs - now styled to match header chrome */
.terminal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-green);
    padding-bottom: 8px;
    background: var(--bg-terminal);
    border: 1px solid var(--border-green);
    border-bottom: 2px solid var(--border-green);
    padding: 8px;
    box-shadow: var(--glow);
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--border-green);
    color: var(--text-green);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    box-shadow: var(--glow);
}

.tab-btn:hover {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: var(--glow-strong);
    color: #fff;
}

.tab-btn.active {
    background: var(--matrix-green);
    color: var(--bg-black);
    font-weight: bold;
    box-shadow: var(--glow-strong);
    border-color: #fff;
}

/* Terminal Windows - EXACT same styles and colors as .hero-console header */
.terminal-window {
    display: none;
    background: var(--bg-terminal);
    border: 2px solid var(--border-green);
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: var(--glow-strong);
    overflow: hidden;
    position: relative;
}

.terminal-window.active {
    display: block;
    animation: windowFadeIn 0.3s ease forwards;
}

@keyframes windowFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Identical scanline overlay as hero-console */
.terminal-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        var(--scanline) 2px,
        var(--scanline) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.window-header {
    background: #1a1a1a;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-green);
    position: relative;
    z-index: 2;
}

.window-title {
    font-family: var(--font-terminal);
    font-size: 15px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
}

.window-controls {
    display: flex;
    gap: 6px;
}

.ctrl {
    width: 10px;
    height: 10px;
    border: 1px solid var(--border-green);
    background: transparent;
}

.window-body {
    padding: 32px 28px;
    position: relative;
    z-index: 2;
    font-size: 14.5px;
    line-height: var(--line-height-readable);
    letter-spacing: var(--letter-spacing-mono);
}

/* Readable Text Enhancements */
.readable-text p,
.readable-text li {
    line-height: var(--line-height-readable);
    margin-bottom: 10px;
}

.readable-text ul {
    padding-left: 20px;
    margin: 12px 0;
}

.readable-text li {
    margin-bottom: 6px;
}

/* ============================================
   INITIATIVES LAYOUT: Pictures on RIGHT (1/3)
   Description LEFT. Soft green overlay layer.
   ============================================ */
.initiative {
    margin-bottom: 32px;
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--text-faint);
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.initiative:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.initiative-text {
    flex: 2;
    min-width: 0;
}

.initiative-image {
    flex: 1;
    max-width: 34%; /* one-third best fit for visual balance */
    position: relative;
}

/* Make initiative images clickable for popup */
.initiative-example {
    display: block;
    width: 100%;
    height: auto;
    max-height: 168px;
    object-fit: cover; /* adapt: shows focused piece of the screenshot for better visual impact */
    object-position: center 20%; /* slight focus adjustment to capture key content area */
    border: 1px solid var(--matrix-green);
    box-shadow: 0 0 6px rgba(0, 255, 65, 0.6), 0 0 14px rgba(0, 255, 65, 0.3);
    border-radius: 2px;
    opacity: 0.92;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
    image-rendering: -webkit-optimize-contrast;
    cursor: pointer;
}

.initiative-example:hover {
    transform: scale(1.01);
    box-shadow: 0 0 10px #00ff41, 0 0 22px rgba(0, 255, 65, 0.5);
    opacity: 1;
}

/* VERY SOFT SMOOTH GREEN LAYER on initiative pictures */
.initiative-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 255, 65, 0.055) 0%,
        rgba(0, 255, 65, 0.035) 45%,
        rgba(0, 255, 65, 0.025) 100%
    );
    border-radius: 2px;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}

.initiative .section-sub {
    font-family: var(--font-terminal);
    font-size: 17px;
    color: var(--matrix-green);
    margin-bottom: 8px;
    text-shadow: var(--glow);
}

.matrix-link {
    display: inline-block;
    color: var(--matrix-green);
    text-decoration: none;
    border-bottom: 1px dotted var(--matrix-green);
    margin-top: 6px;
    transition: all 0.2s;
}

.matrix-link:hover {
    color: #fff;
    border-bottom-color: #fff;
    text-shadow: var(--glow);
}

/* Experience Logs */
.log-entry {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--text-faint);
}

.log-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.log-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.log-title-group {
    flex: 1;
    min-width: 0;
}

.log-timestamp {
    font-family: var(--font-terminal);
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.log-role {
    font-size: 15px;
    color: var(--matrix-green);
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.2;
}

.log-company {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 0;
    letter-spacing: 1px;
}

/* NO GREEN BORDER on company logos (per request) */
.company-logo {
    flex-shrink: 0;
    width: 78px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
    /* green border removed */
    background: #0a0a0a;
    padding: 4px;
    align-self: flex-start;
    margin-top: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.company-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 3px rgba(0, 255, 65, 0.25); /* very subtle, no strong green border/glow */
}

/* Capabilities Narrative (qualitative replacement for removed skill matrices) */
.capability {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--text-faint);
}

.capability:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.capability p {
    margin-bottom: 0;
}

/* Certifications */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.cert-item {
    background: rgba(0, 255, 65, 0.03);
    border: 1px solid var(--border-green);
    padding: 12px 14px;
    transition: all 0.2s ease;
}

.cert-item:hover {
    background: rgba(0, 255, 65, 0.08);
    box-shadow: var(--glow-strong);
}

.cert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* ============================================
   FEATURE 4: CERTIFICATIONS VISUAL BADGES
   Neon green SVG badges inside .clearance-badge
   Maintain exact palette, responsive grid
   ============================================ */
.clearance-badge {
    font-family: var(--font-terminal);
    font-size: 10px;
    background: var(--matrix-green);
    color: var(--bg-black);
    padding: 1px 6px;
    font-weight: bold;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    border: 1px solid #00cc33;
    box-shadow: 0 0 3px #00ff41;
    flex-shrink: 0;
}

.clearance-badge svg {
    width: 14px;
    height: 14px;
    stroke: #001100;
    filter: drop-shadow(0 0 1px #00ff41);
}

.cert-name {
    font-size: 13px;
    color: var(--matrix-green);
    font-weight: 600;
}

.cert-detail {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Comms - kept for overlay compatibility */
.comms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.comm-item {
    padding: 8px 0;
}

.comm-label {
    font-family: var(--font-terminal);
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.terminal-prompt {
    background: #1a1a1a;
    padding: 12px 16px;
    border: 1px solid var(--border-green);
    font-family: var(--font-terminal);
    font-size: 14px;
    margin-top: 12px;
}

.prompt {
    color: var(--text-dim);
}

.prompt-text {
    color: var(--matrix-green);
}

/* Footer - now styled with same terminal chrome colors and glow as header */
.matrix-footer {
    margin-top: 40px;
    padding: 16px 20px;
    background: var(--bg-terminal);
    border: 2px solid var(--border-green);
    border-radius: 4px;
    box-shadow: var(--glow-strong);
    font-size: 12px;
    color: var(--text-faint);
    position: relative;
    overflow: hidden;
}

.matrix-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        var(--scanline) 2px,
        var(--scanline) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--matrix-green);
    border-radius: 50%;
    box-shadow: var(--glow);
    animation: pulse 1.8s infinite;
}

.footer-copyright {
    font-family: var(--font-terminal);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 42px; /* scaled for mobile, glitch preserved */
        letter-spacing: 4px;
    }
    
    .hero-subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }
    
    .typewriter-container {
        font-size: 17px;
    }
    
    .container {
        padding: 12px;
    }
    
    .terminal-nav {
        flex-direction: column;
    }
    
    .tab-btn {
        text-align: left;
    }
    
    .cert-grid,
    .comms-grid {
        grid-template-columns: 1fr;
    }

    .node-link-btn {
        min-width: 100%;
        padding: 12px 20px;
    }

    .matrix-footer {
        padding: 12px 14px;
    }

    /* Stack initiatives on mobile: text first, image below */
    .initiative {
        flex-direction: column;
        gap: 12px;
    }
    
    .initiative-image {
        max-width: 100%;
        order: 2; /* image after text */
    }
    
    .initiative-example {
        max-height: 140px;
    }

    /* hide accent images on mobile */
    .accent-img {
        display: none !important;
    }
}

/* High Contrast / Accessibility Mode */
.high-contrast {
    --matrix-green: #33ff66;
    --text-green: #33ff66;
    --border-green: #33ff66;
    --glow: 0 0 6px #33ff66, 0 0 14px #33ff66;
    --glow-strong: 0 0 10px #33ff66, 0 0 20px #33ff66, 0 0 30px #33ff66;
}

/* Subtle CRT flicker on body */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 255, 65, 0.015);
    pointer-events: none;
    z-index: 9999;
    animation: crt-flicker 4s infinite linear;
    mix-blend-mode: screen;
}

@keyframes crt-flicker {
    0%, 100% { opacity: 0.015; }
    50% { opacity: 0.035; }
}

/* Matrix Text Utility */
.matrix-text {
    color: var(--matrix-green);
}

/* Easter Egg Styles */
.matrix-glitch {
    animation: matrix-glitch 0.4s linear;
}

@keyframes matrix-glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, 1px); }
    80% { transform: translate(2px, -1px); }
    100% { transform: translate(0); }
}

/* ============================================
   DEDICATED MATRIX NODE LINK OVERLAY
   Full-screen comms overlay with grid, copy buttons,
   scanline effects, and thematic Matrix styling
   (inherits header chrome styles)
   ============================================ */

.node-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.node-overlay.active {
    display: flex;
}

/* Feature 3: Node Link Overlay Background */
.overlay-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.overlay-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: contrast(1.1) brightness(0.7) saturate(0.6);
    mix-blend-mode: multiply;
}

.overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1;
    /* Subtle scanline overlay on backdrop */
    background-image: 
        repeating-linear-gradient(
            transparent,
            transparent 3px,
            rgba(0, 255, 65, 0.035) 3px,
            rgba(0, 255, 65, 0.035) 5px
        );
}

.overlay-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    background: var(--bg-terminal);
    border: 3px solid var(--border-green);
    border-radius: 4px;
    box-shadow: var(--glow-strong);
    overflow: hidden;
    animation: overlayEnter 0.28s ease forwards;
}

@keyframes overlayEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Overlay header with terminal chrome (matches header) */
.overlay-header {
    background: #1a1a1a;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-green);
    position: relative;
    z-index: 3;
}

.overlay-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--matrix-green), transparent);
    opacity: 0.4;
}

.overlay-title {
    font-family: var(--font-terminal);
    font-size: 16px;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.overlay-close {
    background: transparent;
    border: 1px solid var(--border-green);
    color: var(--matrix-green);
    font-family: var(--font-terminal);
    font-size: 22px;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.overlay-close:hover {
    background: rgba(0, 255, 65, 0.1);
    color: #fff;
    border-color: #fff;
    box-shadow: var(--glow-strong);
}

/* Overlay body */
.overlay-body {
    padding: 32px 28px;
    position: relative;
    z-index: 3;
}

.overlay-intro {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 24px;
    max-width: 560px;
    border-left: 2px solid var(--border-green);
    padding-left: 14px;
}

/* Contacts Grid - beautiful formatted comms grid */
.node-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.node-contact {
    background: rgba(0, 255, 65, 0.025);
    border: 1px solid var(--border-green);
    padding: 14px 16px;
    position: relative;
    transition: all 0.2s ease;
    z-index: 3;
}

.node-contact:hover {
    background: rgba(0, 255, 65, 0.06);
    box-shadow: var(--glow-strong);
}

.contact-label {
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.contact-value {
    font-size: 15px;
    color: var(--matrix-green);
    font-family: var(--font-mono);
    word-break: break-all;
    margin-bottom: 8px;
}

.contact-link {
    display: block;
    font-size: 14px;
    margin-bottom: 0;
}

/* Copy buttons */
.copy-btn {
    background: transparent;
    border: 1px solid var(--border-green);
    color: var(--matrix-green);
    font-family: var(--font-terminal);
    font-size: 11px;
    padding: 4px 14px;
    cursor: pointer;
    letter-spacing: 1.5px;
    transition: all 0.15s ease;
}

.copy-btn:hover {
    background: var(--matrix-green);
    color: var(--bg-black);
    box-shadow: var(--glow-strong);
}

.copy-btn.copied {
    background: #00cc33;
    color: #000;
    border-color: #00cc33;
}

/* Overlay footer */
.overlay-footer {
    background: #1a1a1a;
    padding: 10px 18px;
    border-top: 1px solid var(--border-green);
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
    letter-spacing: 1px;
    position: relative;
    z-index: 3;
}

/* Scanline effect inside overlay panel (matches header) */
.overlay-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        rgba(0, 255, 65, 0.025) 2px,
        rgba(0, 255, 65, 0.025) 4px
    );
    pointer-events: none;
    z-index: 2;
    animation: overlay-scan 4.5s linear infinite;
}

@keyframes overlay-scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300%); }
}

/* Ensure readable text inside overlay */
.node-overlay .readable-text {
    line-height: var(--line-height-readable);
}

/* Responsive overlay */
@media (max-width: 640px) {
    .overlay-panel {
        max-width: 100%;
        margin: 10px;
    }
    
    .overlay-body {
        padding: 20px 18px;
    }
    
    .node-contacts-grid {
        grid-template-columns: 1fr;
    }
    
    .overlay-title {
        font-size: 14px;
    }
}

/* Keyboard focus styles for accessibility */
.copy-btn:focus-visible,
.overlay-close:focus-visible,
.node-link-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ============================================
   INITIATIVE IMAGE POPUP OVERLAY
   Similar structure and behavior to #node-link-overlay
   for better visualization of initiative screenshots
   ============================================ */

.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.image-overlay.active {
    display: flex;
}

.image-backdrop {
    background: rgba(0, 0, 0, 0.92);
    /* slightly stronger backdrop for image focus */
}

.image-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
    background: var(--bg-terminal);
    border: 3px solid var(--border-green);
    border-radius: 4px;
    box-shadow: var(--glow-strong);
    overflow: hidden;
    animation: overlayEnter 0.28s ease forwards;
}

.image-body {
    padding: 24px 28px;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.image-viewer {
    display: block;
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 2px solid var(--matrix-green);
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.7), 0 0 28px rgba(0, 255, 65, 0.35);
    border-radius: 2px;
    background: #0a0a0a;
}

.image-meta {
    width: 100%;
    max-width: 820px;
    text-align: left;
}

.image-title {
    font-family: var(--font-terminal);
    font-size: 18px;
    color: var(--matrix-green);
    margin-bottom: 8px;
    text-shadow: var(--glow);
    letter-spacing: 1px;
}

.image-desc {
    font-size: 14px;
    color: var(--text-dim);
    line-height: var(--line-height-readable);
    margin-bottom: 0;
}

/* Image overlay footer inherits from .overlay-footer */
.image-overlay .overlay-footer {
    background: #1a1a1a;
    padding: 10px 18px;
    border-top: 1px solid var(--border-green);
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
    letter-spacing: 1px;
    position: relative;
    z-index: 3;
}

/* Close button for image viewer (reuses .overlay-close) */
.image-close {
    /* inherits all .overlay-close styles */
}

/* Responsive for image popup */
@media (max-width: 768px) {
    .image-panel {
        max-width: 100%;
        margin: 10px;
    }
    
    .image-body {
        padding: 18px 16px;
    }
    
    .image-viewer {
        max-height: 380px;
    }
    
    .image-title {
        font-size: 16px;
    }
}

/* ============================================
   SVG ACCENT ICON SUPPORT (for initiative SVGs replacing images)
   Ensures gear, bot, MS-logo SVGs behave exactly like .accent-img
   (float, size, border, glow, hover glitch, desktop-only)
   ============================================ */
.accent-img,
svg.accent-img {
    display: none;
    float: right;
    width: 72px;
    height: 72px;
    border: 1px solid var(--matrix-green);
    box-shadow: 0 0 4px rgba(0, 255, 65, 0.5);
    opacity: 0.85;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
    vertical-align: top;
    z-index: 2;
}

svg.accent-img {
    /* SVG-specific tuning: prevent baseline shift, ensure vector crisp */
    overflow: visible;
}

@media (min-width: 769px) {
    .accent-img,
    svg.accent-img {
        display: block;
    }
}

svg.accent-img:hover {
    transform: scale(1.08);
    box-shadow: 0 0 8px #00ff41, 0 0 14px rgba(0, 255, 65, 0.7);
    opacity: 1;
    animation: accent-glitch 0.35s linear;
}

/* Remove legacy accent-img float rules conflict for new structures (keep for any remaining SVGs if used elsewhere) */
.initiative .accent-img,
.log-entry .accent-img {
    display: none !important;
}

/* Desktop prominence for initiative examples (refined for 1/3 layout) */
@media (min-width: 769px) {
    .initiative-image {
        max-width: 34%;
    }
}
/* ============================================
   HERO NICKNAME: "INTRANET FROM THE TRENCHES"
   For tech guy identification in hero banner
   ============================================ */

.hero-nickname {
    font-family: var(--font-terminal);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 3px;
    margin-bottom: 14px;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.5);
    border: 1px solid var(--text-faint);
    display: inline-block;
    padding: 2px 10px;
    background: rgba(0, 255, 65, 0.03);
}

.hero-nickname:hover {
    color: var(--matrix-green);
    border-color: var(--matrix-green);
    text-shadow: var(--glow);
}