*{margin:0;padding:0}body{min-height:100vh;background:#fffdfa;color:#000;font-family:Outfit,sans-serif;font-optical-sizing:auto;padding-top:100px}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;overflow-x:hidden}:root{word-break:normal;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}h1{padding:0 30px;font-size:65px;font-weight:600;margin:0 0 -40px;line-height:1.05;overflow-wrap:anywhere}@media (max-width: 1014px){h1{font-size:45px;margin-bottom:-30px;overflow-wrap:anywhere}}:root{--nav-h: 100px}#home,#about,#experience,#projects,#contact{scroll-margin-top:calc(var(--nav-h) + 16px)}.navbar{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 20px;position:fixed;top:0;left:0;right:0;background:#fffdfa;height:100px;z-index:1000;box-shadow:0 2px 5px #0000001a}.logo{width:300px}.nav-menu{display:flex;align-items:center;list-style:none;gap:20px;font-size:20px}.nav-menu li{display:flex;flex-direction:row;align-items:center;cursor:pointer;position:relative}.nav-underline{display:flex;margin:auto 10px auto auto;width:50px;opacity:0;transition:opacity .3s ease}.nav-item:hover .nav-underline,.nav-underline.active{opacity:1}.nav-menu li img{display:flex;margin:auto;width:50px}.nav-indicator{width:4px;height:20px;transform:rotate(90deg)}.nav-indicator-placeholder{width:4px;height:20px}.anchor-link{text-decoration:none;color:#000}.nav-mob-close,.nav-mob-open{display:none}@media (max-width: 1100px){.nav-connect{display:none}.logo{width:250px}.nav-mob-open{display:block;position:fixed;right:30px;cursor:pointer;transition:opacity .2s;z-index:1002}.nav-mob-close{display:block;position:absolute;top:20px;right:20px;width:30px;height:30px;cursor:pointer;transition:opacity .2s;color:#fff!important;z-index:1003}.nav-mob-close svg{stroke:#fff}.nav-mob-open:hover,.nav-mob-close:hover{opacity:.7}.nav-menu{position:fixed;right:-350px;align-items:start;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background-color:#000;width:345px;height:100%;z-index:1001;transition:right .5s;padding-top:20px;overflow:visible}.nav-menu li{font-size:28px;padding:50px;flex-direction:row;gap:10px;align-items:center}.nav-underline{width:60px;margin-right:15px}.nav-menu p{color:#fff}.nav-indicator,.nav-indicator-placeholder{width:6px;height:30px}}.hero{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,60px) clamp(16px,5vw,56px);margin:0 auto;max-width:1700px}.hero-content{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap}.hero-right{flex:1;display:flex;justify-content:center;padding-right:0}.hero-right img{width:clamp(220px,40vw,480px);max-width:100%;height:auto}.hero-left{flex:2;display:flex;flex-direction:column;gap:clamp(16px,3vw,36px);padding-left:0}.hero h1{font-size:clamp(34px,6.5vw,75px);line-height:1.08;font-weight:600;margin:0;overflow-wrap:anywhere}.hero h1 span{background:linear-gradient(90deg,#eed880,#f1d14e,#d1b75f);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero p{font-size:clamp(16px,2.2vw,22px);line-height:1.6;margin:0;max-width:65ch}.hero-action{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:clamp(12px,2.2vw,24px);font-size:clamp(16px,2.2vw,20px);font-weight:600;margin-bottom:clamp(20px,6vw,48px)}.hero-connect,.hero-linkedin,.hero-resume{display:inline-flex;justify-content:center;align-items:center;padding:clamp(14px,2.4vw,20px) clamp(22px,3.5vw,36px);border-radius:12px;cursor:pointer;text-decoration:none;border:2px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;letter-spacing:.5px;box-shadow:0 4px 15px #0003;position:relative;overflow:hidden}.hero-connect,.hero-linkedin{background:#000;color:#fff}.hero-resume{background:#fff;color:#000}.hero-connect:before,.hero-linkedin:before,.hero-resume:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(241,209,78,.4),transparent);transition:left .5s ease}@media (hover: hover) and (pointer: fine){.hero-connect:hover:before,.hero-linkedin:hover:before,.hero-resume:hover:before{left:100%}.hero-connect:hover,.hero-linkedin:hover{background:#fff;color:#000;border-color:#f1d14e;transform:translateY(-2px);box-shadow:0 8px 25px #f1d14e4d}.hero-resume:hover{background:linear-gradient(135deg,#f1d14e,#eed880);color:#000;border-color:#d1b75f;transform:translateY(-2px);box-shadow:0 8px 25px #f1d14e66}}@media (max-width: 768px){.hero{padding:clamp(24px,6vw,40px) clamp(16px,5vw,28px)}.hero-content{flex-direction:column;text-align:center}.hero-left{order:1}.hero-action{order:2}.hero-right{order:3}.hero-action,.hero-right{justify-content:center}}.about{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:clamp(32px,6vw,70px) auto;max-width:1500px;padding-inline:clamp(16px,4vw,6%)}.about-title{display:flex;flex-direction:column;align-items:center;text-align:center}.about-title img{display:block;width:90%;max-width:500px;height:auto;margin:0 auto}.about-content{display:flex;flex-direction:column;gap:clamp(32px,6vw,80px);width:80%;margin-inline:auto}.about-para{display:flex;flex-direction:column;gap:20px;font-size:clamp(16px,2.2vw,24px);line-height:1.6;position:relative;overflow-wrap:anywhere}.about-para:before{content:"";position:absolute;top:0;left:0;width:60px;height:4px;border-radius:20px 20px 0 0}.about-skills{display:flex;flex-direction:column;gap:40px}.about-skills h2{font-size:clamp(22px,4vw,32px);font-weight:600;text-align:center;margin-bottom:20px;background:linear-gradient(90deg,#eed880,#f1d14e,#d1b75f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tech-category{display:flex;align-items:center;gap:24px;margin-bottom:30px;flex-wrap:wrap}.tech-category-title{flex:1 1 220px;text-align:left}.tech-category-title h3{font-size:clamp(16px,2.8vw,24px);font-weight:600;color:#000;margin:0;position:relative;padding-bottom:8px}.tech-category-title h3:after{content:"";position:absolute;bottom:0;left:0;width:50px;height:3px;background:linear-gradient(90deg,#f1d14e,#eed880);border-radius:2px}.tech-grid{flex:2 1 480px;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:clamp(12px,2.5vw,25px);justify-items:start;width:100%}.tech-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(12px,2.2vw,20px);border-radius:15px;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid transparent;box-shadow:0 8px 20px #00000014;transition:transform .2s ease,box-shadow .2s ease;min-width:100px;cursor:pointer;position:relative;overflow:hidden}.tech-item img{width:clamp(36px,6vw,50px);height:clamp(36px,6vw,50px);object-fit:contain;transition:transform .2s ease,filter .2s ease;filter:grayscale(20%)}.tech-item span{font-size:clamp(12px,2.2vw,14px);font-weight:600;color:#1a1a1a;text-align:center}@media (hover: hover) and (pointer: fine){.tech-item:hover:before{transform:scaleX(1)}.tech-item:hover img{transform:scale(1.1);filter:grayscale(0%)}.tech-item:hover span{color:#000}}@media (max-width: 1014px){.tech-category{align-items:flex-start}.tech-grid{justify-items:center}}.experience{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:clamp(32px,6vw,70px) auto;padding-inline:clamp(16px,5vw,10%);max-width:1500px}.experience-title{display:flex;flex-direction:column;align-items:center;text-align:center}.experience-title img{display:block;width:min(95%,500px);height:auto}.experience-container{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-bottom:50px;width:100%;max-width:1200px}.experience-format{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(12px,2vw,16px);padding:clamp(20px,3.2vw,32px);border-radius:16px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden}.experience-format h3{font-size:clamp(18px,1.8vw,20px);font-weight:600;color:#1f2937;margin:0;line-height:1.4}.experience-format h2{font-size:clamp(14px,1.6vw,16px);font-weight:500;color:#6b7280;margin:0;letter-spacing:.5px}.experience-format p{color:#4b5563;font-size:clamp(14px,1.6vw,15px);line-height:1.6;margin:0;flex-grow:1;white-space:pre-line;overflow-wrap:anywhere}.experience-format:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#f1d14e;transform:scaleX(0);transition:transform .3s ease}.experience-format:hover:before{transform:scaleX(1)}.experience-format:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #ffbc051a,0 10px 10px -5px #0000000a;border-color:#d1d5db}@media (max-width: 1014px){.experience{margin:40px auto;padding-inline:clamp(16px,6vw,28px)}.experience-container{grid-template-columns:1fr;gap:24px;width:80%}}.projects{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:80px;max-width:1500px;width:100%;margin:70px auto;padding-inline:10%}.projects-title{display:flex;flex-direction:column;align-items:center;gap:0px}.projects-title img{display:block;width:95%;max-width:500px;height:auto}.projects-container{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:20px;margin-top:-40px;width:100%}.project-item{display:flex;flex-direction:column;justify-content:flex-start;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden;border-radius:10px}.project-item:before{content:"";position:absolute;background:#f1d14e;transform:scaleX(0);transition:transform .3s ease}.project-item:hover:before{transform:scaleX(1)}.project-item:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #ffbc051a,0 10px 10px -5px #0000000a;border-color:#d1d5db}.project-item img{width:100%;height:425px;object-fit:cover;transition:all .3s ease}.project-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;padding:20px;transform:translateY(100%);transition:transform .3s ease;overflow-wrap:anywhere}.project-item:hover .project-overlay{transform:translateY(0)}.project-overlay h3{font-size:18px;font-weight:600;margin:0 0 5px;overflow-wrap:anywhere}.project-overlay p{font-size:14px;margin:0;opacity:.9;overflow-wrap:anywhere}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:20px;max-width:800px;max-height:90vh;width:90%;overflow-y:auto;position:relative;animation:slideIn .3s ease;box-shadow:0 25px 50px #00000040;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@keyframes slideIn{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:30px 30px 20px;border-bottom:1px solid #f0f0f0}.modal-header h2{font-size:28px;font-weight:600;margin:0;background:linear-gradient(90deg,#eed880,#f1d14e,#d1b75f);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:anywhere}.modal-close{background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#f5f5f5}.modal-body{padding:30px}.modal-image{margin-bottom:30px;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #0000001a}.modal-image img{width:100%;height:400px;object-fit:cover}.modal-details{display:flex;flex-direction:column;gap:30px}.modal-description h3,.modal-tech h3{font-size:20px;font-weight:600;margin:0 0 15px;color:#1a1a1a}.modal-description p{font-size:16px;line-height:1.6;color:#4a5568;margin:0;overflow-wrap:anywhere}.tech-tags{display:flex;flex-wrap:wrap;gap:10px}.tech-tag{background:linear-gradient(135deg,#f1d14e,#eed880);color:#1a1a1a;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;border:1px solid #d1b75f}.modal-links{display:flex;gap:15px;flex-wrap:wrap}.modal-link{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;border:2px solid}.github-link{background:#000;color:#fff;border-color:#000}.github-link:hover{background:#fff;color:#000;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.demo-link{background:linear-gradient(135deg,#f1d14e,#eed880);color:#1a1a1a;border-color:#d1b75f}.demo-link:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #f1d14e4d}.projects-showmore img{width:25px}.projects-showmore:hover{gap:30px;transition:.6s}@media (max-width: 1014px){.projects{margin:50px auto;padding-inline:24px}.projects-title h1{margin-bottom:-25px}.projects-container{grid-template-columns:1fr;gap:30px;width:70%}.project-item img{height:250px}.modal-content{width:95%;max-height:95vh}.modal-header{padding:20px 20px 15px}.modal-header h2{font-size:24px}.modal-body{padding:20px}.modal-image img{height:250px}.modal-details{gap:20px}.modal-description h3,.modal-tech h3{font-size:18px}.modal-description p{font-size:14px}.modal-links{flex-direction:column}.modal-link{justify-content:center}}.contact{display:flex;flex-direction:column;align-items:center;margin:70px auto;padding-inline:8%;max-width:1500px;width:100%}.contact-title{display:flex;flex-direction:column;align-items:center;gap:0px}.contact-title img{display:block;width:90%;max-width:500px;height:auto;z-index:-1}.contact-section{display:flex;gap:50px;width:100%;border-radius:24px;padding:60px 0;margin-top:-30px}.contact-left{display:flex;flex-direction:column;gap:30px;flex:1}.contact-left h1{font-size:48px;font-weight:600;background:linear-gradient(90deg,#eed880,#f1d14e,#d1b75f);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.2}.contact-left p{color:#fff;font-size:18px;line-height:1.6;margin:0}.contact-details{display:flex;flex-direction:column;gap:24px}.contact-detail{display:flex;align-items:center;gap:16px;padding:16px 0;transition:all .3s ease}.contact-detail:hover{transform:translate(4px)}.contact-detail svg{width:24px;height:24px;opacity:.7}.contact-detail p{color:#374151;font-size:16px;font-weight:500;margin:0}.contact-right{display:flex;flex-direction:column;gap:24px;flex:1}.contact-right label{color:#374151;font-size:16px;font-weight:600;margin-bottom:8px}.contact-right input,.contact-right textarea{border:2px solid #e5e7eb;width:100%;padding:16px 20px;border-radius:12px;background:transparent;color:#374151;font-size:16px;font-family:inherit;transition:all .3s ease;outline:none;box-sizing:border-box}.contact-right input{height:56px}.contact-right textarea{min-height:120px;resize:vertical}.contact-right input:focus,.contact-right textarea:focus{border-color:#6b7280;box-shadow:0 0 0 3px #6b72801a}.contact-right input::placeholder,.contact-right textarea::placeholder{color:#9ca3af}.contact-submit{display:flex;justify-content:center;align-items:center;padding:18px 25px;border-radius:12px;width:30%;font-size:18px;background:linear-gradient(135deg,#000,#1a1a1a);color:#fff;cursor:pointer;text-decoration:none;border:2px solid transparent;transition:all .3s ease;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 15px #0003;position:relative;overflow:hidden;white-space:nowrap;min-width:fit-content}.contact-submit:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(241,209,78,.4),transparent);transition:left .5s ease}.contact-submit:hover:before{left:100%}.contact-submit:hover{background:#fff;color:#000;border:2px solid #f1d14e;transform:translateY(-2px);box-shadow:0 8px 25px #f1d14e4d}.form-result{margin-top:16px;padding:16px 20px;border-radius:12px;font-size:14px;font-weight:500;border:1px solid}.form-result.success{background-color:#ecfdf5;color:#065f46;border-color:#a7f3d0}.form-result.error{background-color:#fef2f2;color:#991b1b;border-color:#fecaca}@media (max-width: 1014px){.contact{margin:40px auto;padding-inline:16px}.contact-section{flex-direction:column;align-items:center;gap:24px;padding:24px 0}.contact-left{flex-direction:column;align-items:center;text-align:center;gap:16px}.contact-left h1{font-size:28px}.contact-left p{font-size:15px;line-height:1.4}.contact-details{flex-direction:column;align-items:center;gap:16px}.contact-detail{justify-content:center;text-align:center;gap:10px;padding:8px 0}.contact-detail p{font-size:14px;line-height:1.3}.contact-right{width:90%;max-width:400px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.contact-right label{text-align:left;width:100%}.contact-right input,.contact-right textarea{width:100%;max-width:400px}.contact-submit{text-align:left;width:25%;font-size:12px;white-space:nowrap}}