:root{--color-primary: #1A237E;--color-primary-light: #534bae;--color-primary-dark: #000051;--color-accent: #FF5722;--color-accent-light: #ff8a50;--color-accent-dark: #c41c00;--color-bg: #F5F7FA;--color-bg-alt: #FFFFFF;--color-text: #2D3748;--color-text-light: #4A5568;--color-text-lighter: #718096;--color-border: #E2E8F0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--border-radius-sm: .25rem;--border-radius: .5rem;--border-radius-lg: 1rem;--transition: all .3s ease;--container-width: 1200px;--header-height: 80px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.skill-box,.project-card,.service-card{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Poppins,sans-serif;font-size:16px;line-height:1.6;color:var(--color-text);background-color:var(--color-bg);padding-top:var(--header-height)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-bottom:var(--space-4)}p{margin-bottom:var(--space-4)}a{text-decoration:none;color:inherit;transition:var(--transition)}ul{list-style:none}img{max-width:100%;height:auto;display:block}.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 var(--space-4)}.section-padding{position:relative;padding:var(--space-16) 0;border-bottom:1px solid rgba(0,0,0,.05)}.section-padding:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to right,transparent,var(--color-primary-light),transparent)}.section-padding:before{content:"";position:absolute;top:0;left:0;width:100%;height:15px;background:linear-gradient(135deg,var(--color-bg) 25%,transparent 25%) -10px 0,linear-gradient(225deg,var(--color-bg) 25%,transparent 25%) -10px 0,linear-gradient(315deg,var(--color-bg) 25%,transparent 25%),linear-gradient(45deg,var(--color-bg) 25%,transparent 25%);background-size:20px 20px;background-color:rgba(var(--color-primary-rgb),.05);opacity:.5}section:nth-child(2n){background:linear-gradient(to bottom,var(--color-bg),rgba(var(--color-primary-rgb),.03),var(--color-bg))}.hero{border-bottom:none}.hero:before,.hero:after{display:none}section:last-of-type{border-bottom:none}section:last-of-type:after{display:none}.section-alt{background-color:var(--color-bg-alt)}.btn{display:inline-block;padding:var(--space-3) var(--space-6);border-radius:var(--border-radius);font-weight:500;transition:var(--transition);cursor:pointer;text-align:center}.btn-primary{background-color:var(--color-primary);color:#fff;border:2px solid var(--color-primary)}.btn-primary:hover{background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.btn-outline{background-color:var(--color-primary);color:#fff;border:2px solid var(--color-primary)}.btn-outline:hover{background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.btn-small{padding:var(--space-2) var(--space-4);font-size:.9rem}#header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:var(--transition);height:var(--header-height);background-color:var(--color-primary);color:#fff}.navbar{padding:var(--space-4) 0;transition:var(--transition);height:100%;display:flex;align-items:center;background-color:var(--color-primary)}.scrolled .navbar{padding:var(--space-3) 0;box-shadow:var(--shadow-md)}.navbar .container{display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.8rem;font-weight:700;color:#fff}.logo span{color:var(--color-accent)}.scrolled .logo{color:#fff}.nav-menu{display:flex;align-items:center}.nav-menu li{margin-left:var(--space-6)}.nav-link{color:#fff;font-weight:500;position:relative}.nav-link:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background-color:var(--color-accent);transition:var(--transition)}.nav-link:hover:after,.nav-link.active:after{width:100%}.nav-toggle{display:none;flex-direction:column;cursor:pointer}.nav-toggle span{width:25px;height:3px;background-color:#fff;margin:2px 0;transition:var(--transition)}.hero{min-height:calc(100vh - var(--header-height));background-color:var(--color-primary);color:#fff;position:relative;display:flex;align-items:center;overflow:hidden;padding:var(--space-16) 0}.hero .container{display:flex;align-items:center;justify-content:space-between;height:100%}.hero-content{flex:1;max-width:600px}.hero-image{flex:1;display:flex;justify-content:flex-end;align-items:center}.image-container{width:400px;height:400px;border-radius:50%;overflow:hidden;border:5px solid rgba(255,255,255,.2)}.image-container img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.title{font-size:3.5rem;font-weight:700;margin-bottom:var(--space-4);line-height:1.2}.title span{color:var(--color-accent)}.subtitle{font-size:1.5rem;margin-bottom:var(--space-8);opacity:.9}.hero-buttons{display:flex;gap:var(--space-4)}.scroll-indicator{position:absolute;bottom:var(--space-8);left:50%;transform:translate(-50%);text-align:center}.mouse{width:30px;height:50px;border:2px solid white;border-radius:20px;position:relative}.wheel{width:6px;height:6px;background-color:#fff;border-radius:50%;position:absolute;top:10px;left:50%;transform:translate(-50%);animation:scroll 1.5s infinite}@keyframes scroll{0%{opacity:1;top:10px}to{opacity:0;top:30px}}.about-content{display:flex;align-items:center;gap:var(--space-8)}.about-image{flex:1}.about-image img{border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.about-text{flex:1}.about-text h3{margin-bottom:var(--space-4);color:var(--color-primary)}.skills{margin-top:var(--space-6)}.skills h4{margin-bottom:var(--space-4)}.skill-container{display:flex;flex-direction:column;gap:var(--space-3)}.skill{margin-bottom:var(--space-2)}.skill-name{display:block;margin-bottom:var(--space-1);font-weight:500}.skill-bar{width:100%;height:8px;background-color:var(--color-border);border-radius:var(--border-radius-sm);overflow:hidden}.skill-level{height:100%;background-color:var(--color-accent);border-radius:var(--border-radius-sm)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-6)}.project-card{background-color:#fff;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-md);transition:var(--transition)}.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.project-image{position:relative;height:200px;overflow:hidden}.project-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:var(--transition)}.project-card:hover .project-image img{transform:scale(1.1)}.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1a237ecc;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.project-card:hover .project-overlay{opacity:1}.project-details{text-align:center;color:#fff;padding:var(--space-4)}.project-details h4{margin-bottom:var(--space-2)}.project-details p{margin-bottom:var(--space-4);font-size:.9rem}.project-info{padding:var(--space-4)}.project-info h3{color:var(--color-primary);margin-bottom:var(--space-2)}.project-info p{color:var(--color-text-light);font-size:.9rem;margin-bottom:0}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-6)}.service-card{background-color:#fff;padding:var(--space-6);border-radius:var(--border-radius);box-shadow:var(--shadow-md);text-align:center;transition:var(--transition)}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.service-icon{margin-bottom:var(--space-4);color:var(--color-primary)}.service-card h3{margin-bottom:var(--space-3);color:var(--color-primary)}.service-card p{color:var(--color-text-light);margin-bottom:0}.contact-content{display:flex;gap:var(--space-8)}.contact-info,.contact-form{flex:1}.contact-info h3{color:var(--color-primary);margin-bottom:var(--space-4)}.info-list{margin:var(--space-6) 0}.social-links{display:flex;gap:var(--space-3);margin-top:var(--space-6)}.social-link{width:40px;height:40px;border-radius:50%;background-color:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.social-link:hover{background-color:var(--color-accent);transform:translateY(-3px)}.form-group{margin-bottom:var(--space-4)}label{display:block;margin-bottom:var(--space-2);font-weight:500}input,textarea{width:100%;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-family:inherit;font-size:1rem;transition:var(--transition)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #1a237e33}.footer{background-color:var(--color-primary);color:#fff;padding-top:var(--space-12)}.footer-content{display:flex;justify-content:space-between;margin-bottom:var(--space-8)}.footer-logo{max-width:300px}.footer-logo p{margin-top:var(--space-3);opacity:.8}.footer-links h4{margin-bottom:var(--space-4);position:relative;display:inline-block}.footer-links h4:after{content:"";position:absolute;left:0;bottom:-5px;width:30px;height:2px;background-color:var(--color-accent)}.footer-links ul{display:flex;flex-direction:column;gap:var(--space-2)}.footer-links a{opacity:.8;transition:var(--transition)}.footer-links a:hover{opacity:1;color:var(--color-accent)}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:var(--space-4) 0;text-align:center}.footer-bottom p{margin-bottom:0;font-size:.9rem;opacity:.7}.skills-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-top:var(--space-8);padding:var(--space-4)}.skill-box{background:linear-gradient(145deg,var(--color-bg-alt),var(--color-bg));padding:var(--space-8);border-radius:var(--border-radius-lg);text-align:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px -15px #0000001a,0 5px 15px -10px #0000000d}.skill-box:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--color-primary-rgb),.03));pointer-events:none}.skill-box:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px -15px #00000026,0 10px 20px -10px #0000001a}.skill-box svg{width:64px;height:64px;padding:var(--space-4);margin-bottom:var(--space-4);color:var(--color-primary);transition:all .4s ease;border-radius:50%;background:linear-gradient(135deg,var(--color-bg-alt) 0%,var(--color-bg) 100%);box-shadow:-8px -8px 16px #ffffff1a,8px 8px 16px #0000000d}.skill-box:hover svg{color:var(--color-accent);transform:scale(1.1) rotate(5deg);box-shadow:-12px -12px 24px #fff3,12px 12px 24px #0000001a}.skill-box h4{color:var(--color-text);margin:var(--space-4) 0 var(--space-2);font-size:1.2rem;font-weight:600;position:relative;z-index:1}.skill-box:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}.skill-box:hover:after{transform:scaleX(1)}.skill-box{opacity:0;animation:fadeInUp .6s ease forwards}.skill-box:nth-child(1){animation-delay:.1s}.skill-box:nth-child(2){animation-delay:.2s}.skill-box:nth-child(3){animation-delay:.3s}.skill-box:nth-child(4){animation-delay:.4s}.skill-box:nth-child(5){animation-delay:.5s}.skill-box:nth-child(6){animation-delay:.6s}.skill-box:nth-child(7){animation-delay:.7s}@media (max-width: 768px){.skills-container{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}.skill-box{padding:var(--space-6)}.skill-box svg{width:48px;height:48px}}@media (max-width: 480px){.skills-container{grid-template-columns:1fr}}@media (max-width: 992px){.container{padding:0 var(--space-6)}.title{font-size:2.5rem}.hero .container{flex-direction:column;justify-content:center;text-align:center}.hero-content{margin-bottom:var(--space-8)}.hero-buttons{justify-content:center}.about-content{flex-direction:column}.about-image{margin-bottom:var(--space-6)}.contact-content{flex-direction:column}.contact-info{margin-bottom:var(--space-8)}.footer-content{flex-direction:column;gap:var(--space-6)}}@media (max-width: 768px){.section-title{font-size:2rem}.projects-grid,.services-grid{grid-template-columns:1fr}.nav-menu{position:fixed;top:0;right:-100%;height:100vh;width:250px;background-color:var(--color-primary);flex-direction:column;align-items:flex-start;padding:var(--space-16) var(--space-6);transition:var(--transition);z-index:1000}.nav-menu.active{right:0}.nav-menu li{margin:var(--space-3) 0}.nav-toggle{display:flex;z-index:1001}.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.skills-grid{grid-template-columns:1fr}.skill-item{flex-direction:column;text-align:center;gap:var(--space-2)}.skill-icon{margin:0 auto}.skills-category h3{text-align:center}.skills-category h3:after{left:50%;transform:translate(-50%)}}@media (max-width: 576px){:root{--header-height: 70px}.section-padding{padding:var(--space-10) 0}.container{padding:0 var(--space-4)}.title{font-size:1.75rem;line-height:1.4;margin-bottom:var(--space-6)}.subtitle{font-size:1.1rem}.hero-buttons{flex-direction:column;gap:var(--space-3)}.hero-buttons .btn{width:100%}.image-container{width:280px;height:280px}.hero{padding-top:var(--space-12)}}.about,.projects,.services,.contact{padding:var(--space-16) 0}.service-icon svg,.info-item svg,.social-link svg,.skill-box svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));transform-style:preserve-3d;perspective:1000px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);background:linear-gradient(135deg,var(--color-bg-alt) 0%,var(--color-bg) 100%);padding:var(--space-3);border-radius:50%;box-shadow:-5px -5px 10px #fffc,5px 5px 10px #0000001a,inset -2px -2px 5px #ffffff4d,inset 2px 2px 5px #0000001a}.service-icon svg:hover,.info-item svg:hover,.social-link svg:hover,.skill-box svg:hover{transform:translateY(-5px) rotateX(10deg) rotateY(10deg);box-shadow:-8px -8px 16px #fffc,8px 8px 16px #0003,inset -2px -2px 5px #fff6,inset 2px 2px 5px #0000001a;filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))}.service-icon{position:relative;width:80px;height:80px;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,var(--color-bg-alt),var(--color-bg))}.service-icon:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:linear-gradient(45deg,#ffffff1a,#ffffff80);filter:blur(5px);z-index:-1}.info-item{display:flex;align-items:center;margin-bottom:var(--space-4)}.info-item svg{width:48px;height:48px;padding:var(--space-3);margin-right:var(--space-4);color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg-alt) 0%,var(--color-bg) 100%);border-radius:50%;box-shadow:-5px -5px 10px #fffc,5px 5px 10px #0000001a,inset -2px -2px 5px #ffffff4d,inset 2px 2px 5px #0000001a;transition:all .3s ease}.info-item:hover svg{transform:scale(1.1) translateY(-2px);color:var(--color-accent);box-shadow:-8px -8px 16px #fffc,8px 8px 16px #0003,inset -2px -2px 5px #fff6,inset 2px 2px 5px #0000001a}.info-item span{font-size:1.1rem;color:var(--color-text)}.social-link{position:relative;overflow:visible}.social-link svg{width:32px;height:32px;padding:var(--space-2);color:#fff;background:var(--color-primary);border-radius:50%;transition:all .3s ease;box-shadow:-3px -3px 6px #fffc,3px 3px 6px #0000001a}.social-link:hover svg{transform:translateY(-5px);background:var(--color-accent);box-shadow:-5px -5px 10px #fffc,5px 5px 10px #0003}@media (max-width: 768px){.info-item svg{width:40px;height:40px;padding:var(--space-2)}.social-link svg{width:28px;height:28px}}@media (max-width: 480px){.info-item{flex-direction:row;align-items:center}.info-item svg{width:36px;height:36px;margin-right:var(--space-3)}}.section-header{text-align:center;margin-bottom:var(--space-12);position:relative;padding-bottom:var(--space-8)}.section-title{font-size:2.5rem;color:var(--color-primary);margin-bottom:var(--space-4);position:relative;display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:2px}.section-title:before{content:"";position:absolute;left:50%;bottom:-10px;width:50px;height:3px;background:linear-gradient(to right,var(--color-primary),var(--color-accent));transform:translate(-50%);border-radius:2px}.section-title:after{content:"";position:absolute;left:50%;bottom:-10px;width:100px;height:3px;background:linear-gradient(to right,transparent,var(--color-primary-light),transparent);transform:translate(-50%);border-radius:2px}.section-subtitle{font-size:1.2rem;color:var(--color-text-light);max-width:600px;margin:var(--space-6) auto 0;position:relative;padding-bottom:var(--space-4);font-weight:400;line-height:1.6}.section-subtitle:before{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:30px;height:2px;background:var(--color-accent);border-radius:1px}.section-header:before{content:"";position:absolute;top:-20px;left:50%;transform:translate(-50%);width:150px;height:150px;background:radial-gradient(circle,rgba(var(--color-primary-rgb),.1) 0%,transparent 70%);border-radius:50%;z-index:-1}.section-header{opacity:0;transform:translateY(20px);animation:fadeInUp .6s ease forwards}section.bg-dark .section-title{color:#fff}section.bg-dark .section-subtitle{color:#fffc}@media (max-width: 768px){.section-title{font-size:2rem}.section-subtitle{font-size:1.1rem;padding:0 var(--space-4)}.section-header:before{width:120px;height:120px}}@media (max-width: 480px){.section-title{font-size:1.8rem}.section-subtitle{font-size:1rem}.section-header{margin-bottom:var(--space-8)}.section-header:before{width:100px;height:100px}}.fade-in{opacity:0;animation:fadeIn 1s ease forwards}.fade-in-delay{opacity:0;animation:fadeIn 1s ease forwards .3s}.fade-in-delay-2{opacity:0;animation:fadeIn 1s ease forwards .6s}.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp 1s ease forwards}.fade-in-right{opacity:0;transform:translate(50px);animation:fadeInRight 1s ease forwards .3s}.fade-in-left{opacity:0;transform:translate(-50px);animation:fadeInLeft 1s ease forwards .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.reveal{opacity:0;transform:translateY(30px);transition:all 1s ease}.reveal.active{opacity:1;transform:translateY(0)}.skill-level{width:0;transition:width 1.5s ease-in-out}.project-card{position:relative;overflow:hidden}.project-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s;z-index:1}.project-card:hover:before{left:100%}.btn{position:relative;overflow:hidden;z-index:1}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s;z-index:-1}.btn:hover:before{left:100%}.service-card{transition:transform .3s ease,box-shadow .3s ease}.service-card:hover .service-icon{animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}#header{background-color:transparent;transition:background-color .3s ease,padding .3s ease}#header.scrolled{background-color:var(--color-primary);box-shadow:0 2px 10px #0000001a}.social-link{transition:transform .3s ease,background-color .3s ease}.social-link:hover{transform:translateY(-5px) rotate(360deg)}