html{scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#e0e0e0}.app{min-height:100vh;background:linear-gradient(135deg,#101010,#272727,#242323,#595656,#313131,#262626,#101010);background-size:400% 400%;animation:gradientAnimation 16s ease infinite;transition:filter .3s ease}@keyframes gradientAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.navbar{position:fixed;top:0;width:100%;background-color:#1a1a1a;z-index:50}.navbar-brand{display:flex;align-items:center;height:100%}.navbar-logo{max-height:60px;width:auto;-o-object-fit:contain;object-fit:contain;padding-right:36px}.navbar-content{display:flex;align-items:center;justify-content:space-between;height:64px}.navbar-welcome{font-size:1.25rem;font-weight:600;color:#007bff;text-align:left;flex:1;white-space:nowrap;letter-spacing:.001em}.navbar-welcome span{display:inline-block;margin-right:.2em}.navbar-menu{display:flex;gap:32px}.navbar-item{font-size:.875rem;font-weight:500;color:#e0e0e0;text-decoration:none;transition:color .2s}.navbar-item:hover{color:#007bff}.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}.toggle-icon{width:24px;height:24px;color:#e0e0e0}.navbar-mobile{display:none;background-color:#1a1a1a;padding:16px}.navbar-mobile-item{display:block;padding:8px 16px;font-size:1rem;font-weight:500;color:#e0e0e0;text-decoration:none}.navbar-mobile-item:hover{background-color:#007bff;color:#e0e0e0}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:100}.popup-section-title{position:absolute;top:15px;padding:8px 16px;background-color:#2c2c2c;color:#007bff;font-size:1.25rem;font-weight:600;border-radius:8px;text-align:center;z-index:101}.popup-content{background:linear-gradient(135deg,#1a1a1a,#2c2c2c);border-radius:20px;padding:24px;bottom:-30px;max-width:700px;width:90%;position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:102}.popup-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#007bff;font-size:1.25rem;cursor:pointer;transition:transform .3s}.popup-close:hover{transform:scale(1.2)}.popup-title{font-size:1.5rem;font-weight:600;color:#007bff;margin-bottom:16px}.popup-list{list-style:none;color:#e0e0e0}.popup-item{padding:12px 0;display:flex;flex-direction:column;gap:8px}.popup-item:before{content:"✓";color:#007bff;margin-right:8px;display:inline-block}.popup-item-title{font-size:1.1rem;font-weight:600;color:#e0e0e0}.popup-item-description{font-size:.9rem;color:#b0b0b0}.popup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%}.project-card{border:2px solid transparent;border-radius:8px;padding:16px;cursor:pointer;transition:border-color .3s,transform .3s}.project-card:hover{border-color:#007bff;transform:scale(1.05)}.project-card-image{width:100%;max-height:150px;-o-object-fit:contain;object-fit:contain;border-radius:8px;margin-bottom:12px}.project-card-title{font-size:1rem;font-weight:600;color:#e0e0e0;text-align:center}.project-cover-image{width:250px;height:200px;-o-object-fit:contain;object-fit:contain;margin:12px auto;border-radius:15px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:transform .9s ease,filter .9s ease}.project-cover-image:hover{transform:scale(1.1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}.popup-media-container{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.popup-media{width:100%;max-height:400px;-o-object-fit:contain;object-fit:contain;border-radius:8px}.popup-description{font-size:.9rem;color:#e0e0e0;text-align:center;line-height:1.6}.popup-index-indicator{font-size:.9rem;color:#007bff;font-weight:500;text-align:center}.popup-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#007bff;font-size:2rem;cursor:pointer;transition:transform .3s}.popup-arrow:hover{transform:translateY(-50%) scale(1.2)}.popup-arrow-left{left:16px}.popup-arrow-right{right:16px}.popup-back{position:absolute;top:16px;left:16px;background:none;border:none;color:#007bff;font-size:1.25rem;cursor:pointer;transition:transform .3s}.popup-back:hover{transform:scale(1.2)}.video-wrapper{position:relative;width:100%}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#007bff;font-size:.9rem;display:none}.video-wrapper video:not([src])+.video-loading,.video-wrapper video[style*="opacity: 0"]+.video-loading{display:block}.video-time{font-size:.9rem;color:#e0e0e0;font-weight:500;text-align:center;margin-top:8px}.container{max-width:1200px;margin:0 auto;padding:0 16px}.content{padding-top:64px}.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 0;transform-origin:center;opacity:1;transform:translateY(0);transition:opacity .5s ease-out,transform .5s ease-out}.section-hidden{opacity:0;transform:translateY(20px)}.section-visible{opacity:1;transform:translateY(0)}.section-content{text-align:center;max-width:1200px;width:100%;border-radius:20px;padding:0 16px}.section-title{font-size:2.5rem;font-weight:700;color:#007bff;margin-bottom:24px;text-align:center;position:relative}.section-text{font-size:1.125rem;color:#e0e0e0;margin-bottom:16px}.highlight{color:#007bff;font-weight:600}.skills-content{padding:40px 16px;background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent);position:relative;overflow:hidden}.skills-section-title{font-size:1.5rem;font-weight:600;color:#007bff;margin-bottom:16px;margin-top:24px;text-align:center}.skills-scroller{width:100%;overflow:hidden}.skills-grid{display:flex;flex-wrap:nowrap;gap:32px;width:-moz-fit-content;width:fit-content;will-change:transform;padding:16px 0}.skills-grid-top{animation:scroll-left-to-right 60s linear infinite}.skills-grid-bottom{animation:scroll-right-to-left 60s linear infinite}@keyframes scroll-left-to-right{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes scroll-right-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.skills-grid:hover{animation-play-state:paused}.skill-item{flex:0 0 auto;width:100px;min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px;background:transparent;box-shadow:none;text-align:center;position:relative;overflow:visible;opacity:1}.skill-item:hover{filter:drop-shadow(0 0 12px rgba(255,255,255,.7))}.skill-icon{font-size:4rem;background:none;fill:currentColor;opacity:1}.skill-name{font-size:.8rem;color:#e0e0e0;margin-top:8px;text-align:center;line-height:1.2;max-width:100px;white-space:normal}.tooltip{position:absolute;top:50%;right:calc(100% + 12px);transform:translateY(-50%) translate(-10px) scale(.95);background:#2c2c2c;color:#e0e0e0;font-size:1rem;font-weight:500;font-family:Roboto,sans-serif;padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.3);box-shadow:0 6px 16px #fff3;white-space:nowrap;max-width:200px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;z-index:30}.skill-item:hover .tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translate(0) scale(1.05)}.tooltip:after{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);border:8px solid transparent;border-left-color:#2c2c2c}.skill-link{display:block;text-decoration:none;color:inherit;font-size:1rem;font-weight:600;transition:color .3s ease,text-shadow .3s ease;outline:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.skill-link:hover,.skill-link:focus,.skill-link:active{color:inherit;text-decoration:none}.services-content{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:0 16px}.services-left,.services-right{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:600px}.services-logo{font-size:4rem;color:#007bff;margin-bottom:16px}.services-title{font-size:2rem;font-weight:700;color:#e0e0e0;margin-bottom:16px;transition:color .3s ease}.services-title:hover{color:#007bff}.services-text{font-size:1rem;color:#e0e0e0;margin-bottom:32px;padding:0 24px;line-height:1.8}.services-button{padding:12px 24px;background-color:#007bff;color:#e0e0e0;border:none;border-radius:30px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s,transform .3s;min-height:44px}.services-button:hover{background-color:#0056b3;transform:scale(1.05)}.about-content{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:0 16px}.about-left{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.about-image{height:450px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));position:relative;z-index:2}.about-image:before{content:"";position:absolute;inset:-10px;background-color:#ffc107;border-radius:10px;z-index:1}.about-right{flex:1;text-align:left;max-width:600px}.about-list{list-style:none;margin-top:16px;color:#e0e0e0;text-align:left}.about-list li{padding:8px 0}.home-content{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:0 16px}.home-left{flex:1;text-align:left;max-width:600px}.home-greeting{font-size:2rem;font-weight:500;color:#e0e0e0;margin-bottom:8px}.home-name{font-size:3rem;font-weight:700;color:#e0e0e0;margin-bottom:8px}.home-title{font-size:1.8rem;font-weight:500;color:#e0e0e0;margin-bottom:16px;display:flex;align-items:center;gap:4px}.cursor{display:inline-block;width:2px;height:1.5rem;background-color:#007bff;margin-left:4px;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.home-description{font-size:1.125rem;color:#e0e0e0;margin-bottom:24px}.home-socials{display:flex;gap:16px;margin-bottom:24px}.social-icon{color:#e0e0e0;font-size:1.5rem;transition:color .2s}.social-icon:hover{color:#007bff}.home-button{display:inline-block;padding:12px 24px;background-color:#007bff;color:#e0e0e0;text-decoration:none;border-radius:30px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s,transform .3s,box-shadow .3s;border:none;outline:none;-webkit-tap-highlight-color:transparent;min-height:44px}.home-button:hover{background-color:#0056b3;transform:scale(1.05);box-shadow:0 4px 12px #007bff4d}.home-button:focus{box-shadow:0 0 0 3px #007bff80}.home-right{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.home-image{height:500px;margin:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));position:relative;z-index:2}.home-image:before{content:"";position:absolute;inset:-10px;background-color:#ffc107;border-radius:10px;z-index:1}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px}.project-section{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px}.project-section-title{font-size:1.5rem;font-weight:600;color:#007bff;margin-bottom:12px}.project-description{font-size:.9rem;color:#e0e0e0;margin-bottom:16px;line-height:1.6}.project-button{padding:10px 20px;background-color:#007bff;color:#e0e0e0;border:none;border-radius:30px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .3s,transform .3s;min-height:44px}.project-button:hover{background-color:#0056b3;transform:scale(1.05)}.contact-content{padding:80px 16px;max-width:1200px;margin:0 auto;color:#e0e0e0;text-align:center}.contact-header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}.contact-form{display:flex;flex-direction:column;gap:16px;max-width:500px;margin:0 auto;background:linear-gradient(135deg,#1a1a1a,#2c2c2c);padding:24px;border:2px solid transparent;border-radius:12px;transition:border-color .3s ease,box-shadow .3s ease}.contact-form:hover{border-color:#007bff;box-shadow:0 8px 16px #007bff33}.form-input,.form-textarea{padding:12px;border:1px solid #4b5563;border-radius:4px;font-size:1rem;color:#e0e0e0;background-color:#ffffff1a;transition:border-color .3s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:#007bff}.form-textarea{min-height:120px;resize:vertical}.form-button{padding:12px 24px;background-color:#007bff;color:#e0e0e0;border:none;border-radius:30px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .3s ease;position:relative;overflow:hidden;min-height:44px}.form-button:disabled{background-color:#0056b3;cursor:not-allowed;transform:none}.form-button:hover:not(:disabled){background-color:#0056b3;transform:scale(1.05)}.form-button:after{content:"Sending...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease}.form-button.loading:after{opacity:1}.form-button.loading span{opacity:0}.status-message{margin-top:16px;font-size:.9rem;font-weight:500}.status-message.success{color:#007bff}.status-message.error{color:#f44}.footer{background:linear-gradient(135deg,#1a1a1a,#2c2c2c);padding:40px 16px;text-align:center;border-top:2px solid #007bff}.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}.footer-socials{display:flex;gap:16px}.footer-text{font-size:.9rem;color:#b0b0b0}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;min-height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;overflow-y:auto}.modal-content{background:linear-gradient(135deg,#1a1a1a,#2c2c2c);border:2px solid #007bff;border-radius:12px;padding:24px;max-width:800px;width:90%;max-height:80vh;overflow-y:auto;margin:auto;position:relative;color:#e0e0e0}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#007bff;font-size:1.25rem;cursor:pointer;transition:transform .3s ease}.modal-close:hover{transform:scale(1.2)}.modal-title{font-size:1.5rem;font-weight:600;color:#007bff;margin-bottom:16px;text-align:center}.cv-iframe{width:100%;min-height:60vh;max-height:80vh;border:none;border-radius:8px;margin-bottom:16px;background:#fff}.modal-fallback{font-size:.9rem;color:#e0e0e0;text-align:center;margin-bottom:16px}.modal-fallback a{color:#007bff;text-decoration:underline}.modal-fallback a:hover{color:#0056b3}@media (max-width: 768px){.navbar-menu{display:none}.navbar-toggle,.navbar-mobile{display:block}.navbar-mobile-item{padding:12px 16px}.navbar-logo{max-height:60px}.navbar-welcome{display:none}.section-title{font-size:2rem}.section-text{font-size:1rem}.section{min-height:100vh;padding:40px 0}.section-hidden{transform:translateY(10px)}.section-visible{transform:translateY(0)}.section-content{padding:0 8px}.skills-content{padding:24px 8px}.skills-section-title{font-size:1.25rem;margin-bottom:12px;margin-top:16px}.skills-scroller{gap:16px}.skills-grid{gap:24px;animation-duration:55s}.skill-item{width:80px;min-height:100px;padding:12px}.skill-icon{font-size:3.5rem}.skill-name{font-size:.7rem;margin-top:6px}.tooltip{font-size:.9rem;padding:8px 12px;max-width:180px;right:calc(100% + 12px);white-space:normal;line-height:1.4}.home-content,.about-content,.services-content,.projects-content,.contact-content{flex-direction:column;align-items:center;text-align:center}.home-left,.about-right,.services-left,.services-right{text-align:center;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.home-right,.about-left,.services-left,.services-right{margin-top:24px}.home-name{font-size:2.5rem}.home-greeting,.home-title{font-size:1.25rem;justify-content:center}.home-socials{justify-content:center}.home-image{height:320px}.home-image:before{inset:-8px}.about-image{margin-right:-40px;height:300px}.about-image:before{inset:-8px}.services-logo{font-size:3rem}.services-title{font-size:1.5rem}.services-text{font-size:.9rem;padding:0 16px;line-height:1.7}.services-button{padding:10px 20px;font-size:.9rem;min-height:44px}.popup-section-title{top:10px;font-size:1rem;padding:6px 12px;border-radius:8px}.popup-content{padding:16px;max-width:90vw;max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.popup-title{font-size:1.25rem}.popup-item{font-size:.9rem}.popup-item-title{font-size:1rem}.popup-item-description{font-size:.8rem}.projects-grid{grid-template-columns:1fr;gap:16px}.project-section-title{font-size:1.25rem}.project-description{font-size:.8rem}.project-button{padding:8px 16px;font-size:.8rem;min-height:44px}.project-cover-image{max-height:150px}.popup-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.project-card-image{max-height:100px;-o-object-fit:contain;object-fit:contain}.project-card-title{font-size:.9rem}.popup-media{max-height:300px}.popup-description,.popup-index-indicator{font-size:.8rem}.popup-arrow{font-size:1.5rem}.popup-arrow-left{left:8px}.popup-arrow-right{right:8px}.popup-back{top:16px;left:8px}.video-loading,.video-time{font-size:.8rem}.contact-content{padding:40px 8px}.contact-header{margin-bottom:24px}.contact-form{padding:16px;max-width:90%}.form-input,.form-textarea{font-size:.9rem}.form-button{padding:10px 20px;font-size:.9rem;min-height:44px}.status-message{font-size:.8rem}.footer{padding:24px 8px}.footer-text{font-size:.8rem}.footer-socials{gap:12px}.social-icon{font-size:1.25rem}.modal-content{max-width:95%;padding:16px;max-height:80vh;overflow-y:auto}.modal-title{font-size:1.4rem}.cv-iframe{min-height:50vh;max-height:70vh}.modal-fallback{font-size:.8rem}.home-button{padding:10px 20px;font-size:.9rem}}@media (max-width: 480px){.section-title{font-size:1.8rem}.services-logo{font-size:2.5rem}.popup-content{max-width:95vw;max-height:50vh}.popup-section-title{top:190px;font-size:.9rem;border-radius:8px}.popup-grid{grid-template-columns:1fr}.project-card-image{max-height:80px}.popup-media{max-height:250px}.navbar-logo{max-height:60px}.navbar-welcome{display:none}.skills-section-title{font-size:1.1rem;margin-bottom:8px;margin-top:12px}.skills-scroller{gap:12px}.skills-grid{gap:16px;animation-duration:55s}.skill-item{width:60px;min-height:80px;padding:10px}.skill-icon{font-size:3rem}.skill-name{font-size:.65rem;margin-top:4px}.tooltip{font-size:.85rem;padding:8px 12px;max-width:140px;right:calc(100% + 10px);white-space:normal;line-height:1.4}.home-image{height:300px}.home-image:before{inset:-6px}.project-cover-image{max-height:120px}}