@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";
:root{--bg-primary:#02040a;--bg-secondary:#020816;--bg-tertiary:#0a0f1a;--bg-card:#0a0f1acc;--bg-card-hover:#0f1626e6;--accent-green:#4ef08a;--accent-green-dim:#4ef08a4d;--accent-violet:#9b5bff;--accent-violet-dim:#9b5bff4d;--accent-cyan:#1fffff;--accent-cyan-dim:#1fffff4d;--accent-blue:#00b4d8;--accent-blue-dim:#00b4d84d;--text-primary:#e8e8e8;--text-secondary:gray;--text-muted:#505050;--text-accent:var(--accent-green);--border-subtle:#ffffff14;--border-accent:#4ef08a66;--glow-green:0 0 20px #4ef08a66;--glow-cyan:0 0 20px #1fffff66;--glow-violet:0 0 20px #9b5bff66;--font-heading:"Outfit",sans-serif;--font-mono:"JetBrains Mono",monospace;--section-padding:clamp(4rem,10vh,8rem);--container-max:1400px;--card-radius:4px;--transition-fast:.15s ease;--transition-medium:.3s ease;--transition-slow:.5s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent-green)var(--bg-secondary)}body{font-family:var(--font-heading);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";opacity:.03;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-green);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:clamp(2.5rem,5vw,4rem)}h2{font-size:clamp(1.8rem,4vw,2.5rem)}h3{font-size:clamp(1.2rem,2.5vw,1.5rem)}h4{font-size:clamp(1rem,2vw,1.2rem)}p{color:var(--text-secondary);font-size:1rem}a{color:var(--accent-green);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-cyan)}.mono{font-family:var(--font-mono);letter-spacing:.02em;font-size:.85rem}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 2rem}.section{padding:var(--section-padding)0;position:relative}.section-header{align-items:center;gap:1rem;margin-bottom:3rem;display:flex}.section-tag{font-family:var(--font-mono);color:var(--accent-green);text-transform:uppercase;letter-spacing:.15em;border:1px solid var(--accent-green-dim);background:var(--accent-green-dim);padding:.25rem .75rem;font-size:.75rem}.section-line{background:linear-gradient(90deg,var(--border-accent),transparent);flex:1;height:1px}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--card-radius);transition:all var(--transition-medium);padding:1.5rem;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg,var(--accent-green),var(--accent-violet));opacity:0;width:100%;height:2px;transition:opacity var(--transition-medium);position:absolute;top:0;left:0}.card:hover{background:var(--bg-card-hover);border-color:var(--accent-green-dim);transform:translateY(-2px)}.card:hover:before{opacity:1}.card-circuit:after{content:"";background:linear-gradient(45deg,transparent 50%,var(--border-subtle)50%),linear-gradient(-45deg,transparent 70%,var(--bg-tertiary)70%);opacity:.5;width:40px;height:40px;position:absolute;bottom:0;right:0}.card-defense{border-color:var(--accent-cyan-dim)}.card-defense:before{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue))}.card-defense:hover{border-color:var(--accent-cyan-dim)}.btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border-radius:var(--card-radius);cursor:pointer;transition:all var(--transition-medium);border:none;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:.85rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,var(--accent-green),var(--accent-violet));color:var(--bg-primary)}.btn-primary:hover{box-shadow:var(--glow-green);transform:translateY(-2px)}.btn-secondary{color:var(--accent-green);border:1px solid var(--accent-green);background:0 0}.btn-secondary:hover{background:var(--accent-green-dim);box-shadow:var(--glow-green)}.btn-link{font-family:var(--font-mono);color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 0;font-size:.75rem;display:inline-flex}.btn-link:hover{color:var(--text-primary)}.grid-2{grid-template-columns:repeat(2,1fr);gap:2rem;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}@media (max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}}.status-dot{background:var(--accent-green);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse}.status-dot-cyan{background:var(--accent-cyan)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.metrics-bar{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--card-radius);flex-wrap:wrap;gap:2rem;margin-bottom:2rem;padding:1.5rem 2rem;display:flex}.metric{flex-direction:column;gap:.25rem;display:flex}.metric-value{font-family:var(--font-mono);color:var(--accent-green);font-size:1.5rem;font-weight:700}.metric-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}.icon{fill:currentColor;width:24px;height:24px}.icon-sm{width:16px;height:16px}.icon-lg{width:32px;height:32px}.icon-xl{width:48px;height:48px}.icon-glow{filter:drop-shadow(0 0 8px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes typewriter{0%{width:0}to{width:100%}}.animate-fade-in-up{animation:.6s forwards fadeInUp}.animate-glitch{animation:.3s glitch}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.reveal{opacity:0;transition:all .6s;transform:translateY(30px)}.reveal.visible{opacity:1;transform:translateY(0)}.neon-border{border:1px solid var(--accent-green);box-shadow:inset 0 0 20px var(--accent-green-dim),0 0 20px var(--accent-green-dim)}.terminal-box{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--card-radius);font-family:var(--font-mono);padding:1rem;font-size:.85rem}.terminal-header{border-bottom:1px solid var(--border-subtle);align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.75rem;display:flex}.terminal-dot{border-radius:50%;width:10px;height:10px}.terminal-dot-red{background:#ff5f56}.terminal-dot-yellow{background:#ffbd2e}.terminal-dot-green{background:#27c93f}.tag{font-family:var(--font-mono);background:var(--bg-tertiary);border:1px solid var(--border-subtle);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-radius:2px;padding:.2rem .5rem;font-size:.65rem}.tag-green{border-color:var(--accent-green-dim);color:var(--accent-green)}.tag-cyan{border-color:var(--accent-cyan-dim);color:var(--accent-cyan)}.tag-violet{border-color:var(--accent-violet-dim);color:var(--accent-violet)}.divider{background:linear-gradient(90deg,transparent,var(--border-subtle),transparent);width:100%;height:1px;margin:2rem 0}@media (max-width:768px){.container{padding:0 1rem}.section{padding:3rem 0}.metrics-bar{gap:1rem;padding:1rem}}
