* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.site-noise { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
#matrix-canvas, #topology-canvas { position: absolute; pointer-events: none; }
#matrix-canvas { inset: 0; position: fixed; z-index: -2; opacity: .14; }
.scroll-progress { height: 2px; width: 100%; position: fixed; top: 0; z-index: 20; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.boot-screen { position: fixed; z-index: 30; inset: 0; background: var(--bg-deep); display: grid; place-content: center; text-align: center; gap: .8rem; color: var(--muted); font: .75rem/1 var(--font-mono); letter-spacing: .13em; transition: opacity .5s ease, visibility .5s ease; }
.boot-screen.is-hidden { opacity: 0; visibility: hidden; }
.boot-mark { font-size: 2.7rem; color: var(--accent); filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .7)); }
.boot-screen p { margin: 0; } .boot-screen p span { color: var(--accent); }
.boot-line { height: 2px; width: 180px; background: var(--line); overflow: hidden; } .boot-line i { display:block; width: 36%; height:100%; background: var(--accent); animation: boot 1s ease-in-out infinite; }
.site-header { width: min(1360px, calc(100% - 3rem)); height: 5.25rem; position: fixed; inset: 0 0 auto; margin: 0 auto; z-index: 15; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 77%, transparent); border-color: var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-flex; gap: .55rem; align-items: center; font: 700 .84rem var(--font-mono); letter-spacing: .08em; white-space: nowrap; }
.brand img { width: 1.5rem; height: 1.5rem; }.brand-muted { color: var(--accent); }
.site-nav { display: flex; gap: 1.75rem; font: .7rem var(--font-mono); letter-spacing: .08em; color: var(--muted); }.site-nav a { transition: color .2s; }.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: .75rem; }.theme-switcher { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }.theme-button { width: 1.8rem; height: 1.8rem; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); font: 700 .78rem var(--font-mono); }.theme-button:hover, .theme-button.is-active { color: var(--bg-deep); background: var(--accent); }.menu-toggle { display:none; width: 2.6rem; height:2.4rem; border:1px solid var(--line); border-radius:.35rem; background:var(--card); cursor:pointer; }.menu-toggle i { display:block; width: 1rem; height:1px; background:var(--text); margin: .24rem auto; }
.section { width: min(1200px, calc(100% - 3rem)); margin: 0 auto; padding: 8.75rem 0; position: relative; }.section-surface { width:100%; padding-left:max(1.5rem, calc((100% - 1200px)/2)); padding-right:max(1.5rem, calc((100% - 1200px)/2)); background: linear-gradient(115deg, color-mix(in srgb, var(--surface) 85%, transparent), color-mix(in srgb, var(--surface-strong) 40%, transparent)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow { margin: 0 0 1.25rem; color: var(--accent); font: .67rem var(--font-mono); letter-spacing: .13em; }.status-dot { display: inline-block; height: .45rem; width:.45rem; border-radius:50%; background: var(--success); margin:0 .55rem .06rem 0; box-shadow:0 0 0 .22rem color-mix(in srgb, var(--success) 12%, transparent); }
h1,h2,h3,p { margin-top: 0; }h1,h2,h3 { letter-spacing: -.045em; line-height:1.03; }h1 { margin:0; font-size:clamp(3rem, 6.7vw, 6.55rem); max-width: 860px; } h2 { font-size:clamp(2.4rem, 4.65vw, 4.6rem); margin:0; }h1 em,h2 em { color: var(--accent); font-style:normal; } h3 { font-size:1.35rem; }.hero { min-height: 47rem; display:grid; grid-template-columns: 1.24fr .76fr; align-items:center; gap:4.5rem; padding-top: 10rem; padding-bottom: 6rem; overflow: hidden; }.hero::before { content:""; position:absolute; width:580px;height:580px;right:-120px;top:95px;border-radius:50%;background:radial-gradient(circle, rgba(var(--accent-rgb), .13), transparent 63%); pointer-events:none; }.hero-copy { position:relative; z-index:1; }.hero-lede { max-width: 640px; color:var(--muted); font-size:clamp(1rem,1.5vw,1.25rem); margin:1.8rem 0 2.25rem; }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }.button { display:inline-flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border-radius:.35rem; border:1px solid var(--line); font:700 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.07em; transition:transform .2s, background .2s, border-color .2s; }.button span{font-size:1rem}.button:hover { transform: translateY(-3px); }.button-primary { background:var(--accent); color:var(--bg-deep); border-color:var(--accent); }.button-primary:hover { background:var(--text); }.button-quiet { color:var(--text); background:color-mix(in srgb, var(--card) 75%, transparent); }.button-quiet:hover{border-color:var(--accent);color:var(--accent)}.hero-metrics { display:flex; gap: 2.25rem; margin:3.25rem 0 0; }.hero-metrics div{display:grid;gap:.15rem}.hero-metrics dt{font:.6rem var(--font-mono); letter-spacing:.1em;color:var(--muted)}.hero-metrics dd{margin:0;font-size:.84rem;font-weight:600;}
#topology-canvas { inset: 0; width:100%;height:100%; opacity:.38; z-index:0; }.hero-console { position:relative; z-index:1; padding:1.25rem; border:1px solid var(--line); background:color-mix(in srgb, var(--card) 88%, transparent); box-shadow:var(--shadow); backdrop-filter:blur(12px); }.console-title { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font:.62rem var(--font-mono); letter-spacing:.1em; }.online-pill{color:var(--success)}.console-map{height:250px;position:relative;margin:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent 49.7%,var(--line) 50%,transparent 50.3%),linear-gradient(transparent 49.7%,var(--line) 50%,transparent 50.3%);background-size:50px 50px}.map-node{position:absolute;display:grid;place-content:center;width:76px;height:76px;border:1px solid var(--accent);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 6%,transparent),0 0 22px color-mix(in srgb,var(--accent) 25%,transparent);text-align:center;font:700 .63rem var(--font-mono);letter-spacing:.07em}.map-node small{font-size:.48rem;color:var(--muted);margin-top:.2rem}.node-internet{top:20px;left:calc(50% - 38px);border-radius:50%}.node-firewall{top:88px;left:calc(23% - 38px)}.node-core{top:88px;right:calc(23% - 38px)}.node-server{bottom:20px;left:calc(50% - 38px);border-radius:50%}.map-line{position:absolute;height:1px;background:var(--accent);opacity:.65;transform-origin:left}.line-one{width:110px;top:98px;left:calc(50% - 55px);transform:rotate(142deg)}.line-two{width:110px;top:98px;left:50%;transform:rotate(38deg)}.packet{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 11px var(--success)}.packet-one{top:110px;left:32%;animation:packetOne 2.3s linear infinite}.packet-two{top:169px;right:35%;animation:packetTwo 2.8s linear infinite}.console-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.console-readout p{margin:0;display:grid;gap:.45rem}.console-readout span{font:.52rem var(--font-mono);letter-spacing:.08em;color:var(--muted)}.console-readout b{font-size:.85rem;color:var(--text)}.scroll-cue{position:absolute;bottom:1.8rem;left:0;font:.62rem var(--font-mono);letter-spacing:.1em;color:var(--muted)}.scroll-cue span{display:block;color:var(--accent);font-size:1.25rem;margin: .25rem 0 0 .65rem;animation:bob 1.3s ease-in-out infinite}
.section-heading { margin-bottom:4.5rem; }.about-layout { display:grid;grid-template-columns:1.1fr .9fr;gap:10%;align-items:start; }.about-copy p { color:var(--muted);font-size:1.05rem;max-width:650px; }.about-copy .large-copy { color:var(--text);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.35;letter-spacing:-.025em; }.text-link{display:inline-flex;gap:.65rem;margin-top:.9rem;padding-bottom:.35rem;border-bottom:1px solid var(--accent);color:var(--accent);font:.7rem var(--font-mono);letter-spacing:.08em}.text-link span{font-size:1.1rem;line-height:.7}.signal-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.signal-list li{display:grid;grid-template-columns:2rem 1fr;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}.signal-list>li>span{color:var(--accent);font:.63rem var(--font-mono)}.signal-list b{font-size:1rem}.signal-list p{margin:.4rem 0 0;color:var(--muted);font-size:.88rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:7rem}.stats-grid article{padding:1.4rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.stats-grid strong{display:block;font-size:clamp(2rem,3vw,3rem);line-height:1;color:var(--accent);letter-spacing:-.06em}.stats-grid strong::after{content:"+";font-size:.45em;margin-left:.08em}.stats-grid article:last-child strong::after{content:"%"}.stats-grid span{display:block;color:var(--muted);font:.62rem var(--font-mono);letter-spacing:.06em;margin-top:.65rem}
.timeline-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.timeline-card{border:1px solid var(--line);background:var(--card);padding:1.5rem}.timeline-label{display:flex;align-items:center;gap:1rem;font:.65rem var(--font-mono);letter-spacing:.1em;color:var(--accent)}.timeline-label i{height:1px;background:var(--line);flex:1}.timeline-item{border-left:1px solid var(--accent);padding:2.25rem 0 1.1rem 1.3rem;margin-left:.3rem}.timeline-item h3{margin-bottom:.75rem}.timeline-item p:not(.timeline-period){color:var(--muted);font-size:.92rem}.timeline-period{margin:0 0 .75rem;color:var(--accent);font:.62rem var(--font-mono);letter-spacing:.09em}.timeline-item ul{display:flex;flex-wrap:wrap;list-style:none;margin:1.1rem 0 0;padding:0;gap:.4rem}.timeline-item li,.course-tags span{border:1px solid var(--line);padding:.3rem .45rem;color:var(--muted);font:.57rem var(--font-mono);letter-spacing:.04em}.featured-education{padding-bottom:1.8rem}.course-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}.callout-note{border-top:1px solid var(--line);padding-top:1.1rem;color:var(--muted);font-size:.85rem}.callout-note span{color:var(--accent);margin-right:.5rem}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.skill-card{min-height:180px;padding:1.25rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:color-mix(in srgb,var(--card) 62%,transparent);transition:background .25s,transform .25s}.skill-card:hover{background:var(--surface-strong);transform:translateY(-3px)}.skill-card::after{content:attr(data-index);position:absolute;right:.65rem;bottom:-.75rem;color:color-mix(in srgb,var(--accent) 15%,transparent);font:900 4rem var(--font-mono);line-height:1}.skill-icon{display:grid;place-content:center;width:2.3rem;height:2.3rem;border:1px solid var(--accent);color:var(--accent);font:1.05rem var(--font-mono);margin-bottom:1.75rem}.skill-card h3{font-size:1rem;margin:0 0 .45rem}.skill-card p{position:relative;margin:0;color:var(--muted);font-size:.78rem;line-height:1.55}
.projects-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end}.projects-top .section-heading{margin-bottom:3.5rem}.project-filters{display:flex;gap:.45rem;flex-wrap:wrap;padding-bottom:3.5rem}.project-filters button{padding:.45rem .65rem;border:1px solid var(--line);background:transparent;color:var(--muted);font:.61rem var(--font-mono);letter-spacing:.06em;cursor:pointer}.project-filters button:hover,.project-filters .is-active{color:var(--bg-deep);background:var(--accent);border-color:var(--accent)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.project-card{min-height:360px;padding:1.25rem;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--card) 90%,transparent),color-mix(in srgb,var(--surface-strong) 68%,transparent));display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,opacity .2s}.project-card:hover{transform:translateY(-5px);border-color:var(--accent)}.project-card.is-hidden{display:none}.project-number{color:var(--accent);font:.62rem var(--font-mono);letter-spacing:.09em}.project-signal{position:absolute;right:1.25rem;top:1.25rem;color:var(--success);font:.7rem var(--font-mono)}.project-card h3{font-size:1.55rem;margin:3.5rem 0 1rem}.project-card p{color:var(--muted);font-size:.88rem}.project-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:auto 0 1.2rem}.project-tags span{padding:.25rem .38rem;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);font:.56rem var(--font-mono);letter-spacing:.04em}.project-link{display:flex;align-items:center;justify-content:space-between;color:var(--text);font:.65rem var(--font-mono);letter-spacing:.07em;border-top:1px solid var(--line);padding-top:.9rem}.project-link span{color:var(--accent);font-size:1.1rem}
.lab-shell{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);overflow:hidden}.lab-topbar{height:3.1rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;border-bottom:1px solid var(--line);font:.6rem var(--font-mono);letter-spacing:.08em;color:var(--muted)}.lab-topbar i{display:inline-block;width:.38rem;height:.38rem;border-radius:50%;background:var(--success);margin-right:.45rem;box-shadow:0 0 9px var(--success)}.lab-topbar button{border:0;background:transparent;color:var(--accent);font:inherit;cursor:pointer}.lab-content{display:grid;grid-template-columns:1.45fr .55fr;min-height:510px}.lab-map{position:relative;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 37%),linear-gradient(90deg,color-mix(in srgb,var(--line) 38%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--line) 38%,transparent) 1px,transparent 1px);background-size:auto,30px 30px,30px 30px;border-right:1px solid var(--line)}.lab-lines{position:absolute;inset:0;width:100%;height:100%}.lab-lines path{fill:none;stroke:var(--accent);stroke-opacity:.56;stroke-width:1.3;stroke-dasharray:5 5;animation:dash 16s linear infinite}.lab-lines circle{fill:var(--success);filter:drop-shadow(0 0 5px var(--success));animation:blink 2s infinite}.lab-node{position:absolute;width:106px;min-height:64px;display:grid;place-content:center;gap:1px;padding:.35rem;background:var(--surface);border:1px solid var(--line);color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}.lab-node:hover,.lab-node.is-selected{border-color:var(--accent);background:var(--surface-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent);transform:translateY(-2px)}.lab-node span{color:var(--accent);font-size:.9rem}.lab-node b{font-size:.68rem;letter-spacing:.02em}.lab-node small{color:var(--muted);font:.45rem var(--font-mono);letter-spacing:.06em}.node-wan{top:2%;left:calc(50% - 53px);border-radius:999px}.node-edge{top:20%;left:calc(50% - 53px)}.node-router{top:39%;left:calc(50% - 53px);border-color:var(--accent)}.node-proxmox{top:62%;left:calc(50% - 53px);border-color:var(--accent)}.node-nextcloud{bottom:4%;left:5%}.node-vpn{bottom:4%;left:calc(33.3% - 53px)}.node-nginx{bottom:4%;right:calc(33.3% - 53px)}.node-monitor{bottom:4%;right:5%}.lab-inspector{padding:1.5rem;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg-deep) 26%,transparent)}.inspector-kicker{margin:0 0 .8rem;color:var(--accent);font:.58rem var(--font-mono);letter-spacing:.1em}.lab-inspector h3{font-size:1.65rem;margin-bottom:.9rem}.lab-inspector>p:not(.inspector-kicker){color:var(--muted);font-size:.88rem}.lab-inspector dl{margin:1.5rem 0;display:grid;gap:.6rem}.lab-inspector dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.5rem}.lab-inspector dt,.lab-inspector dd{margin:0;font:.58rem var(--font-mono);letter-spacing:.06em}.lab-inspector dt{color:var(--muted)}.lab-inspector dd{color:var(--accent)}.inspector-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font:.63rem/1.55 var(--font-mono);color:var(--muted)}.inspector-foot span{color:var(--success)}
.terminal-section{display:grid;grid-template-columns:.62fr 1.38fr;gap:5rem;align-items:center}.terminal-intro p:not(.eyebrow){color:var(--muted);max-width:360px}.terminal-intro code{font:inherit;color:var(--accent)}.terminal-window{background:#030805;color:#bafcc6;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:var(--shadow);font:.8rem/1.6 var(--font-mono);overflow:hidden}.terminal-bar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid rgba(166,255,176,.18);background:#071109;color:#7faf88;font-size:.62rem}.terminal-bar span{display:flex;gap:.35rem}.terminal-bar i{display:block;width:.55rem;height:.55rem;border-radius:50%;background:#4d7860}.terminal-bar i:nth-child(1){background:#ff6e67}.terminal-bar i:nth-child(2){background:#f1ce67}.terminal-bar i:nth-child(3){background:#65d480}.terminal-bar b{font-weight:400}.terminal-output{height:285px;overflow-y:auto;padding:1rem;white-space:pre-wrap}.terminal-output p{margin:0 0 .65rem}.term-prompt{color:#71eb88}.term-command{color:#f0fff2}.term-info{color:#a9c9b0}.term-accent{color:#7cff91}.term-error{color:#ff9a86}.terminal-input-row{display:flex;gap:.6rem;align-items:center;border-top:1px solid rgba(166,255,176,.18);padding:.75rem 1rem;color:#71eb88}.terminal-input-row input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#f0fff2;font:inherit}.cursor{font-weight:400;animation:blink 1s step-end infinite}.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.cert-card{min-height:230px;padding:1.2rem;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);display:flex;flex-direction:column}.cert-status{align-self:flex-start;padding:.25rem .4rem;font:.55rem var(--font-mono);letter-spacing:.06em}.cert-status.verified{color:var(--success);background:color-mix(in srgb,var(--success) 10%,transparent)}.cert-status.planned{color:var(--warning);background:color-mix(in srgb,var(--warning) 10%,transparent)}.cert-card h3{font-size:1.08rem;margin:auto 0 .65rem}.cert-card p{margin:0;color:var(--muted);font-size:.79rem}.contact-section{text-align:center;padding-bottom:10rem}.contact-section .eyebrow{margin-bottom:1.35rem}.contact-section h2{font-size:clamp(3rem,6vw,6rem)}.contact-copy{color:var(--muted);max-width:580px;margin:1.75rem auto 2.5rem}.social-links{display:flex;justify-content:center;gap:.8rem}.social-card{width:min(290px,100%);display:flex;align-items:center;gap:.9rem;text-align:left;padding:1rem;border:1px solid var(--line);background:var(--card);transition:transform .2s,border-color .2s}.social-card:hover{border-color:var(--accent);transform:translateY(-3px)}.social-icon{display:grid;place-content:center;width:2.7rem;height:2.7rem;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font:700 .8rem var(--font-mono)}.social-card small{display:block;color:var(--muted);font:.55rem var(--font-mono);letter-spacing:.08em;margin-bottom:.15rem}.social-card b{font-size:1rem}.social-card i{color:var(--accent);font-style:normal;margin-left:.25rem}.site-footer{width:min(1200px,calc(100% - 3rem));margin:0 auto;min-height:7rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--muted);font:.65rem var(--font-mono);letter-spacing:.04em}.site-footer p{margin:0}