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

html {
    margin: 0;
    padding: 0;
    background: #000000;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* LAYER 1 - SYSTEM BACKGROUND */
body {
    font-family: 'VT323', 'Courier New', 'Consolas', 'Monaco', monospace;
    background: radial-gradient(
        ellipse at center 40%,
        rgba(5, 8, 5, 1) 0%,
        rgba(3, 5, 3, 1) 30%,
        rgba(0, 0, 0, 1) 70%,
        rgba(0, 0, 0, 1) 100%
    );
    color: #a8ff9f;
    min-height: 100vh;
    overflow-x: hidden !important;
    position: relative;
    opacity: 0;
    animation: pageLoad 1.5s ease-out forwards;
    margin: 0;
    padding: 0;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@keyframes pageLoad {
    0% {
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
    50% {
        opacity: 0.5;
        filter: brightness(0.5) contrast(0.5);
    }
    100% {
        opacity: 1;
        filter: brightness(1) contrast(1);
    }
}

@keyframes crtFlicker {
    0%, 100% { 
        opacity: 1;
    }
    98% { 
        opacity: 1;
    }
    99% { 
        opacity: 0.98;
    }
    99.5% {
        opacity: 1;
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background-color: #000000;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    display: none;
}

/* HeroSection layout: ASCII left, terminal window right */
.hero-ascii-source {
    display: none;
}

.hero-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    width: 100%;
    margin-top: 12.6vh;
}

.ascii-art {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* prevent enlarged ASCII from blocking panel interactions */
}

.hero-ascii-mascot {
    margin: 0;
    font-family: monospace;
    line-height: 1;
    white-space: pre;
    font-size: 5px;
    color: #a8ff9f;
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(168, 255, 159, 0.4);
    transform: scale(0.88);
    transform-origin: left center;
    pointer-events: none;
}

.terminal-window {
    position: relative;
    flex-shrink: 0;
    width: calc(100% + 80px);
    box-sizing: border-box;
    /* Pull the window chrome to panel edges for retro OS tab look */
    margin: -35px -40px 0;
    padding: 35px 40px 0;
}

/* Terminal Background Overlays - Above image, below windows */
/* 1. Dot Matrix / Phosphor Pattern - Must be visible */
.terminal-dot-matrix-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0.5;
    pointer-events: none;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    background-image: 
        radial-gradient(circle at 2px 2px, rgba(168, 255, 159, 0.25) 0.5px, transparent 0),
        radial-gradient(circle at 4px 4px, rgba(168, 255, 159, 0.2) 0.5px, transparent 0);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
    opacity: 1;
}

/* 2. CRT Scanlines Overlay - Visible horizontal lines */
.terminal-scanlines-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 15, 0, 0.5) 0px,
        rgba(0, 15, 0, 0.5) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 1;
    animation: scanlineDrift 20s linear infinite;
}

@keyframes scanlineDrift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 4px;
    }
}

/* 3. Dust Grain Overlay */
.terminal-dust-grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1.8;
    pointer-events: none;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(168, 255, 159, 0.15) 1px,
            rgba(168, 255, 159, 0.15) 2px,
            transparent 2px,
            transparent 3px,
            rgba(255, 184, 108, 0.12) 3px,
            rgba(255, 184, 108, 0.12) 4px,
            transparent 4px,
            transparent 5px,
            rgba(168, 255, 159, 0.1) 5px,
            rgba(168, 255, 159, 0.1) 6px,
            transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(168, 255, 159, 0.12) 1px,
            rgba(168, 255, 159, 0.12) 2px,
            transparent 2px,
            transparent 3px,
            rgba(0, 0, 0, 0.15) 3px,
            rgba(0, 0, 0, 0.15) 4px,
            transparent 4px,
            transparent 5px,
            rgba(255, 184, 108, 0.08) 5px,
            rgba(255, 184, 108, 0.08) 6px,
            transparent 6px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(168, 255, 159, 0.1) 2px,
            rgba(168, 255, 159, 0.1) 3px,
            transparent 3px
        );
    background-size: 3px 3px, 4px 4px, 3px 3px;
    opacity: 0.5;
    animation: dustGrainMove 15s linear infinite;
}

@keyframes dustGrainMove {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 8px 8px, 6px 6px, 5px 5px;
    }
}

/* 3. Screen Vignette - Darken edges, faint center glow */
.terminal-vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1.5;
    pointer-events: none;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    background: radial-gradient(
        ellipse at center 35%,
        rgba(168, 255, 159, 0.08) 0%,
        rgba(168, 255, 159, 0.05) 20%,
        transparent 45%,
        rgba(0, 0, 0, 0.4) 80%,
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 1;
}

/* Screen Haze Layer - Soft greenish fog near center */
.terminal-screen-haze {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1.3;
    pointer-events: none;
    filter: blur(var(--bg-blur, 0px));
    transition: filter 0.3s ease;
    background: radial-gradient(
        ellipse at center 40%,
        rgba(168, 255, 159, 0.06) 0%,
        rgba(168, 255, 159, 0.03) 30%,
        transparent 60%
    );
    opacity: 1;
}

/* 4. Very Light Noise/Grain - Subtle static texture */
.terminal-noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1.2;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(168, 255, 159, 0.08) 1px,
            rgba(168, 255, 159, 0.08) 2px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.1) 1px,
            rgba(0, 0, 0, 0.1) 2px,
            transparent 2px
        );
    background-size: 2px 2px, 3px 3px;
    opacity: 0.15;
}

/* Grid Overlay */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3.5;
    pointer-events: none;
    opacity: 0;
    display: none;
}

/* CRT Scanlines - Very Subtle */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    display: none;
}

@keyframes scanlineMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 4px;
    }
}

/* Noise/Grain Overlay - Subtle but Real */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    display: none;
}


@keyframes noiseFade {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, -1px); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, 0); }
    60% { transform: translate(1px, 0); }
    70% { transform: translate(0, -1px); }
    80% { transform: translate(0, 1px); }
    90% { transform: translate(-1px, 1px); }
}

/* Interference Lines - Very Subtle */
body {
    background-image: 
        linear-gradient(
            transparent 0%,
            transparent 98%,
            rgba(168, 255, 159, 0.03) 98%,
            rgba(168, 255, 159, 0.03) 99%,
            transparent 99%
        );
    background-size: 100% 4px;
}

/* LAYER 2 - TERMINAL FRAME SYSTEM */
.terminal-frame {
    min-height: 100vh;
    margin: 15px;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    /* Outer border - thin and crisp */
    border: 2px solid #a8ff9f;
    /* Inner border - inset frame */
    box-shadow: 
        inset 0 0 0 1px rgba(168, 255, 159, 0.4),
        0 0 20px rgba(168, 255, 159, 0.1);
    opacity: 0;
    animation: terminalFrameFadeIn 1s ease-out 0.3s forwards;
    pointer-events: auto;
    isolation: isolate;
}

@keyframes terminalFrameFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.98);
        filter: brightness(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Dot grid overlay for terminal frame - using a wrapper */
.terminal-frame {
    position: relative;
}

.terminal-frame-dot-grid {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    display: none;
    /* Subtle dot matrix pattern */
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(168, 255, 159, 0.1) 3px,
            rgba(168, 255, 159, 0.1) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(168, 255, 159, 0.1) 3px,
            rgba(168, 255, 159, 0.1) 4px
        );
    background-size: 4px 4px;
    opacity: 0.1;
}

/* Corner Blocks */
.terminal-frame::before {
    content: '┌';
    position: absolute;
    top: -2px;
    left: -2px;
    color: #a8ff9f;
    font-size: 16px;
    line-height: 1;
    z-index: 11;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
}

.corner-tr {
    position: absolute;
    top: -2px;
    right: -2px;
    color: #a8ff9f;
    font-size: 16px;
    line-height: 1;
    z-index: 11;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
}

/* Bottom corners */
.terminal-frame {
    position: relative;
}

.terminal-frame .corner-bl {
    position: absolute;
    bottom: -2px;
    left: -2px;
    color: #a8ff9f;
    font-size: 16px;
    line-height: 1;
    z-index: 11;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
}

.terminal-frame .corner-br {
    position: absolute;
    bottom: -2px;
    right: -2px;
    color: #a8ff9f;
    font-size: 16px;
    line-height: 1;
    z-index: 11;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
}


/* LAYER 3 - TOP BAR */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    min-height: 48px;
    background: rgba(10, 10, 10, 0.9);
    flex-shrink: 0;
    position: relative;
    z-index: 60;
    pointer-events: auto;
    /* Bevel effect - top highlight, bottom shadow */
    border-top: 1px solid rgba(168, 255, 159, 0.6);
    border-bottom: 1px solid rgba(168, 255, 159, 0.3);
    margin: 0;
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(0, 0, 0, 0.3);
}

.status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ascii-mascot {
    color: #ffb86c;
    font-size: 14px;
    line-height: 1;
}

.mascot-sparkles {
    color: #a8ff9f;
    font-size: 10px;
    opacity: 0.6;
    letter-spacing: 2px;
}

.title-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #a8ff9f;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    position: relative;
}

.status-led {
    width: 6px;
    height: 6px;
    background: #a8ff9f;
    border: 1px solid rgba(168, 255, 159, 0.6);
    box-shadow: 
        0 0 3px rgba(168, 255, 159, 0.6),
        inset 0 0 2px rgba(168, 255, 159, 0.4);
    animation: ledPulse 2s ease-in-out infinite, ledBoot 2s ease-out;
}

@keyframes ledBoot {
    0% {
        opacity: 0;
        transform: scale(0);
        box-shadow: 0 0 0 rgba(168, 255, 159, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 10px rgba(168, 255, 159, 1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 3px rgba(168, 255, 159, 0.6);
    }
}

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

.terminal-title {
    color: #a8ff9f;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.4);
    font-family: 'Press Start 2P', monospace;
}

.status-nav {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.nav-button {
    color: #a8ff9f;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border: 1px solid #a8ff9f;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.3);
    /* 3D bevel effect */
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.3);
    font-family: 'Press Start 2P', monospace;
    position: relative;
}

.nav-button:hover {
    color: #ffb86c;
    border-color: #ffb86c;
    background: rgba(255, 184, 108, 0.15);
    text-shadow: 0 0 5px rgba(255, 184, 108, 0.6);
    box-shadow: 
        inset 0 1px 0 rgba(255, 184, 108, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 0 5px rgba(255, 184, 108, 0.3);
}

.nav-button:active {
    box-shadow: 
        inset 0 2px 3px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(168, 255, 159, 0.2);
    transform: scale(0.92) translateY(2px);
    animation: navButtonClick 0.25s ease;
}

@keyframes navButtonClick {
    0% {
        transform: scale(1) translateY(0);
        box-shadow: 
            inset 0 1px 0 rgba(255, 184, 108, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.6),
            0 1px 0 rgba(0, 0, 0, 0.3),
            0 0 5px rgba(255, 184, 108, 0.3);
    }
    50% {
        transform: scale(0.88) translateY(3px);
        box-shadow: 
            inset 0 3px 4px rgba(0, 0, 0, 0.7),
            inset 0 -1px 0 rgba(168, 255, 159, 0.1);
    }
    100% {
        transform: scale(0.92) translateY(2px);
        box-shadow: 
            inset 0 2px 3px rgba(0, 0, 0, 0.6),
            inset 0 -1px 0 rgba(168, 255, 159, 0.2);
    }
}

/* Ripple Effect for Button Clicks */
@keyframes rippleEffect {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* CRT Glitch Effect */
@keyframes crtGlitch {
    0%, 100% {
        transform: translate(0, 0);
        filter: brightness(1);
    }
    10% {
        transform: translate(-1px, 1px);
        filter: brightness(1.2);
    }
    20% {
        transform: translate(1px, -1px);
        filter: brightness(0.8);
    }
    30% {
        transform: translate(-1px, -1px);
        filter: brightness(1.1);
    }
    40% {
        transform: translate(1px, 1px);
        filter: brightness(0.9);
    }
    50% {
        transform: translate(0, 0);
        filter: brightness(1);
    }
}

.status-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Window Controls */
.window-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.window-btn {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(168, 255, 159, 0.4);
    font-size: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #a8ff9f;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-align: center;
    vertical-align: middle;
    /* 3D bevel effect */
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.4);
}

.window-btn:hover {
    border-color: #ffb86c;
    color: #ffb86c;
    background: rgba(255, 184, 108, 0.15);
    box-shadow: 
        inset 0 1px 0 rgba(255, 184, 108, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 3px rgba(255, 184, 108, 0.6);
}

.window-btn:active {
    box-shadow: 
        inset 0 2px 3px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(168, 255, 159, 0.2);
    transform: scale(0.85);
    animation: windowBtnClick 0.2s ease;
}

@keyframes windowBtnClick {
    0% {
        transform: scale(1);
        box-shadow: 
            inset 0 1px 0 rgba(168, 255, 159, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    }
    50% {
        transform: scale(0.8);
        box-shadow: 
            inset 0 3px 4px rgba(0, 0, 0, 0.7),
            inset 0 -1px 0 rgba(168, 255, 159, 0.1);
    }
    100% {
        transform: scale(0.85);
        box-shadow: 
            inset 0 2px 3px rgba(0, 0, 0, 0.6),
            inset 0 -1px 0 rgba(168, 255, 159, 0.2);
    }
}

.window-close {
    color: #ff6b6b;
}

.window-close:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.2);
}

/* Info Row */
.info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 20px;
    background: rgba(5, 5, 5, 0.6);
    border-bottom: 1px solid rgba(168, 255, 159, 0.2);
    font-size: 10px;
    letter-spacing: 0.5px;
    font-family: 'VT323', monospace;
}

.info-item {
    color: #a8ff9f;
    opacity: 0.7;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.3);
}

.info-separator {
    color: #a8ff9f;
    opacity: 0.4;
}

.status-indicator {
    color: #a8ff9f;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.4);
    font-family: 'Press Start 2P', monospace;
}

.status-up {
    color: #ffb86c;
    font-size: 12px;
    font-weight: normal;
    text-shadow: 0 0 3px rgba(255, 184, 108, 0.5);
    font-family: 'Press Start 2P', monospace;
}

.top-bar-divider {
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(168, 255, 159, 0.8) 0px,
        rgba(168, 255, 159, 0.8) 3px,
        transparent 3px,
        transparent 5px,
        rgba(168, 255, 159, 0.6) 5px,
        rgba(168, 255, 159, 0.6) 6px,
        transparent 6px,
        transparent 8px
    );
    opacity: 0.6;
    margin: 0;
    flex-shrink: 0;
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 40px;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 55;
    pointer-events: auto;
}

/* LAYER 2 - HERO PANEL FRAME */
.hero-panel {
    margin-bottom: 9px;
    margin-top: 0;
    text-align: center;
    position: relative;
    background: rgba(5, 5, 5, 0.5);
    padding: 35px 40px 25px 40px;
    max-width: 95%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: heroPanelFadeIn 0.8s ease-out 0.5s forwards;
    z-index: 200;
    pointer-events: auto;
    isolation: isolate;
    /* Bevel/raised frame - retro desktop window */
    border: 1.5px solid #a8ff9f;
    /* Segmented/ticked borders */
    background-image: 
        /* Top border ticks */
        repeating-linear-gradient(
            to right,
            #a8ff9f 0px,
            #a8ff9f 8px,
            transparent 8px,
            transparent 10px
        ),
        /* Bottom border ticks */
        repeating-linear-gradient(
            to right,
            #a8ff9f 0px,
            #a8ff9f 8px,
            transparent 8px,
            transparent 10px
        ),
        rgba(5, 5, 5, 0.5);
    background-size: 100% 2px, 100% 2px, 100% 100%;
    background-position: top, bottom, center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: 
        /* Top/left highlight */
        inset -1px -1px 0 rgba(168, 255, 159, 0.5),
        /* Bottom/right shadow */
        inset 1px 1px 0 rgba(0, 0, 0, 0.6),
        /* Inner inset border - thinner */
        inset 0 0 0 1px rgba(168, 255, 159, 0.15),
        /* Subtle depth shadow */
        0 3px 12px rgba(0, 0, 0, 0.5),
        /* Outer glow */
        0 0 20px rgba(168, 255, 159, 0.15);
    transition: all 0.25s ease;
}

@keyframes heroPanelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: brightness(0.4) contrast(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1) contrast(1);
    }
}

/* Pixel-art background illustration - Terminal green artifact */
.hero-panel-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Background image removed */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-panel:hover {
    transform: translateY(-1px) scale(1.001);
    box-shadow: 
        inset -1px -1px 0 rgba(168, 255, 159, 0.5),
        inset 1px 1px 0 rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(168, 255, 159, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(168, 255, 159, 0.2);
    border-color: rgba(168, 255, 159, 0.9);
}

/* Hero Window Title Strip */
.terminal-window .hero-window-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: rgba(3, 3, 3, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-top: 1px solid rgba(168, 255, 159, 0.45);
    border-left: 1px solid rgba(168, 255, 159, 0.25);
    border-right: 1px solid rgba(168, 255, 159, 0.25);
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(168, 255, 159, 0.2);
    z-index: 151;
    pointer-events: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-window-title .title-left {
    min-width: 0;
    padding-right: 0;
    flex: 1;
    overflow: hidden;
}

.hero-window-title .window-controls {
    position: static;
    gap: 2px;
    margin: 0;
    align-items: center;
    flex-shrink: 0;
    justify-content: flex-end;
}

.hero-window-title .window-btn {
    width: 12px;
    height: 12px;
    font-size: 7px;
    line-height: 1;
    padding: 0;
}

.hero-window-title .window-minimize {
    transform: translateY(-1px);
}

.title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-icon-box {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(168, 255, 159, 0.4);
    background: rgba(168, 255, 159, 0.05);
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.hero-window-label {
    color: #a8ff9f;
    font-size: 10px;
    letter-spacing: 1px;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-window .title-strip-divider {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(168, 255, 159, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    z-index: 152;
}

/* Corner blocks for hero panel - L-shaped brackets */
.hero-panel {
    position: relative;
}

.hero-panel-corner-tl {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    z-index: 3;
    /* L-shaped corner - top and left lines - brighter */
    border-top: 2px solid rgba(168, 255, 159, 1);
    border-left: 2px solid rgba(168, 255, 159, 1);
    box-shadow: 
        0 0 6px rgba(168, 255, 159, 0.8),
        inset 0 0 2px rgba(168, 255, 159, 0.3);
    pointer-events: none;
}

.hero-panel::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    z-index: 2;
    /* L-shaped corner - top and right lines */
    border-top: 2px solid rgba(168, 255, 159, 0.9);
    border-right: 2px solid rgba(168, 255, 159, 0.9);
    box-shadow: 
        0 0 4px rgba(168, 255, 159, 0.6),
        inset 0 0 2px rgba(168, 255, 159, 0.3);
}

/* Hero panel bottom corners - L-shaped */
.hero-panel .corner-bl {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    z-index: 2;
    /* L-shaped corner - bottom and left lines */
    border-bottom: 2px solid rgba(168, 255, 159, 1);
    border-left: 2px solid rgba(168, 255, 159, 1);
    box-shadow: 
        0 0 6px rgba(168, 255, 159, 0.8),
        inset 0 0 2px rgba(168, 255, 159, 0.3);
    pointer-events: none;
}

.hero-panel .corner-br {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    z-index: 2;
    /* L-shaped corner - bottom and right lines */
    border-bottom: 2px solid rgba(168, 255, 159, 1);
    border-right: 2px solid rgba(168, 255, 159, 1);
    box-shadow: 
        0 0 6px rgba(168, 255, 159, 0.8),
        inset 0 0 2px rgba(168, 255, 159, 0.3);
    pointer-events: none;
}

/* Glass/CRT reflection gradient - removed bright patch */
.hero-panel {
    background: rgba(5, 5, 5, 0.5);
}

.hero-terminal-lines {
    margin-bottom: 15px;
    text-align: left;
    position: relative;
    z-index: 201;
}

.terminal-icon-1 {
    position: absolute;
    top: 5px;
    left: -25px;
    color: #a8ff9f;
    font-size: 16px;
    opacity: 0.6;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.4);
}

.terminal-icon-2 {
    position: absolute;
    bottom: 5px;
    right: -25px;
    color: #a8ff9f;
    font-size: 16px;
    opacity: 0.6;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.4);
}

.hero-lines-divider {
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        #a8ff9f 0px,
        #a8ff9f 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.5;
    margin: 20px 0 30px 0;
    width: 100%;
}

.terminal-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 18px;
}

.line-prefix {
    color: #ffb86c;
    font-weight: bold;
}

.command {
    color: #b8ffaf;
    text-shadow: 0 0 5px rgba(184, 255, 175, 0.4);
    font-weight: 500;
}

.cursor {
    color: #b8ffaf;
    animation: blink 1s infinite;
    font-weight: bold;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-headline {
    margin: 20px 0;
    position: relative;
    text-align: center;
    z-index: 250;
    width: 100%;
    overflow: visible;
    white-space: nowrap;
}

.hero-headline h1 {
    font-size: 26px;
    font-weight: normal;
    color: #ffb86c;
    letter-spacing: 0.3px;
    /* Crisp pixel text with amber/orange - warm glow */
    text-shadow: 
        2px 2px 0 rgba(255, 184, 108, 1),
        3px 3px 0 rgba(255, 140, 60, 0.8),
        -1px -1px 0 rgba(255, 184, 108, 0.9),
        0 2px 0 rgba(255, 184, 108, 1),
        2px 0 0 rgba(255, 184, 108, 1),
        0 0 15px rgba(255, 184, 108, 0.6);
    line-height: 1.4;
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    position: relative;
    display: inline;
    min-height: 60px;
    white-space: nowrap;
    z-index: 250;
    opacity: 1;
    visibility: visible;
    word-wrap: normal;
    overflow: visible;
    /* Pixel rendering - crisp, no smoothing */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: none;
    font-smooth: never;
    filter: contrast(1.2);
    animation: amberGlowPulse 3s ease-in-out infinite;
}

@keyframes amberGlowPulse {
    0%, 100% {
        text-shadow: 
            2px 2px 0 rgba(255, 184, 108, 1),
            3px 3px 0 rgba(255, 140, 60, 0.8),
            -1px -1px 0 rgba(255, 184, 108, 0.9),
            0 2px 0 rgba(255, 184, 108, 1),
            2px 0 0 rgba(255, 184, 108, 1),
            0 0 15px rgba(255, 184, 108, 0.6);
    }
    50% {
        text-shadow: 
            2px 2px 0 rgba(255, 184, 108, 1),
            3px 3px 0 rgba(255, 140, 60, 0.8),
            -1px -1px 0 rgba(255, 184, 108, 0.9),
            0 2px 0 rgba(255, 184, 108, 1),
            2px 0 0 rgba(255, 184, 108, 1),
            0 0 25px rgba(255, 184, 108, 0.9);
    }
}
    /* Error glitch animation - every 4 seconds */
}

.hero-headline h1.typing-complete {
    /* Glitch animation removed */
}

.access-denied-cursor {
    display: inline;
    animation: morseCodeHelp 6.5s infinite;
    color: #ffb86c;
    text-shadow: 
        0 0 8px rgba(255, 184, 108, 0.6),
        0 0 4px rgba(255, 184, 108, 0.4);
    white-space: nowrap;
    margin-left: 2px;
    opacity: 1;
    visibility: visible;
    z-index: 251;
    position: relative;
}

/* Morse code for "HELP": .... . .-.. .--. */
/* H: .... (4 dots), E: . (1 dot), L: .-.. (dot-dash-dot-dot), P: .--. (dot-dash-dash-dot) */
/* Timing: dot = 1 unit, dash = 3 units, space = 1 unit, letter space = 3 units */
@keyframes morseCodeHelp {
    /* H: .... (4 dots) */
    0% { opacity: 1; }        /* dot 1 */
    2.86% { opacity: 0; }     /* space */
    5.71% { opacity: 1; }      /* dot 2 */
    8.57% { opacity: 0; }     /* space */
    11.43% { opacity: 1; }    /* dot 3 */
    14.29% { opacity: 0; }   /* space */
    17.14% { opacity: 1; }   /* dot 4 */
    20% { opacity: 0; }       /* space + letter space (3 units) */
    /* E: . (1 dot) */
    28.57% { opacity: 1; }    /* dot */
    31.43% { opacity: 0; }    /* space + letter space (3 units) */
    /* L: .-.. (dot-dash-dot-dot) */
    40% { opacity: 1; }       /* dot */
    42.86% { opacity: 0; }    /* space */
    45.71% { opacity: 1; }    /* dash start */
    51.43% { opacity: 1; }    /* dash continue */
    54.29% { opacity: 0; }    /* space */
    57.14% { opacity: 1; }   /* dot */
    60% { opacity: 0; }      /* space */
    62.86% { opacity: 1; }   /* dot */
    65.71% { opacity: 0; }   /* space + letter space (3 units) */
    /* P: .--. (dot-dash-dash-dot) */
    74.29% { opacity: 1; }   /* dot */
    77.14% { opacity: 0; }   /* space */
    80% { opacity: 1; }       /* dash 1 start */
    85.71% { opacity: 1; }   /* dash 1 continue */
    88.57% { opacity: 0; }   /* space */
    91.43% { opacity: 1; }   /* dash 2 start */
    97.14% { opacity: 1; }   /* dash 2 continue */
    100% { opacity: 0; }      /* end */
}

/* @keyframes errorGlitch - Removed glitch animation */
/* 
    0%, 100% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
    15% {
        transform: translate(-3px, 1px) skew(1deg);
        color: #ff0000;
        filter: hue-rotate(5deg) contrast(1.2);
        text-shadow: 
            4px 3px 0 rgba(255, 0, 0, 1),
            5px 4px 0 rgba(150, 0, 0, 1),
            -2px -1px 0 rgba(255, 0, 0, 1),
            2px 4px 0 rgba(255, 0, 0, 1),
            4px 2px 0 rgba(255, 0, 0, 1);
        clip-path: inset(0 0 0 0);
    }
    15.5% {
        transform: translate(3px, -2px) skew(-1deg);
        color: #00ffff;
        filter: hue-rotate(180deg) contrast(1.5);
        text-shadow: 
            -2px 2px 0 rgba(0, 255, 255, 1),
            -3px 3px 0 rgba(0, 200, 255, 1),
            2px -2px 0 rgba(0, 255, 255, 1),
            -1px 3px 0 rgba(0, 255, 255, 1),
            3px -1px 0 rgba(0, 255, 255, 1);
        clip-path: inset(5% 0 0 0);
    }
    16% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
    50% {
        transform: translate(2px, 3px) skew(0.5deg);
        color: #ff3333;
        filter: hue-rotate(-5deg) contrast(1.1);
        text-shadow: 
            3px 4px 0 rgba(255, 50, 50, 1),
            4px 5px 0 rgba(180, 0, 0, 1),
            -1px -2px 0 rgba(255, 50, 50, 1),
            1px 4px 0 rgba(255, 50, 50, 1),
            4px 1px 0 rgba(255, 50, 50, 1);
        clip-path: inset(0 0 0 0);
    }
    50.3% {
        transform: translate(-4px, 2px) skew(-1.5deg);
        color: #ff00ff;
        filter: hue-rotate(300deg) contrast(1.4);
        text-shadow: 
            -3px 3px 0 rgba(255, 0, 255, 1),
            -4px 4px 0 rgba(200, 0, 200, 1),
            3px -3px 0 rgba(255, 0, 255, 1),
            -2px 4px 0 rgba(255, 0, 255, 1),
            4px -2px 0 rgba(255, 0, 255, 1);
        clip-path: inset(0 8% 0 0);
    }
    50.6% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
    75% {
        transform: translate(-2px, -1px) skew(0.8deg);
        color: #cc0000;
        filter: hue-rotate(10deg) contrast(1.3);
        text-shadow: 
            1px 1px 0 rgba(200, 0, 0, 1),
            2px 2px 0 rgba(100, 0, 0, 1),
            -1px -1px 0 rgba(200, 0, 0, 1),
            -1px 1px 0 rgba(200, 0, 0, 1),
            1px -1px 0 rgba(200, 0, 0, 1);
        clip-path: inset(0 0 0 0);
    }
    75.2% {
        transform: translate(5px, -3px) skew(-2deg);
        color: #00ff00;
        filter: hue-rotate(120deg) contrast(1.6);
        text-shadow: 
            -4px 2px 0 rgba(0, 255, 0, 1),
            -5px 3px 0 rgba(0, 200, 0, 1),
            4px -2px 0 rgba(0, 255, 0, 1),
            -3px 3px 0 rgba(0, 255, 0, 1),
            3px -3px 0 rgba(0, 255, 0, 1);
        clip-path: inset(10% 0 0 0);
    }
    75.4% {
        transform: translate(-3px, 4px) skew(1.5deg);
        color: #ffff00;
        filter: hue-rotate(60deg) contrast(1.5);
        text-shadow: 
            4px -2px 0 rgba(255, 255, 0, 1),
            5px -3px 0 rgba(200, 200, 0, 1),
            -4px 2px 0 rgba(255, 255, 0, 1),
            3px -3px 0 rgba(255, 255, 0, 1),
            -3px 3px 0 rgba(255, 255, 0, 1);
        clip-path: inset(0 0 8% 0);
    }
    75.6% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
    97% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
    97.5% {
        transform: translate(-6px, 4px) skew(2deg);
        color: #ff0000;
        filter: hue-rotate(0deg) contrast(1.8);
        text-shadow: 
            6px 5px 0 rgba(255, 0, 0, 1),
            8px 7px 0 rgba(150, 0, 0, 1),
            -4px -3px 0 rgba(255, 0, 0, 1),
            3px 6px 0 rgba(255, 0, 0, 1),
            6px 3px 0 rgba(255, 0, 0, 1);
        clip-path: inset(0 15% 0 0);
    }
    98% {
        transform: translate(6px, -5px) skew(-2.5deg);
        color: #00ffff;
        filter: hue-rotate(180deg) contrast(2);
        text-shadow: 
            -5px 4px 0 rgba(0, 255, 255, 1),
            -7px 6px 0 rgba(0, 200, 255, 1),
            5px -4px 0 rgba(0, 255, 255, 1),
            -4px 6px 0 rgba(0, 255, 255, 1),
            6px -4px 0 rgba(0, 255, 255, 1);
        clip-path: inset(12% 0 0 0);
    }
    98.3% {
        transform: translate(-4px, 6px) skew(2deg);
        color: #ff00ff;
        filter: hue-rotate(300deg) contrast(1.9);
        text-shadow: 
            4px -5px 0 rgba(255, 0, 255, 1),
            6px -7px 0 rgba(200, 0, 200, 1),
            -4px 5px 0 rgba(255, 0, 255, 1),
            5px -6px 0 rgba(255, 0, 255, 1),
            -6px 5px 0 rgba(255, 0, 255, 1);
        clip-path: inset(0 0 10% 0);
    }
    98.6% {
        transform: translate(0, 0) skew(0deg);
        color: #ff4444;
        filter: hue-rotate(0deg) contrast(1);
        text-shadow: 
            2px 2px 0 rgba(255, 68, 68, 1),
            3px 3px 0 rgba(200, 0, 0, 0.8),
            -1px -1px 0 rgba(255, 68, 68, 0.9),
            0 2px 0 rgba(255, 68, 68, 1),
            2px 0 0 rgba(255, 68, 68, 1);
        clip-path: inset(0 0 0 0);
    }
}
*/

.locked-label {
    position: relative;
    margin-top: 10px;
    text-align: center;
    color: #ffb86c;
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: 
        0 0 8px rgba(255, 184, 108, 0.6),
        0 0 4px rgba(255, 184, 108, 0.4);
    font-family: 'Press Start 2P', monospace;
    min-height: 20px;
    opacity: 0;
}

.locked-label.typing-complete {
    opacity: 1;
}

/* Mission Box - Terminal Frame */
.hero-mission-box {
    margin: 20px auto;
    padding: 15px;
    max-width: 100%;
    z-index: 201;
    text-align: left;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    /* Dotted/segmented border */
    border: 1px dashed #a8ff9f;
    box-shadow: 
        inset 0 0 0 1px rgba(168, 255, 159, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Corner marks for mission box */
.hero-mission-box::before {
    content: '┌';
    position: absolute;
    top: -1px;
    left: -1px;
    color: #a8ff9f;
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.4);
}

.hero-mission-box::after {
    content: '┐';
    position: absolute;
    top: -1px;
    right: -1px;
    color: #a8ff9f;
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.4);
}

.hero-mission-box .mission-corner-bl {
    position: absolute;
    bottom: -1px;
    left: -1px;
    color: #a8ff9f;
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.4);
    pointer-events: none;
}

.hero-mission-box .mission-corner-br {
    position: absolute;
    bottom: -1px;
    right: -1px;
    color: #a8ff9f;
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.4);
    pointer-events: none;
}

.mission-text {
    color: #a8ff9f;
    font-family: 'VT323', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.5);
    letter-spacing: 0.3px;
    z-index: 201;
    position: relative;
}

.mission-text:last-child {
    margin-bottom: 0;
}

/* Terminal Button - Double Border */
.hero-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

/* Email Section */
.hero-email-section {
    margin-top: 250px;
    margin-bottom: 20px;
    margin-left: 500px;
    position: relative;
    max-width: 400px;
    z-index: 100;
}

.hero-email-text {
    color: #ffb86c;
    font-family: 'VT323', monospace;
    font-size: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(255, 184, 108, 0.5);
    line-height: 1.4;
}

/* Email Input Container */
.hero-email-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    position: relative;
    max-width: 400px;
}

.hero-email-input {
    width: 100%;
    padding: 12px 60px 12px 15px;
    background: rgba(255, 184, 108, 0.2);
    border: 2px solid #ffb86c;
    color: #ffb86c;
    font-family: 'VT323', monospace;
    font-size: 20px;
    letter-spacing: 1px;
    outline: none;
    box-shadow: 
        inset 0 0 10px rgba(255, 184, 108, 0.3),
        0 0 10px rgba(255, 184, 108, 0.2);
    transition: all 0.3s ease;
}

.hero-email-input::placeholder {
    color: rgba(255, 184, 108, 0.5);
}

.hero-email-input:focus {
    background: rgba(255, 184, 108, 0.3);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 15px rgba(255, 184, 108, 0.4),
        0 0 15px rgba(255, 184, 108, 0.4);
}

.email-icon-box {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 184, 108, 0.3);
    border: 2px solid #ffb86c;
    cursor: pointer;
    outline: none;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 
        inset 0 0 5px rgba(255, 184, 108, 0.4),
        0 0 5px rgba(255, 184, 108, 0.3);
}

.email-icon-box:hover {
    background: rgba(255, 184, 108, 0.5);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 10px rgba(255, 184, 108, 0.5),
        0 0 10px rgba(255, 184, 108, 0.4);
    transform: translateY(-50%) scale(1.05);
}

.email-icon-box:active {
    transform: translateY(-50%) scale(0.95);
    box-shadow: 
        inset 0 0 15px rgba(255, 184, 108, 0.6),
        0 0 5px rgba(255, 184, 108, 0.3);
}

.email-icon {
    color: #ffb86c;
    font-size: 16px;
    text-shadow: 0 0 4px rgba(255, 184, 108, 0.6);
}

.button-icon-left,
.button-icon-right {
    color: #a8ff9f;
    font-size: 20px;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
    opacity: 0.8;
}

.terminal-button {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffb86c;
    color: #ffb86c;
    padding: 10px 15px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    z-index: 201;
    position: relative;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(255, 184, 108, 0.6);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.2),
        0 0 15px rgba(255, 184, 108, 0.3);
    position: relative;
    font-weight: normal;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.terminal-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px solid rgba(168, 255, 159, 0.3);
    pointer-events: none;
}

.terminal-button:hover {
    color: #ffb86c;
    border-color: #ffb86c;
    background: rgba(255, 184, 108, 0.15);
    text-shadow: 0 0 12px rgba(255, 184, 108, 0.9);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.4),
        0 0 25px rgba(255, 184, 108, 0.5);
    animation: buttonHoverGlow 1.5s ease-in-out infinite;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Transformed email input from BEGIN button */
.email-input-transformed {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffb86c;
    color: #ffb86c;
    padding: 14px 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(255, 184, 108, 0.6);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.2),
        0 0 15px rgba(255, 184, 108, 0.3);
    position: relative;
    width: 100%;
    max-width: 100%;
    text-align: left;
    outline: none;
    z-index: 1;
}

.email-input-transformed::placeholder {
    color: rgba(255, 184, 108, 0.5);
    text-shadow: none;
}

.email-input-transformed:focus {
    background: rgba(255, 184, 108, 0.15);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.4),
        0 0 25px rgba(255, 184, 108, 0.5);
    text-shadow: 0 0 12px rgba(255, 184, 108, 0.9);
}

/* Email input wrapper */
.email-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Email icon box inside input */
.email-icon-box {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: rgba(255, 184, 108, 0.3);
    border: 2px solid #ffb86c;
    color: #ffb86c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 0 5px rgba(255, 184, 108, 0.4),
        0 0 5px rgba(255, 184, 108, 0.3);
    z-index: 12;
    padding: 0;
    margin: 0;
    outline: none;
    line-height: 1;
}

/* One-time focus pulse for the email textbox */
.email-input-transformed.first-focus {
    animation: emailInputFocusOnce 0.22s ease-out;
}

@keyframes emailInputFocusOnce {
    0% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 184, 108, 0.2),
            0 0 10px rgba(255, 184, 108, 0.2);
    }
    100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 184, 108, 0.4),
            0 0 25px rgba(255, 184, 108, 0.5);
    }
}

.email-icon-box .email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.email-icon-box:hover {
    background: rgba(255, 184, 108, 0.5);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 7px rgba(255, 184, 108, 0.45),
        0 0 7px rgba(255, 184, 108, 0.3);
}

.email-icon-box:active,
.email-icon-box:focus {
    background: rgba(255, 184, 108, 0.15);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.4),
        0 0 10px rgba(255, 184, 108, 0.28);
}

.email-icon-box.clicked {
    background: rgba(255, 184, 108, 0.15);
    border-color: #ff9500;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.4),
        0 0 8px rgba(255, 184, 108, 0.24);
    animation: emailIconClick 0.12s ease;
}

@keyframes emailIconClick {
    0% {
        box-shadow: 
            inset 0 0 5px rgba(255, 184, 108, 0.4),
            0 0 5px rgba(255, 184, 108, 0.3);
    }
    50% {
        box-shadow: 
            inset 0 0 0 1px rgba(255, 184, 108, 0.4),
            0 0 9px rgba(255, 184, 108, 0.28);
    }
    100% {
        box-shadow: 
            inset 0 0 5px rgba(255, 184, 108, 0.4),
            0 0 5px rgba(255, 184, 108, 0.3);
    }
}

.email-icon-box .email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #ffb86c;
    font-size: 16px;
    text-shadow: 0 0 4px rgba(255, 184, 108, 0.6);
}

/* Adjust input padding to make room for icon */
.email-input-transformed {
    padding-right: 50px;
}

/* Email success message */
.email-success-message {
    width: 100%;
    padding: 14px 20px;
    color: #ffb86c;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffb86c;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 184, 108, 0.2),
        0 0 15px rgba(255, 184, 108, 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 0 8px rgba(255, 184, 108, 0.6);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

@keyframes buttonHoverGlow {
    0%, 100% {
        box-shadow: 
            inset 0 0 0 1px rgba(255, 184, 108, 0.3),
            0 0 20px rgba(255, 184, 108, 0.4);
    }
    50% {
        box-shadow: 
            inset 0 0 0 1px rgba(255, 184, 108, 0.4),
            0 0 30px rgba(255, 184, 108, 0.6);
    }
}

.terminal-button:hover::before {
    border-color: rgba(255, 184, 108, 0.4);
}

.terminal-button:active {
    transform: scale(0.92) translateY(2px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 184, 108, 0.3),
        0 0 15px rgba(255, 184, 108, 0.5);
    animation: buttonClick 0.3s ease;
}

@keyframes buttonClick {
    0% {
        transform: scale(1) translateY(0);
        box-shadow: 
            inset 0 0 0 1px rgba(255, 184, 108, 0.3),
            0 0 20px rgba(255, 184, 108, 0.4);
    }
    50% {
        transform: scale(0.9) translateY(3px);
        box-shadow: 
            inset 0 3px 6px rgba(0, 0, 0, 0.7),
            inset 0 0 0 1px rgba(255, 184, 108, 0.4),
            0 0 25px rgba(255, 184, 108, 0.6);
    }
    100% {
        transform: scale(0.92) translateY(2px);
        box-shadow: 
            inset 0 2px 4px rgba(0, 0, 0, 0.6),
            inset 0 0 0 1px rgba(255, 184, 108, 0.3),
            0 0 15px rgba(255, 184, 108, 0.5);
    }
}

/* Hero Warning Line */
.hero-warning-line {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 8px;
    color: #ffb86c;
    font-family: 'VT323', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 184, 108, 0.5);
    opacity: 0.9;
    z-index: 201;
    position: relative;
}

/* Hero Status Strip */
.hero-status-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 15px;
    border-top: 1px solid rgba(168, 255, 159, 0.3);
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.hero-status-left {
    color: #a8ff9f;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.3);
    font-family: 'Press Start 2P', monospace;
}

.hero-status-center {
    color: #a8ff9f;
    font-size: 11px;
    letter-spacing: 1px;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.3);
    flex: 1;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
}

/* Panel Base Styles (for lower panels - keep existing) */
.panel {
    background: rgba(5, 5, 5, 0.6);
    border: 2px solid #a8ff9f;
    padding: 30px;
    padding-top: 50px; /* Space for window title bar */
    margin-bottom: 20px;
    position: relative;
    box-shadow: 
        0 0 10px rgba(168, 255, 159, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    animation: panelFadeIn 0.6s ease-out forwards;
    z-index: 100;
    pointer-events: auto;
    isolation: isolate;
    box-sizing: border-box;
    overflow: visible;
}

.panel:nth-child(1) { animation-delay: 0.2s; }
.panel:nth-child(2) { animation-delay: 0.4s; }
.panel:nth-child(3) { animation-delay: 0.6s; }
.panel:nth-child(4) { animation-delay: 0.8s; }

@keyframes panelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: brightness(0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: brightness(1);
    }
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(168, 255, 159, 0.03) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
}

.panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    box-shadow: 
        0 0 10px rgba(168, 255, 159, 0.15),
        0 0 30px rgba(168, 255, 159, 0.1);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.panel:hover {
    transform: translateY(-2px) scale(1.002);
    box-shadow: 
        0 0 10px rgba(168, 255, 159, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(168, 255, 159, 0.1);
    border-color: rgba(168, 255, 159, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.panel:hover::after {
    opacity: 1;
    animation: panelHoverGlow 2s ease-in-out infinite;
}

@keyframes panelHoverGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(168, 255, 159, 0.15),
            0 0 30px rgba(168, 255, 159, 0.1);
        opacity: 1;
    }
    50% {
        box-shadow: 
            0 0 15px rgba(168, 255, 159, 0.2),
            0 0 40px rgba(168, 255, 159, 0.15);
        opacity: 1;
    }
}

/* Panel Window Title Bar */
.panel-window-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: rgba(3, 3, 3, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 
        inset 0 1px 0 rgba(168, 255, 159, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    z-index: 101;
    pointer-events: auto;
}

.panel-window-label {
    color: #a8ff9f;
    font-size: 10px;
    letter-spacing: 1px;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 0 0 2px rgba(168, 255, 159, 0.3);
}

/* Panel title strip divider - positioned for panels */
.panel .title-strip-divider {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(168, 255, 159, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    z-index: 102;
    pointer-events: none;
}

/* Legacy panel-header styles (kept for backwards compatibility) */
.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.panel-icon {
    color: #ffb86c;
    font-size: 12px;
}

.panel-label {
    color: #a8ff9f;
    font-size: 11px;
    letter-spacing: 3px;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.4);
    font-family: 'VT323', monospace;
}

.panel-separator {
    color: #a8ff9f;
    font-size: 10px;
    margin-bottom: 15px;
    opacity: 0.6;
    letter-spacing: 1px;
}

.panel-content {
    color: #a8ff9f;
    font-size: 16px;
    line-height: 1.8;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.2);
    overflow: visible;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 240px;
    overflow: visible;
}

.panel.full-width {
    grid-column: 1 / -1;
}

.tokenomics-panel {
    width: min(100%, 1080px);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* About Panel */
.about-panel p {
    margin-bottom: 15px;
}

.about-panel p:last-child {
    margin-bottom: 0;
}

/* Tokenomics Panel */
.tokenomics-list {
    list-style: none;
    min-width: 200px;
}

.tokenomics-list li {
    margin-bottom: 12px;
    padding-left: 15px;
    border-left: 3px solid;
    position: relative;
    transition: all 0.2s ease;
}

/* Color-coded borders matching pie chart segments */
.tokenomics-list li[data-slice="community"] {
    border-left-color: #a8ff9f; /* Community - green */
}

.tokenomics-list li[data-slice="liquidity"] {
    border-left-color: #ffb86c; /* Liquidity - amber */
}

.tokenomics-list li[data-slice="rewards"] {
    border-left-color: #00ffff; /* Rewards - cyan */
}

.tokenomics-list li[data-slice="development"] {
    border-left-color: #ff6b6b; /* Development - red */
}

.legend-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.legend-item:hover {
    background: rgba(0, 0, 0, 0.3);
    padding-left: 20px;
    box-shadow: 0 0 10px rgba(168, 255, 159, 0.3);
}

.legend-item[data-slice="community"]:hover {
    text-shadow: 0 0 8px rgba(168, 255, 159, 0.8);
    box-shadow: 0 0 10px rgba(168, 255, 159, 0.4);
}

.legend-item[data-slice="liquidity"]:hover {
    text-shadow: 0 0 8px rgba(255, 184, 108, 0.8);
    box-shadow: 0 0 10px rgba(255, 184, 108, 0.4);
}

.legend-item[data-slice="rewards"]:hover {
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.legend-item[data-slice="development"]:hover {
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.4);
}

.tokenomics-list li:last-child {
    margin-bottom: 0;
}

.allocation-label {
    font-weight: bold;
    margin-right: 10px;
}

.allocation-value {
    font-weight: normal;
}

/* Color-coded text matching pie chart segments */
.tokenomics-list li[data-slice="community"] .allocation-label,
.tokenomics-list li[data-slice="community"] .allocation-value {
    color: #a8ff9f; /* Community - green */
}

.tokenomics-list li[data-slice="liquidity"] .allocation-label,
.tokenomics-list li[data-slice="liquidity"] .allocation-value {
    color: #ffb86c; /* Liquidity - amber */
}

.tokenomics-list li[data-slice="rewards"] .allocation-label,
.tokenomics-list li[data-slice="rewards"] .allocation-value {
    color: #00ffff; /* Rewards - cyan */
}

.tokenomics-list li[data-slice="development"] .allocation-label,
.tokenomics-list li[data-slice="development"] .allocation-value {
    color: #ff6b6b; /* Development - red */
}

/* Tokenomics Description */
.tokenomics-description {
    margin-top: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(168, 255, 159, 0.3);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    min-height: 80px;
}

.tokenomics-description .description-title {
    color: #a8ff9f;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    margin-bottom: 12px;
    text-shadow: 0 0 6px rgba(168, 255, 159, 0.5);
    line-height: 1.6;
}

.tokenomics-description .description-text {
    color: #a8ff9f;
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.8;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.3);
    margin: 0;
}

/* Tokenomics Chart Container */
.tokenomics-chart-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    overflow: visible;
}

/* Pixelated Pie Chart */
.pixelated-pie-chart {
    width: 224px;
    height: 224px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: -20px;
    /* Pixelated rendering */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transition: all 0.3s ease;
}

/* Circular border using pseudo-element to avoid clipping */
.pixelated-pie-chart::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 184px;
    height: 184px;
    border: 2px solid #a8ff9f;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 
        inset 0 0 0 1px rgba(168, 255, 159, 0.2),
        0 0 10px rgba(168, 255, 159, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* SVG Pie Chart */
.pie-chart-svg {
    width: 160px;
    height: 160px;
    overflow: visible;
    position: relative;
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pie-slice {
    transform-origin: 80px 80px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.pie-slice:hover {
    filter: brightness(1.2) drop-shadow(0 0 8px currentColor);
}

/* Slice pop-out on legend hover */
.pie-slice.slice-popout {
    transform: scale(1.15);
    filter: brightness(1.3) drop-shadow(0 0 15px currentColor);
    z-index: 10;
    overflow: visible;
}

/* Slice dividers */
.slice-divider {
    pointer-events: none;
}

/* Scanline overlay for CRT effect */
.pixelated-pie-chart::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 184px;
    height: 184px;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.1) 3px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    opacity: 0.3;
    border-radius: 50%;
    z-index: 2;
}

/* Tokenomics (segmented bar redesign) */
.tokenomics-section {
    padding: 8px 4px;
}

.tokenomics-heading {
    margin: 0 0 16px;
    color: #a8ff9f;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tokenomics-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 24px;
    align-items: start;
}

.tokenomics-supply {
    background: rgba(5, 8, 5, 0.5);
    border: 1px solid rgba(168, 255, 159, 0.25);
    border-radius: 6px;
    padding: 18px;
}

.supply-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(168, 255, 159, 0.12);
}

.supply-row:last-child {
    border-bottom: 0;
}

.supply-key {
    color: rgba(168, 255, 159, 0.8);
    font-family: 'VT323', monospace;
    font-size: 18px;
    letter-spacing: 0.4px;
}

.supply-value {
    color: #c7ffc2;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    text-align: right;
}

.tokenomics-allocation-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tokenomics-hover-note {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(168, 255, 159, 0.2);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(168, 255, 159, 0.78);
    font-family: 'VT323', monospace;
    font-size: 16px;
    line-height: 1.4;
}

.allocation-bar {
    display: flex;
    width: 100%;
    min-height: 22px;
    border: 1px solid rgba(168, 255, 159, 0.3);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
}

.tokenomics-segment {
    position: relative;
    border: 0;
    border-right: 1px solid rgba(200, 210, 208, 0.28);
    background: #2c3a2d;
    padding: 0;
    min-height: 22px;
    cursor: default;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.tokenomics-segment:last-child {
    border-right: 0;
}

.tokenomics-segment:focus-visible {
    outline: 2px solid rgba(168, 255, 159, 0.85);
    outline-offset: -2px;
    z-index: 2;
}

.tokenomics-segment::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: rgba(4, 8, 4, 0.96);
    color: #d4ffd1;
    border: 1px solid rgba(168, 255, 159, 0.35);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: 'VT323', monospace;
    font-size: 15px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.tokenomics-segment:hover::after,
.tokenomics-segment:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.seg-participation { background: #00E38C; }
.seg-development { background: #3FA9FF; }
.seg-treasury { background: #00B3A4; }
.seg-ecosystem { background: #6C63FF; }
.seg-founder { background: #6E6E6E; }

.tokenomics-segment:hover,
.tokenomics-segment:focus-visible {
    filter: brightness(1.08);
}

.tokenomics-segment.is-hovered {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.tokenomics-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(168, 255, 159, 0.2);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
}

.tokenomics-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(168, 255, 159, 0.12);
}

.tokenomics-legend-row:last-child {
    border-bottom: 0;
}

.tokenomics-legend-row.is-hovered {
    background: rgba(120, 255, 170, 0.07);
    border-left: 2px solid rgba(120, 255, 170, 0.28);
}

.legend-left {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(168, 255, 159, 0.35);
    margin-top: 5px;
    flex-shrink: 0;
}

.legend-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend-label {
    color: #beffb7;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.6;
}

.legend-description {
    color: rgba(168, 255, 159, 0.75);
    font-family: 'VT323', monospace;
    font-size: 16px;
    line-height: 1.35;
}

.legend-percent {
    color: #d3ffd0;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    white-space: nowrap;
    text-align: right;
    padding-top: 1px;
}

.tokenomics-transparency {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    border: 1px solid rgba(168, 255, 159, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(5, 8, 5, 0.45);
}

.tokenomics-transparency span {
    color: rgba(168, 255, 159, 0.86);
    font-family: 'VT323', monospace;
    font-size: 16px;
}

@media (max-width: 900px) {
    .tokenomics-layout {
        grid-template-columns: 1fr;
    }

    .tokenomics-segment::after {
        display: none;
    }
}

/* Roadmap Panel - Horizontal Scrolling Timeline */
.roadmap-scroll-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 60px 40px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 255, 159, 0.3) transparent;
    margin: 0 auto;
}

.roadmap-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.roadmap-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.roadmap-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(168, 255, 159, 0.3);
    border-radius: 3px;
}

.roadmap-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 255, 159, 0.5);
}

.roadmap-timeline-wrapper {
    position: relative;
    width: 2200px;
    height: 320px;
    margin: 0;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 2150px;
    height: 1px;
    background: rgba(168, 255, 159, 0.25);
    box-shadow: 0 0 3px rgba(168, 255, 159, 0.15);
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-node {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
}

.timeline-node[data-phase="1"] {
    left: 100px;
}

.timeline-node[data-phase="2"] {
    left: 500px;
}

.timeline-node[data-phase="3"] {
    left: 900px;
}

.timeline-node[data-phase="4"] {
    left: 1300px;
}

.timeline-node[data-phase="5"] {
    left: 1700px;
}

.timeline-node[data-phase="6"] {
    left: 2100px;
}

/* Cards above timeline (odd phases: 1, 3, 5) */
.timeline-node[data-phase="1"],
.timeline-node[data-phase="3"],
.timeline-node[data-phase="5"] {
    flex-direction: column-reverse;
}

.timeline-node[data-phase="1"] .node-card,
.timeline-node[data-phase="3"] .node-card,
.timeline-node[data-phase="5"] .node-card {
    bottom: 40px;
    top: auto;
}

.timeline-node[data-phase="1"] .node-connector,
.timeline-node[data-phase="3"] .node-connector,
.timeline-node[data-phase="5"] .node-connector {
    bottom: 24px;
    top: auto;
    height: 16px;
}

/* Cards below timeline (even phases: 2, 4, 6) */
.timeline-node[data-phase="2"],
.timeline-node[data-phase="4"],
.timeline-node[data-phase="6"] {
    flex-direction: column;
}

.timeline-node[data-phase="2"] .node-card,
.timeline-node[data-phase="4"] .node-card,
.timeline-node[data-phase="6"] .node-card {
    top: 40px;
    bottom: auto;
}

.timeline-node[data-phase="2"] .node-connector,
.timeline-node[data-phase="4"] .node-connector,
.timeline-node[data-phase="6"] .node-connector {
    top: 24px;
    bottom: auto;
    height: 16px;
}

.node-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(168, 255, 159, 0.6);
    box-shadow: 0 0 2px rgba(168, 255, 159, 0.1);
    position: relative;
    z-index: 3;
    transition: box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inactive nodes (past/future) */
.timeline-node[data-state="inactive"] .node-circle {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(168, 255, 159, 0.5);
    box-shadow: 0 0 1px rgba(168, 255, 159, 0.05);
}

.timeline-node[data-state="inactive"]:hover .node-circle {
    box-shadow: 0 0 4px rgba(168, 255, 159, 0.3);
}

/* Active node (current phase) */
.timeline-node[data-state="active"] .node-circle {
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.timeline-node[data-state="active"] .node-inner-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 184, 108, 0.9);
    z-index: 2;
    animation: activeNodePulse 2.5s ease-in-out infinite;
}

.timeline-node[data-state="active"] .node-outer-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 184, 108, 0.7);
    z-index: 1;
    animation: activeRingPulse 2.5s ease-in-out infinite;
}

@keyframes activeNodePulse {
    0%, 100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 6px rgba(255, 184, 108, 0.4);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 10px rgba(255, 184, 108, 0.6);
    }
}

@keyframes activeRingPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 4px rgba(255, 184, 108, 0.3);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 0 8px rgba(255, 184, 108, 0.5);
    }
}

.timeline-node[data-state="active"] .node-cursor {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 184, 108, 0.8);
    font-family: 'VT323', monospace;
    font-size: 14px;
    animation: cursorBlink 1.5s ease-in-out infinite;
    z-index: 3;
}

@keyframes cursorBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

.timeline-node[data-state="active"]:hover .node-circle {
    box-shadow: 0 0 8px rgba(255, 184, 108, 0.4);
}

/* Locked nodes (future) */
.timeline-node[data-state="locked"] .node-circle {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px dashed rgba(168, 255, 159, 0.3);
    box-shadow: none;
}

.timeline-node[data-state="locked"]:hover .node-circle {
    box-shadow: 0 0 2px rgba(168, 255, 159, 0.2);
}

.node-connector {
    position: absolute;
    width: 1px;
    background: rgba(168, 255, 159, 0.25);
    z-index: 2;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Connector glow only at node junction */
.timeline-node[data-state="inactive"] .node-connector {
    background: rgba(168, 255, 159, 0.2);
}

.timeline-node[data-state="inactive"] .node-connector::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(168, 255, 159, 0.3);
    box-shadow: 0 0 4px rgba(168, 255, 159, 0.2);
}

.timeline-node[data-state="active"] .node-connector {
    background: rgba(255, 184, 108, 0.25);
}

.timeline-node[data-state="active"] .node-connector::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 184, 108, 0.4);
    box-shadow: 0 0 6px rgba(255, 184, 108, 0.3);
}

.timeline-node[data-state="locked"] .node-connector {
    background: rgba(168, 255, 159, 0.15);
}

.timeline-node[data-state="locked"] .node-connector::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(168, 255, 159, 0.2);
    box-shadow: none;
}

.node-card {
    position: absolute;
    width: 280px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(168, 255, 159, 0.25);
    border-radius: 2px;
    box-shadow: 
        0 0 3px rgba(168, 255, 159, 0.1),
        inset 0 0 2px rgba(168, 255, 159, 0.03);
    transition: all 0.3s ease;
    margin-left: -140px;
    text-align: left;
}

.node-card:hover {
    border-color: rgba(168, 255, 159, 0.4);
    box-shadow: 
        0 0 5px rgba(168, 255, 159, 0.15),
        inset 0 0 3px rgba(168, 255, 159, 0.05);
}

.timeline-node.active .node-card {
    border-color: rgba(255, 184, 108, 0.35);
    box-shadow: 
        0 0 6px rgba(255, 184, 108, 0.2),
        inset 0 0 3px rgba(255, 184, 108, 0.08);
    animation: activeCardGlow 2.5s ease-in-out infinite;
}

@keyframes activeCardGlow {
    0%, 100% {
        box-shadow: 
            0 0 6px rgba(255, 184, 108, 0.2),
            inset 0 0 3px rgba(255, 184, 108, 0.08);
    }
    50% {
        box-shadow: 
            0 0 10px rgba(255, 184, 108, 0.3),
            inset 0 0 4px rgba(255, 184, 108, 0.12);
    }
}

.card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #a8ff9f;
    margin-bottom: 8px;
    line-height: 1.4;
    text-shadow: none;
    opacity: 0.9;
}

.timeline-node.active .card-title {
    color: #ffb86c;
    opacity: 1;
}

.active-tag {
    color: #ffb86c;
    font-size: 7px;
    margin-left: 6px;
    opacity: 0.8;
}

.card-text {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #a8ff9f;
    line-height: 1.5;
    text-shadow: none;
    opacity: 0.85;
    margin: 0;
}

.timeline-node.active .card-text {
    color: #ffb86c;
    opacity: 0.9;
}

/* Node tooltip */
.node-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 2px 6px;
    font-family: 'VT323', monospace;
    font-size: 11px;
    color: rgba(168, 255, 159, 0.7);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(168, 255, 159, 0.3);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 20;
    pointer-events: none;
}

.timeline-node:hover .node-tooltip {
    opacity: 1;
    visibility: visible;
}

.timeline-node[data-state="active"] .node-tooltip {
    color: rgba(255, 184, 108, 0.8);
    border-color: rgba(255, 184, 108, 0.4);
}

.timeline-node[data-state="locked"] .node-tooltip {
    color: rgba(168, 255, 159, 0.5);
    border-color: rgba(168, 255, 159, 0.2);
}

.scroll-hint {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: rgba(168, 255, 159, 0.4);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* Hide scroll hint on very wide screens where all phases are visible */
@media (min-width: 1800px) {
    .scroll-hint {
        display: none;
    }
}

/* Bottom Status Strip */
.bottom-status {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 25px;
    border-top: 2px dashed #a8ff9f;
    background: rgba(10, 10, 10, 0.8);
    font-size: 13px;
    letter-spacing: 1px;
    flex-shrink: 0;
    position: relative;
    z-index: 60;
    pointer-events: auto;
    margin: 4px;
    border: 2px solid #a8ff9f;
    box-shadow: inset 0 0 0 1px rgba(168, 255, 159, 0.2);
}

.status-item {
    color: #a8ff9f;
    opacity: 0.9;
    text-shadow: 0 0 4px rgba(168, 255, 159, 0.4);
    font-family: 'VT323', monospace;
}

.status-amber {
    color: #ffb86c;
    text-shadow: 0 0 6px rgba(255, 184, 108, 0.6);
}
}

.status-item:hover {
    opacity: 1;
    color: #ffb86c;
    text-shadow: 0 0 5px rgba(255, 184, 108, 0.5);
    cursor: pointer;
    animation: statusItemHover 1s ease-in-out infinite;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

@keyframes statusItemHover {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 184, 108, 0.5);
    }
    50% {
        text-shadow: 0 0 8px rgba(255, 184, 108, 0.8);
    }
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-screen.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loading-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-12vh);
    padding: 0 12px;
    text-align: center;
    color: #a8ff9f;
    font-family: 'Press Start 2P', monospace;
}

.loading-terminal {
    border: 2px solid #a8ff9f;
    padding: 30px 40px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 
        inset 0 0 0 1px rgba(168, 255, 159, 0.2),
        0 0 30px rgba(168, 255, 159, 0.3);
    width: min(92vw, 420px);
    min-width: 0;
}

.loading-line {
    font-size: 12px;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(168, 255, 159, 0.5);
    animation: loadingTextBlink 1.5s ease-in-out infinite;
}

.loading-bar {
    width: 100%;
    height: 8px;
    border: 1px solid #a8ff9f;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(
        90deg,
        #a8ff9f 0%,
        #b8ffaf 50%,
        #a8ff9f 100%
    );
    width: 0%;
    animation: loadingProgress 2s ease-out forwards;
    box-shadow: 0 0 10px rgba(168, 255, 159, 0.6);
}

.loading-status {
    font-size: 10px;
    opacity: 0.7;
    text-shadow: 0 0 3px rgba(168, 255, 159, 0.3);
    animation: loadingStatusPulse 1s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes loadingTextBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes loadingStatusPulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    /* Disable page load animation filter */
    body {
        animation: pageLoad 1.5s ease-out forwards;
    }
    
    /* Disable CRT flicker and scanline movement */
    .crt-overlay {
        animation: none;
    }
    
    /* Disable noise overlay animation */
    .noise-overlay {
        animation: none;
        will-change: auto;
    }
    
    /* Disable button glow animations */
    .terminal-button:hover {
        animation: none;
    }
    
    /* Disable panel hover pulse animations */
    .panel:hover::after {
        animation: none;
    }
    
    .pixelated-pie-chart:hover {
        animation: none;
    }
    
    /* Disable cursor blink */
    .cursor {
        animation: none;
        opacity: 1;
    }
    
    /* Disable LED pulse */
    .status-led {
        animation: none;
    }
    
    /* Disable text glow animations */
    .hero-headline h1.typing-complete {
        animation: none;
    }
    
    /* Disable status item hover animations */
    .status-item:hover {
        animation: none;
    }
    
    /* Ensure loading screen is hidden unless explicitly active */
    .loading-screen:not(.is-active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        display: none !important;
    }
    
    /* Disable loading animations */
    .loading-progress,
    .loading-line,
    .loading-status {
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .hero-shell {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }

    .ascii-art {
        justify-content: center;
    }

    .hero-ascii-mascot {
        transform: scale(0.88);
        transform-origin: center center;
    }

    .terminal-window {
        width: 100%;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .loading-content {
        transform: translateY(-8vh);
    }

    .loading-terminal {
        width: 92vw;
        padding: 20px 16px;
    }

    .loading-line {
        font-size: 10px;
        margin-bottom: 14px;
    }

    .loading-status {
        font-size: 9px;
    }

    /* Fix horizontal overflow - remove all horizontal offsets on mobile */
    /* Terminal frame: full width, no horizontal margins */
    .terminal-frame {
        margin: 5px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 5px;
        overflow-x: hidden;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Content area: full width, center with padding not margins */
    .content-area {
        padding: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Hero panel: completely remove horizontal shifting */
    .hero-panel {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 15px !important;
        margin-top: 5vh;
        width: 100% !important;
        box-sizing: border-box;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    .terminal-window {
        /* Keep title chrome flush with hero frame on mobile */
        width: calc(100% + 30px);
        margin: -20px -15px 0;
        padding: 32px 15px 0;
        box-sizing: border-box;
    }
    
    /* Convert dashboard grid to single column - remove grid-column spans */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        margin-top: 20px !important;
        gap: 15px;
        overflow-x: hidden;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Remove grid-column spans on mobile */
    .panel.full-width {
        grid-column: 1 !important;
    }
    
    /* Make status bar navigation wrap on mobile */
    .status-bar {
        flex-wrap: wrap;
        padding: 12px 15px;
    }
    
    .status-nav {
        width: 100%;
        margin-top: 8px;
        justify-content: flex-start;
        gap: 6px;
    }
    
    /* Fix nav button sizing - reduce font and padding to fit screen */
    .nav-button {
        padding: 6px 8px;
        font-size: 8px;
        letter-spacing: 0.3px;
    }
    
    /* Increase info row font size for readability */
    .info-row {
        font-size: 12px;
        padding: 8px 15px;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    /* Fix AUTHENTICATION NODE text overlapping - reduce font size and allow wrapping */
    .hero-window-title {
        height: 28px;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .hero-window-title .window-controls {
        gap: 1px;
    }
    
    .hero-window-label {
        font-size: 7px;
        letter-spacing: 0.5px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-terminal-lines {
        margin-bottom: 10px;
        overflow: hidden;
        margin-top: 2px;
        padding-right: 2px;
    }

    .terminal-line {
        font-size: 14px;
        line-height: 1.25;
        gap: 6px;
        margin-bottom: 6px;
        min-width: 0;
        flex-wrap: wrap;
    }

    .command {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .terminal-icon-1,
    .terminal-icon-2 {
        display: none;
    }

    /* ASCII mascot: keep enlarged size on mobile */
    .hero-ascii-mascot {
        font-size: 5px;
        transform: scale(0.88);
        transform-origin: center center;
    }
    
    .title-icon-box {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
    
    /* Reduce panel padding and ensure content is visible - Fix window sizing and alignment */
    .panel {
        padding: 14px 12px;
        padding-top: 32px;
        overflow: visible;
        min-height: auto;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        margin-top: 0;
        box-sizing: border-box;
        position: relative;
    }
    
    /* Ensure about and tokenomics panels are aligned on mobile */
    .about-panel,
    .tokenomics-panel {
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        overflow: visible;
    }

    .about-panel {
        max-width: 350px !important;
    }

    .tokenomics-panel {
        max-width: 100% !important;
    }
    
    /* Reduce panel window title bar height for mobile */
    .panel-window-title {
        height: 24px;
        padding: 0 8px;
        box-sizing: border-box;
    }
    
    .panel .title-strip-divider {
        top: 24px;
    }
    
    .panel-window-label {
        font-size: 8px;
        letter-spacing: 0.5px;
    }
    
    /* Convert tokenomics chart to column layout and make chart responsive */
    .tokenomics-chart-container {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Remove min-width constraint on tokenomics list for mobile */
    .tokenomics-list {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .pixelated-pie-chart {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        padding: 6px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .pixelated-pie-chart::before {
        content: '';
        position: absolute;
        width: 128px;
        height: 128px;
        top: 6px;
        left: 6px;
        border: 2px solid #a8ff9f;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 0;
    }
    
    .pixelated-pie-chart::after {
        content: '';
        position: absolute;
        width: 128px;
        height: 128px;
        top: 6px;
        left: 6px;
        border-radius: 50%;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 2;
    }
    
    .pie-chart-svg {
        width: 128px;
        height: 128px;
        margin: 0 auto;
        box-sizing: border-box;
        display: block;
        position: relative;
        z-index: 1;
    }
    
    /* Reduce roadmap scroll container padding */
    .roadmap-scroll-container {
        padding: 20px 15px;
    }
    
    /* Adjust background image for mobile - use contain to prevent cropping */
    body::before {
        background-size: contain;
        background-position: center center;
        background-attachment: scroll;
        position: absolute;
    }
    
    /* Increase base font sizes for readability and ensure text is fully visible */
    .panel-content {
        font-size: 15px;
        line-height: 1.5;
        overflow: visible;
        word-wrap: break-word;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    /* Ensure about panel paragraphs are visible and fit borders */
    .about-panel {
        overflow: visible;
        box-sizing: border-box;
    }
    
    .about-panel p {
        margin-bottom: 12px;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        word-wrap: break-word;
        box-sizing: border-box;
        padding: 0;
        padding-right: 0;
    }
    
    .about-panel p:last-child {
        margin-bottom: 0;
    }
    
    /* Ensure tokenomics panel content fits */
    .tokenomics-panel {
        box-sizing: border-box;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .tokenomics-panel .panel-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .tokenomics-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Remove white-space: nowrap from hero headline on mobile */
    .hero-headline {
        white-space: normal !important;
        overflow: visible;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .hero-headline h1 {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.5;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .terminal-line {
        font-size: 16px;
    }
    
    .terminal-button {
        font-size: 9px;
        padding: 12px 15px;
    }
    
    .email-input-transformed {
        font-size: 12px;
        padding: 12px 50px 12px 15px;
    }
    
    .bottom-status {
        flex-direction: column;
        gap: 8px;
        padding: 12px 15px;
        font-size: 11px;
    }
}

/* Responsive adjustments for very large screens */
@media (min-width: 1600px) {
    .hero-headline h1 {
        font-size: 52px;
    }
    
    .content-area {
        padding: 50px;
    }
    
    .panel {
        padding: 40px;
    }
}