html body[data-page="about"] #certifications{background:#fafafa;padding:100px 0}
#certifications>.container{width:calc(100% - 64px);max-width:1300px;margin:auto;padding:0}
#certifications .certificates-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
html body[data-page="about"] #certifications h2{font-size:48px;line-height:1.2;letter-spacing:-2px;font-weight:400;margin:0 0 16px;color:#27272a}
.certificates-heading p{margin:0;color:#62646c;line-height:1.7;font-size:18px;max-width:780px}
.certificates-controls{display:flex;align-items:center;gap:16px;flex-shrink:0}
.certificates-position{font-size:14px;color:#62646c;margin-right:12px;font-variant-numeric:tabular-nums}
.certificates-controls button{box-sizing:border-box;width:46px;min-width:46px;height:33px;padding:0;border:1px solid #fff;border-radius:99px;background:#f6f7f8;color:#17181c;box-shadow:0 9px 20px #0103091a,0 36px 36px #01030917,0 81px 49px #0103090d,0 144px 58px #01030903;display:grid;place-items:center;cursor:pointer;transition:background .25s}
.certificates-controls button:hover{background:#fff}
.certificates-controls svg{width:22px;height:22px}
.certificate-track{display:flex;gap:16px;align-items:stretch;touch-action:pan-y}
.certificate-card{flex:var(--certificate-weight,1) 1 0%;min-width:0;border-radius:16px;background:transparent;overflow:hidden;transition:flex .8s cubic-bezier(.22,1,.36,1)}
.certificate-card.is-active{flex:0 0 calc((100% - 64px)*.66)}
.certificate-select{display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;text-align:left;background:transparent;color:#27272a;cursor:zoom-in}
.certificate-image{position:relative;height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0;border-radius:16px;background:#eeeeef;clip-path:inset(0 round 16px)}
.certificate-image::after{content:"";position:absolute;inset:0;border:1px solid rgb(0 0 0 / 10%);border-radius:inherit;pointer-events:none}
.certificate-image img{display:block;flex-shrink:0;height:100%;width:100%;max-width:none;object-fit:cover;transition:width .8s cubic-bezier(.22,1,.36,1)}
.certificate-card.is-active .certificate-image img{width:100%;height:calc(100% - 24px);object-fit:contain}
#certifications .certificate-card h3{text-align:center;font-size:18px;font-weight:500;line-height:1.4;margin:20px 24px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#certifications .certificate-card.is-active h3{white-space:normal}
.certificate-details{text-align:center;padding:0 24px;opacity:0;visibility:hidden;transition:opacity .3s}
.certificate-card.is-active .certificate-details{opacity:1;visibility:visible;transition:opacity .5s .2s}
.certificate-details p{margin:0 0 6px;line-height:1.5;font-size:14px;color:#62646c}
.certificate-details .certificate-entity{font-size:12px;margin-bottom:0}
/* Measure every caption at its expanded width, so hover never reflows the next section. */
@media(min-width:801px){
 #certifications .certificate-card h3{width:calc(var(--certificate-expanded-width, 800px) - 48px);white-space:normal}
 .certificate-details{box-sizing:border-box;width:var(--certificate-expanded-width, 800px)}
 #certifications .certificate-card:not(.is-active) h3{visibility:hidden}
}
@media(min-width:801px) and (max-width:1100px){#certifications .certificate-card h3{width:calc(var(--certificate-expanded-width, 600px) - 32px)}}
#certifications button:focus-visible,#certifications a:focus-visible{outline:2px solid #1177ff;outline-offset:-3px}
@media(max-width:1100px){.certificate-image{height:380px}#certifications .certificate-card h3{margin-left:16px;margin-right:16px}.certificate-details{padding-left:16px;padding-right:16px}}
@media(max-width:800px){
 html body[data-page="about"] #certifications{padding:64px 0}#certifications>.container{width:calc(100% - 40px)}
 html body[data-page="about"] #certifications h2{font-size:34px;letter-spacing:-1px}
 #certifications .certificates-heading{display:block;margin-bottom:32px}.certificates-heading p{font-size:16px}.certificates-controls{margin-top:24px}
 .certificate-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;padding-bottom:4px}.certificate-track::-webkit-scrollbar{display:none}
 .certificate-card,.certificate-card.is-active{flex:0 0 86%;scroll-snap-align:start;transition:background .4s}
 .certificate-image{height:320px}.certificate-image img{width:100%;height:calc(100% - 24px);object-fit:contain}
 #certifications .certificate-card h3{white-space:normal;min-height:50px}
 .certificate-details,.certificate-card.is-active .certificate-details{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.certificate-card,.certificate-image img,.certificate-details,.certificates-controls button{transition:none!important}.certificate-track{scroll-behavior:auto}}

html.certificate-preview-open{overflow:hidden}
#certifications .certificate-preview{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:calc(100% - 40px);max-width:1100px;max-height:calc(100dvh - 40px);padding:24px;border:0;border-radius:16px;background:#fff;color:#27272a;overflow:auto}
.certificate-preview::backdrop{background:rgb(0 0 0/.65);backdrop-filter:blur(4px)}
.certificate-preview-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
#certifications .certificate-preview-header h3{margin:0;font-size:20px;font-weight:400;line-height:1.4}
.certificate-preview-close{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;background:#f1f1f3;color:#27272a;cursor:pointer}
.certificate-preview-close svg{width:24px;height:24px}
.certificate-preview-image{display:block;width:100%;height:calc(100dvh - 160px);object-fit:contain;margin:0 auto}
@media(max-width:800px){#certifications .certificate-preview{width:calc(100% - 24px);padding:16px;max-height:calc(100dvh - 24px)}#certifications .certificate-preview-header h3{font-size:16px}.certificate-preview-header{gap:12px}.certificate-preview-image{height:calc(100dvh - 150px)}}