:root {
    --bg: #0a0a0a;
    --surface: #111;
    --accent: #adff2f;
    --ff-label: #ff5555;
    --text-white: #ffffff;
    --text-dim: #666;
    --font-mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg);
color: var(--text-white);
font-family: 'Inter', sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
nav {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 8%; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(15px);
border-bottom: 1px solid #adff2f; z-index: 1000;
}
.logo-nav { font-family: var(--font-mono); font-weight: 700; color: var(--accent); letter-spacing: -1px; text-decoration: none; font-size: 1.1rem; }
.nav-right { display: flex; align-items: center; gap: 25px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { text-decoration: none; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.8rem; transition: 0.3s; }
.nav-links a:hover { color: var(--accent); }
.hero { flex-grow: 1; display: grid; grid-template-columns: 1.2fr 1.6fr; align-items: center; padding: 40px 8% 30px 8%; gap: 50px; }
.hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 15px; font-weight: 700; letter-spacing: -2px; }
.hero-content p { color: var(--text-dim); margin-bottom: 25px; max-width: 380px; font-size: 1rem; }
.cta-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}
.cta-mail, .cta-discord {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid #333;
    box-sizing: border-box;
}
.cta-mail {
    width: 55px;
    padding: 0;
    color: var(--accent);
}
.cta-mail svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent);
    transition: 0.3s;
    pointer-events: none;
}
.cta-mail:hover {
    border-color: var(--accent);
    background: rgba(173, 255, 47, 0.05);
}
.cta-mail:hover svg {
    stroke: #ffffff;
    filter: drop-shadow(0 0 8px var(--accent));
}
.cta-discord {
    width: 55px;
    padding: 0;
}
.cta-discord svg {
    fill: #5865F2;
    transition: 0.3s;
    pointer-events: none;
}
.cta-discord:hover {
    border-color: #5865F2;
    background: rgba(88, 101, 242, 0.05);
}
.cta-discord:hover svg {
    fill: #ffffff;
    filter: drop-shadow(0 0 8px #5865F2);
}
.terminal {
background: #000; border: 1px solid #222; height: 460px;
width: 100%; max-width: 820px;
display: flex; flex-direction: column; cursor: text;
box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative;
transition: all 0.3s ease;
margin-left: auto;
margin-top: 15px;
}
.terminal.focused { border-color: var(--accent); box-shadow: 0 0 25px rgba(173, 255, 47, 0.2); }
.terminal.error-flash { border-color: #ff5555 !important; box-shadow: 0 0 30px rgba(255, 85, 85, 0.4) !important; }
.terminal-bar {
background: #1111; padding: 10px 15px; border-bottom: 1px solid #222;
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 9px; color: #444;
}
.terminal-body {
padding: 30px 40px; overflow-y: auto; flex-grow: 1;
font-family: var(--font-mono); font-size: 11px; color: var(--text-white);
white-space: pre-wrap;
line-height: 1.6;
}
.bar-container {
display: inline-block;
vertical-align: bottom;
height: 1.2em;
overflow: hidden;
line-height: 1.2em;
}
.terminal-body span { font-variant-numeric: tabular-nums; }
.terminal-body::-webkit-scrollbar { display: none; }
.ff-container {
display: flex;
gap: 60px;
margin: 50px 0 20px 0 !important;
align-items: flex-start;
line-height: 1.4;
}
.ff-logo-box {
border: 1.5px solid var(--accent);
padding: 60px 80px;
position: relative;
background: rgba(173, 255, 47, 0.02);
flex-shrink: 0;
}
.ff-logo-badge {
position: absolute; top: -10px; left: 15px;
background: var(--accent); color: #000; font-size: 8px;
padding: 1px 8px; font-weight: bold; text-transform: uppercase;
}
.ff-logo-text { color: #fff; font-size: 14px; line-height: 1.1; white-space: pre; font-family: var(--font-mono); }
.ff-info { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 11px; padding-top: 5px; line-height: 1.5; }
.ff-row { display: grid; grid-template-columns: 11ch 1fr; }
.ff-row b { color: var(--ff-label); font-weight: bold; }
.ff-row span { color: var(--text-white); }
.color-bar { display: flex; gap: 0; margin-top: 45px !important; }
.block { width: 35px; height: 16px; }
.command-line { display: flex; align-items: center; gap: 0; color: #fff; margin: 0; padding: 0; height: 1.5em; }
.prompt { color: var(--accent); font-weight: bold; }
#hidden-input { position: absolute; opacity: 0; pointer-events: none; top: -9999px; left: -9999px; width: 1px; height: 1px; }
.cursor { 
    display: inline-block; 
    width: 7px; 
    height: 14px; 
    background: var(--accent); 
    animation: blink 0.7s infinite steps(1); 
    vertical-align: middle; 
}
@keyframes blink { 
    0% { opacity: 1; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
}
footer { padding: 15px 8%; text-align: center; font-family: var(--font-mono); font-size: 0.65rem; color: #333; }
@media (max-width: 1100px) {
.hero { grid-template-columns: 1fr; padding-top: 80px; height: auto; }
.ff-container { flex-direction: column; gap: 15px; }
.terminal { max-width: 100%; height: 450px; }
}
.icon-github {
    color: var(--accent);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.icon-github svg {
    fill: var(--accent);
    transition: all 0.3s ease;
}
.icon-github:hover svg {
    fill: #ffffff;
    filter: drop-shadow(0 0 8px var(--accent));
}