:root{--navy: #080d1a;--navy-mid: #0d1528;--navy-soft: #111d38;--navy-muted: #1e2d50;--gold: #c9a84c;--gold-light: #e2c97e;--gold-dim: #7a6330;--cream: #f0ede6;--cream-dim: #b0a898;--line: rgba(201,168,76,.18)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--navy);color:var(--cream);font-family:Syne,sans-serif;font-weight:400;overflow-x:hidden;cursor:none}.cursor{position:fixed;width:10px;height:10px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s;mix-blend-mode:difference}.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}.topbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 32px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(8,13,26,.95) 0%,transparent 100%)}.logo{font-family:Syne,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream);text-decoration:none}.logo span{color:var(--gold)}.btn-download-cv{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--gold);background:transparent;cursor:pointer;font:inherit;font-family:Syne Mono,monospace;font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:background .3s,color .3s}.btn-download-cv:hover{background:var(--gold);color:var(--navy)}.side-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:20px;align-items:flex-end}.side-nav a{display:flex;align-items:center;gap:10px;text-decoration:none;opacity:.35;transition:opacity .3s}.side-nav a.active,.side-nav a:hover{opacity:1}.side-nav-label{font-family:Syne Mono,monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);display:none}.side-nav a:hover .side-nav-label,.side-nav a.active .side-nav-label{display:block}.side-nav-dot{width:6px;height:6px;border-radius:50%;background:var(--cream-dim);transition:background .3s,transform .3s}.side-nav a.active .side-nav-dot,.side-nav a:hover .side-nav-dot{background:var(--gold);transform:scale(1.4)}#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 32px 48px;position:relative;overflow:hidden}.hero-content{position:relative;z-index:2}#hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)}#hero:after{content:"";position:absolute;top:-20%;left:-10%;width:70%;height:80%;background:radial-gradient(ellipse,rgba(201,168,76,.07) 0%,transparent 65%);pointer-events:none}.hero-meta{display:flex;align-items:center;gap:16px;margin-bottom:20px;position:relative;z-index:2}.hero-meta-line{width:48px;height:1px;background:var(--gold)}.hero-meta-text{font-family:Syne Mono,monospace;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}.hero-name{font-family:Playfair Display,serif;font-weight:900;font-size:clamp(5rem,12vw,11rem);line-height:.88;color:var(--cream);position:relative;z-index:2;letter-spacing:-.02em}.hero-name .outline{font-style:italic;color:transparent;-webkit-text-stroke:1px var(--gold-light)}.text-gold{color:var(--gold)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:28px;padding-top:24px;gap:48px;max-width:900px;border-top:1px solid var(--line);position:relative;z-index:2}.hero-desc{max-width:400px;font-size:.95rem;line-height:1.8;color:var(--cream-dim)}.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:16px}.btn-gold{display:inline-flex;align-items:center;gap:12px;padding:16px 36px;background:var(--gold);color:var(--navy);font-family:Syne,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:all .3s}.btn-gold:hover{background:var(--gold-light);transform:translate(-4px)}.btn-ghost{font-family:Syne Mono,monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;transition:color .3s}.btn-ghost:hover{color:var(--gold)}section:not(#hero){padding:72px 32px;position:relative}.s-label{font-family:Syne Mono,monospace;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:36px}.s-label:after{content:"";display:block;height:1px;width:56px;background:var(--gold-dim)}.s-title{font-family:Playfair Display,serif;font-size:clamp(2.8rem,5vw,5rem);font-weight:700;line-height:1;color:var(--cream);margin-bottom:44px;letter-spacing:-.02em}.s-title em{font-style:italic;color:var(--gold)}#skills{background:var(--navy-mid)}.skills-layout{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}.skills-intro{font-size:.92rem;line-height:1.9;color:var(--cream-dim);padding-top:8px}.skills-categories{display:flex;flex-direction:column;gap:48px}.skill-cat-title{font-family:Syne,sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--line)}.skill-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}.skill-row-name{font-family:Syne,sans-serif;font-size:.92rem;font-weight:600;color:var(--cream)}.skill-row-level{display:flex;gap:5px}.skill-pip{width:20px;height:3px;background:var(--navy-muted);transition:background .4s}.skill-pip.filled{background:var(--gold)}#experience{background:var(--navy)}.exp-list{display:flex;flex-direction:column}.exp-item{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:32px 0;border-bottom:1px solid var(--line)}.exp-item:first-child{border-top:1px solid var(--line)}.exp-date{font-family:Syne Mono,monospace;font-size:.68rem;letter-spacing:.1em;color:var(--gold);margin-bottom:8px}.exp-company{font-family:Playfair Display,serif;font-size:1.5rem;font-weight:700;color:var(--cream);line-height:1.2}.exp-role{font-family:Syne,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:20px}.exp-desc{font-size:.93rem;line-height:1.85;color:var(--cream-dim);margin-bottom:24px;max-width:560px}.exp-tags{display:flex;flex-wrap:wrap;gap:8px}.exp-tag{padding:5px 14px;border:1px solid var(--navy-muted);font-family:Syne Mono,monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim);transition:all .3s}.exp-tag:hover{border-color:var(--gold-dim);color:var(--gold)}#education{background:var(--navy-mid)}.education-list{display:flex;flex-direction:column}.education-item{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:32px 0;border-bottom:1px solid var(--line)}.education-item:first-child{border-top:1px solid var(--line)}.education-date{font-family:Syne Mono,monospace;font-size:.68rem;letter-spacing:.1em;color:var(--gold);margin-bottom:8px}.education-name{font-family:Playfair Display,serif;font-size:1.5rem;font-weight:700;color:var(--cream);line-height:1.2}.education-desc{font-size:.93rem;line-height:1.85;color:var(--cream-dim);margin-bottom:12px;max-width:560px}.education-link{font-family:Syne Mono,monospace;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .3s}.education-link:hover{color:var(--gold-light)}#projects{background:var(--navy-muted)}.projects-list{display:flex;flex-direction:column;gap:2px}.proj-item{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:32px;padding:24px 28px;background:transparent;border:1px solid transparent;text-decoration:none;transition:background .35s,border-color .35s;cursor:none}.proj-item:hover{background:var(--navy-muted);border-color:var(--line)}.proj-num{font-family:Playfair Display,serif;font-size:2.5rem;font-weight:400;font-style:italic;color:var(--gold-dim);line-height:1;transition:color .3s}.proj-item:hover .proj-num{color:var(--gold)}.proj-type{font-family:Syne Mono,monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px;transition:color .3s}.proj-item:hover .proj-type{color:var(--gold)}.proj-name{font-family:Playfair Display,serif;font-size:1.6rem;font-weight:700;color:var(--cream);line-height:1.2}.proj-desc{font-size:.85rem;color:var(--cream-dim);margin-top:8px;line-height:1.6}.proj-arrow{width:48px;height:48px;border:1px solid var(--navy-muted);display:flex;align-items:center;justify-content:center;color:var(--cream-dim);transition:all .3s;flex-shrink:0}.proj-item:hover .proj-arrow{border-color:var(--gold);color:var(--gold);background:#c9a84c14}#contact{background:var(--navy);padding:80px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.contact-heading{font-family:Playfair Display,serif;font-size:clamp(3rem,6vw,6rem);font-weight:900;color:var(--cream);line-height:.95;letter-spacing:-.02em}.contact-heading em{font-style:italic;color:var(--gold)}.contact-right{display:flex;flex-direction:column;gap:32px}.contact-item{display:flex;flex-direction:column;gap:6px;padding-bottom:32px;border-bottom:1px solid var(--line)}.contact-item:last-child{border-bottom:none}.contact-item-label{font-family:Syne Mono,monospace;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}.contact-item-value{font-family:Syne,sans-serif;font-size:1.05rem;font-weight:600;color:var(--cream);text-decoration:none;transition:color .3s}.contact-item-value:hover{color:var(--gold)}.footer{background:var(--navy-mid);padding:20px 32px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}.footer-copy,.footer-built{font-family:Syne Mono,monospace;font-size:.6rem;letter-spacing:.1em;color:var(--cream-dim);opacity:.5}.fade-up-enter-active{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}.fade-up-enter-from{opacity:0;transform:translateY(28px)}.slide-up-enter-active{transition:opacity .6s ease,transform .6s ease}.slide-up-enter-from{opacity:0;transform:translateY(20px)}@media(max-width:900px){.topbar{padding:16px 20px}.hero-meta{justify-content:flex-start}#hero,section:not(#hero){padding:72px 20px 48px}.hero-name{font-size:clamp(3.5rem,15vw,7rem)}.hero-bottom{flex-direction:column;align-items:flex-start;gap:28px}.hero-actions{align-items:flex-start}.skills-layout{grid-template-columns:1fr;gap:40px}.exp-item,.education-item{grid-template-columns:1fr;gap:12px}#contact{grid-template-columns:1fr}.proj-item{grid-template-columns:60px 1fr}.proj-arrow,.side-nav{display:none}.footer{flex-direction:column;gap:8px;padding:24px}}.hacker-text{font-family:Syne Mono,monospace;color:var(--cream);position:relative}.hacker-text:after{content:"_";animation:blink 1s infinite;position:absolute;right:-12px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hacker-text-gold{font-family:Syne Mono,monospace;color:var(--gold-light)}.glitch{position:relative;font-family:Syne Mono,monospace;color:var(--gold-light)}.glitch.glitch-active:before,.glitch.glitch-active:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--navy);overflow:hidden}.glitch.glitch-active:before{left:2px;text-shadow:-2px 0 #ff00c1;animation:glitch-anim-1 2s infinite linear alternate-reverse}.glitch.glitch-active:after{left:-2px;text-shadow:-2px 0 #00fff9,2px 2px #ff00c1;animation:glitch-anim-2 2s infinite linear alternate-reverse}@keyframes glitch-anim-1{0%{clip-path:inset(5% 0 90% 0)}10%{clip-path:inset(78% 0 15% 0)}20%{clip-path:inset(40% 0 45% 0)}30%{clip-path:inset(80% 0 5% 0)}40%{clip-path:inset(33% 0 50% 0)}50%{clip-path:inset(5% 0 80% 0)}60%{clip-path:inset(90% 0 8% 0)}70%{clip-path:inset(30% 0 62% 0)}80%{clip-path:inset(60% 0 30% 0)}90%{clip-path:inset(80% 0 10% 0)}to{clip-path:inset(40% 0 42% 0)}}@keyframes glitch-anim-2{0%{clip-path:inset(82% 0 5% 0)}10%{clip-path:inset(12% 0 80% 0)}20%{clip-path:inset(90% 0 3% 0)}30%{clip-path:inset(20% 0 70% 0)}40%{clip-path:inset(70% 0 20% 0)}50%{clip-path:inset(40% 0 50% 0)}60%{clip-path:inset(80% 0 10% 0)}70%{clip-path:inset(5% 0 90% 0)}80%{clip-path:inset(50% 0 38% 0)}90%{clip-path:inset(20% 0 75% 0)}to{clip-path:inset(70% 0 20% 0)}}
