*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#111;--border:#1e1e1e;--accent:#c8f53d;--accent2:#ff6b35;--text:#f0ede8;--muted:#6b6b6b;--font-display:"Syne", sans-serif;--font-mono:"DM Mono", monospace}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font-display);cursor:none;overflow-x:hidden}.cursor{background:var(--accent);pointer-events:none;z-index:9999;border-radius:50%;width:12px;height:12px;transition:transform .15s,opacity .2s;position:fixed;transform:translate(-50%,-50%)}.cursor-ring{pointer-events:none;z-index:9998;border:1px solid #c8f53d66;border-radius:50%;width:36px;height:36px;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:fixed;transform:translate(-50%,-50%)}body:hover .cursor{opacity:1}body:before{content:"";pointer-events:none;z-index:9997;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");position:fixed;inset:0}nav{z-index:100;mix-blend-mode:normal;justify-content:space-between;align-items:center;padding:28px 60px;display:flex;position:fixed;top:0;left:0;right:0}nav:after{content:"";z-index:-1;background:linear-gradient(#0a0a0af2 0%,#0000 100%);position:absolute;inset:0}.nav-logo{letter-spacing:-.5px;color:var(--text);font-size:18px;font-weight:800;text-decoration:none}.nav-logo span{color:var(--accent)}.nav-links{gap:40px;list-style:none;display:flex}.nav-links a{font-family:var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px;text-decoration:none;transition:color .2s;position:relative}.nav-links a:after{content:"";background:var(--accent);transform-origin:0;height:1px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-4px;left:0;right:0;transform:scaleX(0)}.nav-links a:hover{color:var(--text)}.nav-links a:hover:after{transform:scaleX(1)}#hero{grid-template-columns:1fr 1fr;align-items:center;min-height:100vh;padding:0 60px;display:grid;position:relative;overflow:hidden}.hero-bg-grid{background-image:linear-gradient(#ffffff04 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-size:80px 80px;position:absolute;inset:0}.hero-orb{filter:blur(120px);pointer-events:none;border-radius:50%;position:absolute}.hero-orb-1{background:#c8f53d0f;width:600px;height:600px;animation:8s ease-in-out infinite orb-float;top:-200px;right:-100px}.hero-orb-2{background:#ff6b350a;width:400px;height:400px;animation:10s ease-in-out infinite reverse orb-float;bottom:-100px;left:100px}@keyframes orb-float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-40px)scale(1.05)}}.hero-content{z-index:1;padding-top:80px;position:relative}.hero-tag{font-family:var(--font-mono);color:var(--accent);letter-spacing:.2em;text-transform:uppercase;opacity:0;align-items:center;gap:10px;margin-bottom:32px;font-size:11px;animation:.6s .2s forwards fade-up;display:flex}.hero-tag:before{content:"";background:var(--accent);width:32px;height:1px}.hero-name{letter-spacing:-3px;opacity:0;margin-bottom:24px;font-size:clamp(64px,7vw,100px);font-weight:800;line-height:.95;animation:.6s .4s forwards fade-up}.hero-name .accent{color:var(--accent)}.hero-name .outline{-webkit-text-stroke:1px #f0ede84d;color:#0000}.hero-desc{font-family:var(--font-mono);color:var(--muted);opacity:0;max-width:440px;margin-bottom:48px;font-size:14px;line-height:1.8;animation:.6s .6s forwards fade-up}.hero-cta{opacity:0;align-items:center;gap:16px;animation:.6s .8s forwards fade-up;display:flex}.btn-primary{background:var(--accent);color:#0a0a0a;font-family:var(--font-display);letter-spacing:.02em;cursor:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));border:none;padding:14px 32px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-block}.btn-primary:hover{background:#d8ff4d;transform:translateY(-2px)}.btn-secondary{font-family:var(--font-mono);color:var(--muted);letter-spacing:.08em;align-items:center;gap:8px;font-size:12px;text-decoration:none;transition:color .2s;display:flex}.btn-secondary:hover{color:var(--text)}.btn-secondary svg{transition:transform .2s}.btn-secondary:hover svg{transform:translate(4px)}.hero-visual{opacity:0;justify-content:center;align-items:center;height:100%;padding-top:80px;animation:1s 1s forwards fade-in;display:flex;position:relative}.hero-card{background:var(--surface);border:1px solid var(--border);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));width:340px;padding:32px;position:relative}.hero-card:before{content:"";background:linear-gradient(to right, var(--border), var(--accent), var(--border));width:calc(100% - 24px);height:1px;position:absolute;top:0;right:24px}.card-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.card-dots{gap:6px;display:flex}.card-dots span{border-radius:50%;width:8px;height:8px}.card-dots span:first-child{background:#ff5f57}.card-dots span:nth-child(2){background:#febc2e}.card-dots span:nth-child(3){background:#28c840}.card-label{font-family:var(--font-mono);color:var(--muted);letter-spacing:.1em;font-size:10px}.code-block{font-family:var(--font-mono);font-size:12px;line-height:2}.code-line{gap:12px;display:flex}.code-num{color:#2a2a2a;-webkit-user-select:none;user-select:none;text-align:right;min-width:16px}.kw{color:#c792ea}.fn{color:#82aaff}.str{color:var(--accent)}.cm{color:#4a4a4a;font-style:italic}.op{color:var(--accent2)}.var{color:#f0ede8}.typing-cursor{background:var(--accent);vertical-align:middle;width:2px;height:14px;margin-top:5px;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-stats{border-top:1px solid var(--border);gap:24px;margin-top:24px;padding-top:24px;display:flex}.stat{flex:1}.stat-val{color:var(--accent);margin-bottom:4px;font-size:22px;font-weight:800;line-height:1}.stat-label{font-family:var(--font-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:9px}.marquee-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0;overflow:hidden}.marquee-track{gap:60px;width:max-content;animation:20s linear infinite marquee;display:flex}.marquee-item{font-family:var(--font-mono);color:var(--muted);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:12px;font-size:11px;display:flex}.marquee-item:before{content:"◆";color:var(--accent);font-size:6px}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}section{padding:120px 60px}.section-label{font-family:var(--font-mono);color:var(--accent);letter-spacing:.25em;text-transform:uppercase;align-items:center;gap:12px;margin-bottom:16px;font-size:10px;display:flex}.section-label:after{content:"";background:var(--border);flex:1;max-width:120px;height:1px}.section-title{letter-spacing:-2px;margin-bottom:64px;font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1}#work{padding-top:60px}.projects-grid{grid-template-columns:1fr 1fr;gap:2px;display:grid}.project-card{background:var(--surface);cursor:none;group:true;padding:48px;transition:background .3s;position:relative;overflow:hidden}.project-card:before{content:"";opacity:0;z-index:-100;background:linear-gradient(135deg,#c8f53d0a 0%,#0000 60%);transition:opacity .3s;position:absolute;inset:0}.project-card:hover:before{opacity:1}.project-card:hover{background:#161616}.project-card.featured{grid-column:span 2;grid-template-columns:1fr 1fr;align-items:center;gap:48px;display:grid}.project-num{font-family:var(--font-mono);color:var(--muted);letter-spacing:.1em;margin-bottom:24px;font-size:11px}.project-tags{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.tag{font-family:var(--font-mono);border:1px solid var(--border);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;font-size:9px}.tag.accent-tag{border-color:var(--accent);color:var(--accent)}.project-title{letter-spacing:-1px;margin-bottom:16px;font-size:28px;font-weight:800;line-height:1.1}.project-desc{font-family:var(--font-mono);color:var(--muted);margin-bottom:32px;font-size:12px;line-height:1.8}.project-link{font-family:var(--font-mono);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:8px;padding:12px;font-size:11px;text-decoration:none;transition:gap .2s;display:flex}.project-link:hover{gap:16px}.project-visual{aspect-ratio:16/10;border:1px solid var(--border);background:#0d0d0d;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.visual-browser{flex-direction:column;width:100%;height:100%;display:flex}.browser-bar{border-bottom:1px solid var(--border);background:#151515;align-items:center;gap:10px;padding:10px 14px;display:flex}.browser-dots{gap:5px;display:flex}.browser-dots span{background:var(--border);border-radius:50%;width:6px;height:6px}.browser-url{background:#0a0a0a;border-radius:3px;flex:1;align-items:center;height:18px;padding:0 8px;display:flex}.browser-url-text{font-family:var(--font-mono);color:var(--muted);font-size:9px}.browser-content{flex-direction:column;flex:1;gap:10px;display:flex}.browser-header-el{background:linear-gradient(90deg,#1e1e1e 60%,#0000);border-radius:2px;width:60%;height:28px}.browser-text-el{background:#161616;border-radius:2px;height:8px}.browser-text-el:nth-child(3){width:90%}.browser-text-el:nth-child(4){width:75%}.browser-text-el:nth-child(5){width:85%}.browser-btn-el{border:1px solid var(--accent);background:#c8f53d26;border-radius:2px;width:80px;height:28px;margin-top:8px}#skills{background:var(--surface)}.skills-layout{grid-template-columns:1fr 2fr;align-items:start;gap:80px;display:grid}.skills-description{font-family:var(--font-mono);color:var(--muted);font-size:13px;line-height:2}.skills-description strong{color:var(--text);font-style:normal}.skills-grid{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.skill-item{background:var(--bg);border:1px solid #0000;padding:24px;transition:all .25s}.skill-item:hover{border-color:var(--accent);background:#c8f53d08}.skill-icon{margin-bottom:12px;font-size:24px}.skill-name{margin-bottom:4px;font-size:15px;font-weight:700}.skill-level{font-family:var(--font-mono);color:var(--accent);letter-spacing:.1em;font-size:10px}.skill-bar{background:var(--border);height:2px;margin-top:12px;position:relative;overflow:hidden}.skill-bar-fill{background:var(--accent);border-radius:1px;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}#experience{padding:120px 60px}.timeline{max-width:800px}.timeline-item{grid-template-columns:160px 1fr;gap:40px;padding-bottom:56px;display:grid;position:relative}.timeline-item:before{content:"";background:var(--border);width:1px;position:absolute;top:8px;bottom:0;left:172px}.timeline-item:last-child:before{display:none}.timeline-item:after{content:"";border:1px solid var(--accent);background:var(--bg);border-radius:50%;width:9px;height:9px;position:absolute;top:6px;left:167px}.timeline-period{font-family:var(--font-mono);color:var(--muted);letter-spacing:.05em;text-align:right;padding-top:4px;font-size:11px}.timeline-role{letter-spacing:-.5px;margin-bottom:4px;font-size:20px;font-weight:700}.timeline-company{font-family:var(--font-mono);color:var(--accent);margin-bottom:16px;font-size:12px}.timeline-desc{font-family:var(--font-mono);color:var(--muted);font-size:12px;line-height:1.9}#contact{text-align:center;flex-direction:column;justify-content:center;min-height:80vh;padding:120px 60px;display:flex;position:relative;overflow:hidden}.contact-big{letter-spacing:-6px;margin-bottom:48px;font-size:clamp(60px,12vw,160px);font-weight:800;line-height:.9;position:relative}.contact-big .line1{display:block}.contact-big .line2{-webkit-text-stroke:1px #f0ede833;color:#0000;display:block}.contact-big .line2 span{color:var(--accent);-webkit-text-stroke:0}.contact-email{font-family:var(--font-mono);color:var(--muted);letter-spacing:.1em;margin-bottom:48px;font-size:14px;text-decoration:none;transition:color .2s;display:inline-block}.contact-email:hover{color:var(--accent)}.social-links{justify-content:center;gap:24px;display:flex}.social-link{font-family:var(--font-mono);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;padding:12px 0;font-size:11px;text-decoration:none;transition:color .2s;position:relative}.social-link:after{content:"";background:var(--muted);transform-origin:0;height:1px;transition:all .3s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(.3)}.social-link:hover{color:var(--accent)}.social-link:hover:after{background:var(--accent);transform:scaleX(1)}footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:32px 60px;display:flex}footer p{font-family:var(--font-mono);color:#333;letter-spacing:.05em;font-size:11px}footer p span{color:var(--accent)}@keyframes fade-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.reveal{opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(32px)}.reveal.visible{opacity:1;transform:translateY(0)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#222;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}@media (width<=900px){nav{padding:24px 30px}.nav-links{display:none}#hero{grid-template-columns:1fr;min-height:auto;padding:100px 30px 30px}.hero-visual{display:none}section{padding:80px 30px}.projects-grid{grid-template-columns:1fr}.project-card.featured{grid-column:span 1;grid-template-columns:1fr}.skills-layout{grid-template-columns:1fr;gap:40px}.skills-grid{grid-template-columns:1fr 1fr}.timeline-item{grid-template-columns:1fr;gap:8px}.timeline-item:before,.timeline-item:after{display:none}.contact-big{letter-spacing:-3px}footer{text-align:center;flex-direction:column;gap:12px}}