.topbar{width:100%;height:70px;background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;border-bottom:1px solid rgba(255,255,255,.1);color:#f9fafb;position:fixed;top:0;z-index:10;transition:all .4s cubic-bezier(.4,0,.2,1)}.topbar.active{background-color:#030712;border-bottom:none}.topbar.active .hamburger span{background-color:#fff!important}.topbar .wrapper{padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:100%}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.topbar .wrapper{padding:0 20px}}.topbar .wrapper .left{display:flex;align-items:center}.topbar .wrapper .left .logo{font-size:28px;font-weight:800;text-decoration:none;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,sans-serif;letter-spacing:-1px}.topbar .wrapper .left .itemContainer{display:flex;align-items:center;margin-left:40px;padding:8px 16px;border-radius:20px;transition:all .3s ease;border:1px solid transparent}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.topbar .wrapper .left .itemContainer{display:none}}.topbar .wrapper .left .itemContainer:hover{background:#ffffff0d;border-color:#ffffff1a}.topbar .wrapper .left .itemContainer .icon{font-size:20px;margin-right:8px;color:#06b6d4}.topbar .wrapper .left .itemContainer span{font-size:14px;font-weight:600;letter-spacing:.5px}.topbar .wrapper .left .itemContainer span a{text-decoration:none;color:inherit}.topbar .wrapper .right .hamburger{width:30px;height:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.topbar .wrapper .right .hamburger span{width:100%;height:2px;background-color:#f9fafb;transform-origin:left;transition:all .4s ease}.intro{background-color:#030712;display:flex;overflow:hidden;position:relative;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px}.intro:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,transparent 0%,#030712 80%);pointer-events:none}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro{flex-direction:column;align-items:center;padding-top:20px}}.intro .left{flex:.5;display:flex;justify-content:center;align-items:center;z-index:1}.intro .left .imgContainer{width:380px;height:380px;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#06b6d4,#6366f1);padding:5px;animation:morph 8s ease-in-out infinite;box-shadow:0 0 60px #06b6d433}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro .left .imgContainer{width:260px;height:260px;margin-top:40px}}.intro .left .imgContainer img{width:100%;height:100%;object-fit:cover;border-radius:inherit;border:8px solid #030712}@keyframes morph{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%}to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}.intro .right{flex:.5;position:relative;z-index:2}.intro .right .wrapper{width:100%;height:100%;padding-left:50px;display:flex;flex-direction:column;justify-content:center}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro .right .wrapper{align-items:center;text-align:center;padding:40px 20px}}.intro .right .wrapper h2{font-size:24px;font-weight:500;color:#06b6d4;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase}.intro .right .wrapper h1{font-size:72px;margin:10px 0;font-weight:800;color:#fff;line-height:1.1}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro .right .wrapper h1{font-size:44px}}.intro .right .wrapper h3{font-size:32px;color:#9ca3af;margin-top:10px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro .right .wrapper h3{font-size:22px}}.intro .right .wrapper h3 span{font-size:inherit;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.intro .right .wrapper h3 .ityped-cursor{animation:blink 1s infinite;color:#06b6d4}@keyframes blink{50%{opacity:0}}.intro .right .scroll-down{position:absolute;bottom:40px;left:50px;display:flex;align-items:center;gap:15px;text-decoration:none;color:#9ca3af;font-weight:500;font-size:14px;transition:all .3s ease}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.intro .right .scroll-down{left:50%;transform:translate(-50%);bottom:20px}}.intro .right .scroll-down:hover{color:#06b6d4;transform:translateY(5px)}.intro .right .scroll-down .mouse{width:24px;height:40px;border:2px solid #9ca3af;border-radius:12px;position:relative}.intro .right .scroll-down .mouse:before{content:"";position:absolute;width:4px;height:8px;background:#06b6d4;left:50%;top:8px;transform:translate(-50%);border-radius:2px;animation:scrollMouse 2s infinite}@keyframes scrollMouse{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,15px);opacity:0}}.experience{background-color:transparent;display:flex;flex-direction:column;align-items:center;padding:100px 0;position:relative}.experience h1{font-size:48px;margin-bottom:60px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,sans-serif}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.experience h1{font-size:32px;margin-bottom:30px}}.experience .container{width:90%;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;justify-content:center}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.experience .container{grid-template-columns:1fr;width:95%}}.experience .container .card{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;border-radius:24px;padding:35px;display:flex;flex-direction:column;gap:20px;transition:all .4s ease;position:relative;overflow:hidden}.experience .container .card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#06b6d4,#6366f1);opacity:0;transition:opacity .3s ease}.experience .container .card:hover{transform:translateY(-10px);background:#ffffff0d;border-color:#06b6d44d}.experience .container .card:hover:before{opacity:1}.experience .container .card:hover .top img.user{border-color:#06b6d4;transform:scale(1.05)}.experience .container .card .top{display:flex;align-items:center;justify-content:space-between}.experience .container .card .top img.user{height:64px;width:64px;border-radius:16px;object-fit:cover;border:2px solid rgba(255,255,255,.1);transition:all .3s ease;background:#fff;padding:5px}.experience .container .card .top .icon{color:#06b6d4;font-size:24px;opacity:.6}.experience .container .card .center{font-size:15px;color:#9ca3af;line-height:1.7;flex-grow:1;border-left:2px solid rgba(6,182,212,.2);padding-left:15px}.experience .container .card .bottom{display:flex;flex-direction:column;gap:4px}.experience .container .card .bottom h3{font-size:20px;color:#f9fafb;font-weight:700;font-family:Outfit,sans-serif}.experience .container .card .bottom h4{color:#06b6d4;font-size:14px;font-weight:600;letter-spacing:.5px}.experience .container .card .bottom h5{color:#9ca3af;font-size:12px;font-weight:500}.contact{background-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 0;position:relative}.contact .container{width:90%;max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.contact .container{grid-template-columns:1fr;gap:40px}}.contact .container .contact-info{display:flex;flex-direction:column;gap:20px}.contact .container .contact-info h1{font-size:56px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,sans-serif}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.contact .container .contact-info h1{font-size:40px;text-align:center}}.contact .container .contact-info .subtitle{font-size:18px;color:#9ca3af;margin-bottom:20px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.contact .container .contact-info .subtitle{text-align:center}}.contact .container .contact-info .info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}.contact .container .contact-info .info-cards .card{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;text-decoration:none;padding:18px;border-radius:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease}.contact .container .contact-info .info-cards .card:hover{transform:translate(10px);background:#ffffff14;border-color:#06b6d4}.contact .container .contact-info .info-cards .card:hover .icon-box{background:#06b6d4;color:#030712}.contact .container .contact-info .info-cards .card .icon-box{width:44px;height:44px;background:#ffffff0d;border-radius:12px;display:flex;justify-content:center;align-items:center;color:#06b6d4;transition:all .3s ease;flex-shrink:0}.contact .container .contact-info .info-cards .card .icon-box .icon{font-size:20px}.contact .container .contact-info .info-cards .card .details{display:flex;flex-direction:column;overflow:hidden}.contact .container .contact-info .info-cards .card .details h3{font-size:14px;color:#fff;font-weight:700;margin-bottom:2px;font-family:Outfit,sans-serif}.contact .container .contact-info .info-cards .card .details span{font-size:13px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact .container .contact-form{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;padding:50px;border-radius:32px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.contact .container .contact-form{padding:30px}}.contact .container .contact-form h2{font-size:28px;margin-bottom:35px;color:#fff;font-family:Outfit,sans-serif;font-weight:700}.contact .container .contact-form form{display:flex;flex-direction:column;gap:20px}.contact .container .contact-form form .input-group{display:flex;flex-direction:column;gap:8px}.contact .container .contact-form form .input-group label{font-size:14px;font-weight:600;color:#9ca3af;margin-left:4px}.contact .container .contact-form form .input-group input,.contact .container .contact-form form .input-group textarea{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px;color:#fff;font-size:15px;transition:all .3s ease}.contact .container .contact-form form .input-group input:focus,.contact .container .contact-form form .input-group textarea:focus{outline:none;border-color:#06b6d4;background:#ffffff14}.contact .container .contact-form form .input-group textarea{height:120px;resize:none}.contact .container .contact-form form button{margin-top:10px;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,#06b6d4,#6366f1);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 20px #0003}.contact .container .contact-form form button:hover{transform:translateY(-2px);box-shadow:0 15px 25px #0000004d;filter:brightness(1.1)}.contact .container .contact-form form button:active{transform:translateY(0)}.portfolioList{font-size:14px;font-weight:600;padding:10px 24px;border-radius:30px;cursor:pointer;color:#9ca3af;transition:all .4s ease;letter-spacing:.5px;white-space:nowrap}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolioList{padding:8px 16px;font-size:12px}}.portfolioList:hover{color:#fff;background-color:#ffffff0d}.portfolioList.active{background:linear-gradient(135deg,#06b6d4,#6366f1);color:#fff;box-shadow:0 10px 20px #0003}.portfolio{background-color:transparent;display:flex;flex-direction:column;align-items:center;padding:100px 0}.portfolio h1{font-size:48px;margin-bottom:40px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,sans-serif}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio h1{font-size:32px}}.portfolio ul{margin:20px 0 50px;padding:8px;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;border-radius:40px;gap:10px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio ul{margin:10px 0 30px;border-radius:20px;width:95%}}.portfolio .container{width:90%;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;margin-bottom:30px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container{width:95%;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px}}.portfolio .container .item{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;height:200px;border-radius:24px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container .item{height:140px}}.portfolio .container .item h3{position:absolute;bottom:20px;left:20px;font-size:18px;font-weight:700;z-index:2;color:#fff;font-family:Outfit,sans-serif;text-shadow:0 2px 10px rgba(0,0,0,.5);transition:all .3s ease}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container .item h3{font-size:14px;bottom:10px;left:10px}}.portfolio .container .item .project-link{width:100%;height:100%;display:block;text-decoration:none}.portfolio .container .item .project-link img,.portfolio .container .item img{width:100%;height:100%;object-fit:cover;transition:all .5s ease}.portfolio .container .item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:1}.portfolio .container .item:hover{transform:translateY(-10px) scale(1.02);border-color:#06b6d4;box-shadow:0 20px 40px #0006}.portfolio .container .item:hover img{transform:scale(1.1)}.portfolio .container .item:hover h3{transform:translateY(-5px);color:#06b6d4}.portfolio .container.skills,.portfolio .container.tools,.portfolio .container.frameworks,.portfolio .container.certifications{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container.skills,.portfolio .container.tools,.portfolio .container.frameworks,.portfolio .container.certifications{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.portfolio .container.skills .item,.portfolio .container.tools .item,.portfolio .container.frameworks .item,.portfolio .container.certifications .item{height:160px;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container.skills .item,.portfolio .container.tools .item,.portfolio .container.frameworks .item,.portfolio .container.certifications .item{height:120px;padding:15px}}.portfolio .container.skills .item:after,.portfolio .container.tools .item:after,.portfolio .container.frameworks .item:after,.portfolio .container.certifications .item:after{display:none}.portfolio .container.skills .item img,.portfolio .container.tools .item img,.portfolio .container.frameworks .item img,.portfolio .container.certifications .item img{width:60px;height:60px;object-fit:contain;margin-bottom:15px;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container.skills .item img,.portfolio .container.tools .item img,.portfolio .container.frameworks .item img,.portfolio .container.certifications .item img{width:40px;height:40px;margin-bottom:8px}}.portfolio .container.skills .item h3,.portfolio .container.tools .item h3,.portfolio .container.frameworks .item h3,.portfolio .container.certifications .item h3{position:static;font-size:14px;color:#9ca3af;text-align:center;text-shadow:none}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.portfolio .container.skills .item h3,.portfolio .container.tools .item h3,.portfolio .container.frameworks .item h3,.portfolio .container.certifications .item h3{font-size:11px}}.portfolio .container.skills .item:hover,.portfolio .container.tools .item:hover,.portfolio .container.frameworks .item:hover,.portfolio .container.certifications .item:hover{background:#ffffff14}.portfolio .container.skills .item:hover h3,.portfolio .container.tools .item:hover h3,.portfolio .container.frameworks .item:hover h3,.portfolio .container.certifications .item:hover h3{color:#fff;transform:none}.skills{background-color:transparent;display:flex;flex-direction:column;align-items:center;padding:100px 0;position:relative}.skills h1{font-size:48px;margin-bottom:60px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,sans-serif}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills h1{font-size:32px;margin-bottom:30px}}.skills .container{width:85%;max-width:1200px;display:flex;flex-direction:column;gap:40px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container{width:90%;gap:30px}}.skills .container .category{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;padding:30px;border-radius:24px;transition:transform .3s ease}.skills .container .category:hover{transform:translateY(-5px)}.skills .container .category h2{font-size:24px;color:#f9fafb;margin-bottom:30px;text-align:left;font-family:Outfit,sans-serif;font-weight:700;display:flex;align-items:center;gap:10px}.skills .container .category h2:before{content:"";width:4px;height:24px;background:#06b6d4;border-radius:2px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container .category h2{font-size:18px}}.skills .container .category .items{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:25px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container .category .items{gap:15px;justify-content:center}}.skills .container .category .items .item{width:140px;height:140px;background:#ffffff08;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.05)}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container .category .items .item{width:100px;height:100px;padding:10px}}.skills .container .category .items .item img{width:55px;height:55px;object-fit:contain;margin-bottom:12px;filter:grayscale(.5) opacity(.8);transition:all .3s ease}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container .category .items .item img{width:40px;height:40px}}.skills .container .category .items .item h3{font-size:13px;color:#9ca3af;font-weight:600;margin:0;text-align:center;letter-spacing:.5px}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.skills .container .category .items .item h3{font-size:10px}}.skills .container .category .items .item .level-container{width:100%;height:4px;background:#ffffff0d;border-radius:2px;margin-top:15px;overflow:hidden}.skills .container .category .items .item .level-container .level-bar{height:100%;background:linear-gradient(90deg,#06b6d4,#6366f1);border-radius:2px;box-shadow:0 0 10px #06b6d44d}.skills .container .category .items .item:hover{background:#ffffff14;border-color:#06b6d4;transform:scale(1.05) translateY(-5px);box-shadow:0 10px 30px #0003}.skills .container .category .items .item:hover img{filter:grayscale(0) opacity(1);transform:scale(1.1)}.skills .container .category .items .item:hover h3{color:#fff}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app{height:100vh}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.app{height:auto}}.app{background:radial-gradient(circle at 0% 0%,rgba(99,102,241,.15) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(6,182,212,.1) 0%,transparent 50%),radial-gradient(circle at 50% 50%,#030712,#030712);background-attachment:fixed;color:#f9fafb;font-family:Inter,sans-serif}.app .sections{width:100%;height:calc(100vh - 70px);position:relative;top:70px;scroll-behavior:smooth;scroll-snap-type:y mandatory;scrollbar-width:none}.app .sections::-webkit-scrollbar{display:none}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.app .sections{height:auto;scroll-snap-type:none}}.app .sections>*{width:100%;height:calc(100vh - 70px);scroll-snap-align:start;overflow:hidden}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.app .sections>*{height:auto;min-height:calc(100vh - 70px);scroll-snap-align:none;overflow:visible;padding-bottom:2rem}}.menu{width:300px;height:100vh;background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e;background-color:#030712e6;position:fixed;top:0;right:-300px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .6s cubic-bezier(.16,1,.3,1)}.menu.active{right:0;box-shadow:-20px 0 50px #00000080}.menu ul{margin:0;padding:0;list-style:none;font-size:24px;font-weight:700;font-family:Outfit,sans-serif;color:#9ca3af;width:100%;text-align:center}.menu ul li{margin-bottom:30px;transition:all .3s ease}.menu ul li a{font-size:inherit;color:inherit;text-decoration:none;transition:all .3s ease;letter-spacing:1px;text-transform:uppercase}.menu ul li a:hover{color:#fff;background:linear-gradient(135deg,#06b6d4,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.menu ul li:hover{transform:scale(1.1)}