/* ===================================================
   CYBER HACKER PORTFOLIO — ZUL FAHMI RIZKI
   Theme: DEEP HACKER GREEN — Matrix Cyberpunk
   =================================================== */
:root {
  --primary:       #00ff41;
  --primary-dim:   #00cc33;
  --primary-dark:  #007a1f;
  --primary-glow:  rgba(0,255,65,0.5);
  --primary-glow2: rgba(0,255,65,0.15);
  --secondary:     #00d4ff;
  --accent:        #ff2244;
  --accent-yellow: #ffcc00;
  --accent-orange: #ff8800;
  --bg-main:       #020902;
  --bg-card:       #050f05;
  --bg-terminal:   #030803;
  --bg-glass:      rgba(0,255,65,0.04);
  --border:        rgba(0,255,65,0.12);
  --border-mid:    rgba(0,255,65,0.3);
  --border-bright: rgba(0,255,65,0.6);
  --text-primary:  #c8ffc8;
  --text-secondary:#6db86d;
  --text-muted:    #2a5a2a;
  --font-mono:     'Share Tech Mono', monospace;
  --font-display:  'Orbitron', sans-serif;
  --font-body:     'Rajdhani', sans-serif;
  --transition:    0.3s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-main);color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden;line-height:1.7}
a{color:inherit;text-decoration:none}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle at 20% 50%,rgba(0,255,65,0.05) 0%,transparent 40%),radial-gradient(circle at 80% 20%,rgba(0,255,65,0.03) 0%,transparent 35%),radial-gradient(circle at 60% 80%,rgba(0,212,255,0.02) 0%,transparent 30%)}
#matrix-rain{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.13;pointer-events:none}
.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px)}
.noise{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* NAV */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 2rem;background:rgba(2,9,2,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:var(--transition)}
#navbar.scrolled{background:rgba(2,9,2,.98);border-bottom-color:var(--border-mid);box-shadow:0 2px 30px rgba(0,255,65,.08)}
.nav-container{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:900;color:var(--primary);letter-spacing:4px;text-shadow:0 0 15px var(--primary-glow);position:relative}
.nav-logo .bracket{color:var(--text-muted)}
.nav-links{display:flex;list-style:none;gap:.1rem}
.nav-link{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);padding:.4rem .7rem;border:1px solid transparent;border-radius:2px;transition:var(--transition);letter-spacing:.5px;position:relative;overflow:hidden}
.nav-link .cmd{color:var(--primary-dark);margin-right:1px}
.nav-link:hover{color:var(--primary);border-color:var(--border)}
.nav-link:hover .cmd{color:var(--primary)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--primary);transition:var(--transition)}

/* HERO */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:80px 2rem 4rem;overflow:hidden}
.hero::before,.hero::after{content:'';position:absolute;width:180px;height:180px;pointer-events:none;opacity:.15}
.hero::before{top:20%;left:5%;border-top:2px solid var(--primary);border-left:2px solid var(--primary);animation:cornerPulse 3s ease-in-out infinite}
.hero::after{bottom:20%;right:5%;border-bottom:2px solid var(--primary);border-right:2px solid var(--primary);animation:cornerPulse 3s ease-in-out infinite 1.5s}
@keyframes cornerPulse{0%,100%{opacity:.08}50%{opacity:.35}}
.hero-content{max-width:1280px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr;gap:2.5rem}

/* Terminal Window */
.terminal-window{background:var(--bg-terminal);border:1px solid var(--border-mid);border-radius:6px;box-shadow:0 0 0 1px rgba(0,255,65,.04),0 0 40px rgba(0,255,65,.12),0 0 80px rgba(0,255,65,.05),inset 0 0 60px rgba(0,0,0,.8);overflow:hidden;max-width:640px;position:relative}
.terminal-window::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),var(--primary),transparent);background-size:200%;animation:shimmer 3s linear infinite}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}
.terminal-bar{background:#0a1a0a;padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:#ff5f57;box-shadow:0 0 6px #ff5f57}
.dot.yellow{background:#febc2e;box-shadow:0 0 6px #febc2e}
.dot.green{background:#28c840;box-shadow:0 0 8px #28c840}
.terminal-title{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);margin-left:8px}
.terminal-body{padding:1.5rem;font-family:var(--font-mono);font-size:.85rem}
.terminal-line{display:flex;align-items:center;gap:8px;margin-bottom:.5rem}
.prompt{color:var(--primary);font-family:var(--font-mono);font-size:.85rem;white-space:nowrap;text-shadow:0 0 8px var(--primary-glow)}
.cmd-text{color:#aaa}
.cursor{color:var(--primary);animation:blink 1s step-end infinite;text-shadow:0 0 8px var(--primary-glow)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.terminal-output{margin-top:.75rem;color:var(--text-secondary);line-height:1.9}
.terminal-output .line{display:block}
.terminal-output .line.green{color:var(--primary);text-shadow:0 0 6px rgba(0,255,65,.3)}
.terminal-output .line.cyan{color:var(--secondary)}
.terminal-output .line.red{color:var(--accent)}

/* Hero text */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,255,65,.06);border:1px solid var(--border-mid);padding:5px 16px;border-radius:2px;font-family:var(--font-mono);font-size:.62rem;color:var(--primary);letter-spacing:3px;margin-bottom:1rem;text-shadow:0 0 8px var(--primary-glow);box-shadow:0 0 20px rgba(0,255,65,.08)}
.hero-name{font-family:var(--font-display);font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;line-height:1.1;margin-bottom:1rem;color:var(--primary);text-shadow:0 0 20px var(--primary-glow),0 0 50px rgba(0,255,65,.25),0 0 100px rgba(0,255,65,.1);letter-spacing:2px}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font-family:inherit;font-size:inherit;font-weight:inherit}
.glitch::before{animation:glitch1 5s infinite;clip-path:polygon(0 0,100% 0,100% 33%,0 33%);transform:translate(-2px);color:#00ffff;text-shadow:2px 0 #00ffff}
.glitch::after{animation:glitch2 5s infinite;clip-path:polygon(0 67%,100% 67%,100% 100%,0 100%);transform:translate(2px);color:#ff00ff;text-shadow:-2px 0 #ff00ff}
@keyframes glitch1{0%,38%,44%,58%,61%,65%,100%{transform:translate(-2px);opacity:1}41%{transform:translate(-10px,-2px);opacity:.8}43%{transform:translate(10px,2px);opacity:.8}}
@keyframes glitch2{0%,38%,44%,58%,61%,65%,100%{transform:translate(2px);opacity:1}41%{transform:translate(10px,2px);opacity:.8}43%{transform:translate(-10px,-2px);opacity:.8}}
.hero-tagline{font-family:var(--font-mono);font-size:.92rem;color:var(--secondary);margin-bottom:.75rem;letter-spacing:1px}
.tag-bracket{color:var(--text-muted)}
.hero-desc{font-size:1rem;color:var(--text-secondary);max-width:600px;margin-bottom:2rem;line-height:1.9}
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:transparent;border:1px solid var(--primary);color:var(--primary);font-family:var(--font-mono);font-size:.8rem;letter-spacing:2px;cursor:pointer;transition:var(--transition);text-transform:uppercase;position:relative;overflow:hidden;text-shadow:0 0 8px var(--primary-glow);box-shadow:0 0 15px rgba(0,255,65,.1),inset 0 0 15px rgba(0,255,65,.03)}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:-1}
.btn-primary:hover::before{transform:scaleX(1)}
.btn-primary:hover{color:#000;box-shadow:0 0 30px var(--primary-glow);text-shadow:none}
.btn-primary.full-width{width:100%;justify-content:center}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-mono);font-size:.8rem;letter-spacing:2px;cursor:pointer;transition:var(--transition);text-transform:uppercase}
.btn-secondary:hover{border-color:var(--border-mid);color:var(--primary)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-box{background:var(--bg-card);border:1px solid var(--border);padding:1.25rem 1rem;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--primary),transparent);transform:scaleX(0);transition:var(--transition)}
.stat-box:hover::before{transform:scaleX(1)}
.stat-box:hover{border-color:var(--border-mid);box-shadow:0 0 25px rgba(0,255,65,.1)}
.stat-number{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--primary);text-shadow:0 0 15px var(--primary-glow)}
.stat-label{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:3px}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--primary),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top;opacity:1}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}

/* SECTIONS */
section{position:relative;z-index:2;padding:6rem 2rem}
.section-container{max-width:1280px;margin:0 auto}
.section-header{margin-bottom:4rem;display:flex;align-items:center;gap:1.5rem}
.section-tag{font-family:var(--font-mono);font-size:.72rem;color:var(--primary);opacity:.5;letter-spacing:2px}
.section-title{font-family:var(--font-display);font-size:clamp(1.3rem,2.5vw,2rem);font-weight:700;color:var(--text-primary);letter-spacing:3px;text-transform:uppercase}
.title-line{flex:1;height:1px;background:linear-gradient(to right,var(--border-bright),transparent)}

/* ABOUT */
.about{background:var(--bg-main)}
.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start}
.profile-card,.about-text-card{background:var(--bg-card);border:1px solid var(--border-mid);padding:2rem;position:relative;overflow:hidden}
.profile-card::after,.about-text-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--primary),transparent)}
.about-text-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--primary),transparent)}
.profile-frame{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem}
.profile-avatar{position:relative;width:120px;height:120px}
.avatar-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);border-right-color:var(--primary);animation:spin 3s linear infinite;box-shadow:0 0 20px rgba(0,255,65,.3)}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar-inner{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(0,255,65,.12) 0%,rgba(0,255,65,.03) 100%);border:1px solid var(--border-mid);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 30px rgba(0,255,65,.08)}
.avatar-icon{font-size:2rem;color:var(--primary);text-shadow:0 0 15px var(--primary-glow)}
.avatar-text{font-family:var(--font-display);font-size:.8rem;font-weight:900;color:var(--primary);letter-spacing:3px;text-shadow:0 0 10px var(--primary-glow)}
.profile-status{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.63rem;color:var(--text-secondary);letter-spacing:1px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 2s ease infinite;box-shadow:0 0 8px var(--primary-glow)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 0 8px transparent}}
.profile-info{display:flex;flex-direction:column;gap:.75rem}
.info-item{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border);padding-bottom:.75rem}
.info-label{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:2px}
.info-value{font-size:.9rem;color:var(--text-primary);font-weight:600}
.info-value.green{color:var(--primary);text-shadow:0 0 8px rgba(0,255,65,.3)}
.code-comment{font-family:var(--font-mono);font-size:.76rem;color:var(--primary-dark);margin-bottom:1.5rem}
.about-desc{color:var(--text-secondary);font-size:1rem;margin-bottom:1rem;line-height:1.9}
.about-desc strong{color:var(--text-primary)}
.highlight{color:var(--primary);text-shadow:0 0 8px rgba(0,255,65,.3)}
.focus-list{margin-top:1.5rem}
.focus-header{font-family:var(--font-mono);font-size:.8rem;color:var(--primary);margin-bottom:1rem}
.focus-item{display:flex;align-items:flex-start;gap:10px;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.95rem;color:var(--text-secondary);transition:var(--transition)}
.focus-item:hover{color:var(--text-primary);padding-left:10px}
.focus-bullet{color:var(--primary);font-size:.7rem;margin-top:5px;flex-shrink:0}

/* SKILLS */
.skills{background:#020f02}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.skill-card{background:var(--bg-card);border:1px solid var(--border);padding:2rem;position:relative;transition:var(--transition);overflow:hidden}
.skill-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:var(--transition)}
.skill-card:hover::before{transform:scaleY(1)}
.skill-card:hover{border-color:var(--border-mid);box-shadow:0 0 30px rgba(0,255,65,.08),inset 0 0 40px rgba(0,255,65,.02)}
.skill-card.full-width{grid-column:1/-1}
.skill-card-header{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.skill-icon{font-size:1.1rem;color:var(--primary);width:32px;text-align:center;text-shadow:0 0 10px var(--primary-glow)}
.skill-card-header h3{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--text-primary);letter-spacing:1.5px;text-transform:uppercase}
.skill-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{font-family:var(--font-mono);font-size:.68rem;padding:4px 10px;border:1px solid var(--border);color:var(--text-muted);background:rgba(0,255,65,.02);border-radius:2px;transition:var(--transition);letter-spacing:.5px}
.tag:hover,.tag.sm:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,255,65,.06);text-shadow:0 0 6px rgba(0,255,65,.3)}
.tag.sm{font-size:.6rem;padding:2px 8px}
.skill-bars{display:flex;flex-direction:column;gap:1.2rem}
.skill-bar-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);margin-bottom:6px}
.skill-pct{color:var(--primary);text-shadow:0 0 6px rgba(0,255,65,.4)}
.skill-bar-bg{height:3px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
.skill-bar-fill{height:100%;width:0;background:linear-gradient(to right,var(--primary),var(--secondary));border-radius:2px;transition:width 1.5s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 10px var(--primary-glow)}
.os-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.os-item{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted);padding:8px;border:1px solid var(--border);transition:var(--transition)}
.os-item:hover{border-color:var(--border-mid);color:var(--primary);background:var(--bg-glass)}
.os-icon{color:var(--primary);font-size:.75rem;text-shadow:0 0 6px var(--primary-glow)}
.domain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.domain-item{padding:1.5rem;border:1px solid var(--border);background:rgba(0,255,65,.02);transition:var(--transition);position:relative;overflow:hidden}
.domain-item::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:var(--transition)}
.domain-item:hover::before{transform:scaleX(1)}
.domain-item:hover{border-color:var(--border-mid);background:rgba(0,255,65,.04);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,255,65,.08)}
.domain-icon{font-size:1.2rem;color:var(--primary);display:block;margin-bottom:.75rem;text-shadow:0 0 10px var(--primary-glow)}
.domain-item h4{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;letter-spacing:1px}
.domain-item p{font-size:.77rem;color:var(--text-muted);line-height:1.6}

/* EXPERIENCE */
.experience{background:var(--bg-main)}
.timeline{position:relative;padding-left:3rem}
.timeline::before{content:'';position:absolute;left:.5rem;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--primary),transparent)}
.timeline-item{position:relative;margin-bottom:3rem}
.timeline-dot{position:absolute;left:-2.6rem;top:1.2rem;width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 20px var(--primary-glow),0 0 40px rgba(0,255,65,.2);border:2px solid var(--bg-main)}
.timeline-card{background:var(--bg-card);border:1px solid var(--border);padding:2rem;transition:var(--transition);position:relative;overflow:hidden}
.timeline-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,var(--primary),transparent);transform:scaleX(0);transform-origin:left;transition:var(--transition)}
.timeline-card:hover::before{transform:scaleX(1)}
.timeline-card:hover{border-color:var(--border-mid);transform:translateX(8px);box-shadow:0 0 30px rgba(0,255,65,.06)}
.timeline-date{font-family:var(--font-mono);font-size:.66rem;color:var(--primary);letter-spacing:2px;margin-bottom:.5rem;text-shadow:0 0 6px rgba(0,255,65,.3)}
.timeline-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem;letter-spacing:1px}
.timeline-company{font-family:var(--font-mono);font-size:.76rem;color:var(--secondary);margin-bottom:1rem}
.timeline-desc{font-size:.92rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1rem}
.timeline-tags{display:flex;gap:.5rem;flex-wrap:wrap}

/* BUG HUNTING */
.bughunting{background:#020f02;position:relative;z-index:2}
.bh-terminal{background:var(--bg-terminal);border:1px solid var(--border-mid);border-radius:8px;overflow:hidden;margin-bottom:3rem;box-shadow:0 0 30px rgba(0,255,65,.06)}
.bh-body{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem}
.bh-line{font-family:var(--font-mono);font-size:.78rem;line-height:1.9;color:var(--text-secondary)}
.bh-perm{color:#1a5a2a;margin-right:12px}
.bh-name{color:var(--secondary);margin-right:16px}
.bh-desc{color:var(--text-muted);font-style:italic}
.bh-count{color:var(--primary);font-weight:bold;text-shadow:0 0 8px var(--primary-glow)}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cert-card{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;position:relative}
.cert-card:hover{border-color:var(--border-mid);box-shadow:0 0 40px rgba(0,255,65,.12),0 0 80px rgba(0,255,65,.04);transform:translateY(-6px)}
.cert-card.cert-featured{border-color:rgba(0,255,65,.35);box-shadow:0 0 20px rgba(0,255,65,.1)}
.cert-badge{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--font-mono);font-size:.55rem;letter-spacing:1.5px;padding:3px 8px;border-radius:2px;font-weight:bold}
.cert-badge.nasa{background:rgba(0,70,255,.85);color:#fff;border:1px solid #0055ff}
.cert-badge.gold{background:rgba(180,140,0,.9);color:#fff3b0;border:1px solid #ffcc00}
.cert-badge.blue{background:rgba(0,100,180,.85);color:#cce8ff;border:1px solid var(--secondary)}
.cert-badge.red{background:rgba(180,0,0,.85);color:#ffc0c0;border:1px solid var(--accent)}
.cert-img-wrap{position:relative;overflow:hidden;height:200px;background:#0a0a0a}
.cert-img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s ease;display:block}
.cert-card:hover .cert-img{transform:scale(1.05)}
.cert-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);backdrop-filter:blur(2px)}
.cert-card:hover .cert-overlay{opacity:1}
.cert-zoom{font-family:var(--font-mono);font-size:.7rem;color:var(--primary);letter-spacing:2px;border:1px solid var(--primary);padding:8px 16px;text-shadow:0 0 10px var(--primary-glow);box-shadow:0 0 20px rgba(0,255,65,.2)}
.cert-info{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.cert-org{display:flex;align-items:center;gap:8px;margin-bottom:.25rem}
.cert-icon{font-size:1rem}
.cert-org-name{font-family:var(--font-mono);font-size:.65rem;color:var(--secondary);letter-spacing:1px}
.cert-title{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--text-primary);letter-spacing:1px;text-transform:uppercase}
.cert-desc{font-size:.78rem;color:var(--text-muted);line-height:1.6;flex:1}
.cert-desc strong{color:var(--primary)}
.cert-desc em{color:var(--accent);font-style:normal}
.cert-desc code{font-family:var(--font-mono);font-size:.7rem;color:var(--secondary);background:rgba(0,170,255,.08);padding:1px 5px;border-radius:2px}
.cert-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}

/* CVE */
.cve-section{background:var(--bg-main);position:relative;z-index:2}
.cve-intro{background:var(--bg-terminal);border:1px solid var(--border-mid);border-radius:8px;overflow:hidden;margin-bottom:2rem;box-shadow:0 0 20px rgba(0,255,65,.06)}
.cve-intro-body{padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.35rem;font-family:var(--font-mono);font-size:.78rem}
.cve-intro-line{display:block}
.cve-green{color:var(--primary);margin-right:8px;text-shadow:0 0 6px rgba(0,255,65,.3)}
.cve-red{color:var(--accent);margin-right:8px}
.cve-yellow{color:var(--accent-yellow);margin-right:8px}
.cve-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.5rem}
.cve-stat{background:var(--bg-card);border:1px solid var(--border);padding:1.25rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:var(--transition)}
.cve-stat:hover{border-color:var(--border-mid)}
.cve-stat-num{font-family:var(--font-display);font-size:2.2rem;font-weight:900}
.cve-stat-num.red{color:var(--accent);text-shadow:0 0 15px rgba(255,60,60,.4)}
.cve-stat-num.yellow{color:var(--accent-yellow)}
.cve-stat-num.orange{color:var(--accent-orange)}
.cve-stat-num.green{color:var(--primary);text-shadow:0 0 15px var(--primary-glow)}
.cve-stat-lbl{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}
.cve-table-wrap{overflow-x:auto;border:1px solid var(--border-mid);border-radius:4px;margin-bottom:1.5rem}
.cve-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.76rem}
.cve-table thead tr{background:rgba(0,255,65,.06);border-bottom:2px solid var(--primary)}
.cve-table th{padding:14px 16px;text-align:left;font-family:var(--font-display);font-size:.63rem;font-weight:700;color:var(--primary);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 8px rgba(0,255,65,.3)}
.cve-table tbody tr{border-bottom:1px solid var(--border);transition:background .2s}
.cve-table tbody tr:hover{background:rgba(0,255,65,.03)}
.cve-table td{padding:10px 16px;color:var(--text-secondary);vertical-align:middle}
.cve-table td:first-child{color:var(--text-muted);font-size:.68rem;width:40px}
.cve-id{color:var(--secondary)!important;font-weight:bold;white-space:nowrap}
.cve-critical{background:rgba(255,60,60,.03)}
.cve-critical:hover{background:rgba(255,60,60,.06)!important}
.sev{font-family:var(--font-mono);font-size:.57rem;font-weight:bold;padding:3px 8px;border-radius:2px;letter-spacing:1px;white-space:nowrap}
.sev.critical{background:rgba(180,0,0,.3);color:#ff6060;border:1px solid rgba(255,60,60,.4)}
.sev.high{background:rgba(180,100,0,.3);color:#ffaa44;border:1px solid rgba(255,136,0,.4)}
.cve-disclaimer{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);padding:1rem 1.25rem;border:1px solid var(--border);border-left:3px solid var(--primary);background:rgba(0,255,65,.02);line-height:1.7}

/* TUTORIALS */
.tutorials{background:#020f02;position:relative;z-index:2}
.tut-intro{margin-bottom:2rem}
.tut-intro-text{font-size:1rem;color:var(--text-secondary);line-height:1.8;max-width:800px}
.tut-intro-text strong{color:var(--primary);text-shadow:0 0 8px rgba(0,255,65,.3)}
.expertise-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem}
.expertise-pill{font-family:var(--font-mono);font-size:.73rem;padding:8px 20px;border:1px solid var(--border);color:var(--text-muted);background:var(--bg-card);letter-spacing:1px;cursor:default;transition:var(--transition)}
.expertise-pill.active,.expertise-pill:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,255,65,.06);box-shadow:0 0 15px rgba(0,255,65,.12);text-shadow:0 0 8px rgba(0,255,65,.3)}
.tut-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.tut-category{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;transition:var(--transition)}
.tut-category:hover{border-color:var(--border-mid)}
.tut-cat-header{display:flex;align-items:center;gap:12px;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.tut-cat-header.web{background:linear-gradient(135deg,rgba(0,255,65,.08) 0%,transparent 100%)}
.tut-cat-header.pentest{background:linear-gradient(135deg,rgba(255,60,60,.08) 0%,transparent 100%)}
.tut-cat-header.bughunt{background:linear-gradient(135deg,rgba(255,204,0,.08) 0%,transparent 100%)}
.tut-cat-header.osint{background:linear-gradient(135deg,rgba(0,170,255,.08) 0%,transparent 100%)}
.tut-cat-icon{font-size:1.3rem;color:var(--primary);width:32px;text-align:center;text-shadow:0 0 10px var(--primary-glow)}
.tut-cat-header.pentest .tut-cat-icon{color:var(--accent)}
.tut-cat-header.bughunt .tut-cat-icon{color:var(--accent-yellow)}
.tut-cat-header.osint .tut-cat-icon{color:var(--secondary)}
.tut-cat-header h3{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--text-primary);letter-spacing:1.5px;text-transform:uppercase}
.tut-list{padding:0;display:flex;flex-direction:column}
.tut-item{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);transition:var(--transition)}
.tut-item:last-child{border-bottom:none}
.tut-item:hover{background:rgba(0,255,65,.02)}
.tut-item-header{display:flex;align-items:center;gap:10px;margin-bottom:.6rem;flex-wrap:wrap}
.tut-num{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);min-width:24px}
.tut-item-header h4{font-family:var(--font-body);font-size:.86rem;font-weight:700;color:var(--text-primary);flex:1}
.tut-level{font-family:var(--font-mono);font-size:.57rem;padding:2px 8px;border-radius:2px;letter-spacing:1px;white-space:nowrap}
.tut-level.expert{background:rgba(0,255,65,.1);color:var(--primary);border:1px solid rgba(0,255,65,.25)}
.tut-level.mid{background:rgba(0,170,255,.1);color:var(--secondary);border:1px solid rgba(0,170,255,.25)}
.tut-item>p{font-size:.8rem;color:var(--text-muted);line-height:1.7;margin-bottom:.75rem}
.tut-code{background:var(--bg-terminal);border:1px solid var(--border);border-left:3px solid var(--primary);padding:.75rem 1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);line-height:1.9;margin-bottom:.75rem;overflow-x:auto;box-shadow:0 0 20px rgba(0,255,65,.04)}
.code-comment{color:#1a5a1a}
.code-kw{color:var(--secondary)}
.code-str{color:#ffaa44}
.tut-tags{display:flex;flex-wrap:wrap;gap:.4rem}

/* CONTACT */
.contact{background:var(--bg-main)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-terminal{background:var(--bg-terminal);border:1px solid var(--border-mid);border-radius:8px;overflow:hidden;box-shadow:0 0 30px rgba(0,255,65,.08)}
.ct-body{display:flex;flex-direction:column;gap:.4rem}
.ct-line{font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted)}
.ct-blank{height:.5rem}
.ct-link{display:flex;gap:12px;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}
.ct-label{font-family:var(--font-mono);font-size:.66rem;color:var(--primary);white-space:nowrap;min-width:110px;text-shadow:0 0 6px rgba(0,255,65,.2)}
.ct-url{font-family:var(--font-mono);font-size:.76rem;color:var(--text-secondary);transition:var(--transition)}
.ct-url:hover{color:var(--primary);text-shadow:0 0 8px rgba(0,255,65,.3)}
.contact-form-card{background:var(--bg-card);border:1px solid var(--border-mid);padding:2.5rem;position:relative;overflow:hidden}
.contact-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--primary),var(--secondary),var(--primary),transparent)}
.form-title{font-family:var(--font-display);font-size:.88rem;color:var(--text-primary);margin-bottom:2rem;display:flex;align-items:center;gap:8px;letter-spacing:2px;text-transform:uppercase}
.form-group{margin-bottom:1.5rem}
.form-label{display:block;font-family:var(--font-mono);font-size:.63rem;color:var(--text-muted);letter-spacing:2px;margin-bottom:8px}
.form-input{width:100%;background:rgba(0,255,65,.02);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem;padding:12px 16px;outline:none;transition:var(--transition);resize:none}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 20px rgba(0,255,65,.1),inset 0 0 15px rgba(0,255,65,.02);background:rgba(0,255,65,.04)}

/* FOOTER */
.footer{position:relative;z-index:2;background:var(--bg-card);border-top:1px solid var(--border-mid);padding:3rem 2rem;text-align:center}
.footer-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.footer-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--primary);letter-spacing:5px;margin-bottom:.5rem;text-shadow:0 0 20px var(--primary-glow),0 0 40px rgba(0,255,65,.2)}
.footer-logo .bracket{color:var(--text-muted)}
.footer-text{font-family:var(--font-mono);font-size:.73rem;color:var(--text-muted);letter-spacing:1px}
.footer-sub{font-family:var(--font-mono);font-size:.68rem}
.footer-sub .green{color:var(--primary);opacity:.6}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox-overlay{position:absolute;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(8px);cursor:pointer}
.lightbox-content{position:relative;z-index:1;background:var(--bg-card);border:1px solid var(--border-bright);box-shadow:0 0 60px rgba(0,255,65,.25),0 0 120px rgba(0,255,65,.1);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:popIn .25s cubic-bezier(0.4,0,0.2,1)}
@keyframes popIn{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.lb-close{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.8);border:1px solid var(--border);color:var(--text-secondary);font-size:1rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;border-radius:2px;transition:var(--transition)}
.lb-close:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.lb-img-wrap{overflow:hidden;max-height:70vh;background:#0a0a0a}
.lb-img-wrap img{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:0 auto}
.lb-info{padding:1.25rem 1.5rem;border-top:1px solid var(--border);background:var(--bg-terminal)}
.lb-info h3{font-family:var(--font-display);font-size:.85rem;color:var(--primary);letter-spacing:2px;text-transform:uppercase;margin-bottom:.4rem;text-shadow:0 0 10px rgba(0,255,65,.3)}
.lb-info p{font-family:var(--font-mono);font-size:.74rem;color:var(--text-secondary);line-height:1.6}

/* UTILITY */
.green{color:var(--primary);text-shadow:0 0 6px rgba(0,255,65,.3)}
.red{color:var(--accent)}
.blink{animation:blink 1s step-end infinite}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:1024px){.hero-stats{grid-template-columns:repeat(2,1fr)}.domain-grid{grid-template-columns:repeat(2,1fr)}.cve-stats-row{grid-template-columns:repeat(2,1fr)}.cert-grid{grid-template-columns:1fr 1fr}.tut-grid{grid-template-columns:1fr}}
@media(max-width:768px){.nav-links{display:none}.hamburger{display:flex}.nav-links.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(2,9,2,.98);border-bottom:1px solid var(--border-mid);padding:1rem;gap:.25rem}.about-grid{grid-template-columns:1fr}.skills-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.hero-stats{grid-template-columns:repeat(2,1fr)}.hero-buttons{flex-direction:column}.skill-card.full-width{grid-column:1}}
@media(max-width:600px){.cert-grid{grid-template-columns:1fr}.cve-stats-row{grid-template-columns:repeat(2,1fr)}.domain-grid{grid-template-columns:1fr}.os-grid{grid-template-columns:1fr}.expertise-pill{font-size:.66rem;padding:6px 12px}section{padding:4rem 1rem}}

/* ============================
   PROFILE PHOTO — Real Photo
============================ */
.profile-avatar-photo {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 1.5rem;
}
.profile-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
  filter: contrast(1.05) saturate(0.9) brightness(0.95);
  transition: filter 0.4s ease;
  position: relative; z-index: 2;
}
.profile-avatar-photo:hover .profile-photo {
  filter: contrast(1.1) saturate(1) brightness(1.05);
}
.photo-ring {
  position: absolute; border-radius: 0; pointer-events: none;
  border: 1px solid var(--primary); z-index: 1;
}
.photo-ring.ring-outer {
  inset: -6px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
  animation: ringPulse 2.5s ease infinite;
  box-shadow: 0 0 20px rgba(0,255,65,0.3), inset 0 0 20px rgba(0,255,65,0.05);
}
.photo-ring.ring-inner {
  inset: -12px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
  border-color: rgba(0,255,65,0.2);
  animation: ringPulse 2.5s ease infinite 1.25s;
}
@keyframes ringPulse {
  0%,100%{opacity:0.5;box-shadow:0 0 15px rgba(0,255,65,0.2)}
  50%{opacity:1;box-shadow:0 0 30px rgba(0,255,65,0.5)}
}
.photo-corner {
  position: absolute; width: 14px; height: 14px; z-index: 4;
}
.photo-corner.tl { top:-2px; left:-2px; border-top:2px solid var(--primary); border-left:2px solid var(--primary); }
.photo-corner.tr { top:-2px; right:-2px; border-top:2px solid var(--primary); border-right:2px solid var(--primary); }
.photo-corner.bl { bottom:-2px; left:-2px; border-bottom:2px solid var(--primary); border-left:2px solid var(--primary); }
.photo-corner.br { bottom:-2px; right:-2px; border-bottom:2px solid var(--primary); border-right:2px solid var(--primary); }
.photo-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: linear-gradient(to right, transparent, rgba(0,255,65,0.8), transparent);
  animation: scanDown 3s ease infinite;
  pointer-events: none;
}
@keyframes scanDown {
  0%{top:0;opacity:1} 80%{opacity:0.6} 100%{top:100%;opacity:0}
}
.profile-badge-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 0.75rem;
}
.pbadge {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 1px;
  padding: 3px 10px; border: 1px solid var(--border);
  color: var(--text-muted); background: rgba(0,0,0,0.3);
}
.pbadge.green {
  border-color: rgba(0,255,65,0.3); color: var(--primary);
  text-shadow: 0 0 6px rgba(0,255,65,0.3);
  background: rgba(0,255,65,0.05);
}

/* ============================
   ORIGIN STORY SECTION
============================ */
.origin-section {
  margin-top: 4rem;
  border: 1px solid var(--border-mid);
  background: var(--bg-card);
  overflow: hidden;
}
.origin-header {
  display: flex; align-items: center; gap: 12px;
  padding: 1rem 1.5rem;
  background: var(--bg-terminal);
  border-bottom: 1px solid var(--border-mid);
  font-family: var(--font-mono); font-size: 0.78rem;
}
.origin-title { color: var(--text-secondary); }
.origin-timeline {
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.origin-timeline::before {
  content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, var(--primary), rgba(0,255,65,0.1));
}
.origin-item {
  display: grid;
  grid-template-columns: 50px 30px 1fr;
  gap: 0 1.5rem;
  align-items: flex-start;
  padding: 1rem 0;
  position: relative;
}
.origin-year {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted); text-align: right; padding-top: 6px;
  letter-spacing: 1px;
}
.origin-dot {
  width: 14px; height: 14px; border-radius: 50%; margin-top: 6px;
  justify-self: center; position: relative; z-index: 2; flex-shrink: 0;
}
.origin-dot.danger { background: #ff6600; box-shadow: 0 0 12px rgba(255,102,0,0.5); border: 2px solid var(--bg-main); }
.origin-dot.critical { background: var(--accent); box-shadow: 0 0 16px rgba(255,34,68,0.7); border: 2px solid var(--bg-main); animation: criticalPulse 1.5s ease infinite; }
@keyframes criticalPulse { 0%,100%{box-shadow:0 0 10px rgba(255,34,68,0.5)} 50%{box-shadow:0 0 25px rgba(255,34,68,1)} }
.origin-dot.success { background: var(--primary); box-shadow: 0 0 12px var(--primary-glow); border: 2px solid var(--bg-main); }
.origin-card {
  background: rgba(0,255,65,0.02); border: 1px solid var(--border);
  padding: 1rem 1.25rem; transition: var(--transition);
}
.origin-card:hover { border-color: var(--border-mid); background: rgba(0,255,65,0.04); }
.origin-card-critical {
  background: rgba(255,34,68,0.04); border-color: rgba(255,34,68,0.25);
  box-shadow: 0 0 20px rgba(255,34,68,0.05);
}
.origin-card-critical:hover { border-color: rgba(255,34,68,0.5); }
.origin-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.origin-icon { font-size: 1.1rem; width: 28px; text-align: center; }
.origin-card-head h4 {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: 1px; flex: 1;
}
.origin-tag {
  font-family: var(--font-mono); font-size: 0.55rem; padding: 2px 8px;
  border-radius: 2px; letter-spacing: 1px; font-weight: bold; white-space: nowrap;
}
.origin-tag.gray { background: rgba(100,100,100,0.2); color: #888; border: 1px solid #444; }
.origin-tag.red { background: rgba(180,0,0,0.2); color: #ff6060; border: 1px solid rgba(255,34,68,0.4); }
.origin-tag.green { background: rgba(0,255,65,0.1); color: var(--primary); border: 1px solid rgba(0,255,65,0.3); }
.origin-card p {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.7;
}
.origin-card p strong { color: var(--text-secondary); }
.origin-card p em { color: var(--accent); font-style: normal; }
.origin-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--secondary);
  margin-top: 0.75rem; padding: 4px 12px;
  border: 1px solid rgba(0,212,255,0.3); background: rgba(0,212,255,0.05);
  transition: var(--transition);
}
.origin-link:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(0,212,255,0.1); }

/* ============================
   ENHANCED HACKER EFFECTS
============================ */

/* Glowing grid background overlay */
section.about, section.cve-section {
  background-image:
    linear-gradient(rgba(0,255,65,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Neon border animate on section */
section:nth-child(even)::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
  animation: sectionDivider 4s linear infinite;
}
@keyframes sectionDivider { 0%,100%{opacity:0.2} 50%{opacity:0.7} }

/* Flickering effect on neon text */
.hero-name {
  animation: neonFlicker 8s ease infinite;
}
@keyframes neonFlicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow: 0 0 20px var(--primary-glow), 0 0 50px rgba(0,255,65,0.25), 0 0 100px rgba(0,255,65,0.1);
  }
  20%,24%,55% {
    text-shadow: none;
  }
}

/* Enhanced stat boxes with number glow */
.stat-number { animation: numGlow 3s ease infinite; }
@keyframes numGlow {
  0%,100%{text-shadow:0 0 15px var(--primary-glow)}
  50%{text-shadow:0 0 30px var(--primary-glow),0 0 60px rgba(0,255,65,0.2)}
}

/* CRT flicker overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(0,255,65,0.01) 50%, rgba(0,0,0,0.015) 50%);
  background-size: 100% 4px;
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0%{opacity:0.8}
  50%{opacity:1}
  100%{opacity:0.8}
}

/* Section glowing top border */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 40px; height: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* Profile card glow intensified */
.profile-card {
  box-shadow: 0 0 40px rgba(0,255,65,0.06), inset 0 0 80px rgba(0,0,0,0.5);
}

/* Terminal windows — stronger glow */
.terminal-window, .bh-terminal, .contact-terminal {
  box-shadow: 0 0 40px rgba(0,255,65,0.1), 0 0 80px rgba(0,255,65,0.04);
}

/* Nav bar glowing border bottom */
#navbar.scrolled {
  box-shadow: 0 2px 40px rgba(0,255,65,0.12), 0 0 1px var(--primary);
}

/* Typing cursor blink more visible */
.cursor {
  background: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

@media (max-width: 768px) {
  .origin-timeline::before { left: 40px; }
  .origin-item { grid-template-columns: 30px 20px 1fr; }
  .origin-year { font-size: 0.62rem; }
  .profile-avatar-photo { width: 160px; height: 160px; }
}

/* ============================
   SKILL BARS — Extended
============================ */
.skill-bar-item { display: flex; flex-direction: column; gap: 0; }
.skill-bars { display: flex; flex-direction: column; gap: 0.9rem; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.skill-bars::-webkit-scrollbar { width: 3px; }
.skill-bars::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
.skill-bars::-webkit-scrollbar-track { background: transparent; }