html{scroll-behavior:smooth;width:100%;height:100%;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1f2937;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;min-height:100vh;margin:0;padding:0;overflow-x:hidden}:root{--primary-gradient: linear-gradient(135deg, #0f4c3a 0%, #1e3a8a 50%, #ffffff 100%);--secondary-gradient: linear-gradient(135deg, #059669 0%, #1e40af 100%);--accent-gradient: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);--dark-gradient: linear-gradient(135deg, #064e3b 0%, #1e3a8a 100%);--primary-green: #059669;--primary-blue: #1e40af;--light-green: #10b981;--light-blue: #3b82f6;--dark-green: #064e3b;--dark-blue: #1e3a8a;--text-dark: #1f2937;--text-light: #6b7280;--text-white: #ffffff;--bg-light: #f9fafb;--bg-white: #ffffff;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--shadow-glow: 0 0 20px rgba(16, 185, 129, .15);--border-radius: 12px;--border-radius-lg: 20px;--border-radius-xl: 24px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: all .6s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--text-dark);overflow-x:hidden;transition:background-color .3s ease,color .3s ease}.portfolio{min-height:100vh;width:100%;margin:0;padding:0}.typing-container{display:flex;align-items:center;gap:.2rem;min-height:2rem}.typing-text{display:inline-block;min-width:200px}.cursor{display:inline-block;font-weight:100;color:var(--light-green);animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.animate-on-scroll{opacity:0;transform:translateY(50px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}.animate-on-scroll.animate-in{opacity:1;transform:translateY(0)}.btn-primary,.btn-secondary{position:relative;overflow:hidden;transform:perspective(1px) translateZ(0)}.btn-primary:before,.btn-secondary:before{content:"";position:absolute;z-index:-1;inset:0;background:var(--accent-gradient);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease-out}.btn-primary:hover:before,.btn-secondary:hover:before{transform:scaleX(1)}.btn-resume{background:transparent;border:2px solid rgba(255,255,255,.12);color:var(--text-white);padding:.55rem 1rem;border-radius:12px;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;font-weight:600}.btn-resume:hover,.btn-resume:focus{background:#ffffff0f;transform:translateY(-2px);box-shadow:var(--shadow-md);outline:none}.image-container{animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.skill-progress{position:relative;overflow:hidden}.skill-progress:after{content:"";position:absolute;inset:0;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:50px 50px;animation:move 2s linear infinite}@keyframes move{0%{background-position:0 0}to{background-position:50px 50px}}.hero:after{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,rgba(16,185,129,.3),transparent),radial-gradient(2px 2px at 40px 70px,rgba(59,130,246,.3),transparent),radial-gradient(1px 1px at 90px 40px,rgba(16,185,129,.4),transparent),radial-gradient(1px 1px at 130px 80px,rgba(59,130,246,.4),transparent),radial-gradient(2px 2px at 160px 30px,rgba(16,185,129,.3),transparent);background-repeat:repeat;background-size:200px 100px;animation:sparkle 20s linear infinite;pointer-events:none}@keyframes sparkle{0%{transform:translate(0)}to{transform:translate(200px)}}.navbar{position:fixed;top:0;width:100%;background:#fffc;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);z-index:1000;transition:var(--transition);box-shadow:0 1px 3px #0000000d,0 1px 2px #0000001a;border-bottom:1px solid rgba(255,255,255,.18)}.dark .navbar{background:#0a1628b3;box-shadow:0 1px 3px #00000080,0 1px 2px #0009;border-bottom:1px solid rgba(255,255,255,.05)}.nav-actions{display:flex;gap:.75rem;align-items:center}.theme-toggle{background:#0000000a;border:1px solid rgba(31,41,55,.1);width:42px;height:42px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1.25rem}.theme-toggle:hover{transform:translateY(-2px) scale(1.05);background:#00000014;box-shadow:var(--shadow-md)}.theme-toggle:active{transform:translateY(0) scale(.95)}.dark .theme-toggle{border-color:#ffffff1a;background:#ffffff0d}.dark .theme-toggle:hover{background:#ffffff1a}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo h2{background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:1.5rem}.nav-menu{display:flex;gap:2rem;align-items:center}.nav-link{background:none;border:none;color:var(--text-dark);font-weight:500;cursor:pointer;padding:.5rem 1rem;border-radius:var(--border-radius);transition:var(--transition);position:relative;overflow:hidden}.nav-link:before{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent-gradient);transition:all .3s ease;transform:translate(-50%)}.nav-link:hover:before,.nav-link.active:before{width:80%}.nav-link:hover,.nav-link.active{background:var(--accent-gradient);color:var(--text-white);transform:translateY(-2px);box-shadow:var(--shadow-md)}.nav-link:active{transform:translateY(0)}.nav-toggle{display:none;flex-direction:column;cursor:pointer}.bar{width:25px;height:3px;background:var(--primary-blue);margin:3px 0;transition:var(--transition);border-radius:2px}.hero{min-height:100vh;background:var(--primary-gradient);display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 20%,rgba(16,185,129,.15) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(59,130,246,.15) 0%,transparent 50%),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.6;animation:subtleMove 20s ease-in-out infinite}@keyframes subtleMove{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-10px,-10px) scale(1.02)}}.hero-container{max-width:1200px;margin:0 auto;padding:2rem;position:relative;z-index:1}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-title{font-size:4rem;font-weight:800;color:var(--text-white);margin-bottom:1.5rem;line-height:1.1;letter-spacing:-.02em}.highlight{background:linear-gradient(135deg,#10b981,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}.highlight:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#10b981 0%,transparent 100%);opacity:.5}.hero-subtitle{font-size:1.75rem;color:#fffffff2;margin-bottom:2rem;font-weight:500;min-height:2.5rem}.hero-description{font-size:1.2rem;color:#ffffffd9;margin-bottom:3rem;line-height:1.8;max-width:600px}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:1.1rem 2.5rem;border:none;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);font-size:1.05rem;text-decoration:none;display:inline-block;text-align:center;letter-spacing:.02em}.btn-primary{background:var(--secondary-gradient);color:var(--text-white);box-shadow:var(--shadow-lg),0 0 #10b98166;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-xl),0 0 20px #10b98180}.btn-secondary{background:#fff3;color:var(--text-white);border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.btn-secondary:before{content:"";position:absolute;inset:0;background:#ffffff1a;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.btn-secondary:hover:before{transform:scaleX(1)}.btn-secondary:hover{background:#ffffff4d;transform:translateY(-3px) scale(1.05);border-color:#ffffff80}.hero-image{display:flex;justify-content:center;align-items:center}.image-container{position:relative;width:380px;height:380px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-xl),var(--shadow-glow);background:var(--secondary-gradient);padding:10px;animation:float 6s ease-in-out infinite}.image-container:before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:var(--accent-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.6;animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.image-container img{width:100%;height:100%;object-fit:cover;border-radius:50%}.container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}.section-title{font-size:3rem;font-weight:800;text-align:center;margin-bottom:4rem;background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:2;letter-spacing:-.02em}.section-title:after{content:"";display:block;width:80px;height:4px;background:var(--accent-gradient);margin:1.5rem auto 0;border-radius:2px}.about{padding:6rem 0;background:linear-gradient(135deg,#f0fdf4,#ecfeff,#f8fafc);position:relative}.about:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(16,185,129,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(59,130,246,.1) 0%,transparent 50%);pointer-events:none}.dark .about{background:linear-gradient(135deg,#06121a,#07182b,#081822)}.dark .about:before{background:radial-gradient(circle at 20% 80%,rgba(16,185,129,.06) 0%,transparent 40%),radial-gradient(circle at 80% 20%,rgba(59,130,246,.06) 0%,transparent 40%)}.about-content{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}.about-text p{font-size:1.15rem;color:var(--text-light);margin-bottom:1.5rem;line-height:1.9}.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;margin-top:4rem}.stat{text-align:center;padding:2.5rem 2rem;background:var(--bg-white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);transition:var(--transition);border:1px solid rgba(16,185,129,.1);position:relative;overflow:hidden}.stat:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-gradient);transform:scaleX(0);transition:transform .3s ease}.stat:hover:before{transform:scaleX(1)}.stat:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:#10b9814d}.stat h3{font-size:2.5rem;font-weight:700;background:var(--secondary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stat p{color:var(--text-light);font-weight:500}.skills{padding:6rem 0;background:linear-gradient(135deg,#fff,#f0f9ff,#f0fdf4);position:relative}.skills:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(circle at 30% 70%,rgba(16,185,129,.08) 0%,transparent 50%);pointer-events:none}.dark .skills{background:linear-gradient(135deg,#071022,#072033,#041424)}.dark .skills:before{background:radial-gradient(circle at 70% 30%,rgba(59,130,246,.04) 0%,transparent 40%),radial-gradient(circle at 30% 70%,rgba(16,185,129,.04) 0%,transparent 40%)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;position:relative;z-index:1}.skill-item{background:var(--bg-light);padding:1.5rem;border-radius:var(--border-radius-lg);transition:var(--transition);position:relative;overflow:hidden}.skill-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(16,185,129,.1),transparent);transition:left .6s ease}.skill-item:hover:before{left:100%}.skill-item:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-lg);background:var(--bg-white)}.skill-info{display:flex;justify-content:space-between;margin-bottom:.5rem}.skill-name{font-weight:600;color:var(--text-dark)}.skill-percentage{font-weight:600;color:var(--primary-blue)}.skill-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.skill-progress{height:100%;background:var(--secondary-gradient);border-radius:4px;transition:width 1s ease-in-out}.projects{padding:6rem 0;background:linear-gradient(135deg,#f8fafc,#f0fdf4,#ecfeff);position:relative}.projects:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 60%,rgba(16,185,129,.12) 0%,transparent 50%),radial-gradient(circle at 60% 40%,rgba(59,130,246,.12) 0%,transparent 50%),radial-gradient(circle at 20% 20%,rgba(34,197,94,.08) 0%,transparent 40%);pointer-events:none}.dark .projects{background:linear-gradient(135deg,#061421,#071b34,#041221)}.dark .projects:before{background:radial-gradient(circle at 40% 60%,rgba(16,185,129,.06) 0%,transparent 40%),radial-gradient(circle at 60% 40%,rgba(59,130,246,.06) 0%,transparent 40%),radial-gradient(circle at 20% 20%,rgba(34,197,94,.04) 0%,transparent 30%)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:2.5rem;position:relative;z-index:1}.project-card{background:var(--bg-white);border-radius:var(--border-radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:var(--transition-slow);position:relative;border:1px solid rgba(0,0,0,.05)}.dark .project-card{border-color:#ffffff0d}.project-card:before{content:"";position:absolute;inset:0;background:var(--accent-gradient);opacity:0;transition:opacity .3s ease;z-index:1}.project-card:hover:before{opacity:.05}.project-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:#10b98133}.project-image{position:relative;height:220px;overflow:hidden;z-index:2}.project-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow);filter:grayscale(.2) brightness(.95)}.project-card:hover .project-image img{transform:scale(1.08);filter:grayscale(0) brightness(1)}.project-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#10b981e6,#3b82f6e6);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);transform:scale(1.1)}.project-card:hover .project-overlay{opacity:1;transform:scale(1)}.project-content{padding:2rem;z-index:2;position:relative}.project-content h3{font-size:1.35rem;font-weight:700;margin-bottom:.75rem;color:var(--text-dark);letter-spacing:-.01em}.project-content p{color:var(--text-light);margin-bottom:1.25rem;line-height:1.7;font-size:.98rem}.project-technologies{display:flex;flex-wrap:wrap;gap:.6rem}.tech-tag{background:var(--accent-gradient);color:var(--text-white);padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;letter-spacing:.02em;box-shadow:0 2px 4px #0000001a;transition:var(--transition)}.tech-tag:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.contact{padding:6rem 0;background:var(--dark-gradient);color:var(--text-white)}.contact .section-title{color:var(--text-white);background:linear-gradient(135deg,#10b981,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.contact-info h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-white)}.contact-info p{color:#fffc;margin-bottom:2rem;line-height:1.6}.contact-details{margin-bottom:2rem}.contact-item{margin-bottom:1rem;color:#ffffffe6}.contact-item strong{color:var(--text-white)}.social-links{display:flex;gap:1rem}.social-link{color:var(--text-white);text-decoration:none;padding:.5rem 1rem;border:2px solid rgba(255,255,255,.3);border-radius:var(--border-radius);transition:var(--transition)}.social-link:hover{background:#ffffff1a;transform:translateY(-2px)}.contact-form{background:#ffffff1a;padding:2.5rem;border-radius:var(--border-radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow-lg)}.form-group{margin-bottom:1.75rem}.form-group input,.form-group textarea{width:100%;padding:1.1rem 1.25rem;border:2px solid rgba(255,255,255,.2);border-radius:var(--border-radius);background:#ffffff14;color:var(--text-white);font-size:1rem;transition:var(--transition);font-family:inherit}.form-group input::placeholder,.form-group textarea::placeholder{color:#ffffff80}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--light-green);background:#ffffff26;box-shadow:0 0 0 4px #10b9811a}.footer{background:#1a1f2e;color:var(--text-white);text-align:center;padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.1)}.dark .footer{background:#050911;border-top-color:#ffffff0d}.footer p{margin:0;opacity:.9}@media (max-width: 768px){.nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background:var(--bg-white);width:100%;text-align:center;transition:var(--transition);box-shadow:var(--shadow-lg);padding:2rem 0}.nav-menu.active{left:0}.nav-toggle{display:flex}.hero-content{grid-template-columns:1fr;text-align:center}.hero-title{font-size:2.8rem}.hero-subtitle{font-size:1.5rem}.hero-description{font-size:1.1rem}.section-title{font-size:2.5rem}.contact-content{grid-template-columns:1fr;gap:3rem}.image-container{width:280px;height:280px}.hero-buttons{justify-content:center}.about-stats,.projects-grid,.skills-grid{grid-template-columns:1fr}}@media (max-width: 480px){.container{padding:0 1rem}.nav-container,.hero-container{padding:1rem}.hero-title{font-size:2.2rem}.hero-subtitle{font-size:1.25rem}.section-title{font-size:2rem}.btn-primary,.btn-secondary{padding:.9rem 1.75rem;font-size:.95rem}.image-container{width:240px;height:240px}.projects-grid{grid-template-columns:1fr;gap:1.5rem}.stat{padding:2rem 1.5rem}}html{scroll-behavior:smooth}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .8s ease-out}.dark{--primary-gradient: linear-gradient(135deg, #081823 0%, #0f2746 50%, #071022 100%);--secondary-gradient: linear-gradient(135deg, #0ea5a4 0%, #2563eb 100%);--accent-gradient: linear-gradient(135deg, #0ea5a4 0%, #60a5fa 100%);--dark-gradient: linear-gradient(135deg, #04221a 0%, #0f2b4a 100%);--primary-green: #06b6a4;--primary-blue: #60a5fa;--light-green: #34d399;--light-blue: #60a5fa;--dark-green: #08332a;--dark-blue: #0b2440;--text-dark: #e6eef8;--text-light: #9aa6b2;--text-white: #ffffff;--bg-light: #0a1628;--bg-white: #0d1b2a;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .6);--shadow-md: 0 6px 12px -2px rgba(0, 0, 0, .6);--shadow-lg: 0 14px 24px -4px rgba(0, 0, 0, .6);--shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, .65);--shadow-glow: 0 0 30px rgba(16, 185, 129, .25)}#root{width:100%;min-height:100vh;margin:0;padding:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}