@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap);:root{--bg-dark:#000;--bg-dark-90:#000000e6;--bg-dark-50:#00000080;--color-accent:#d4ff00;--text-primary:#fff;--text-secondary:#888;--text-dark:#000;--font-display:"Space Grotesk",sans-serif;--font-mono:"Space Mono",monospace;--header-height:80px;--border-width:1px}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:Space Grotesk,sans-serif;font-family:var(--font-display)}code{font-family:Space Mono,monospace;font-family:var(--font-mono)}.neon-text{color:#d4ff00;color:var(--color-accent)}.glass-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff1a}.brutalist-border{border:1px solid #d4ff00;border:1px solid var(--color-accent)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#000;background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#333}::-webkit-scrollbar-thumb:hover{background:#d4ff00}::selection{background:#d4ff00;background:var(--color-accent);color:var(--bg-dark)}:root{--color-accent:#cf0;--color-black:#000;--color-white:#fff;--color-gray-100:#f5f5f5;--color-gray-500:#6b7280;--color-gray-800:#1f2937;--font-display:"Be Vietnam Pro","Archivo Black",Impact,sans-serif;--font-mono:"Space Mono","Courier New",monospace;--border-width:4px;--border-width-sm:2px;--shadow-offset:8px;--shadow-offset-sm:4px;--space-xs:0.5rem;--space-sm:1rem;--space-md:2rem;--space-lg:4rem;--space-xl:8rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-color:var(--color-white);background-image:linear-gradient(90deg,#e5e5e5 1px,#0000 0),linear-gradient(180deg,#e5e5e5 1px,#0000 0);background-size:40px 40px;color:#000;color:var(--color-black);font-family:Space Mono,Courier New,monospace;font-family:var(--font-mono);text-transform:uppercase}::selection{background-color:#cf0;background-color:var(--color-accent);color:#000;color:var(--color-black)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff;background:var(--color-white);border-left:2px solid #000;border-left:2px solid var(--color-black)}::-webkit-scrollbar-thumb{background:#000;background:var(--color-black)}::-webkit-scrollbar-thumb:hover{background:#cf0;background:var(--color-accent)}.brutalist-border{border:4px solid #000;border:var(--border-width) solid var(--color-black);box-shadow:8px 8px 0 0 #000;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black)}.brutalist-border-sm{border:2px solid #000;border:var(--border-width-sm) solid var(--color-black);box-shadow:4px 4px 0 0 #000;box-shadow:var(--shadow-offset-sm) var(--shadow-offset-sm) 0 0 var(--color-black)}.brutalist-border-accent{border:4px solid #000;border:var(--border-width) solid var(--color-black);box-shadow:8px 8px 0 0 #cf0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-accent)}.font-display{font-family:Be Vietnam Pro,Archivo Black,Impact,sans-serif;font-family:var(--font-display);letter-spacing:-.02em}.font-mono{font-family:Space Mono,Courier New,monospace;font-family:var(--font-mono)}.header-outline{-webkit-text-stroke:2px #000;-webkit-text-stroke:2px var(--color-black);color:#0000}.text-accent{color:#cf0;color:var(--color-accent)}.desaturated-img{filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply}.duotone-box{background-color:#cf0;background-color:var(--color-accent)}.btn-brutalist{border:4px solid #000;border:var(--border-width) solid var(--color-black);cursor:pointer;font-family:Be Vietnam Pro,Archivo Black,Impact,sans-serif;font-size:1.25rem;gap:1rem;padding:1.5rem 2.5rem;text-transform:uppercase;transition:all .2s ease}.btn-brutalist-primary{background-color:#000;background-color:var(--color-black);color:#fff;color:var(--color-white)}.btn-brutalist-accent,.btn-brutalist-primary:hover{background-color:#cf0;background-color:var(--color-accent);color:#000;color:var(--color-black)}.btn-brutalist-accent{box-shadow:4px 4px 0 0 #000;box-shadow:var(--shadow-offset-sm) var(--shadow-offset-sm) 0 0 var(--color-black)}.btn-brutalist-accent:hover{box-shadow:none;transform:translate(4px,4px)}.btn-brutalist-outline{background-color:initial;color:#000;color:var(--color-black)}.btn-brutalist-outline:hover{background-color:#000;background-color:var(--color-black);color:#fff;color:var(--color-white)}.tag-brutalist{border:2px solid #000;border:2px solid var(--color-black);display:inline-block;font-size:.75rem;font-weight:700;padding:.25rem 1rem;text-transform:uppercase}.tag-filled{background-color:#000;background-color:var(--color-black);color:#fff;color:var(--color-white)}.tag-accent{background-color:#cf0;background-color:var(--color-accent);color:#000;color:var(--color-black)}.container-brutalist{margin:0 auto;max-width:1400px;padding:0 1.5rem}.section-brutalist{border-top:4px solid #000;border-top:var(--border-width) solid var(--color-black);padding:8rem 0;padding:var(--space-xl) 0}.hover-lift{transition:transform .3s ease}.hover-lift:hover{transform:translateY(-4px)}.hover-rotate{transition:transform .5s ease}.hover-rotate:hover{transform:rotate(0deg)!important}@keyframes brutalist-shake{0%,to{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-1deg)}75%{transform:translateX(2px) rotate(1deg)}}@keyframes brutalist-pulse{0%,to{box-shadow:8px 8px 0 0 #000;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black)}50%{box-shadow:10px 10px 0 0 #000;box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 0 var(--color-black)}}@media (max-width:768px){:root{--shadow-offset:4px;--shadow-offset-sm:2px}body{background-size:20px 20px}}.header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:#000000d9;border-bottom:1px solid #ffffff1a;left:0;position:fixed;top:0;width:100%;z-index:50}.header-overlay{display:none}.nav-container{height:80px;justify-content:space-between;margin:0 auto;max-width:1400px;padding:0 1.5rem}.logo-container,.logo-link,.nav-container{align-items:center;display:flex}.logo-link{gap:.5rem;text-decoration:none}.logo-full{display:none;height:50px;width:auto}.logo-link:before{color:var(--text-primary);content:"NGUYỄN ";letter-spacing:-.02em}.logo-link:after,.logo-link:before{font-family:var(--font-display);font-size:1.5rem}.logo-link:after{background-color:initial;border:1px solid var(--color-accent);color:var(--color-accent);content:"XUÂN HẢI";padding:0 .25rem}.nav{display:none}.nav-links{align-items:center;display:flex;gap:2rem;list-style:none;margin:0;padding:0}.nav-links li a{color:var(--text-secondary);font-family:var(--font-mono);font-size:.875rem;font-weight:700;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.nav-links li a.active,.nav-links li a:hover{color:var(--text-primary);text-decoration:none;text-shadow:0 0 10px #ffffff80}.nav-links li:last-child a{background-color:initial;border:1px solid var(--color-accent);box-shadow:none;color:var(--color-accent);padding:.75rem 1.25rem;transition:all .2s ease}.nav-links li:last-child a:hover{background-color:var(--color-accent);box-shadow:0 0 15px var(--color-accent);color:#000;transform:translateY(-2px)}.nav-toggle{align-items:center;background:#0000;border:1px solid var(--text-primary);cursor:pointer;display:flex;flex-direction:column;height:48px;justify-content:center;padding:0;width:48px;z-index:60}.hamburger{position:relative}.hamburger,.hamburger:after,.hamburger:before{background:var(--text-primary);height:2px;transition:all .3s ease;width:24px}.hamburger:after,.hamburger:before{content:"";left:0;position:absolute}.hamburger:before{top:-8px}.hamburger:after{top:8px}.nav-toggle.active{border-color:var(--color-accent)}.nav-toggle.active .hamburger{background:#0000}.nav-toggle.active .hamburger:before{background:var(--color-accent);top:0;transform:rotate(45deg)}.nav-toggle.active .hamburger:after{background:var(--color-accent);top:0;transform:rotate(-45deg)}@media (min-width:768px){.nav{display:block}.logo-full,.nav-toggle{display:none}}.nav-open{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000f2;border-top:1px solid var(--color-accent);bottom:0;display:flex;left:0;position:fixed;right:0;top:80px;z-index:40}.nav-open .nav-links{align-items:flex-start;flex-direction:column;gap:0;justify-content:flex-start;padding:2rem 1.5rem;width:100%}.nav-open .nav-links li{border-bottom:1px solid #ffffff1a;width:100%}.nav-open .nav-links li a{color:var(--text-primary);display:block;font-size:1.25rem;padding:1.5rem 0}.nav-open .nav-links li:last-child a{background:var(--color-accent);border:none;color:#000;margin-top:1rem;text-align:center}*{box-sizing:border-box}*,body{margin:0;padding:0}body{background-color:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:hidden}.main-content{margin:0 auto;max-width:1400px;padding:20px;position:relative;z-index:1}.App{text-align:center}.loading-container{align-items:center;display:flex;justify-content:center;min-height:200px;width:100%}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #ffffff1a;border-radius:50%;border-top-color:#d4ff00;height:40px;width:40px}.error-fallback{background:#ff32321a;border:2px solid #ff5f56;color:#ff5f56;margin:20px 0;padding:20px;text-align:center}@keyframes spin{to{transform:rotate(1turn)}}.cv-preview-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000e6;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2000}.cv-preview-container{animation:scaleUp .3s cubic-bezier(.16,1,.3,1);background:#111;border:1px solid #ffffff1a;border-radius:8px;box-shadow:0 25px 50px #00000080;display:flex;flex-direction:column;height:90%;max-width:1200px;width:90%}.cv-preview-header{align-items:center;background:#ffffff05;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:15px 20px}.cv-preview-title{color:#fff;font-family:var(--font-mono);font-size:1rem;letter-spacing:1px}.cv-actions{align-items:center;display:flex;gap:15px}.cv-download-btn{border:1px solid var(--color-accent);border-radius:4px;color:var(--color-accent);font-family:var(--font-mono);font-size:.8rem;padding:5px 15px;text-decoration:none;transition:all .2s ease}.cv-download-btn:hover{background:var(--color-accent);color:#000}.cv-close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:1.5rem;line-height:1;padding:0;transition:color .2s ease}.cv-close-btn:hover{color:#fff}.cv-preview-body{background:#000;flex:1 1;overflow:hidden;position:relative}.cv-iframe{border:none;height:100%;width:100%}.cv-loading{align-items:center;background:#000;color:#888;display:flex;flex-direction:column;font-family:var(--font-mono);font-size:.9rem;gap:15px;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.cv-preview-container{border:none;border-radius:0;height:100%;width:100%}}.profile-section{align-items:center;background-color:var(--bg-dark);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:80px 2rem 2rem;position:relative}.profile-grid{grid-gap:4rem;display:grid;gap:4rem;grid-template-columns:1fr;margin:0 auto;max-width:1400px;width:100%;z-index:2}.hero-title{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:700;line-height:.9;margin-bottom:2rem;text-transform:uppercase}.hero-line{display:block;opacity:0;transform:translateY(100px);transition:all 1s cubic-bezier(.16,1,.3,1)}.hero-line.line-1{color:var(--color-accent);font-size:clamp(3.5rem,10vw,9rem);margin-left:-5px}.hero-line.line-2{align-self:flex-start;font-size:clamp(3.5rem,10vw,9rem);margin-left:10%;transition-delay:.1s}.hero-line.in-view{opacity:1;transform:translateY(0)}.hollow-text{-webkit-text-stroke:2px #fff;position:relative}.hero-sub{margin-bottom:3rem;margin-left:5px;max-width:600px;opacity:0;transform:translateY(20px);transition:all .8s ease .4s}.hero-sub.in-view{opacity:1;transform:translateY(0)}.hero-sub p{color:var(--text-secondary);font-family:var(--font-mono);font-size:1rem;line-height:1.6}.neon-highlight{border-bottom:1px solid var(--color-accent);color:var(--text-primary)}.hero-cta{align-items:center;display:flex;gap:2rem;opacity:0;transform:translateY(20px);transition:all .8s ease .6s}.hero-cta.in-view{opacity:1;transform:translateY(0)}.btn-brutalist{align-items:center;background:var(--color-accent);color:#000;display:inline-flex;font-family:var(--font-display);font-size:1.1rem;font-weight:700;gap:.5rem;padding:1rem 2rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.btn-brutalist:hover{box-shadow:4px 4px 0 #fff3;transform:translate(-4px,-4px)}.btn-view-cv{overflow:hidden;position:relative}.btn-view-cv:before{animation:shine 3s infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes shine{0%{left:-100%}20%{left:100%}to{left:100%}}.scroll-hint{color:var(--text-secondary);font-family:var(--font-mono);font-size:.8rem;letter-spacing:2px}.profile-visual{align-items:center;display:flex;justify-content:center;opacity:0;position:relative;transition:opacity 1s ease .2s}.profile-visual.in-view{opacity:1}.glitch-frame{aspect-ratio:4/5;border:1px solid #ffffff1a;max-width:450px;position:relative;width:100%}.glitch-image-wrapper{background:#111;height:100%;overflow:hidden;position:relative;width:100%}.profile-img{filter:grayscale(100%) contrast(1.1);height:100%;object-fit:cover;transition:filter .5s ease;width:100%}.glitch-frame:hover .profile-img.main-img{filter:grayscale(0) contrast(1)}.glitch-layer{left:0;mix-blend-mode:hard-light;opacity:0;position:absolute;top:0}.glitch-frame:hover .layer-1{animation:glitch-anim-1 2.5s linear infinite alternate-reverse;opacity:.5}.glitch-frame:hover .layer-2{animation:glitch-anim-2 3s linear infinite alternate-reverse;opacity:.5}@keyframes glitch-anim-1{0%{clip-path:inset(20% 0 80% 0);transform:translate(-2px,1px)}to{clip-path:inset(60% 0 10% 0);transform:translate(2px,-1px)}}@keyframes glitch-anim-2{0%{clip-path:inset(10% 0 50% 0);transform:translate(2px,2px)}to{clip-path:inset(80% 0 5% 0);transform:translate(-2px,-2px)}}.floating-badge{align-items:center;animation:float 4s ease-in-out infinite;background:#000;border:1px solid var(--color-accent);bottom:2rem;box-shadow:0 10px 30px #00000080;color:var(--color-accent);display:flex;font-family:var(--font-mono);font-size:.9rem;gap:10px;padding:.8rem 1.5rem;position:absolute;right:-2rem;z-index:10}.status-dot{background:var(--color-accent);border-radius:50%;box-shadow:0 0 10px var(--color-accent);height:8px;width:8px}.grid-deco{border-color:var(--color-accent);border-style:solid;height:20px;opacity:.8;position:absolute;width:20px}.grid-deco.top-left{border-width:2px 0 0 2px;left:-1px;top:-1px}.grid-deco.bottom-right{border-width:0 2px 2px 0;bottom:-1px;right:-1px}.bg-noise{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.05'/%3E%3C/svg%3E");bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}@media (min-width:1024px){.profile-grid{align-items:center;grid-template-columns:1.2fr .8fr}}@media (max-width:768px){.hero-line.line-2{margin-left:0}.floating-badge{bottom:-1.5rem;right:0}}.experience-popup-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1000}.experience-popup-content{animation:slideUp .3s cubic-bezier(.16,1,.3,1);background:#141414f2;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 20px 50px #00000080;max-width:500px;padding:30px;position:relative;width:90%}.popup-close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:30px;justify-content:center;position:absolute;right:15px;top:15px;transition:background .2s ease;width:30px}.popup-close-btn:hover{background:#ffffff1a}.popup-title{color:var(--color-accent);font-family:var(--font-display);font-size:1.2rem;letter-spacing:1px;margin-bottom:25px}.popup-list{display:flex;flex-direction:column;gap:15px}.popup-item{background:#ffffff0d;border:1px solid #ffffff0d;border-radius:8px;padding:15px;transition:transform .2s ease,border-color .2s ease}.popup-item:hover{border-color:#00ff884d;transform:translateX(5px)}.popup-item-header{display:flex;justify-content:space-between;margin-bottom:5px}.popup-company{color:#fff;font-weight:700}.popup-duration{color:var(--color-accent);font-family:var(--font-mono);font-size:.9rem}.popup-period{color:#888;font-family:var(--font-mono);font-size:.85rem}.popup-footer{border-top:1px solid #ffffff1a;margin-top:25px;padding-top:20px}.total-exp{align-items:center;color:#fff;display:flex;font-family:var(--font-mono);justify-content:space-between}.scramble-text{color:var(--color-accent);font-size:1.2rem;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.floating-badge{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.floating-badge:hover{box-shadow:0 15px 40px #0f83;transform:translateY(-5px)}.about-section{align-items:center;background-color:var(--bg-dark);border-top:1px solid #ffffff1a;display:flex;min-height:100vh;padding:100px 5vw;position:relative}.about-grid{grid-gap:4rem;display:grid;gap:4rem;grid-template-columns:1fr;margin:0 auto;max-width:1400px;opacity:0;transform:translateY(30px);transition:all .8s ease;width:100%}.about-grid.in-view{opacity:1;transform:translateY(0)}.about-left{display:flex;flex-direction:column;justify-content:center}.about-header{color:var(--text-primary);display:inline-block;font-family:var(--font-display);font-size:4rem;margin-bottom:2rem;position:relative}.about-header:after{background:var(--color-accent);bottom:-10px;content:"";height:4px;left:0;position:absolute;width:60px}.bio-text{color:var(--text-primary);font-size:1.5rem;font-weight:300;line-height:1.4;margin-bottom:2rem;max-width:600px}.bio-sub{color:var(--text-secondary);font-family:var(--font-mono);line-height:1.6;margin-bottom:3rem;max-width:500px}.highlight{color:var(--color-accent);font-weight:600}.code-quote{background:#ffffff0d;border-left:2px solid var(--color-accent);color:#ccc;font-family:var(--font-mono);font-size:.9rem;padding:1.5rem}.comment{color:#888}.keyword{color:#ff79c6}.string{color:#f1fa8c}.about-right{align-items:center;display:flex;justify-content:center}.terminal-window{background:#1a1b26;border:1px solid #333;border-radius:8px;box-shadow:0 20px 50px #00000080;max-width:550px;overflow:hidden;width:100%}.terminal-header{align-items:center;background:#16161e;border-bottom:1px solid #333;display:flex;padding:10px 15px}.btns{display:flex;gap:6px}.circle{border-radius:50%;height:12px;width:12px}.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}.title{color:#888;flex:1 1;font-size:.8rem;text-align:center}.terminal-body,.title{font-family:var(--font-mono)}.terminal-body{padding:2rem}.skill-row{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.skill-label{color:#a9b1d6;font-size:.9rem}.prompt{color:var(--color-accent);margin-right:8px}.skill-bar-track{background:#ffffff1a;border-radius:3px;height:6px;overflow:hidden;width:100%}.skill-bar-fill{background:var(--color-accent);height:100%;transition:width 1.5s cubic-bezier(.16,1,.3,1)}.cursor{animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}@media (min-width:1024px){.about-grid{align-items:center;grid-template-columns:1fr 1fr;min-height:60vh}}.experience-section{background:#000;overflow:hidden;padding:100px 20px;position:relative}.experience-bg-video-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:0}.experience-bg-video{height:100%;object-fit:cover;object-position:center center;opacity:.5;width:100%}.experience-bg-overlay{background:linear-gradient(180deg,#000c 0,#00000080 50%,#000c);height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.experience-container{margin:0 auto;max-width:900px;position:relative;z-index:2}.section-title{color:#fff;font-size:4rem;font-weight:900;letter-spacing:-2px;margin-bottom:80px;opacity:.9;text-shadow:0 0 20px #000c;text-transform:uppercase}.hollow-text{-webkit-text-stroke:1px #fff;color:#0000;opacity:.7}.experience-timeline{border-left:1px solid #fff3;padding-left:50px;position:relative}.experience-item{margin-bottom:80px;position:relative}.experience-item:last-child{margin-bottom:0}.experience-marker{background:#000;border:2px solid var(--color-accent);border-radius:50%;height:12px;left:-56px;position:absolute;top:5px;transition:all .3s ease;width:12px;z-index:2}.experience-item:hover .experience-marker{background:var(--color-accent);box-shadow:0 0 15px var(--color-accent)}.experience-content{background:#0000;border:none;padding:0}.experience-header{align-items:baseline;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:15px}.company-info{align-items:center;display:flex;gap:15px}.company-logo-link{display:none}.company-name{color:#fff;font-size:2rem;font-weight:700;line-height:1;margin:0}.company-name,.job-role{text-shadow:0 0 10px #00000080}.job-role{color:var(--color-accent);display:block;font-size:1.1rem;margin:0 0 20px}.job-period,.job-role{font-family:var(--font-mono)}.job-period{background:#00000080;border:1px solid #ffffff4d;border-radius:20px;color:#ccc;font-size:.9rem;padding:4px 10px}.job-description{color:#ccc;font-size:1rem;line-height:1.7;margin-bottom:25px;max-width:90%;text-shadow:0 0 5px #00000080}.tech-stack-mini{display:flex;flex-wrap:wrap;gap:10px}.tech-badge{background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;color:#bbb;font-family:var(--font-mono);font-size:.75rem;padding:2px 6px;position:relative}.tech-badge:before{content:"#";margin-right:2px;opacity:.8}.tech-badge.more,.tech-badge:before{color:var(--color-accent)}@media (max-width:768px){.section-title{font-size:2.5rem;letter-spacing:normal}.experience-timeline{border-left:1px solid #fff3;padding-left:20px}.experience-marker{left:-27px}.company-name{font-size:1.5rem}}.transition-container{align-items:center;background-color:#000;display:flex;height:100vh;justify-content:center;overflow:hidden;position:relative;width:100%;z-index:20}.transition-video{height:100vh;left:50%;object-fit:cover;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .5s ease-in;width:100vw;z-index:1}.transition-video.visible{opacity:1}.video-loader{color:#333;font-family:monospace;font-size:1rem;z-index:0}.kinetic-container.simple-mode{align-items:center;background:#000;border-bottom:1px solid #ffffff1a;border-top:1px solid #ffffff1a;display:flex;height:100vh;justify-content:center;overflow:hidden;position:relative;width:100%}.kinetic-text-simple{color:#cf0;font-family:Inter,sans-serif;font-size:15vw;font-weight:900;letter-spacing:-5px;line-height:1;margin:0;text-transform:uppercase;z-index:10}.geo-line{background:#ccff004d;height:100%;position:absolute;top:0;width:1px}.line-left{left:25%}.line-center{left:50%}.line-right{right:25%}.geo-circle{border:1px solid #ccff0080;border-radius:50%;height:30vw;position:absolute;top:50%;transform:translateY(-50%);width:30vw}.circle-left{left:-15vw}.circle-right{right:-15vw}.scroll-arrow{animation:bounce 2s infinite;bottom:50px;color:#cf0;font-size:2rem;left:50%;position:absolute;transform:translateX(-50%)}.portfolio-section.portfolio-scrollytelling{background-color:#000;height:500vh;position:relative}.video-background{height:100%;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}.bg-video{filter:saturate(.8) brightness(.4);height:auto;left:50%;min-height:100%;min-width:100%;object-fit:cover;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(1.1);transition:opacity 1.5s ease;width:auto}.bg-video.loaded{opacity:1}.video-overlay{background:linear-gradient(135deg,#000000d9,#0009 50%,#000000d9)}.video-grain,.video-overlay{height:100%;left:0;position:absolute;top:0;width:100%}.video-grain{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none}.portfolio-scrollytelling .portfolio-sticky{display:flex;flex-direction:column;height:100vh;padding:0;position:sticky;top:0;width:100%;z-index:1}.scrolly-header{left:5vw;position:absolute;top:100px;z-index:20}.glitch-text{color:var(--text-secondary);font-family:var(--font-display);font-size:1.2rem;letter-spacing:3px;margin:0;position:relative}.glitch-text:after,.glitch-text:before{content:attr(data-text);left:0;opacity:0;position:absolute;top:0}.glitch-text:hover:before{animation:glitch-1 .3s linear;color:var(--color-accent);opacity:.8}.glitch-text:hover:after{animation:glitch-2 .3s linear;color:#f36;opacity:.8}@keyframes glitch-1{0%,to{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}@keyframes glitch-2{0%,to{transform:translate(0)}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(3px,2px)}80%{transform:translate(-3px,-2px)}}.portfolio-scrollytelling .project-counter{color:var(--color-accent);font-family:var(--font-mono);font-size:4.5rem;font-weight:700;line-height:.9;margin-top:.5rem;text-shadow:0 0 30px #d4ff004d}.portfolio-scrollytelling .project-counter .divider{color:#fff3;font-size:2.5rem;margin:0 8px;vertical-align:middle}.portfolio-scrollytelling .project-counter .total{color:#ffffff4d;font-size:2rem;vertical-align:middle}.scrollytelling-grid{grid-gap:3rem;box-sizing:border-box;display:grid;gap:3rem;grid-template-columns:380px 1fr;height:100vh;padding:120px 5vw 60px;width:100%}.project-list{height:100%;justify-content:center;margin-top:40px;overflow:hidden;padding-left:0}.list-inner,.project-list{display:flex;flex-direction:column}.list-inner{gap:0}.project-list-item{grid-gap:1rem;align-items:center;background:#0000;border:none;border-bottom:1px solid #ffffff0f;cursor:pointer;display:grid;gap:1rem;grid-template-columns:40px 1fr 50px;overflow:hidden;padding:1.2rem 1rem;position:relative;text-align:left;transition:all .4s cubic-bezier(.16,1,.3,1)}.project-list-item:before{background:var(--color-accent);content:"";height:100%;left:0;position:absolute;top:0;transform:scaleY(0);transition:transform .3s ease;width:3px}.project-list-item:hover{background:#ffffff08}.project-list-item:hover:before{transform:scaleY(.5)}.project-list-item.active{background:#d4ff000d}.project-list-item.active:before{transform:scaleY(1)}.project-list-item.passed{opacity:.4}.project-list-item.passed:hover{opacity:.7}.item-index{color:#ffffff4d;font-family:var(--font-mono);font-size:.85rem;transition:color .3s ease}.project-list-item.active .item-index{color:var(--color-accent)}.item-content{align-items:center;display:flex;gap:.75rem}.item-title{color:var(--text-secondary);font-family:var(--font-display);font-size:1rem;letter-spacing:.5px;text-transform:uppercase;transition:color .3s ease}.project-list-item.active .item-title,.project-list-item:hover .item-title{color:var(--text-primary)}.item-badge{background:var(--color-accent);color:#000;font-size:.65rem;font-weight:700;padding:3px 8px}.item-badge,.item-year{font-family:var(--font-mono)}.item-year{color:#ffffff40;font-size:.75rem}.item-progress{background:#0000;bottom:0;height:1px;left:0;position:absolute;width:100%}.progress-fill{background:var(--color-accent);height:100%;transform-origin:left;transition:transform .5s ease;width:100%}.project-showcase{align-items:center;display:flex;height:100%;justify-content:center;padding-right:60px}.showcase-card{grid-gap:2.5rem;animation:cardReveal .6s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);background:#0f0f0fcc;border:1px solid #ffffff14;border-radius:0;box-shadow:0 30px 80px #0009,inset 0 1px 0 #ffffff0d;display:grid;gap:2.5rem;grid-template-columns:1.3fr 1fr;max-width:1000px;padding:2.5rem;width:100%}@keyframes cardReveal{0%{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.showcase-visual,.visual-frame{overflow:hidden;position:relative}.visual-frame{aspect-ratio:16/10;border:1px solid #ffffff1a;width:100%}.showcase-image{filter:grayscale(.3);height:100%;object-fit:cover;transition:all .6s ease;width:100%}.showcase-card:hover .showcase-image{filter:grayscale(0);transform:scale(1.03)}.visual-glitch{background:linear-gradient(45deg,#0000 40%,#d4ff0008 50%,#0000 60%);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.showcase-badge{background:var(--color-accent);color:#000;font-family:var(--font-mono);font-size:.75rem;font-weight:700;left:1rem;letter-spacing:1px;padding:6px 14px;position:absolute;top:1rem;z-index:5}.showcase-info{display:flex;flex-direction:column;gap:1rem;justify-content:center}.showcase-company{color:var(--color-accent);font-family:var(--font-mono);font-size:.85rem;letter-spacing:2px}.showcase-title{color:var(--text-primary);font-family:var(--font-display);font-size:2.5rem;line-height:1.1;margin:0;text-transform:uppercase}.showcase-desc{color:var(--text-secondary);font-size:1rem;line-height:1.7;margin:.5rem 0}.showcase-tech{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}.tech-pill{border:1px solid #ffffff26;color:#ffffffb3;font-family:var(--font-mono);font-size:.75rem;padding:6px 14px;transition:all .3s ease}.tech-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}.showcase-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.portfolio-scrollytelling .action-btn{align-items:center;display:inline-flex;font-family:var(--font-mono);font-size:.8rem;font-weight:700;gap:8px;letter-spacing:1px;overflow:hidden;padding:1rem 1.5rem;position:relative;text-decoration:none;text-transform:uppercase;transition:all .3s cubic-bezier(.16,1,.3,1)}.portfolio-scrollytelling .action-btn:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.portfolio-scrollytelling .action-btn:hover:before{left:100%}.portfolio-scrollytelling .action-btn.primary{background:var(--text-primary);border:2px solid var(--text-primary);color:#000}.portfolio-scrollytelling .action-btn.primary:hover{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 10px 30px #d4ff0033;transform:translateY(-2px)}.portfolio-scrollytelling .action-btn.secondary{background:#0000;border:2px solid #fff3;color:var(--text-primary)}.portfolio-scrollytelling .action-btn.secondary:hover{background:#d4ff000d;border-color:var(--color-accent);color:var(--color-accent)}.btn-icon{transition:transform .3s ease}.portfolio-scrollytelling .action-btn:hover .btn-icon{transform:translate(3px,-3px)}.portfolio-scrollytelling .scroll-progress{background:#ffffff0d;height:300px;position:absolute;right:30px;top:50%;transform:translateY(-50%);width:4px;z-index:20}.portfolio-scrollytelling .progress-bar{background:linear-gradient(180deg,var(--color-accent),#d4ff0080);box-shadow:0 0 20px #d4ff004d;transition:height .1s linear;width:100%}.progress-dots{display:flex;flex-direction:column;height:100%;justify-content:space-between;left:50%;padding:0;position:absolute;top:0;transform:translateX(-50%)}.progress-dot{background:#ffffff1a;border:2px solid #fff3;border-radius:50%;cursor:pointer;height:10px;margin-left:-3px;transition:all .3s ease;width:10px}.progress-dot:hover{border-color:var(--color-accent);transform:scale(1.3)}.progress-dot.active{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 15px #d4ff0080}.scroll-hint{align-items:center;bottom:40px;display:flex;flex-direction:column;gap:10px;left:50%;opacity:1;position:absolute;transform:translateX(-50%);transition:opacity .5s ease;z-index:10}.scroll-hint.hidden{opacity:0;pointer-events:none}.hint-text{color:#fff6;font-family:var(--font-mono);font-size:.7rem;letter-spacing:3px}.hint-arrow{animation:bounce 2s infinite;color:var(--color-accent)}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(8px)}60%{transform:translateY(4px)}}@media (max-width:1200px){.scrollytelling-grid{gap:2rem;grid-template-columns:280px 1fr;padding:100px 3vw 40px}.showcase-card{gap:1.5rem;grid-template-columns:1fr;padding:1.5rem}.showcase-title{font-size:2rem}.project-list-item{padding:1rem .8rem}}@media (max-width:900px){.portfolio-section.portfolio-scrollytelling{height:auto;min-height:100vh;padding-bottom:60px}.portfolio-scrollytelling .portfolio-sticky{height:auto;min-height:100vh;position:relative}.scrollytelling-grid{display:flex;flex-direction:column;gap:2rem;padding:120px 4vw 40px}.project-list{margin-top:0;max-height:none;order:2;overflow-y:visible}.list-inner{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}.project-list-item{border:1px solid #ffffff1a;border-radius:4px;gap:.5rem;grid-template-columns:1fr;padding:.8rem}.item-index,.project-list-item:before{display:none}.item-content{align-items:flex-start;flex-direction:column;gap:.3rem}.item-title{font-size:.85rem}.item-badge{font-size:.6rem;padding:2px 6px}.item-year{display:block;font-size:.7rem}.project-showcase{order:1;padding-right:0}.showcase-card{padding:1.5rem}.portfolio-scrollytelling .scroll-progress,.scroll-hint{display:none}.scrolly-header{left:0;margin-bottom:1rem;padding:0 4vw;position:relative;top:0}.portfolio-scrollytelling .project-counter{font-size:3rem}}@media (max-width:600px){.portfolio-section.portfolio-scrollytelling{padding-bottom:40px}.scrollytelling-grid{gap:1.5rem;padding:100px 3vw 30px}.list-inner{grid-template-columns:1fr}.project-list-item{padding:.7rem}.item-title{font-size:.8rem}.showcase-card{padding:1rem}.visual-frame{aspect-ratio:16/9}.showcase-title{font-size:1.4rem}.showcase-desc{font-size:.85rem;line-height:1.5}.showcase-tech{gap:6px}.tech-pill{font-size:.7rem;padding:4px 10px}.showcase-actions{flex-direction:column;gap:.75rem}.portfolio-scrollytelling .action-btn{font-size:.75rem;justify-content:center;padding:.9rem 1.2rem;width:100%}.scrolly-header{padding:0 3vw}.glitch-text{font-size:1rem}.portfolio-scrollytelling .project-counter{font-size:2.5rem}.portfolio-scrollytelling .project-counter .divider{font-size:1.5rem;margin:0 5px}.portfolio-scrollytelling .project-counter .total{font-size:1.2rem}}.certs-section{background-color:var(--bg-dark);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:100px 0;position:relative}.digital-grid-bg{inset:0;opacity:.2;pointer-events:none;position:absolute;z-index:1}.grid-lines{height:100%;left:0;position:absolute;top:0;width:100%}.grid-lines.horizontal{background-image:linear-gradient(180deg,#d4ff004d 1px,#0000 0);background-size:100% 50px}.grid-lines.horizontal,.grid-lines.vertical{animation:gridMove 20s linear infinite;transform:perspective(500px) rotateX(60deg) translateY(-100px) scale(2)}.grid-lines.vertical{background-image:linear-gradient(90deg,#d4ff004d 1px,#0000 0);background-size:50px 100%}@keyframes gridMove{0%{background-position:0 0}to{background-position:0 500px}}.certs-container{max-width:1400px;position:relative;width:90%;z-index:2}.certs-header{margin-bottom:4rem;opacity:0;transform:translateY(30px);transition:all .8s ease}.certs-header.in-view{opacity:1;transform:translateY(0)}.header-deco{align-items:center;color:var(--color-accent);display:flex;font-family:var(--font-mono);font-size:.9rem;gap:1rem;margin-bottom:1rem}.deco-line{background:var(--color-accent);height:1px;width:30px}.certs-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(1,1fr)}@media (min-width:768px){.certs-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.certs-grid{grid-template-columns:repeat(3,1fr)}}.cert-item{background:#ffffff08;border:1px solid #ffffff1a;cursor:pointer;display:flex;flex-direction:column;opacity:0;padding:1.5rem;position:relative;transform:translateY(30px);transition:all .3s ease}.cert-item.in-view{opacity:1;transform:translateY(0)}.cert-item:hover{background:#d4ff000d;border-color:var(--color-accent);transform:translateY(-5px)}.cert-thumb{aspect-ratio:16/9;background:#000;margin-bottom:1.5rem;overflow:hidden;position:relative;width:100%}.cert-thumb img{background:#000;height:100%;object-fit:contain;opacity:.9;transition:transform .5s ease;width:100%}.cert-item:hover .cert-thumb img{opacity:.6;transform:scale(1.05)}.view-overlay{align-items:center;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity .3s ease}.cert-item:hover .view-overlay{opacity:1}.view-overlay span{background:#000c;border:1px solid var(--color-accent);color:var(--color-accent);font-family:var(--font-mono);padding:.5rem 1rem}.cert-inner{display:flex;flex:1 1;flex-direction:column}.cert-meta{display:flex;font-family:var(--font-mono);font-size:.85rem;justify-content:space-between;margin-bottom:1rem}.cert-title{color:var(--text-primary);font-family:var(--font-display);font-size:1.5rem;line-height:1.3;margin:auto 0 0}.corner{border-color:var(--color-accent);border-style:solid;height:10px;opacity:0;position:absolute;transition:opacity .3s ease;width:10px}.cert-item:hover .corner{opacity:1}.corner.top-left{border-width:2px 0 0 2px;left:-1px;top:-1px}.corner.bottom-right{border-width:0 2px 2px 0;bottom:-1px;right:-1px}.contact-section{background-color:var(--bg-dark);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:100px 5vw;position:relative}.contact-container{grid-gap:4rem;display:grid;flex:1 1;gap:4rem;margin:0 auto;max-width:1200px;width:100%}.vertical-header{color:#ffffff1a;display:none;font-family:var(--font-display);font-size:6rem;left:2rem;line-height:1;margin:0;position:absolute;text-orientation:mixed;top:20%;transform:rotate(180deg);writing-mode:vertical-rl}.contact-content{grid-column:2;margin:0 auto;max-width:600px;width:100%}.contact-intro{color:var(--text-primary);font-size:1.5rem;margin-bottom:3rem}.neon{color:var(--color-accent)}.minimal-form{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.form-group input,.form-group textarea{background:#0000;border:none;border-bottom:1px solid #333;color:var(--text-primary);font-family:var(--font-mono);font-size:1.1rem;padding:1rem 0;transition:all .3s ease;width:100%}.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--color-accent);outline:none;padding-left:10px}.form-group input:disabled,.form-group textarea:disabled{cursor:not-allowed;opacity:.5}.btn-submit{align-self:flex-start;background:#0000;border:1px solid var(--color-accent);color:var(--color-accent);cursor:pointer;font-family:var(--font-display);font-size:1.2rem;padding:1rem 2rem;transition:all .3s ease}.btn-submit:hover:not(:disabled){background:var(--color-accent);color:#000}.btn-submit:disabled{cursor:not-allowed;opacity:.5}.status-msg{border-radius:4px;font-family:var(--font-mono);font-size:.9rem;margin-top:-1rem;padding:1rem}.status-msg.success{background:#27c93f1a;border:1px solid #27c93f;color:#27c93f}.status-msg.error{background:#ff5f561a;border:1px solid #ff5f56;color:#ff5f56}.social-links{display:flex;flex-wrap:wrap;gap:2rem}.social-icon{color:#555;font-family:var(--font-display);font-size:2rem;font-weight:700;text-decoration:none;transition:color .3s}.social-icon:hover{color:var(--text-primary)}.footer-placeholder{height:1px}@media (min-width:1024px){.contact-container{grid-template-columns:1fr 1fr;padding-left:100px}.vertical-header{display:block}.contact-content{margin:0}}.footer{background-color:var(--bg-dark);border-top:1px solid #ffffff1a;padding:3rem 1.5rem;position:relative;z-index:10}.footer-content{align-items:center;display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1400px}.footer-view-counter{align-items:center;background-color:#ffffff0d;border:1px solid #ffffff1a;color:var(--text-primary);display:flex;font-family:var(--font-display);font-size:.875rem;gap:.5rem;padding:.75rem 1rem;text-transform:uppercase}.footer-view-counter i,.view-count{color:var(--color-accent)}.view-count{font-weight:700}.view-label{opacity:.8}.footer-support{display:inline-block}.kofi-button{align-items:center;background-color:initial;border:1px solid var(--color-accent);color:var(--color-accent);display:inline-flex;font-family:var(--font-mono);font-size:.75rem;font-weight:700;gap:.5rem;padding:.75rem 1rem;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.kofi-button:hover{background-color:var(--color-accent);box-shadow:0 0 15px #d4ff004d;color:#000;transform:translateY(-2px)}.kofi-button i{font-size:1rem}.footer-copyright{color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:400;line-height:1.8;text-align:center;text-transform:uppercase}.footer-copyright p{margin:0}.footer-subtitle{opacity:.7}@media (min-width:768px){.footer-content{align-items:center;flex-direction:row;justify-content:space-between}.footer-copyright{text-align:right}}