*,.blog-posts,.tech-card,::after,::before{box-sizing:border-box}.action-link,.blog-post-item a,.cert-btn,.order-btn,.social-link,a{text-decoration:none}.cert-btn,.navbar,.scroll-to-top-btn{backdrop-filter:blur(10px)}button,input,textarea{background:0 0;font:inherit}.icon-box,.sidebar,article{box-shadow:var(--shadow-1)}.h5,.info-content .name{font-weight:var(--fw-500)}.clients-list,.testimonials-list{scroll-behavior:smooth;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory}.filter-select.active+.select-list,.modal-container.active,.overlay.active{visibility:visible;pointer-events:all}.contacts-list,.project-list,.service-list{grid-template-columns:1fr}.cert-btn.verify-btn::after,.cert-btn.view-btn::after{transition:opacity .3s;opacity:0;content:"";position:absolute}.timeline-item:nth-child(6){animation-delay:.4s}:root{--bg-gradient-onyx:linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);--bg-gradient-jet:linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%),hsl(240, 2%, 13%);--bg-gradient-yellow-1:linear-gradient(to bottom right, #39ff14 0%, hsla(36, 100%, 69%, 0) 50%);--bg-gradient-yellow-2:linear-gradient(135deg, #006400, hsla(35, 100%, 68%, 0) 59.86%),hsl(240, 2%, 13%);--border-gradient-onyx:linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);--text-gradient-yellow:linear-gradient(to right, #39ff14, #39ff14);--jet:hsl(0, 0%, 22%);--onyx:hsl(240, 1%, 17%);--eerie-black-1:hsl(240, 2%, 13%);--eerie-black-2:hsl(240, 2%, 12%);--smoky-black:hsl(0, 0%, 7%);--white-1:hsl(0, 0%, 100%);--white-2:hsl(0, 0%, 98%);--orange-yellow-crayola:#39ff14;--vegas-gold:#00ff00;--light-gray:hsl(0, 0%, 84%);--light-gray-70:hsla(0, 0%, 84%, 0.7);--bittersweet-shimmer:hsl(0, 43%, 51%);--ff-poppins:"Poppins",sans-serif;--fs-1:24px;--fs-2:18px;--fs-3:17px;--fs-4:16px;--fs-5:15px;--fs-6:14px;--fs-7:13px;--fs-8:11px;--fw-300:300;--fw-400:400;--fw-500:500;--fw-600:600;--shadow-1:-4px 8px 24px hsla(0, 0%, 0%, 0.25);--shadow-2:0 16px 30px hsla(0, 0%, 0%, 0.25);--shadow-3:0 16px 40px hsla(0, 0%, 0%, 0.25);--shadow-4:0 25px 50px hsla(0, 0%, 0%, 0.15);--shadow-5:0 24px 80px hsla(0, 0%, 0%, 0.25);--transition-1:0.25s ease;--transition-2:0.5s ease-in-out}*,::after,::before{margin:0;padding:0}li{list-style:none}.project-item.active,a,button,img,ion-icon,span,time{display:block}button{border:none;text-align:left;cursor:pointer}input,textarea{display:block;width:100%}::selection{background:var(--orange-yellow-crayola);color:var(--smoky-black)}:focus{outline-color:var(--orange-yellow-crayola)}html{font-family:var(--ff-poppins)}body{background:var(--smoky-black)}.sidebar,article{background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:20px;padding:15px;z-index:1}.separator{width:100%;height:1px;background:var(--jet);margin:16px 0}.content-card,.icon-box{background:var(--border-gradient-onyx);position:relative;z-index:1}.icon-box{width:30px;height:30px;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:16px;color:var(--orange-yellow-crayola)}.content-card,.info_more-btn,.navbar,.service-item{box-shadow:var(--shadow-2)}.icon-box::before{content:"";position:absolute;inset:1px;background:var(--eerie-black-1);border-radius:inherit;z-index:-1}.icon-box ion-icon{--ionicon-stroke-width:35px}.info_more-btn span,article{display:none}article.active{display:block;animation:.5s backwards fade}@keyframes fade{0%{opacity:0}100%{opacity:1}}.h2,.h3,.h4,.h5{color:var(--white-2);text-transform:capitalize}.h2{font-size:var(--fs-1)}.h3{font-size:var(--fs-2)}.h4{font-size:var(--fs-4)}.h5,.skill .title-wrapper data{font-size:var(--fs-7)}.article-title{position:relative;padding-bottom:7px}.article-title::after{content:"";position:absolute;bottom:0;left:0;width:30px;height:3px;background:var(--text-gradient-yellow);border-radius:3px}.has-scrollbar::-webkit-scrollbar{width:5px;height:5px}.has-scrollbar::-webkit-scrollbar-track{background:var(--onyx);border-radius:5px}.has-scrollbar::-webkit-scrollbar-thumb{background:var(--orange-yellow-crayola);border-radius:5px}.has-scrollbar::-webkit-scrollbar-button{width:20px}.content-card{padding:45px 15px 15px;border-radius:14px;cursor:pointer}.activity-card::before,.badge-card::before,.blog-post-item::before,.content-card::before,.scroll-to-top-btn::before,.service-item::before,.social-card::before,.tech-card::before{content:"";position:absolute;inset:1px;background:var(--bg-gradient-jet);border-radius:inherit;z-index:-1}main{margin:15px 12px 75px;min-width:259px}.sidebar{margin-bottom:15px;max-height:112px;overflow:hidden;transition:var(--transition-2)}.info_more-btn,.info_more-btn::before{transition:var(--transition-1);position:absolute}.sidebar.active{max-height:405px}.sidebar-info{position:relative;display:flex;justify-content:flex-start;align-items:center;gap:15px}.avatar-box{background:var(--bg-gradient-onyx);border-radius:20px}.info-content .name{color:var(--white-2);font-size:var(--fs-3);letter-spacing:-.25px;margin-bottom:10px}.about-text,.info-content .title,.modal-content p{font-weight:var(--fw-300)}.info-content .title{color:var(--white-1);background:var(--onyx);font-size:var(--fs-8);width:max-content;padding:3px 12px;border-radius:8px}.info_more-btn{top:-15px;right:-15px;border-radius:0 15px;font-size:13px;color:var(--orange-yellow-crayola);background:var(--border-gradient-onyx);padding:10px;z-index:1}.info_more-btn::before{content:"";inset:1px;border-radius:inherit;background:var(--bg-gradient-jet);z-index:-1}.form-btn:hover,.info_more-btn:focus,.info_more-btn:hover{background:var(--bg-gradient-yellow-1)}.form-btn:hover::before,.info_more-btn:focus::before,.info_more-btn:hover::before{background:var(--bg-gradient-yellow-2)}.sidebar-info_more{opacity:0;visibility:hidden;transition:var(--transition-2)}.sidebar.active .sidebar-info_more{opacity:1;visibility:visible}.contacts-list{display:grid;gap:16px}.contact-item{min-width:100%;display:flex;align-items:center;gap:16px}.contact-info{max-width:calc(100% - 46px);width:calc(100% - 46px)}.contact-title{color:var(--light-gray-70);font-size:var(--fs-8);text-transform:uppercase;margin-bottom:2px}.blog-subtitle,.blog-text,.navbar-link,.no-results-text,.search-title,.social-item .social-link:hover{color:var(--light-gray)}.form-btn,.project-title,.select-item button{text-transform:capitalize}.contact-info :is(.contact-link,time,address){color:var(--white-2);font-size:var(--fs-7)}.contact-link{cursor:default}.navbar-link:focus,.navbar-link:hover,.social-item .social-link{color:var(--light-gray-70)}.contact-info address{font-style:normal}.social-list{display:flex;justify-content:flex-start;align-items:center;gap:15px;padding-bottom:4px;padding-left:7px}.social-item .social-link{font-size:18px}.navbar{position:fixed;bottom:0;left:0;width:100%;background:hsla(240,1%,17%,.75);border:1px solid var(--jet);border-radius:12px 12px 0 0;z-index:5}.navbar-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:0 10px}.navbar-link{position:relative;font-size:var(--fs-8);padding:20px 7px;transition:color var(--transition-1)}.about-text,.modal-content p,.service-item-text,.testimonials-text{color:var(--light-gray);font-size:var(--fs-6);line-height:1.6}.clients-item img,.form-btn,.form-btn::before,.overlay{transition:var(--transition-1)}.navbar-link::after{content:"";display:block;position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:0;height:3px;background:#39ff14;border-radius:2px;transition:width .3s cubic-bezier(.4, 0, .2, 1)}.navbar-link.active::after,.navbar-link:focus::after,.navbar-link:hover::after{width:28px}.blog-post-item:hover .blog-item-title,.navbar-link.active{color:var(--orange-yellow-crayola)}.about .article-title,.about-text p,.card-content p,.clients,.skills-item:not(:last-child){margin-bottom:15px}.activities-section,.badges-section,.service,.social-section,.tech-stack{margin-bottom:35px}.form-title,.service-title,.skills-title,.testimonials-title,.timeline-item:not(:last-child){margin-bottom:20px}.service-list{display:grid;gap:20px}.service-item{position:relative;background:var(--border-gradient-onyx);padding:20px;border-radius:14px;z-index:1}.contact-form,.service-icon-box{margin-bottom:10px}.service-icon-box img{margin:auto}.service-content-box{text-align:center}.service-item-title,.testimonials-item-title{margin-bottom:7px}.service-item-text{font-weight:var(--fw-3)}.article-title,.testimonials,.timeline{margin-bottom:30px}.testimonials-list{display:flex;justify-content:flex-start;align-items:flex-start;gap:15px;margin:0 -15px;padding:25px 15px 35px;overflow-x:auto}.testimonials-item{min-width:100%;scroll-snap-align:center}.testimonials-avatar-box{position:absolute;top:0;left:0;transform:translate(15px,-25px);background:var(--bg-gradient-onyx);border-radius:14px;box-shadow:var(--shadow-1)}.modal-container,.overlay{position:fixed;top:0;left:0;width:100%;visibility:hidden;pointer-events:none}.testimonials-text{font-weight:var(--fw-300);display:-webkit-box;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.modal-container{height:100%;display:flex;justify-content:center;align-items:center;overflow-y:auto;overscroll-behavior:contain;z-index:20}.modal-container::-webkit-scrollbar{display:none}.overlay{height:100vh;background:#0c0c0c;opacity:0;z-index:1}.overlay.active{opacity:.8}.testimonials-modal{background:var(--eerie-black-2);position:relative;padding:15px;margin:15px 12px;border:1px solid var(--jet);border-radius:14px;box-shadow:var(--shadow-5);z-index:2}.cert-btn.verify-btn:hover::after,.cert-btn.view-btn:hover::after,.filter-select.active+.select-list,.modal-close-btn:focus,.modal-close-btn:hover,.modal-container.active .testimonials-modal{opacity:1}.modal-close-btn{position:absolute;top:15px;right:15px;background:var(--onyx);border-radius:8px;width:32px;height:32px;display:flex;justify-content:center;align-items:center;color:var(--white-2);font-size:18px;opacity:.7}.modal-close-btn ion-icon,.project-item-icon-box ion-icon{--ionicon-stroke-width:50px}.modal-avatar-box{background:var(--bg-gradient-onyx);width:max-content;border-radius:14px;margin-bottom:15px;box-shadow:var(--shadow-2)}.filter-list,.modal-img-wrapper>img,.project-item{display:none}.modal-title{margin-bottom:4px}.modal-content time{font-size:var(--fs-6);color:var(--light-gray-70);font-weight:var(--fw-300);margin-bottom:10px}.clients-list{display:flex;justify-content:flex-start;align-items:flex-start;gap:15px;margin:0 -15px;padding:25px;overflow-x:auto;scroll-padding-inline:25px}.clients-item{min-width:50%;scroll-snap-align:start}.clients-item img{width:100%;filter:grayscale(1)}.clients-item img:hover{filter:grayscale(0)}.timeline .title-wrapper{display:flex;align-items:center;gap:15px;margin-bottom:25px}.timeline-list{font-size:var(--fs-6);margin-left:45px}.timeline-item{position:relative}.timeline-item-title{font-size:var(--fs-6);line-height:1.3;margin-bottom:7px}.timeline-list span{color:var(--vegas-gold);font-weight:var(--fw-400);line-height:1.6}.filter-select,.select-item button,.skill .title-wrapper data,.timeline-text{color:var(--light-gray);font-weight:var(--fw-300)}.timeline-item:not(:last-child)::before{content:"";position:absolute;top:-25px;left:-30px;width:1px;height:calc(100% + 50px);background:var(--jet)}.timeline-item::after{content:"";position:absolute;top:5px;left:-33px;height:6px;width:6px;background:var(--text-gradient-yellow);border-radius:50%;box-shadow:0 0 0 4px var(--jet)}.blog-subtitle,.blog-text,.card-content,.timeline-text{line-height:1.6}.skills-list{padding:20px}.skill .title-wrapper{display:flex;align-items:center;gap:5px;margin-bottom:8px}.skill-progress-bg{background:var(--jet);width:100%;height:8px;border-radius:10px}.skill-progress-fill{background:var(--text-gradient-yellow);height:100%;border-radius:inherit}.filter-select,.select-item button,.select-list{background:var(--eerie-black-2);width:100%}.filter-select-box{position:relative;margin-bottom:25px}.filter-select{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid var(--jet);border-radius:14px;font-size:var(--fs-6)}.blog-post-item,.blog-posts{flex-direction:column;position:relative}.search-bar,.select-list{border:1px solid var(--jet)}.filter-select.active .select-icon{transform:rotate(.5turn)}.select-list{position:absolute;top:calc(100% + 6px);padding:6px;border-radius:14px;z-index:2;opacity:0;visibility:hidden;pointer-events:none;transition:.15s ease-in-out}.select-item button{font-size:var(--fs-6);padding:8px 10px;border-radius:8px}.select-item button:hover{--eerie-black-2:hsl(240, 2%, 20%)}.project-list{display:grid;gap:30px;margin-bottom:10px}.project-item>a{width:100%}.project-img{position:relative;width:100%;height:200px;border-radius:16px;overflow:hidden;margin-bottom:15px}.project-img::before,.project-item-icon-box{position:absolute;transition:var(--transition-1);z-index:1}.project-img::before{content:"";top:0;left:0;width:100%;height:100%;background:0 0}.project-item>a:hover .project-img::before{background:hsla(0,0%,0%,.5)}.project-item-icon-box{--scale:0.8;background:var(--jet);color:var(--orange-yellow-crayola);top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--scale));font-size:20px;padding:18px;border-radius:12px;opacity:0}.project-item>a:hover .project-item-icon-box{--scale:1;opacity:1}.project-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition-1)}.project-item>a:hover img{transform:scale(1.1)}.project-category,.project-title{margin-left:10px}.project-title{color:var(--white-2);font-size:var(--fs-5);font-weight:var(--fw-400);line-height:1.3}.project-category{color:var(--light-gray-70);font-size:var(--fs-6);font-weight:var(--fw-300)}.blog-item-title,.blog-type ion-icon{font-size:1.2rem}.blog-posts{width:100%;padding:20px;min-height:500px;display:flex}.blog-posts-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:0 0 30px;min-height:400px;flex:1;position:relative}.blog-post-item{background:var(--border-gradient-onyx);border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.18);overflow:hidden;transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border:1px solid var(--jet);cursor:pointer;min-height:340px}.blog-post-item:hover{transform:translateY(-7px) scale(1.025);box-shadow:0 12px 32px 0 rgba(30,40,60,.13),0 2px 8px 0 rgba(0,0,0,.12);z-index:2}.blog-post-item .thumbnail{object-fit:cover;margin-bottom:0;width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s;border-radius:14px 14px 6px 6px}.blog-content{flex:1;display:flex;flex-direction:column;background:0 0}.blog-item-title{color:var(--white-1);font-size:1.15rem}.blog-text{color:var(--light-gray);flex:1}.achievement-item:hover,.blog-post-item:hover,.certification-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-3)}.blog-post-item a{display:flex;flex-direction:column;height:100%;color:inherit}.activity-card:hover .activity-logo,.badge-card:hover .badge-logo,.blog-post-item:hover .thumbnail,.social-card:hover .social-logo,.tech-card:hover .tech-logo{transform:scale(1.05)}.blog-content{padding:20px;flex:1;display:flex;flex-direction:column;border-radius:0 0 8px 8px;background:var(--eerie-black-2)}.blog-item-title{color:var(--white-1);font-weight:600;margin-bottom:15px;transition:color .3s;line-height:1.4}.blog-tag,.blog-type{color:var(--orange-yellow-crayola)}.blog-text{font-size:.9rem;font-weight:300;flex:1}.blog-tag,.tech-info h4{font-weight:var(--fw-500)}.blog-subtitle{font-size:.95rem;opacity:.7;margin-top:auto}.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.blog-tag{background-color:var(--onyx);padding:6px 12px;border-radius:5px;font-size:.8rem;border:1px solid var(--jet)}.more-blogs-card{display:block;margin-top:24px;text-decoration:none;border-radius:14px;background:var(--border-gradient-onyx);border:1px solid var(--jet);overflow:visible;position:relative;z-index:1;transition:transform .25s ease,box-shadow .25s ease}.more-blogs-card::before{content:"";position:absolute;inset:1px;background:var(--bg-gradient-jet);border-radius:inherit;z-index:-1}.more-blogs-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}.more-blogs-card-content{display:flex;align-items:center;gap:18px;padding:20px 28px;position:relative}.more-blogs-icon{font-size:1.6rem;color:var(--orange-yellow-crayola);flex-shrink:0;opacity:.9}.more-blogs-text{flex:1;display:flex;flex-direction:column;gap:3px}.more-blogs-label{font-size:.78rem;color:var(--light-gray-70);font-weight:var(--fw-500);text-transform:uppercase;letter-spacing:.08em}.more-blogs-url{font-size:1rem;color:var(--white-1);font-weight:600;letter-spacing:.01em}.more-blogs-arrow{font-size:1.2rem;color:var(--light-gray-70);flex-shrink:0;transition:transform .2s ease,color .2s ease}.more-blogs-card:hover .more-blogs-arrow{transform:translateX(3px);color:var(--orange-yellow-crayola)}.blog-type{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:5px;font-size:.9rem}.pagination .page-selector::after,.search-icon{right:15px;top:50%;transform:translateY(-50%);pointer-events:none}@media (max-width:1024px){.blog-posts-list{grid-template-columns:repeat(2,1fr)}}.search-section{display:flex;justify-content:flex-end;align-items:center;margin-bottom:30px;gap:20px}#latestArticlesGrid .activity-info,.activity-info,.badge-info,.search-info,.social-info{flex:1}.search-title{font-size:1.1rem;margin-bottom:5px}.blog-pagination button,.pagination button,.search-bar,.search-description{font-size:.9rem;color:var(--light-gray)}.search-description{opacity:.7}.search-container{width:300px;position:relative}.search-bar{width:100%;background:var(--eerie-black-1);padding:12px 40px 12px 20px;border-radius:14px;transition:.3s}.search-bar:focus{outline:0;border-color:var(--orange-yellow-crayola)}.search-bar::placeholder{color:var(--light-gray);opacity:.5}.search-icon{position:absolute;color:var(--light-gray);font-size:1.2rem;opacity:.7}.form-btn,.form-input{padding:13px 20px;font-size:var(--fs-6)}.blog-pagination,.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}.blog-pagination button,.pagination button{background:var(--eerie-black-2);border:1px solid var(--jet);padding:12px 25px;border-radius:14px;cursor:pointer;transition:.3s;display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center;position:relative;overflow:hidden}.blog-pagination button:not(:disabled)::before,.pagination button:not(:disabled)::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(57,255,20,.1),transparent);transition:.5s}.blog-pagination button:not(:disabled):hover::before,.cert-btn:hover::before,.pagination button:not(:disabled):hover::before{left:100%}.blog-pagination button:not(:disabled):hover,.pagination button:not(:disabled):hover{color:#39ff14;border-color:#39ff14;box-shadow:0 0 10px rgba(57,255,20,.3);text-shadow:0 0 5px rgba(57,255,20,.5)}.blog-pagination button:disabled,.pagination button:disabled{opacity:.5;cursor:not-allowed;background:var(--eerie-black-1)}.blog-pagination button:disabled:hover,.pagination button:disabled:hover{color:var(--light-gray);border-color:var(--jet);box-shadow:none}.blog-pagination .blog-page-info,.pagination .page-info{color:var(--light-gray);font-size:.9rem;background:var(--eerie-black-2);padding:12px 25px;border-radius:14px;border:1px solid var(--jet);min-width:150px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.form-btn::before,.form-btn:disabled:hover::before{background:var(--bg-gradient-jet)}.blog-pagination .blog-page-info ion-icon,.pagination .page-info ion-icon{color:#39ff14;opacity:.8}.blog-pagination ion-icon,.pagination ion-icon{font-size:1.2rem;transition:transform .3s}.blog-pagination button:not(:disabled):hover ion-icon,.pagination button:not(:disabled):hover ion-icon{transform:scale(1.2);color:#39ff14}.no-results{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--eerie-black-1);border-radius:20px;width:100%;max-width:400px}.form-btn,.mapbox{position:relative;width:100%}.form-btn,.form-btn:disabled:hover{background:var(--border-gradient-onyx)}.no-results-subtext{color:var(--light-gray);opacity:.7}img.rounded-corners{border-radius:20%}.mapbox{height:250px;border-radius:16px;margin-bottom:30px;border:1px solid var(--jet);overflow:hidden}.mapbox figure{height:100%}.mapbox iframe{width:100%;height:100%;border:none;filter:grayscale(1) invert(1)}.input-wrapper{display:grid;grid-template-columns:1fr;gap:25px;margin-bottom:25px}.form-input{color:var(--white-2);font-weight:var(--fw-400);border:1px solid var(--jet);border-radius:14px;outline:0}.form-input::placeholder{font-weight:var(--fw-500)}.form-input:focus{border-color:var(--orange-yellow-crayola)}textarea.form-input{min-height:100px;height:120px;max-height:200px;resize:vertical;margin-bottom:25px}textarea.form-input::-webkit-resizer{display:none}.form-input:focus:invalid{border-color:var(--bittersweet-shimmer)}.form-btn{color:var(--orange-yellow-crayola);display:flex;justify-content:center;align-items:center;gap:10px;border-radius:14px;box-shadow:var(--shadow-3);z-index:1}.form-btn::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1}.form-btn ion-icon{font-size:16px}.form-btn:disabled{opacity:.7;cursor:not-allowed}@media (min-width:450px){.clients-item{min-width:calc(33.33% - 10px)}.blog-banner-box,.project-img{height:auto}}@media (min-width:580px){:root{--fs-1:32px;--fs-2:24px;--fs-3:26px;--fs-4:18px;--fs-6:15px;--fs-7:15px;--fs-8:12px}.sidebar,article{width:520px;margin-inline:auto;padding:30px}.article-title{font-weight:var(--fw-600);padding-bottom:15px}.article-title::after{width:40px;height:5px}.icon-box{width:48px;height:48px;border-radius:12px;font-size:18px}main{margin-top:60px;margin-bottom:100px}.sidebar{max-height:180px;margin-bottom:30px}.sidebar.active{max-height:584px}.sidebar-info{gap:25px}.avatar-box{border-radius:30px}.avatar-box img{width:120px}.info-content .name{margin-bottom:15px}.info-content .title{padding:5px 18px}.info_more-btn{top:-30px;right:-30px;padding:10px 15px}.info_more-btn span{display:block;font-size:var(--fs-8)}.info_more-btn ion-icon{display:none}.separator{margin:32px 0}.contacts-list,.navbar-list{gap:20px}.contact-info{max-width:calc(100% - 64px);width:calc(100% - 64px)}.navbar{border-radius:20px 20px 0 0}.navbar-link{--fs-8:14px}.about .article-title{margin-bottom:20px}.about-text{margin-bottom:40px}.service-item{display:flex;justify-content:flex-start;align-items:flex-start;gap:18px;padding:30px}.service-icon-box{margin-bottom:0;margin-top:5px}.service-content-box{text-align:left}.skills-item:not(:last-child),.testimonials-title{margin-bottom:25px}.testimonials-list{gap:30px;margin:0 -30px;padding:30px 30px 35px}.content-card{padding:25px 30px 30px}.testimonials-avatar-box{transform:translate(30px,-30px);border-radius:20px}.testimonials-avatar-box img{width:80px}.testimonials-item-title{margin-bottom:10px;margin-left:95px}.testimonials-text{line-clamp:2;-webkit-line-clamp:2}.modal-container{padding:20px}.testimonials-modal{display:flex;justify-content:flex-start;align-items:stretch;gap:25px;padding:30px;border-radius:20px}.modal-img-wrapper{display:flex;flex-direction:column;align-items:center}.modal-avatar-box{border-radius:18px;margin-bottom:0}.modal-avatar-box img{width:65px}.modal-img-wrapper>img{display:block;flex-grow:1;width:35px}.clients-list{gap:50px;margin:0 -30px;padding:45px;scroll-padding-inline:45px}.blog-posts-list,.input-wrapper{gap:30px}.input-wrapper,textarea.form-input{margin-bottom:30px}.clients-item{min-width:calc(33.33% - 35px)}.timeline-list{margin-left:65px}.timeline-item:not(:last-child)::before{left:-40px}.timeline-item::after{height:8px;width:8px;left:-43px}.blog-banner-box,.project-img{border-radius:16px}.blog-content{padding:25px}.mapbox{height:380px;border-radius:18px}.form-input{padding:15px 20px}.form-btn{--fs-6:16px;padding:16px 20px}.form-btn ion-icon{font-size:18px}}.action-box,.no-results,.stats-container,.tech-info{text-align:center}@media (min-width:768px){.blog-posts-list,.contacts-list,.input-wrapper,.project-list{grid-template-columns:1fr 1fr}.sidebar,article{width:700px}.has-scrollbar::-webkit-scrollbar-button{width:100px}.contacts-list{gap:30px 15px}.navbar-link{--fs-8:15px}.testimonials-modal{gap:35px;max-width:680px}.modal-avatar-box img{width:80px}.article-title{padding-bottom:20px}.filter-select-box{display:none}.filter-list{display:flex;justify-content:flex-start;align-items:center;gap:25px;padding-left:5px;margin-bottom:30px}.filter-item button{color:var(--light-gray);font-size:var(--fs-5);transition:var(--transition-1)}.filter-item button:hover{color:var(--light-gray-70)}.filter-item button.active{color:var(--orange-yellow-crayola)}.form-btn{width:max-content;margin-left:auto}}@media (min-width:1024px){.navbar,.navbar.is-stuck{transform:translateY(0)}:root{--shadow-1:-4px 8px 24px hsla(0, 0%, 0%, 0.125);--shadow-2:0 16px 30px hsla(0, 0%, 0%, 0.125);--shadow-3:0 16px 40px hsla(0, 0%, 0%, 0.125)}.sidebar,article{width:950px;box-shadow:var(--shadow-5)}main{margin-bottom:60px}.main-content{position:relative;width:max-content;margin:auto}.navbar{position:sticky;top:0;left:auto;right:0;width:max-content;border-radius:0 20px;padding:0 20px;box-shadow:none;z-index:5;transition:background .3s,box-shadow .3s,transform .2s;margin-left:auto}.navbar-list{gap:30px;padding:0 20px}.navbar-link{font-weight:var(--fw-500)}.service-list{grid-template-columns:1fr 1fr;gap:20px 25px}.testimonials-item{min-width:calc(50% - 15px)}.clients-item{min-width:calc(25% - 38px)}.project-list{grid-template-columns:repeat(3,1fr)}.blog-banner-box{height:230px}}.awareness-card,.certifications .project-item{box-shadow:var(--shadow-2);background:var(--eerie-black-1)}@media (min-width:1024px) and (max-width:1249px){.navbar,.navbar.is-stuck{transform:translateY(0)}.main-content article{margin-top:-64px}}@media (min-width:1250px){body::-webkit-scrollbar{width:20px}body::-webkit-scrollbar-track{background:var(--smoky-black)}body::-webkit-scrollbar-thumb{border:5px solid var(--smoky-black);background:hsla(0,0%,100%,.1);border-radius:20px;box-shadow:inset 1px 1px 0 hsla(0,0%,100%,.11),inset -1px -1px 0 hsla(0,0%,100%,.11)}body::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.15)}body::-webkit-scrollbar-button{height:60px}.sidebar,article{width:auto}article{min-height:100%}main{max-width:1200px;margin-inline:auto;display:flex;justify-content:center;align-items:stretch;gap:25px}.main-content{min-width:75%;width:75%;margin:0}.sidebar{position:sticky;top:60px;max-height:max-content;height:100%;margin-bottom:0;padding-top:60px;z-index:1}.main-content article{margin-top:-65px}.sidebar-info{flex-direction:column}.avatar-box img{width:150px}.info-content .name{white-space:nowrap;text-align:center}.info-content .title{margin:auto}.info_more-btn{display:none}.sidebar-info_more{opacity:1;visibility:visible}.contacts-list{grid-template-columns:1fr}.contact-info :is(.contact-link){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-info :is(.contact-link,time,address){--fs-7:14px;font-weight:var(--fw-300)}.separator:last-of-type{margin:15px 0;opacity:0}.social-list{justify-content:center}.timeline-text{max-width:700px}}.achievements-list,.awareness-grid,.certifications-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.blog-title{color:var(--white-1);font-size:var(--fs-1);font-weight:var(--fw-600);margin-bottom:20px}.pagination .page-selector{position:relative;min-width:150px}.pagination select{appearance:none;-webkit-appearance:none;width:100%;padding:12px 25px;background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:14px;color:var(--light-gray);font-size:.9rem;cursor:pointer;text-align:center;transition:.3s}.pagination select:hover{border-color:#39ff14;box-shadow:0 0 10px rgba(57,255,20,.3)}.pagination select:focus{outline:0;border-color:#39ff14}.pagination .page-selector::after{content:"";position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #39ff14}.pagination select option{background:var(--eerie-black-1);color:var(--light-gray);padding:10px}.awareness-section{padding:2rem 0}.awareness-description{color:var(--light-gray);font-size:var(--fs-6);font-weight:var(--fw-300);line-height:1.6;margin-bottom:2rem}.awareness-grid{display:grid;gap:1.5rem;margin-bottom:2rem}.awareness-card{border:1px solid var(--jet);border-radius:14px;padding:20px}.awareness-card:hover,.awareness-card:hover .card-icon,.certifications .project-item:hover{transform:none}.card-header{display:flex;align-items:center;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--jet)}.highlight-box,.security-tip,.warning-box{background:var(--eerie-black-2);margin:15px 0;border-radius:0 4px 4px 0;padding:15px}.card-icon{font-size:2rem;color:var(--orange-yellow-crayola)}.card-title{color:var(--white-2);font-size:1.2rem;font-weight:500}#awarenessPageInfo,.card-content,.no-results-subtext{color:var(--light-gray);font-size:.9rem}.highlight-box,.security-tip{border-left:4px solid var(--orange-yellow-crayola)}.warning-box{border-left:4px solid var(--bittersweet-shimmer)}.action-link,.pagination-button{padding:10px 20px;background:var(--eerie-black-2);font-weight:500;color:var(--orange-yellow-crayola)}.action-box{margin:20px 0}.action-link{display:inline-block;border:1px solid var(--jet);border-radius:8px}.action-link:hover,.pagination-button:hover:not(:disabled){background:var(--eerie-black-1);border-color:var(--orange-yellow-crayola);transform:none}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2rem}.pagination-button{border:1px solid var(--jet);border-radius:8px;cursor:pointer}.pagination-button:disabled{background:var(--eerie-black-1);border-color:var(--jet);color:var(--light-gray-70);cursor:not-allowed;transform:none}.certifications .project-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:30px;align-items:stretch}.certification-item a,.certifications .project-item{display:flex;flex-direction:column;height:100%}.certifications .project-item{border:1px solid var(--jet);border-radius:14px;padding:15px;background-image:linear-gradient(120deg,transparent 60%,rgba(30,40,60,.18) 85%,transparent 100%);min-height:400px;justify-content:space-between}.certifications .project-img{position:relative;width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-bottom:15px;min-height:180px;max-height:240px;display:flex;align-items:center;justify-content:center}.certifications .project-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:var(--transition-1)}.certifications .project-title{color:var(--white-2);font-size:1.13rem;font-weight:700;margin-bottom:14px;margin-top:8px}.certifications .project-category{color:var(--light-gray);font-size:.93rem;font-weight:400;line-height:1.85;letter-spacing:.01em}.cert-buttons{display:flex;gap:12px;margin-top:20px;width:100%}.cert-btn{font-family:Poppins,sans-serif;display:flex;align-items:center;justify-content:center;padding:12px 16px;border:2px solid var(--jet);border-radius:12px;background:linear-gradient(135deg,var(--eerie-black-1) 0,var(--eerie-black-2) 100%);color:var(--light-gray);transition:.4s cubic-bezier(.4, 0, .2, 1);font-size:14px;font-weight:500;flex:1;height:44px;position:relative;overflow:hidden}.achievement-item,.badge-card,.certification-item,.social-card,.tech-card{background:var(--border-gradient-onyx)}.cert-btn::before,.order-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s}.cert-btn:hover,.order-btn:hover{color:var(--white-2);border-color:var(--orange-yellow-crayola);transform:translateY(-3px);box-shadow:0 8px 25px rgba(57,255,20,.15),0 4px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}.cert-btn.view-btn{background:linear-gradient(135deg,var(--onyx) 0,var(--eerie-black-1) 100%);border:2px solid var(--onyx);position:relative}.cert-btn.view-btn::after{inset:0;border-radius:10px;padding:2px;background:linear-gradient(135deg,var(--orange-yellow-crayola),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}.cert-btn.verify-btn{background:linear-gradient(135deg,var(--eerie-black-2) 0,var(--onyx) 100%);border:2px solid var(--onyx);position:relative}.cert-btn.verify-btn::after{inset:0;border-radius:10px;padding:2px;background:linear-gradient(135deg,transparent,var(--orange-yellow-crayola));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}.cert-btn.verify-btn ion-icon,.cert-btn.view-btn ion-icon{color:inherit;transition:.3s;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .3))}.cert-btn:hover ion-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 2px 4px rgba(57, 255, 20, .3))}@media (max-width:1024px){.certifications .project-list{grid-template-columns:repeat(2,1fr)}}.stats-container{display:flex;justify-content:center;align-items:center;gap:50px;margin-top:40px;flex-wrap:wrap}.portfolio .contacts-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.about-text p,.article-title,.main-content,.stats-container .stat{animation:none!important}.achievement-item,.certification-item{box-shadow:var(--shadow-2);transition:transform .3s,box-shadow .3s}.blog-pagination .blog-page-info::before{content:none!important}.achievements-list,.certifications-list{display:grid;gap:20px;padding:20px}.certification-item{border-radius:14px;padding:15px}.certification-image{display:block;width:100%;max-width:100%;height:140px;object-fit:contain}.certification-content{display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-start}.certification-title{min-height:48px;display:flex;align-items:flex-end}.certification-issuer{color:var(--light-gray);font-size:.9rem;margin-bottom:5px}.achievement-date,.certification-date{color:var(--light-gray-50);font-size:.8rem}.achievement-item{border-radius:14px;padding:20px}.achievement-title{font-size:1.2rem;color:var(--light-gray-70);margin-bottom:10px}.achievement-description{color:var(--light-gray);font-size:.9rem;margin-bottom:8px;line-height:1.5}.achievements-pagination,.certifications-pagination{display:flex;justify-content:center;gap:10px;margin-top:20px;padding:20px}.achievements-pagination button,.certifications-pagination button{background:var(--border-gradient-onyx);border:none;padding:8px 15px;border-radius:8px;color:var(--light-gray);cursor:pointer;transition:background-color .3s}.activity-logo img,.badge-logo img,.social-logo img,.tech-logo img{height:100%;object-fit:contain;filter:brightness(.9);transition:filter .3s}.achievements-pagination button:disabled,.certifications-pagination button:disabled{opacity:.5;cursor:not-allowed}.achievements-pagination button:not(:disabled):hover,.certifications-pagination button:not(:disabled):hover{background:var(--orange-sienna);color:var(--white-2)}#achievementSearchInput,#certSearchInput{width:100%;max-width:500px;margin:20px auto;padding:12px 20px;border:1px solid var(--jet);border-radius:8px;background:var(--eerie-black-1);color:var(--light-gray);font-size:.9rem;transition:border-color .3s}#achievementSearchInput:focus,#certSearchInput:focus{border-color:var(--orange-sienna);outline:0}.no-results{grid-column:1/-1;padding:40px 20px}.no-results-text{color:var(--white-1);font-size:1.2rem;margin-bottom:10px}.activity-card,.badge-card,.order-btn,.social-card,.tech-card{position:relative;z-index:1}.awareness-card{opacity:1;transform:none;animation:none;transition:box-shadow .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1)}.awareness-card:nth-child(n){animation-delay:0s}.awareness-card:focus-within,.awareness-card:hover{transform:translateY(-8px) scale(1.025);box-shadow:0 12px 32px 0 rgba(30,40,60,.13),0 2px 8px 0 rgba(0,0,0,.1);z-index:2}@keyframes certFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.certification-item{animation:.7s cubic-bezier(.4,0,.2,1) forwards certFadeUp}.certification-item:first-child,.timeline-item:first-child{animation-delay:50ms}.certification-item:nth-child(2),.timeline-item:nth-child(2){animation-delay:.12s}.certification-item:nth-child(3),.timeline-item:nth-child(3){animation-delay:.19s}.certification-item:nth-child(4),.timeline-item:nth-child(4){animation-delay:.26s}.certification-item:nth-child(5),.timeline-item:nth-child(5){animation-delay:.33s}.certification-item:nth-child(7),.timeline-item:nth-child(7){animation-delay:.47s}.certification-item:nth-child(8),.timeline-item:nth-child(8){animation-delay:.54s}.certification-item:nth-child(9),.timeline-item:nth-child(9){animation-delay:.61s}.certification-item:nth-child(10),.timeline-item:nth-child(10){animation-delay:.68s}@keyframes resumeFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.timeline-item{opacity:0;transform:translateY(30px);animation:.7s cubic-bezier(.4,0,.2,1) forwards resumeFadeUp}.cert-btn.verify-btn ion-icon,.cert-btn.view-btn ion-icon{color:inherit;font-size:16px;vertical-align:middle;margin-right:4px}.cert-btn.verify-btn .verify-badge-text{display:inline-block;background:rgba(57,255,20,.12);color:var(--orange-yellow-crayola);border-radius:8px;padding:2px 10px;font-size:13px;font-weight:600;letter-spacing:.03em;margin-left:2px;vertical-align:middle;box-shadow:0 1px 6px 0 rgba(57,255,20,.1)}.tech-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}.tech-card{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--jet);cursor:pointer}.activity-card:hover,.badge-card:hover,.social-card:hover,.tech-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}.tech-logo{display:flex;align-items:center;justify-content:center;transition:transform .3s}.tech-logo img{width:100%}.activity-card:hover .activity-logo img,.badge-card:hover .badge-logo img,.social-card:hover .social-logo img,.tech-card:hover .tech-logo img{filter:brightness(1.05)}.tech-info{width:100%}.tech-info h4{color:var(--white-2);font-size:var(--fs-7);margin-bottom:4px;line-height:1.2}.tech-level{color:var(--light-gray);font-size:var(--fs-8);font-weight:var(--fw-300);opacity:.8}.activity-time,.social-link{color:var(--orange-yellow-crayola);font-weight:var(--fw-400);opacity:.9}.badges-cards-grid,.social-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.badge-card,.social-card{border-radius:12px;padding:15px;display:flex;align-items:center;gap:12px;transition:transform .3s,box-shadow .3s;border:1px solid var(--jet)}.activity-logo,.badge-logo,.social-logo{width:35px;height:35px;display:flex;align-items:center;justify-content:center;transition:transform .3s}.activity-logo img,.badge-logo img,.social-logo img{width:100%}.activity-info h4,.badge-info h4,.social-info h4{color:var(--white-2);font-size:var(--fs-6);font-weight:var(--fw-500);margin-bottom:3px;line-height:1.2}.badge-info p,.social-info p{color:var(--light-gray);font-size:var(--fs-8);margin-bottom:8px;opacity:.8}.badge-progress{width:100%;height:4px;background:var(--jet);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:var(--text-gradient-yellow);border-radius:2px;transition:width 1s;position:relative}.progress-bar::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:2s infinite shimmer}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.activities-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.activity-card{background:var(--border-gradient-onyx);display:flex;align-items:center;gap:12px;border:1px solid var(--jet)}.activity-info p{color:var(--light-gray);font-size:var(--fs-8);margin-bottom:5px;opacity:.8;line-height:1.3}.activity-time{font-size:var(--fs-8)}@media (max-width:768px){.activities-cards-grid,.awareness-grid,.certifications .project-list{grid-template-columns:1fr}.navbar{position:fixed!important;bottom:0;left:0;width:100vw!important;z-index:9999;border-radius:20px 20px 0 0!important;box-shadow:0 -2px 16px rgba(0,0,0,.2);padding:8px 0}.navbar-list{padding:0 5px}.navbar-link{padding:12px 5px;font-size:.85rem}.achievements-list,.certifications-list{grid-template-columns:1fr;padding:10px}.certification-image{height:180px}.achievements-pagination,.certifications-pagination{flex-wrap:wrap}.achievements-pagination button,.certifications-pagination button{padding:6px 12px;font-size:.9rem}.tech-cards-grid{grid-template-columns:repeat(3,1fr)}.badges-cards-grid{grid-template-columns:repeat(2,1fr)}}.social-link{font-size:var(--fs-8);transition:.3s}.freelance-service-card p,.freelance-subtitle{font-size:var(--fs-6);font-family:var(--ff-poppins)}.social-link:hover{opacity:1;text-shadow:0 0 3px rgba(57,255,20,.3)}@media (max-width:480px){.blog-posts{padding:10px}.blog-post-item .thumbnail{height:160px}.blog-item-title{font-size:1rem}.blog-text{font-size:.8rem}.achievement-title,.certification-title{font-size:1.1rem}.achievement-description,.certification-issuer{font-size:.85rem}.achievement-date,.certification-date{font-size:.75rem}.social-cards-grid,.tech-cards-grid{grid-template-columns:repeat(2,1fr)}.badges-cards-grid{grid-template-columns:1fr}.activity-card,.badge-card,.social-card,.tech-card{padding:12px}.activity-logo,.badge-logo,.social-logo,.tech-logo{width:30px;height:30px}}.rounded-medium-logo{border-radius:50%;overflow:hidden;background:#191919;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:10px}.activity-card,.tech-card{background:var(--border-gradient-onyx);display:flex;box-shadow:var(--shadow-1);transition:box-shadow .3s,transform .3s}#latestArticlesGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px}.activity-card{border-radius:12px;padding:24px 18px 18px;flex-direction:column;align-items:flex-start;min-height:220px;height:100%}.activity-info{flex:1;display:flex;flex-direction:column;justify-content:flex-start;width:100%}.tech-stack-slider{overflow-x:auto;overflow-y:hidden;position:relative;width:100%;margin-bottom:50px;-webkit-overflow-scrolling:touch}.tech-stack-slider::-webkit-scrollbar{height:6px}.tech-stack-slider::-webkit-scrollbar-track{background:0 0}.tech-stack-slider::-webkit-scrollbar-thumb{background:var(--jet);border-radius:3px;opacity:.3}.tech-stack-slider::-webkit-scrollbar-thumb:hover{background:var(--light-gray)}.tech-stack-slider:hover::-webkit-scrollbar-thumb{opacity:1}.tech-cards-slider{display:flex;flex-direction:row;align-items:center}.tech-card{margin:0 12px;flex:0 0 auto;border-radius:14px;flex-direction:column;align-items:center;justify-content:center}.tech-logo{align-items:center;display:flex;justify-content:center}.achievement-content,.certification-content{display:flex;flex-direction:column;justify-content:flex-start;height:100%}.achievement-placeholder{width:100%;height:200px;background:0 0;margin-bottom:15px;border-radius:8px}.tech-card{display:flex;flex-direction:column;align-items:center;justify-content:center}.tech-logo{margin-bottom:10px;justify-content:center;height:48px;width:48px}.badge-card{align-items:center;justify-content:center}.badge-info{display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width:900px){#latestArticlesGrid{grid-template-columns:1fr 1fr}.tech-stack-slider{height:180px}.tech-card{min-height:140px;padding-top:22px!important}}@media (max-width:600px){.blog-pagination,.pagination{flex-direction:column;gap:12px}.blog-pagination button,.pagination button{width:100%;min-width:unset;font-size:1.1rem;padding:16px 0;border-radius:18px}.blog-pagination .blog-page-info,.pagination .page-info{width:100%;min-width:unset;font-size:1rem;padding:16px 0;border-radius:18px}.certification-item,.timeline-item{animation-duration:.5s}#latestArticlesGrid{grid-template-columns:1fr}.tech-stack-slider{height:160px}.tech-card{min-height:120px;padding-top:16px!important}}.badge-card{flex-direction:row;align-items:center;justify-content:flex-start}.badge-info,.tech-card{flex-direction:column;display:flex}.badge-info{align-items:flex-start;justify-content:center;height:100%}.tech-card{align-items:center;justify-content:center;padding-top:36px!important;overflow:visible!important}@media (max-width:900px){.tech-stack-slider{height:200px}.tech-card{min-height:150px;padding-top:28px!important}}@media (max-width:600px){.tech-stack-slider{height:170px}.tech-card{min-height:130px;padding-top:20px!important}}.tech-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px 15px}.tech-stack-slider{scrollbar-width:thin;scrollbar-color:var(--jet) transparent;height:auto!important;min-height:180px;padding-bottom:20px}.tech-cards-slider{display:flex;flex-direction:row;align-items:stretch;height:auto;width:max-content;padding:0 12px;align-items:stretch}@media (max-width:900px){.tech-stack-slider{min-height:150px}.tech-card{gap:14px;padding:14px 10px;width:150px;height:180px;min-width:150px;min-height:180px;max-width:150px;max-height:180px}}@media (max-width:600px){.tech-stack-slider{min-height:120px}.tech-card{gap:10px;padding:10px 6px;width:120px;height:140px;min-width:120px;min-height:140px;max-width:120px;max-height:140px}}@media (max-width:900px){.tech-card{width:100px;height:120px;min-width:100px;min-height:120px;max-width:100px;max-height:120px}}@media (max-width:600px){.tech-card{width:140px;height:170px;min-width:140px;min-height:170px;max-width:140px;max-height:170px}}.tech-card{width:140px;height:170px;min-width:140px;min-height:170px;max-width:140px;max-height:170px}#latestArticlesGrid .activity-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.8em;line-height:1.4em;white-space:normal}#latestArticlesGrid .activity-logo.rounded-medium-logo{width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;display:flex;align-items:center;justify-content:center;margin:0 14px 0 0;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.1);background:0 0}#latestArticlesGrid .activity-card{min-height:120px;height:140px;padding-bottom:12px!important;padding-top:16px!important;display:flex;flex-direction:row;align-items:center}.freelance-services-section{margin:2.5rem 0 2rem;padding:0 .5rem}.freelance-title{color:var(--white-1);font-weight:700;margin-bottom:.5rem;text-align:left}.freelance-subtitle{color:var(--light-gray);margin-bottom:2rem;text-align:left}.freelance-services-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:stretch;justify-content:flex-start}.freelance-service-card{background:#181818;border-radius:20px;border:1px solid #232323;box-shadow:0 2px 12px rgba(0,0,0,.1);padding:2rem 1.5rem 1.5rem;min-width:220px;max-width:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow .2s,border-color .2s;color:#fff}.freelance-service-card h4{color:#fff;font-weight:700;margin-bottom:.5rem;text-align:center}.freelance-service-card p{color:var(--light-gray);margin-bottom:1.5rem}.service-price-main,.service-price-row,.service-price-unit{color:#fff}.service-price-main,.service-price-row{font-size:1.3rem;color:#39ff14}.service-price-row{display:flex;align-items:baseline;gap:.3em;margin-top:1em;margin-bottom:1em;font-weight:700;justify-content:center;text-align:center}.freelance-pricing-note.bottom-note,.order-btn,.service-price-unit{text-align:center;color:var(--light-gray)}.service-price-unit{font-size:.9rem;font-weight:600}.order-btn{font-family:Poppins,sans-serif;display:flex;align-items:center;justify-content:center;padding:12px 16px;border:2px solid var(--onyx);border-radius:12px;background:linear-gradient(135deg,var(--onyx) 0,var(--eerie-black-1) 100%);transition:.4s cubic-bezier(.4, 0, .2, 1);font-size:14px;font-weight:500;height:44px;overflow:hidden;outline:0;margin-top:auto;margin-bottom:.2em;cursor:pointer;max-width:100%;flex:none;align-self:center}@media (max-width:900px){.tech-card{width:140px;height:170px;min-width:140px;max-width:140px;max-height:170px;min-height:140px;padding-top:22px!important}.freelance-services-list{grid-template-columns:repeat(2,1fr);gap:1.2rem}.tech-cards-grid{grid-template-columns:repeat(3,1fr)}.badges-cards-grid{grid-template-columns:repeat(2,1fr)}.activities-cards-grid{grid-template-columns:1fr}.tech-stack-slider{height:180px}}@media (max-width:768px){.awareness-grid,.badges-cards-grid,.blog-posts-list,.certifications .project-list{grid-template-columns:1fr}.blog-post-item .thumbnail,.certification-image{height:180px}.blog-content{padding:15px}.blog-item-title{font-size:1.1rem}.blog-text{font-size:.85rem}.blog-tags{margin-top:10px;gap:6px}.blog-tag{padding:4px 8px;font-size:.75rem}.navbar{position:fixed!important;bottom:0;left:0;width:100vw!important;z-index:9999;border-radius:20px 20px 0 0!important;box-shadow:0 -2px 16px rgba(0,0,0,.2);padding:8px 0}.navbar-list{padding:0 5px}.navbar-link{padding:12px 5px;font-size:.85rem}.achievements-list,.certifications-list{grid-template-columns:1fr;padding:10px}.achievements-pagination,.certifications-pagination{flex-wrap:wrap}.achievements-pagination button,.certifications-pagination button{padding:6px 12px;font-size:.9rem}.social-cards-grid,.tech-cards-grid{grid-template-columns:repeat(2,1fr)}.activity-card,.badge-card,.social-card,.tech-card{padding:12px}.activity-logo,.badge-logo,.social-logo,.tech-logo{width:30px;height:30px}}.order-btn{min-width:200px;width:200px}.freelance-pricing-note.bottom-note{display:flex;justify-content:center;align-items:center;margin-top:2rem;font-size:1.1rem;font-weight:400;font-family:inherit}.scroll-to-top-btn{position:fixed;bottom:70px;right:30px;background:var(--border-gradient-onyx);color:var(--orange-yellow-crayola);border:1px solid var(--jet);border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:.3s cubic-bezier(.4, 0, .2, 1);z-index:1000;box-shadow:var(--shadow-2)}.scroll-to-top-btn.show{opacity:1;visibility:visible;transform:translateY(0)}.scroll-to-top-btn:hover{color:var(--white-2);border-color:var(--orange-yellow-crayola);transform:translateY(-3px);box-shadow:0 8px 25px rgba(57,255,20,.15),0 4px 10px rgba(0,0,0,.3)}.scroll-to-top-btn:focus{outline:0;border-color:var(--orange-yellow-crayola);box-shadow:0 0 0 3px rgba(57,255,20,.2)}.scroll-to-top-btn ion-icon{--ionicon-stroke-width:40px;transition:transform .3s}.scroll-to-top-btn:hover ion-icon{transform:translateY(-2px)}@media (max-width:600px){.freelance-services-list{grid-template-columns:1fr;gap:1rem}.freelance-service-card{padding:1.2rem .8rem}.order-btn{min-width:0;width:100%;align-self:stretch;margin-bottom:0}.blog-posts{padding:10px}.blog-post-item .thumbnail{height:160px}.blog-item-title{font-size:1rem}.blog-text{font-size:.8rem}.achievement-title,.certification-title{font-size:1.1rem}.achievement-description,.certification-issuer{font-size:.85rem}.achievement-date,.certification-date{font-size:.75rem}.social-cards-grid,.tech-cards-grid{grid-template-columns:repeat(2,1fr)}.badges-cards-grid{grid-template-columns:1fr}.activity-card,.badge-card,.social-card,.tech-card{padding:12px}.activity-logo,.badge-logo,.social-logo,.tech-logo{width:30px;height:30px}.blog-pagination,.pagination{flex-direction:column;gap:12px}.blog-pagination button,.pagination button{width:100%;min-width:unset;font-size:1.1rem;padding:16px 0;border-radius:18px}.blog-pagination .blog-page-info,.pagination .page-info{width:100%;min-width:unset;font-size:1rem;padding:16px 0;border-radius:18px}.certification-item,.timeline-item{animation-duration:.5s}}

/* ============================================================
   PREMIUM DARK PORTFOLIO — UI/UX Expert Grade
   (merged from modern.css)
   ============================================================ */
/* ============================================================
   PREMIUM DARK PORTFOLIO — UI/UX Expert Grade
   Design language: Linear · Vercel · Arc · Raycast
   Palette: Deep navy-black (#060d10) + Cyan / Teal accent system
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --bg-root:    #060d10;
  --bg-panel:   rgba(16, 18, 30, 0.97);
  --bg-card:    rgba(24, 27, 46, 0.90);
  --bg-card-solid: #181b2e;
  --bg-input:   rgba(255, 255, 255, 0.04);

  --accent:        #22d3ee;
  --accent-vivid:  #06b6d4;
  --accent-muted:  #0891b2;
  --accent-dim:    rgba(6, 182, 212, 0.10);
  --accent-dim2:   rgba(6, 182, 212, 0.15);
  --accent-glow:   rgba(6, 182, 212, 0.25);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary:  #7c8fa3;
  --text-accent:    #67e8f9;
  --text-muted:     #334155;

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-dim:     rgba(255, 255, 255, 0.11);
  --border-medium:  rgba(255, 255, 255, 0.12);
  --border-accent:  rgba(6, 182, 212, 0.30);
  --border-accent2: rgba(6, 182, 212, 0.50);

  --shadow-panel: 0 0 0 1px rgba(255,255,255,0.04), 0 12px 48px rgba(0,0,0,0.65);
  --shadow-card:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(6,182,212,0.22);
  --shadow-glow:  0 0 28px rgba(6,182,212,0.18);

  /* Override original palette vars */
  --orange-yellow-crayola: var(--accent);
  --vegas-gold:    var(--accent);
  --jet:           rgba(6, 182, 212, 0.15);
  --onyx:          rgb(16, 18, 30);
  --eerie-black-1: rgb(24, 27, 46);
  --eerie-black-2: rgb(20, 22, 38);
  --smoky-black:   var(--bg-root);
  --white-1:       var(--text-primary);
  --white-2:       var(--text-primary);
  --light-gray:    var(--text-secondary);
  --light-gray-70: var(--text-tertiary);
  --text-gradient-yellow: linear-gradient(135deg, var(--accent-vivid), rgba(20,184,166,0.7));
  --bg-gradient-yellow-1: linear-gradient(135deg, var(--accent-dim), transparent 60%);
  --bg-gradient-yellow-2: linear-gradient(135deg, rgba(6,182,212,0.12), transparent 60%), rgb(7, 14, 18);
  --bg-gradient-onyx:     linear-gradient(to bottom right, rgba(6,182,212,0.06), rgba(8,22,26,0.98));
  --bg-gradient-jet:      linear-gradient(to bottom right, rgba(6,182,212,0.05), rgba(7,14,18,0)), rgb(7, 14, 18);
  --border-gradient-onyx: rgba(7, 14, 18, 0.95);
  --shadow-1:      0 4px 20px rgba(0,0,0,0.55);
  --shadow-2:      0 8px 30px rgba(0,0,0,0.5);
  --shadow-3:      0 12px 40px rgba(0,0,0,0.5);

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.18s;
  --dur-normal: 0.28s;
}

/* ── 2. KEYFRAMES ──────────────────────────────────────────── */
@keyframes avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,182,212,0.35), 0 0 20px rgba(6,182,212,0.08); }
  50%       { box-shadow: 0 0 0 7px rgba(6,182,212,0), 0 0 30px rgba(6,182,212,0.18); }
}
@keyframes sep-glow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}
@keyframes skill-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: calc(300px + 100%) 0; }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,182,212,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(6,182,212,0); }
}

/* ── 3. ROOT BACKGROUND ────────────────────────────────────── */
html { background: var(--bg-root); }
body { background: var(--bg-root); position: relative; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 15% 0%,   rgba(6,182,212,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 100%,  rgba(20,184,166,0.09) 0%, transparent 52%),
    radial-gradient(ellipse 40% 30% at 75% 30%,   rgba(6,182,212,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
main { position: relative; z-index: 1; }

/* ── 4. PANELS ─────────────────────────────────────────────── */
.sidebar, article {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 20px;
}

/* ── 5. AVATAR ─────────────────────────────────────────────── */
.avatar-box {
  background: linear-gradient(135deg, rgba(6,182,212,0.14), rgba(20,184,166,0.08));
  border: 2px solid var(--border-accent);
  border-radius: 24px;
  box-shadow: 0 0 0 4px rgba(6,182,212,0.07), 0 8px 32px rgba(0,0,0,0.4);
  animation: avatar-pulse 4s ease-in-out infinite;
}
.avatar-box img { border-radius: 20px; filter: brightness(1.03) contrast(1.04) saturate(1.05); }

/* ── 6. NAME & TITLE ───────────────────────────────────────── */
.info-content .name {
  background: linear-gradient(120deg, #f8fafc 0%, #a5f3fc 55%, #67e8f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  font-weight: 700;
}
.info-content .title {
  background: var(--accent-dim) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-accent) !important;
  letter-spacing: 1.2px;
  font-size: 10px !important;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 14px !important;
  border-radius: 100px !important;
}

/* ── 7. SEPARATOR ──────────────────────────────────────────── */
.separator {
  background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.35) 30%, rgba(20,184,166,0.35) 70%, transparent 100%);
  height: 1px;
  animation: sep-glow 4s ease-in-out infinite;
}

/* ── 8. CONTACT ITEMS ──────────────────────────────────────── */
.contact-title { color: var(--text-accent); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.contact-info :is(.contact-link, time, address) { color: var(--text-primary); font-weight: 400; }

/* ── 9. ICON BOXES ─────────────────────────────────────────── */
.icon-box {
  background: var(--accent-dim) !important;
  border: 1px solid rgba(6,182,212,0.2) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(6,182,212,0.06);
}
.icon-box::before { background: transparent !important; }

/* ── 10. SIDEBAR SOCIAL ────────────────────────────────────── */
.sidebar .social-item .social-link {
  color: var(--text-tertiary) !important;
  transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
  text-shadow: none !important;
}
.sidebar .social-item .social-link:hover {
  color: var(--accent) !important;
  transform: translateY(-2px);
  text-shadow: none !important;
}

/* ── 11. NAVBAR ────────────────────────────────────────────── */
.navbar {
  background: rgba(10, 11, 20, 0.50) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 4px 32px rgba(0,0,0,0.55) !important;
}
.navbar-link { color: var(--text-secondary) !important; font-weight: 500; transition: color var(--dur-fast) var(--ease-smooth); }
.navbar-link:hover, .navbar-link:focus { color: var(--text-primary) !important; }
.navbar-link.active { color: var(--accent) !important; }
.navbar-link::after { background: var(--accent) !important; height: 2px; border-radius: 1px; box-shadow: 0 0 8px rgba(6,182,212,0.5) !important; }

/* ── 12. ARTICLE HEADINGS ──────────────────────────────────── */
.article-title { color: var(--text-primary); letter-spacing: -0.5px; font-weight: 700; }
.article-title::after {
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--accent-vivid), rgba(20,184,166,0.5)) !important;
  border-radius: 3px;
  box-shadow: 0 0 16px rgba(6,182,212,0.45);
}
.h3.service-title, .h3.skills-title, .h3.testimonials-title {
  color: var(--text-primary); font-weight: 700; letter-spacing: -0.4px;
}
.freelance-subtitle { color: var(--text-secondary) !important; line-height: 1.7; }
.about-text, .about-text p { color: var(--text-secondary); line-height: 1.75; }

/* ── 13. STAT CARDS ────────────────────────────────────────── */
.stats-container { gap: 20px !important; margin-top: 32px !important; }
.stats-container .stat {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 18px !important;
  padding: 28px 22px !important;
  min-width: 150px !important;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-normal) var(--ease-smooth);
  cursor: default;
  box-shadow: var(--shadow-card);
}
.stats-container .stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-vivid), transparent);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-smooth);
  pointer-events: none;
}
.stats-container .stat:hover {
  border-color: var(--border-accent) !important;
  background: rgba(18, 20, 38, 0.96) !important;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
}
.stats-container .stat:hover::before { opacity: 1; }
/*
 * Stat numbers: the HTML has inline style="color:#39FF14" on each h3.
 * To apply gradient text, we need BOTH:
 *   - color: transparent (fallback for non-webkit browsers without text-fill support)
 *   - -webkit-text-fill-color: transparent (overrides inline 'color' in webkit browsers
 *     since -webkit-text-fill-color takes precedence over 'color' for rendering)
 * All properties need !important to beat the inline style.
 */
.stats-container .stat h3 {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #67e8f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
.stats-container .stat p {
  font-size: 0.80rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.2px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* ── 14. SOCIAL CARDS ──────────────────────────────────────── */
.social-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  position: relative; overflow: hidden;
}
.social-card::before { background: transparent !important; inset: unset !important; z-index: unset !important; }
.social-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-vivid), rgba(20,184,166,0.5));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-smooth);
  pointer-events: none;
}
.social-card:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.92) !important;
}
.social-card:hover::after { transform: scaleX(1); }
.social-info h4 { color: var(--text-primary) !important; font-weight: 600; }
.social-info p   { color: var(--text-tertiary) !important; }
.social-info .social-link {
  color: var(--text-accent) !important;
  font-weight: 500; text-shadow: none !important;
  transition: color var(--dur-fast) var(--ease-smooth);
}
.social-info .social-link:hover { color: var(--accent) !important; text-shadow: none !important; opacity: 1 !important; }
.social-logo img { filter: brightness(0.85) saturate(0.9); transition: filter var(--dur-fast) var(--ease-smooth); }
.social-card:hover .social-logo img { filter: brightness(1.05) saturate(1.05); }

/* ── 15. BADGE CARDS ───────────────────────────────────────── */
.badge-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
}
.badge-card::before { background: transparent !important; inset: unset !important; }
.badge-card:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.92) !important;
}
.badge-info h4 { color: var(--text-primary) !important; font-weight: 600; }
.badge-info p  { color: var(--text-tertiary) !important; }
.badge-logo img { filter: brightness(0.88) saturate(0.9); transition: filter var(--dur-fast) var(--ease-smooth); }
.badge-card:hover .badge-logo img { filter: brightness(1.05) saturate(1.05); }
.badge-progress { background: rgba(255,255,255,0.07) !important; }
.progress-bar   { background: linear-gradient(90deg, var(--accent-vivid), rgba(20,184,166,0.8)) !important; }

/* ── 16. TECH CARDS ────────────────────────────────────────── */
.tech-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  position: relative;
}
.tech-card::before { background: transparent !important; inset: unset !important; z-index: unset !important; }
.tech-card:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.92) !important;
}
.tech-info h4  { color: var(--text-primary) !important; font-weight: 600 !important; }
.tech-level    { color: var(--text-tertiary) !important; opacity: 1 !important; }
.tech-logo img { filter: brightness(0.85) saturate(0.9); transition: filter var(--dur-fast) var(--ease-smooth); }
.tech-card:hover .tech-logo img { filter: brightness(1.05) saturate(1.05); }
.tech-stack-slider::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.3) !important; border-radius: 3px; }
.tech-stack-slider::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.55) !important; }

/* ── 17. ACTIVITY CARDS ────────────────────────────────────── */
.activity-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
}
.activity-card::before { background: transparent !important; inset: unset !important; }
.activity-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.92) !important;
  transform: translateY(-2px) !important;
}
.activity-info h4 { color: var(--text-primary) !important; font-weight: 600; }
.activity-info p  { color: var(--text-secondary) !important; opacity: 1 !important; }
.activity-time    { color: var(--text-accent) !important; opacity: 1 !important; }

/* ── 18. SERVICE ITEMS ─────────────────────────────────────── */
.service-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  position: relative; overflow: hidden;
}
.service-item::before { background: transparent !important; }
.service-item::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-vivid), transparent);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-smooth);
  pointer-events: none;
}
.service-item:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.92) !important;
}
.service-item:hover::after { opacity: 1; }
.service-item-title { color: var(--text-primary) !important; font-weight: 600; }
.service-item-text  { color: var(--text-secondary) !important; line-height: 1.7; }

/* ── 19. FREELANCE CARDS ───────────────────────────────────── */
.freelance-service-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  color: var(--text-primary) !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}
.freelance-service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-vivid), transparent);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-smooth);
  pointer-events: none;
}
.freelance-service-card:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.95) !important;
}
.freelance-service-card:hover::before { opacity: 1; }
.freelance-service-card h4 { color: var(--text-primary) !important; font-weight: 600; letter-spacing: -0.2px; }
.freelance-service-card p  { color: var(--text-secondary) !important; line-height: 1.7; }
.service-price-row  { color: var(--text-accent) !important; }
.service-price-main { color: var(--accent) !important; font-weight: 700; letter-spacing: -0.5px; }
.service-price-unit { color: var(--text-tertiary) !important; }

/* ── 20. ORDER BUTTON ──────────────────────────────────────── */
.order-btn {
  background: var(--accent-dim) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-accent) !important;
  border-radius: 10px !important;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.order-btn::before { display: none !important; }
.order-btn:hover {
  background: rgba(6, 182, 212, 0.18) !important;
  border-color: var(--accent-vivid) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(6,182,212,0.2), 0 6px 16px rgba(0,0,0,0.35) !important;
}

/* ── 21. SKILL BARS ────────────────────────────────────────── */
.content-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
}
.content-card::before { background: transparent !important; }
.skill-progress-bg {
  background: rgba(255, 255, 255, 0.08) !important;
  height: 7px !important; border-radius: 7px !important;
}
.skill-progress-fill {
  background: linear-gradient(90deg, var(--accent-vivid) 0%, rgba(20,184,166,0.9) 100%) !important;
  background-size: 300px 100% !important;
  border-radius: 7px !important;
  box-shadow: 0 0 14px rgba(6,182,212,0.35) !important;
  animation: skill-shimmer 2.5s linear infinite !important;
  position: relative !important;
}
.skill-progress-fill::after {
  content: '';
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  background: #fff; border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px rgba(6,182,212,0.5);
}
.skill .title-wrapper h5, .skills-item .h5 { color: var(--text-primary) !important; }
.skill .title-wrapper data, .skills-item data { color: var(--text-accent) !important; font-weight: 600; }

/* ── 22. TIMELINE ──────────────────────────────────────────── */
.timeline-item::after {
  background: var(--accent) !important;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-dim), 0 0 12px rgba(6,182,212,0.3) !important;
  animation: dot-pulse 3s ease-in-out infinite;
}
.timeline-item:not(:last-child)::before { background: rgba(6,182,212,0.18) !important; }
.timeline-list span   { color: var(--text-accent) !important; font-weight: 500; }
.timeline-item-title  { color: var(--text-primary) !important; font-weight: 600; }
.timeline-text        { color: var(--text-secondary) !important; line-height: 1.7; }

/* ── 23. CERTIFICATIONS ────────────────────────────────────── */
/* Main-page project-list cards (renderAnnotationCard) */
.certifications .project-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  background-image: none !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
}
.certifications .project-item:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Dedicated certifications page — premium credential cards */
.certifications-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  padding: 0 !important;
  list-style: none !important;
}
.certifications-list .certification-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  position: relative !important;
  box-shadow: var(--shadow-card) !important;
}
/* Accent bar at top of each credential card */
.certifications-list .certification-item::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(6,182,212,0.06), transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.certifications-list .certification-item::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--accent-vivid), rgba(20,184,166,0.6)) !important;
  border-radius: 18px 18px 0 0 !important;
  opacity: 0.7 !important;
  transition: opacity var(--dur-fast) var(--ease-smooth) !important;
}
.certifications-list .certification-item:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
}
.certifications-list .certification-item:hover::after {
  opacity: 1 !important;
}
/* The anchor that wraps card content */
.certifications-list .certification-item a {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Certificate image — full-width hero thumbnail */
.certifications-list .certification-item .certification-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0 !important;
  display: block !important;
  background: rgba(6,182,212,0.08) !important;
}
/* Content area below the image */
.certifications-list .certification-item .certification-content {
  padding: 18px 20px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
.certification-title {
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
}
.certification-desc {
  color: var(--text-tertiary) !important;
  font-size: 0.76rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Buttons row */
.certifications-list .cert-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 0 20px 18px !important;
  position: relative !important;
  z-index: 1 !important;
}
.certifications-list .cert-actions .cert-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
  cursor: pointer !important;
}
.certifications-list .cert-actions .view-btn {
  background: var(--accent-dim2) !important;
  border: 1px solid rgba(6,182,212,0.25) !important;
  color: var(--text-accent) !important;
}
.certifications-list .cert-actions .view-btn:hover {
  background: rgba(6,182,212,0.22) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 14px rgba(6,182,212,0.2) !important;
}
.certifications-list .cert-actions .verify-btn {
  background: transparent !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-secondary) !important;
}
.certifications-list .cert-actions .verify-btn:hover {
  border-color: var(--border-accent) !important;
  color: var(--text-accent) !important;
  background: var(--accent-dim) !important;
}

/* Generic cert-btn overrides for main-page cards */
.cert-btn { border-radius: 10px !important; transition: all var(--dur-fast) var(--ease-smooth) !important; }
.cert-btn:hover { border-color: var(--border-accent) !important; box-shadow: 0 4px 16px rgba(6,182,212,0.15) !important; }
.cert-btn::before { background: var(--accent-dim) !important; }

/* ── 24. BLOG POSTS ────────────────────────────────────────── */
.blog-post-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
  overflow: hidden;
}
.blog-post-item::before { background: transparent !important; }
.blog-post-item:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--shadow-hover) !important;
}
.blog-item-title { color: var(--text-primary) !important; letter-spacing: -0.2px; }
.blog-post-item:hover .blog-item-title { color: var(--text-accent) !important; }
.blog-text     { color: var(--text-secondary) !important; line-height: 1.7; }
.blog-type     { color: var(--text-accent) !important; }
.blog-subtitle { color: var(--text-secondary) !important; }
.blog-tag {
  background: var(--accent-dim) !important;
  border: 1px solid rgba(6,182,212,0.2) !important;
  color: var(--text-accent) !important;
  border-radius: 6px !important; font-weight: 500;
}
.blog-tag:hover { background: rgba(6,182,212,0.18) !important; }

/* ── 25. SEARCH BAR ────────────────────────────────────────── */
.search-bar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}
.search-bar:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px rgba(6,182,212,0.1) !important; outline: 0; }
.search-bar::placeholder { color: var(--text-tertiary) !important; opacity: 1 !important; }
.search-icon       { color: var(--text-tertiary) !important; opacity: 1 !important; }
.search-title      { color: var(--text-primary) !important; }
.search-description { color: var(--text-secondary) !important; opacity: 1 !important; }

/* ── 26. PAGINATION ────────────────────────────────────────── */
.blog-pagination button, .pagination button,
.certifications-pagination button, .achievements-pagination button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 12px !important;
  color: var(--text-secondary) !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.blog-pagination button:not(:disabled)::before,
.pagination button:not(:disabled)::before { display: none !important; }
.blog-pagination button:not(:disabled):hover, .pagination button:not(:disabled):hover,
.certifications-pagination button:not(:disabled):hover, .achievements-pagination button:not(:disabled):hover {
  border-color: var(--border-accent) !important;
  color: var(--text-accent) !important;
  background: var(--accent-dim) !important;
  box-shadow: 0 0 16px rgba(6,182,212,0.12) !important;
  text-shadow: none !important;
}
.blog-pagination button:not(:disabled):hover ion-icon,
.pagination button:not(:disabled):hover ion-icon { color: var(--accent) !important; }
.blog-pagination .blog-page-info, .pagination .page-info {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 12px !important;
  color: var(--text-secondary) !important;
}
.blog-pagination .blog-page-info ion-icon, .pagination .page-info ion-icon { color: var(--accent) !important; }

/* ── 27. FILTER BUTTONS ────────────────────────────────────── */
.filter-item button { color: var(--text-tertiary) !important; }
.filter-item button:hover { color: var(--text-secondary) !important; }
.filter-item button.active { color: var(--accent) !important; }
.filter-select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}

/* ── 28. AWARENESS CARDS ───────────────────────────────────── */
.awareness-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
}
.awareness-card:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.95) !important;
}
.awareness-card:focus-within {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-hover) !important;
  background: rgba(8, 18, 22, 0.95) !important;
}
.card-icon    { color: var(--accent) !important; }
.card-title   { color: var(--text-primary) !important; }
.card-content { color: var(--text-secondary) !important; line-height: 1.7; }
.highlight-box, .security-tip {
  background: rgba(6,182,212,0.05) !important;
  border-left: 3px solid rgba(6,182,212,0.5) !important;
  border-radius: 0 8px 8px 0;
}
.warning-box {
  background: rgba(239,68,68,0.05) !important;
  border-left: 3px solid rgba(239,68,68,0.45) !important;
  border-radius: 0 8px 8px 0;
}
.awareness-description { color: var(--text-secondary) !important; line-height: 1.75; }

/* ── 29. ACHIEVEMENTS ──────────────────────────────────────── */
.achievement-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  transition: all var(--dur-normal) var(--ease-smooth);
}
.achievement-item:hover {
  border-color: var(--border-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
}
.achievement-title       { color: var(--text-primary) !important; font-weight: 600; }
.achievement-description { color: var(--text-secondary) !important; line-height: 1.7; }

/* ── 30. FORM ──────────────────────────────────────────────── */
.form-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important; border-radius: 12px !important;
}
.form-input:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px rgba(6,182,212,0.1) !important; }
.form-input::placeholder { color: var(--text-tertiary) !important; opacity: 1; }
.form-btn {
  background: var(--accent-dim) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-accent) !important; border-radius: 10px !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.form-btn::before { background: transparent !important; }
.form-btn:hover:not(:disabled) {
  background: rgba(6,182,212,0.18) !important;
  border-color: var(--accent-vivid) !important;
  box-shadow: 0 0 18px rgba(6,182,212,0.15) !important;
}

/* ── 31. INFO MORE BUTTON ──────────────────────────────────── */
.info_more-btn {
  background: var(--accent-dim) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-accent) !important; border-radius: 10px !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.info_more-btn::before { background: transparent !important; }
.info_more-btn:hover, .info_more-btn:focus {
  background: rgba(6,182,212,0.18) !important;
  border-color: var(--accent-vivid) !important;
}

/* ── 32. SCROLL TO TOP ─────────────────────────────────────── */
.scroll-to-top-btn {
  background: rgba(10, 11, 20, 0.92) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 14px !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all var(--dur-normal) var(--ease-smooth) !important;
}
.scroll-to-top-btn::before { background: transparent !important; inset: unset !important; }
.scroll-to-top-btn:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent-vivid) !important;
  box-shadow: 0 0 24px rgba(6,182,212,0.2), 0 8px 24px rgba(0,0,0,0.4) !important;
  transform: translateY(-2px) !important;
}
.scroll-to-top-btn:focus {
  border-color: var(--border-accent2) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.2) !important; outline: none;
}

/* ── 33. ACTION LINKS ──────────────────────────────────────── */
.action-link {
  background: var(--accent-dim) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  color: var(--text-accent) !important; border-radius: 8px !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.action-link:hover { background: rgba(6,182,212,0.18) !important; border-color: var(--border-accent) !important; }

/* ── 34. TESTIMONIALS ──────────────────────────────────────── */
.testimonials-modal {
  background: rgba(10, 11, 20, 0.97) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.modal-close-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  transition: all var(--dur-fast) var(--ease-smooth) !important;
}
.modal-close-btn:hover { background: var(--accent-dim) !important; border-color: var(--border-accent) !important; color: var(--accent) !important; }
.testimonials-avatar-box { border: 2px solid var(--border-accent) !important; border-radius: 14px; box-shadow: 0 0 16px rgba(6,182,212,0.1); }

/* ── 35. MAPBOX ────────────────────────────────────────────── */
.mapbox { border: 1px solid var(--border-subtle) !important; border-radius: 16px !important; }

/* ── 36. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.42); }

/* ── 37. SELECTION & FOCUS ─────────────────────────────────── */
::selection { background: rgba(6,182,212,0.28); color: #fff; }
:focus-visible { outline: 2px solid rgba(6,182,212,0.55); outline-offset: 2px; border-radius: 4px; }

/* ── 38. TYPOGRAPHY POLISH ─────────────────────────────────── */
.h2, .h3, .h4, .h5 { letter-spacing: -0.3px; }
.h2 { font-weight: 700; }
.h3 { font-weight: 600; }

/* ── 39. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .avatar-box { animation: none; }
  .separator  { animation: none; }
  .skill-progress-fill { animation: none; }
  .timeline-item::after { animation: none; }
  body::before { display: none; }
}

/* ── 40. SCROLL-REVEAL ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 42. COPY TOAST ────────────────────────────────────────── */
.copy-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  color: var(--text-accent);
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  z-index: 10002;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 43. SKELETON LOADERS ──────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease infinite;
}
.sk-body { padding: 18px 20px; }
.sk-line {
  height: 11px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease infinite;
}

/* ── 44. PAGE TRANSITIONS ──────────────────────────────────── */
[data-page] {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ── 45. NOISE GRAIN TEXTURE ───────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* ── MARQUEE (Certified by section) ────────────────────────── */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Clip the wide scrolling track so it never causes horizontal page overflow */
.badges-section {
  overflow: hidden;
}

.marquee-wrapper {
  overflow: hidden;
  position: relative;
  /* fade-out edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 28px;
  min-width: 110px;
  border-right: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-smooth);
}

.marquee-item:hover {
  background: var(--accent-dim);
}

.marquee-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0.85) saturate(0.9);
  transition: filter var(--dur-fast) var(--ease-smooth);
}

.marquee-item:hover img {
  filter: brightness(1.05) saturate(1.1);
}

.marquee-item span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .marquee-item {
    padding: 14px 18px;
    min-width: 88px;
  }
  .marquee-item img {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .marquee-item {
    padding: 12px 14px;
    min-width: 76px;
  }
  .marquee-item img {
    width: 26px;
    height: 26px;
  }
  .marquee-item span {
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}