@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Zing+Rust+Base+Rough:wght@400;700&display=swap");:root{--bg:#f8fafc;--bg2:#fff;--text:#0f172a;--text2:#475569;--muted:#94a3b8;--border:#e2e8f0;--accent:#3b82f6;--accent-hover:#2563eb;--accent-light:#dbeafe;--font-display:"Zing Rust Base Rough","Space Grotesk",sans-serif;--font-body:"Space Grotesk",sans-serif}[data-theme=dark]{--bg:#0a0a0f;--bg2:#13131a;--text:#e4e4e7;--text2:#a1a1aa;--muted:#71717a;--border:#27272a;--accent:#7c3aed;--accent-hover:#6d28d9;--accent-light:rgba(124,58,237,.1)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg2);border-radius:10px;border:1px solid var(--border)}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--accent),#7c3aed);border-radius:10px;border:2px solid var(--bg2);-webkit-transition:all .3s ease;transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7c3aed,var(--accent));transform:scale(1.1)}::-webkit-scrollbar-corner{background:var(--bg2)}html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg2)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body,html{overflow-x:hidden;width:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;transition:background .3s,color .3s;max-width:100vw}main{overflow-x:hidden;width:100%}.container{max-width:1200px;margin:0 auto;padding:0 24px}.section{padding:100px 0}.section-tag{font-size:13px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.section-title{font-family:var(--font-display);font-size:clamp(32px,4vw,56px);font-weight:700;line-height:1.1;margin-bottom:24px}.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:600;border-radius:8px;text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-family:var(--font-body)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg2);border-color:var(--accent)}.card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;transition:all .3s}.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}.reveal{transition:opacity .6s,transform .6s}.typewriter{display:block;overflow:hidden;border-right:3px solid var(--accent);white-space:nowrap;width:-moz-fit-content;width:fit-content;animation:typing 3.5s steps(40) 1s forwards,blink .75s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}.floating-skills{display:flex;gap:12px;flex-wrap:wrap;animation:float 3s ease-in-out infinite}.skill-badge{padding:8px 16px;background:var(--accent-light);border:1px solid var(--accent);border-radius:20px;font-size:14px;font-weight:500;color:var(--accent);animation:fadeInUp .6s ease-out forwards;opacity:0}.skill-badge:first-child{animation-delay:.1s}.skill-badge:nth-child(2){animation-delay:.2s}.skill-badge:nth-child(3){animation-delay:.3s}.skill-badge:nth-child(4){animation-delay:.4s}.skill-badge:nth-child(5){animation-delay:.5s}.skill-badge:nth-child(6){animation-delay:.6s}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes blink{0%,50%{border-color:transparent}51%,to{border-color:var(--accent)}}@keyframes shine{to{background-position:200%}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-10deg) scale(.8)}to{opacity:1;transform:rotate(0deg) scale(1)}}@keyframes wave{0%,to{transform:rotate(0deg)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}.dynamic-typewriter{overflow:hidden;border-right:3px solid var(--accent);white-space:nowrap;animation:typewriter 4s steps(40) infinite,blink 1s step-end infinite}.dynamic-typewriter:after{content:"";animation:blink 1s step-end infinite}.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-slide-left{opacity:0;transform:translateX(-50px);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal-slide-left.visible{opacity:1;transform:translateX(0)}.reveal-slide-right{opacity:0;transform:translateX(50px);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal-slide-right.visible{opacity:1;transform:translateX(0)}.reveal-scale{opacity:0;transform:scale(.8);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal-scale.visible{opacity:1;transform:scale(1)}.reveal-rotate{opacity:0;transform:rotate(-10deg) scale(.8);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal-rotate.visible{opacity:1;transform:rotate(0deg) scale(1)}.reveal-delay-0{transition-delay:0s}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}.hover-lift{transition:all .3s cubic-bezier(.4,0,.2,1)}.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15)}.hover-glow{transition:all .3s ease}.hover-glow:hover{box-shadow:0 0 20px var(--accent),0 0 40px var(--accent)20;border-color:var(--accent)}.floating-element{animation:float 6s ease-in-out infinite}.floating-element:nth-child(2n){animation-delay:2s;animation-duration:8s}.floating-element:nth-child(3n){animation-delay:4s;animation-duration:10s}.animated-gradient{background:linear-gradient(45deg,var(--accent),#7c3aed,#ec4899,var(--accent));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}.btn{position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn:hover{transform:translateY(-2px)}.card{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--accent)10,transparent);opacity:0;transition:opacity .3s ease}.card:hover:before{opacity:1}.card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.15)}.card:hover .project-bar{transform:translateX(0)}.card:hover .visit-link{transform:translateX(4px)}.page-enter{opacity:0;transform:translateY(20px)}.page-enter-active{opacity:1;transform:translateY(0);transition:all .6s ease}.loading-dots{display:inline-block}.loading-dots:after{content:"";animation:loading-dots 1.5s infinite}@keyframes loading-dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.floating-orb{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));opacity:.1;animation:float-orb 6s ease-in-out infinite;pointer-events:none}@keyframes float-orb{0%,to{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-20px) rotate(120deg)}66%{transform:translateY(10px) rotate(240deg)}}.gradient-text{background:linear-gradient(135deg,var(--accent),#7c3aed,#ec4899);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}@keyframes gradient-shift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.morphing-shape{position:absolute;width:200px;height:200px;background:linear-gradient(45deg,var(--accent),transparent);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;animation:morph 8s ease-in-out infinite;opacity:.05;pointer-events:none}@keyframes morph{0%,to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;transform:rotate(0deg)}25%{border-radius:58% 42% 75% 25%/76% 46% 54% 24%;transform:rotate(90deg)}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%;transform:rotate(180deg)}75%{border-radius:33% 67% 58% 42%/63% 68% 32% 37%;transform:rotate(270deg)}}.glitch-text{position:relative;animation:glitch 2s infinite}.glitch-text:after,.glitch-text:before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}.glitch-text:before{animation:glitch-1 .5s infinite;color:var(--accent);z-index:-1}.glitch-text:after{animation:glitch-2 .5s infinite;color:#ec4899;z-index:-2}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}@keyframes glitch-1{0%,to{transform:translate(0)}10%{transform:translate(-2px,-2px)}20%{transform:translate(2px,2px)}30%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}}@keyframes glitch-2{0%,to{transform:translate(0)}10%{transform:translate(2px,2px)}20%{transform:translate(-2px,-2px)}30%{transform:translate(2px,-2px)}40%{transform:translate(-2px,2px)}}.particle-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.particle{position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:.3;animation:particle-float 10s linear infinite}@keyframes particle-float{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:.3}90%{opacity:.3}to{transform:translateY(-100px) translateX(100px);opacity:0}}.interactive-card{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.interactive-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);transition:left .5s}.interactive-card:hover:before{left:100%}.interactive-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.15)}.neon-border{position:relative;border:2px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(45deg,var(--accent),#7c3aed,var(--accent)) border-box;animation:neon-pulse 2s ease-in-out infinite alternate}@keyframes neon-pulse{0%{box-shadow:0 0 5px var(--accent),0 0 10px var(--accent),0 0 15px var(--accent)}to{box-shadow:0 0 10px var(--accent),0 0 20px var(--accent),0 0 30px var(--accent)}}@media (max-width:968px){.container{padding:0 24px!important;max-width:100%!important}.section{padding:60px 0!important}}@media (max-width:768px){.container{padding:0 20px!important;max-width:100%!important}.section{padding:50px 0!important}.section-title{font-size:32px!important;line-height:1.2!important}[style*="display: grid"],[style*="display:grid"]{grid-template-columns:1fr!important;gap:30px!important}[style*="display: flex"],[style*="display:flex"]{flex-direction:column!important;gap:16px!important}.btn{width:100%!important;text-align:center!important;justify-content:center!important;padding:14px 24px!important}img{max-width:100%!important;height:auto!important}h1{font-size:36px!important;line-height:1.2!important}h2{font-size:28px!important}h3{font-size:22px!important}p{font-size:16px!important;line-height:1.6!important}[style*="position: absolute"][style*="height: 700"],[style*="position: absolute"][style*="width: 700"]{display:none!important}[style*="padding: 32px"],[style*="padding: 36px"],[style*="padding:32px"],[style*="padding:36px"]{padding:24px!important}[style*="gap: 60"],[style*="gap:60"]{gap:30px!important}[style*="gap: 48"],[style*="gap:48"]{gap:24px!important}[style*="gap: 40"],[style*="gap:40"]{gap:20px!important}}@media (max-width:480px){.container{padding:0 16px!important}.section{padding:40px 0!important}.section-title{font-size:28px!important}h1{font-size:32px!important}h2{font-size:24px!important}h3{font-size:20px!important}p{font-size:15px!important}.btn{padding:12px 20px!important;font-size:14px!important}.skill-badge{font-size:12px!important;padding:6px 12px!important}}@viewport{width:device-width;zoom:1}.about-hero-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:80px;gap:80px;align-items:center}.about-buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}.about-images{position:relative}.image-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;grid-template-rows:1fr 1fr;grid-gap:12px;gap:12px;height:420px}.img-box{position:relative;border-radius:12px;overflow:hidden;border:3px solid var(--border);background:var(--bg2);box-shadow:0 8px 24px rgba(0,0,0,.1)}.img-box img{width:100%;height:100%;object-fit:cover}.img-large{grid-row:span 2;border:4px solid var(--accent);box-shadow:0 12px 32px rgba(59,130,246,.2)}@media (max-width:968px){.about-hero-grid{grid-template-columns:1fr;gap:40px}.image-grid{height:300px}}@media (max-width:768px){.about-hero-grid{grid-template-columns:1fr;gap:40px}.about-buttons{flex-direction:column}.about-buttons .btn{width:100%;text-align:center;justify-content:center}.about-images{display:block!important}.image-grid{display:flex;flex-wrap:wrap;gap:8px;height:auto;justify-content:center}.img-box{width:calc(33.333% - 6px);height:120px;flex-shrink:0}.img-large{width:calc(50% - 4px);height:180px;grid-row:auto}}@media (max-width:480px){.about-hero-grid{gap:30px}.img-box{width:calc(50% - 4px);height:100px}.img-large{width:100%;height:150px}}@media (max-width:768px){section[style*="min-height:100vh"],section[style*="minHeight: '100vh'"]{min-height:auto!important;padding:80px 0 60px!important}.typewriter{font-size:32px!important}.floating-skills{justify-content:center}[style*="display: flex"][style*="gap: 48"]{justify-content:space-around!important}[style*="grid-template-columns: repeat(3, 1fr)"], [style*="gridTemplateColumns: 'repeat(3, 1fr')"]{grid-template-columns:1fr!important;gap:16px!important}[style*="padding: 36px 32px"],[style*="padding:36px 32px"]{padding:24px 20px!important}}input,select,textarea{cursor:text;pointer-events:all;position:relative;z-index:1}