@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500&display=swap";:root{--bg:#0a0c10;--bg-card:#111318;--bg-glass:#111318d9;--border:#ffffff12;--accent:#00e5ff;--accent2:#7b61ff;--accent3:#ff6b35;--text:#e8eaf0;--muted:#6b7280;--success:#22c55e;--font-head:"Syne", sans-serif;--font-mono:"DM Mono", monospace;--font-body:"Inter", sans-serif;--radius:12px;--radius-lg:20px;--shadow:0 8px 32px #00e5ff14;--transition:.3s cubic-bezier(.4,0,.2,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}body:before{content:"";pointer-events:none;z-index:0;opacity:.4;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)' opacity='0.03'/%3E%3C/svg%3E");position:fixed;inset:0}.page{z-index:1;position:relative}.section{max-width:1200px;margin:0 auto;padding:7rem 2rem}.section-tag{font-family:var(--font-mono);color:var(--accent);letter-spacing:.15em;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.78rem;display:flex}.section-tag:before{content:"//";opacity:.5}.section-title{font-family:var(--font-head);letter-spacing:-.03em;margin-bottom:1.5rem;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.1}.gradient-text{background:linear-gradient(135deg, var(--accent), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.btn{font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;transition:var(--transition);border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-size:.85rem;font-weight:500;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#000;font-weight:700}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00e5ff4d}.btn-outline{color:var(--text);border:1px solid var(--border);background:0 0}.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.tag{font-family:var(--font-mono);color:var(--accent);transition:var(--transition);background:#00e5ff0f;border:1px solid #00e5ff26;border-radius:6px;padding:.3rem .7rem;font-size:.72rem}.tag:hover{background:#00e5ff26}.tag.purple{color:var(--accent2);background:#7b61ff0f;border-color:#7b61ff33}.tag.orange{color:var(--accent3);background:#ff6b350f;border-color:#ff6b3533}.tools-list{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.pulse{background:var(--success);border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.bg-orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(120px);opacity:.12;border-radius:50%;animation:20s ease-in-out infinite alternate drift;position:absolute}.orb-1{background:var(--accent2);width:600px;height:600px;animation-delay:0s;top:-200px;left:-200px}.orb-2{background:var(--accent);width:400px;height:400px;animation-delay:-7s;bottom:-100px;right:-100px}.orb-3{background:var(--accent3);width:300px;height:300px;animation-delay:-14s;top:50%;left:50%}#navbar{z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:var(--transition);background:#0a0c10cc;padding:0 2rem;position:fixed;top:0;left:0;right:0}.nav-inner{justify-content:space-between;align-items:center;max-width:1200px;height:68px;margin:0 auto;display:flex}.nav-logo{font-family:var(--font-head);background:linear-gradient(135deg, var(--accent), var(--accent2));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:800}.nav-logo span{font-family:var(--font-mono);opacity:.6;font-size:.9rem}.nav-links{align-items:center;gap:.25rem;display:flex}.nav-links a{font-family:var(--font-mono);color:var(--muted);transition:var(--transition);letter-spacing:.03em;border-radius:8px;padding:.4rem .9rem;font-size:.82rem;font-weight:500}.nav-links a:hover,.nav-links a.active{color:var(--accent);background:#00e5ff14}.nav-cta{background:linear-gradient(135deg, var(--accent), var(--accent2))!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;border:1px solid #00e5ff4d!important}.nav-cta:hover{background:#00e5ff1f!important}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:5px;display:none}.hamburger span{background:var(--text);width:24px;height:2px;transition:var(--transition);border-radius:2px;display:block}#home{align-items:center;min-height:100vh;padding-top:68px;display:flex}.hero-inner{grid-template-columns:1fr 420px;align-items:center;gap:4rem;width:100%;max-width:1200px;margin:0 auto;padding:4rem 2rem;display:grid}.hero-eyebrow{font-family:var(--font-mono);color:var(--accent);letter-spacing:.1em;align-items:center;gap:.6rem;margin-bottom:1.2rem;font-size:.85rem;display:flex}.hero-eyebrow:before{content:"";background:var(--accent);width:24px;height:1px}.hero-name{font-family:var(--font-head);letter-spacing:-.04em;margin-bottom:.5rem;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1}.hero-role{font-family:var(--font-head);color:var(--muted);letter-spacing:-.02em;margin-bottom:1.5rem;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:600}.hero-role .highlight{color:var(--accent3)}.hero-desc{color:var(--muted);max-width:500px;margin-bottom:2.5rem;font-size:1rem;line-height:1.7}.hero-btns{flex-wrap:wrap;gap:1rem;display:flex}.hero-status{font-family:var(--font-mono);color:var(--success);background:#22c55e1a;border:1px solid #22c55e33;border-radius:99px;align-items:center;gap:.6rem;margin-bottom:1.5rem;padding:.35rem .85rem;font-size:.78rem;display:inline-flex}.hero-photo-wrap{justify-content:center;display:flex;position:relative}.hero-photo-frame{width:340px;height:400px;position:relative}.hero-photo-frame:before{content:"";border-radius:var(--radius-lg);background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));z-index:-1;animation:6s linear infinite rotate-border;position:absolute;inset:-2px}.hero-photo{object-fit:cover;border-radius:var(--radius-lg);border:3px solid var(--bg);z-index:1;width:100%;height:100%;position:relative}.hero-photo-placeholder{background:linear-gradient(135deg, var(--bg-card), #1a1d24);border-radius:var(--radius-lg);color:var(--muted);font-family:var(--font-mono);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-size:.8rem;display:flex;position:absolute;inset:3px}.hero-photo-placeholder svg{opacity:.3}.hero-badge{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;padding:.75rem 1rem;font-size:.75rem;position:absolute;bottom:-16px;right:-16px}.hero-badge-num{color:var(--accent);font-size:1.4rem;font-weight:700;display:block}.hero-stats{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;padding:.75rem 1rem;font-size:.75rem;position:absolute;top:-16px;left:-16px}.hero-stats-row{color:var(--success);align-items:center;gap:.4rem;display:flex}.terminal-block{border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);background:#0d1117;margin-bottom:1.5rem;padding:1rem 1.2rem;font-size:.78rem;line-height:1.8}.terminal-block .prompt{color:var(--success)}.terminal-block .cmd{color:var(--text)}.terminal-block .output{color:var(--muted)}.terminal-block .val{color:var(--accent)}.cursor{background:var(--accent);vertical-align:middle;width:8px;height:14px;animation:1s infinite blink;display:inline-block}#about{border-top:1px solid var(--border)}.about-grid{grid-template-columns:1fr 1fr;align-items:start;gap:4rem;display:grid}.about-text p{color:var(--muted);margin-bottom:1rem;line-height:1.8}.skills-grid{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;display:grid}.skill-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);padding:1rem}.skill-card:hover{border-color:var(--accent);transform:translateY(-2px)}.skill-card-head{align-items:center;gap:.6rem;margin-bottom:.5rem;display:flex}.skill-icon{background:#00e5ff1a;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.skill-card-name{font-family:var(--font-head);font-size:.9rem;font-weight:700}.skill-bar{background:var(--border);border-radius:99px;height:3px;overflow:hidden}.skill-fill{background:linear-gradient(90deg, var(--accent), var(--accent2));border-radius:99px;height:100%}.about-tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;display:flex}.about-tab{font-family:var(--font-mono);cursor:pointer;color:var(--muted);border:1px solid var(--border);transition:var(--transition);background:0 0;border-radius:8px;padding:.4rem 1rem;font-size:.78rem}.about-tab.active,.about-tab:hover{color:var(--accent);background:#00e5ff14;border-color:#00e5ff4d}.tab-panel{animation:.3s fadeTab;display:block}.timeline{margin-top:1rem;position:relative}.timeline:before{content:"";background:var(--border);width:1px;position:absolute;top:0;bottom:0;left:16px}.timeline-item{gap:1.5rem;margin-bottom:2rem;display:flex;position:relative}.timeline-dot{background:var(--bg-card);border:2px solid var(--accent);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:33px;height:33px;font-size:.85rem;display:flex;position:relative}.timeline-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);flex:1;padding:1.1rem 1.25rem}.timeline-content:hover{border-color:#00e5ff40}.timeline-head{flex-wrap:wrap;justify-content:space-between;gap:.4rem;margin-bottom:.5rem;display:flex}.timeline-title{font-family:var(--font-head);font-size:.95rem;font-weight:700}.timeline-period{font-family:var(--font-mono);color:var(--accent);white-space:nowrap;background:#00e5ff14;border:1px solid #00e5ff26;border-radius:5px;padding:.15rem .55rem;font-size:.7rem}.timeline-company{font-family:var(--font-mono);color:var(--muted);margin-bottom:.6rem;font-size:.78rem}.timeline-desc{color:var(--muted);font-size:.85rem;line-height:1.7;list-style:none}.timeline-desc li{margin-bottom:.3rem;padding-left:.8rem;position:relative}.timeline-desc li:before{content:"▸";color:var(--accent);position:absolute;left:0}#projects{border-top:1px solid var(--border)}.projects-filter{flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem;display:flex}.filter-btn{font-family:var(--font-mono);cursor:pointer;color:var(--muted);border:1px solid var(--border);transition:var(--transition);background:0 0;border-radius:8px;padding:.4rem 1rem;font-size:.78rem}.filter-btn:hover,.filter-btn.active{color:var(--accent);background:#00e5ff1a;border-color:#00e5ff4d}.projects-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);cursor:pointer;flex-direction:column;display:flex;overflow:hidden}.project-card:hover{box-shadow:var(--shadow);border-color:#00e5ff4d;transform:translateY(-4px)}.project-header{border-bottom:1px solid var(--border);background:linear-gradient(135deg,#111318,#0d1117);padding:1.5rem;position:relative;overflow:hidden}.project-header:after{content:"";background:linear-gradient(135deg,#00e5ff0a,#0000);position:absolute;inset:0}.project-icon{margin-bottom:.75rem;font-size:2rem}.project-category{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border-radius:4px;margin-bottom:.5rem;padding:.2rem .6rem;font-size:.7rem;display:inline-block}.cat-devops{color:var(--accent);background:#00e5ff1a}.cat-linux{color:var(--accent3);background:#ff6b351a}.cat-network{color:var(--accent2);background:#7b61ff1a}.cat-docker{color:#2496ed;background:#2496ed1a}.cat-k8s{color:#326ce5;background:#326ce51a}.cat-monitor{color:var(--success);background:#22c55e1a}.cat-prog{color:#f59e0b;background:#f59e0b1a}.project-title{font-family:var(--font-head);font-size:1.05rem;font-weight:700;line-height:1.3}.project-body{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.project-desc{color:var(--muted);font-size:.88rem;line-height:1.6}.project-tech{flex-wrap:wrap;gap:.4rem;display:flex}.project-footer{border-top:1px solid var(--border);gap:.75rem;padding:1rem 1.5rem;display:flex}.btn-project{font-family:var(--font-mono);cursor:pointer;transition:var(--transition);text-align:center;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.55rem;font-size:.78rem;display:flex}.btn-live{color:var(--accent);background:#00e5ff1a;border:1px solid #00e5ff33}.btn-live:hover{background:#00e5ff33}.btn-code{color:var(--muted);border:1px solid var(--border);background:#ffffff0a}.btn-code:hover{color:var(--text);border-color:#fff3}.cv-download-section{border-radius:var(--radius-lg);background:linear-gradient(135deg,#00e5ff0d,#7b61ff0d);border:1px solid #00e5ff26;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;margin-top:3rem;padding:2rem;display:flex}.cv-info h3{font-family:var(--font-head);margin-bottom:.3rem;font-size:1.2rem;font-weight:700}.cv-info p{color:var(--muted);font-size:.9rem}#certifications{border-top:1px solid var(--border)}.certs-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin-top:1rem;display:grid}.cert-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);align-items:flex-start;gap:1rem;padding:1.4rem 1.5rem;display:flex}.cert-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}.cert-logo{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:1.4rem;display:flex}.cert-logo.cisco{background:#00a9e01f}.cert-logo.kaw{background:#ff6b351a}.cert-body{flex:1;min-width:0}.cert-name{font-family:var(--font-head);margin-bottom:.2rem;font-size:.92rem;font-weight:700;line-height:1.3}.cert-issuer{font-family:var(--font-mono);color:var(--muted);margin-bottom:.5rem;font-size:.72rem}.cert-date{font-family:var(--font-mono);color:var(--accent);background:#00e5ff14;border:1px solid #00e5ff26;border-radius:5px;padding:.15rem .5rem;font-size:.7rem;display:inline-block}#contact{border-top:1px solid var(--border)}.contact-grid{grid-template-columns:1fr 1fr;gap:4rem;display:grid}.contact-info{flex-direction:column;gap:1.5rem;display:flex}.contact-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);align-items:center;gap:1rem;padding:1rem;display:flex}.contact-item:hover{border-color:var(--accent)}.contact-item-icon{background:#00e5ff1a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;display:flex}.contact-item-text{color:var(--muted);font-size:.85rem}.contact-item-val{font-family:var(--font-mono);color:var(--text);font-size:.85rem;font-weight:500}.contact-form{flex-direction:column;gap:1rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{font-family:var(--font-mono);color:var(--muted);font-size:.78rem}.form-input,.form-textarea{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);transition:var(--transition);outline:none;padding:.75rem 1rem;font-size:.9rem}.form-input:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00e5ff14}.form-textarea{resize:vertical;min-height:120px}.form-status{font-family:var(--font-mono);text-align:center;border-radius:8px;padding:.5rem;font-size:.8rem}.form-status.success{color:var(--success);background:#22c55e1a}.form-status.error{color:#ef4444;background:#ef44441a}footer{border-top:1px solid var(--border);background:#0a0c10f2;padding:2.5rem 2rem}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;max-width:1200px;margin:0 auto;display:flex}.footer-brand{font-family:var(--font-head);font-size:1.1rem;font-weight:800}.footer-brand p{font-family:var(--font-body);color:var(--muted);margin-top:.2rem;font-size:.82rem;font-weight:400}.footer-links{align-items:center;gap:1rem;display:flex}.footer-link{background:var(--bg-card);border:1px solid var(--border);width:40px;height:40px;transition:var(--transition);border-radius:10px;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.footer-link:hover{border-color:var(--accent);background:#00e5ff14;transform:translateY(-2px)}.footer-copy{font-family:var(--font-mono);color:var(--muted);font-size:.75rem}.footer-copy span{color:var(--accent)}.proj-hero{max-width:900px;margin:0 auto;padding:8rem 2rem 4rem}.proj-content{max-width:900px;margin:0 auto;padding:0 2rem 6rem}.back-link{font-family:var(--font-mono);color:var(--muted);transition:var(--transition);align-items:center;gap:.5rem;margin-bottom:2rem;font-size:.82rem;display:inline-flex}.back-link:hover{color:var(--accent)}.proj-meta{flex-wrap:wrap;gap:1rem;margin-bottom:2rem;display:flex}.proj-content h3{font-family:var(--font-head);margin:2rem 0 .75rem;font-size:1.2rem;font-weight:700}.proj-content p{color:var(--muted);margin-bottom:1rem;line-height:1.8}.feature-list{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;list-style:none;display:flex}.feature-list li{color:var(--muted);align-items:flex-start;gap:.6rem;font-size:.9rem;display:flex}.feature-list li:before{content:"▸";color:var(--accent);flex-shrink:0;margin-top:.1rem}@media (width<=768px){.hamburger{display:flex}.nav-links{background:var(--bg);border-bottom:1px solid var(--border);transition:var(--transition);z-index:999;flex-direction:column;gap:.25rem;padding:1rem;position:fixed;top:68px;left:0;right:0;transform:translateY(-120%)}.nav-links.open{transform:translateY(0)}.nav-links a{padding:.75rem 1rem}.hero-inner{text-align:center;grid-template-columns:1fr}.hero-photo-wrap{display:none}.hero-btns,.hero-eyebrow{justify-content:center}.about-grid,.contact-grid{grid-template-columns:1fr;gap:2rem}.projects-grid,.skills-grid{grid-template-columns:1fr}.cv-download-section,.footer-inner{text-align:center;flex-direction:column}.certs-grid{grid-template-columns:1fr}}@media (width>=769px) and (width<=1024px){.projects-grid{grid-template-columns:1fr 1fr}}@keyframes drift{0%{transform:translate(0)scale(1)}to{transform:translate(40px,30px)scale(1.1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@keyframes rotate-border{to{filter:hue-rotate(360deg)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes fadeTab{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.fade-in{opacity:0;transition:opacity .7s,transform .7s;transform:translateY(24px)}.fade-in.visible{opacity:1;transform:translateY(0)}.stagger>*{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(20px)}.stagger>.visible{opacity:1;transform:translateY(0)}