/* Additions which preserve the existing dark, futuristic portfolio aesthetic. */
html {
    scroll-behavior: auto
}

#particles-js { display: none; }
.certificate-filters{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:-1.8rem 0 2.2rem}.cert-filter{padding:.6rem 1rem;border:1px solid rgba(0,217,255,.28);border-radius:999px;background:rgba(0,217,255,.06);color:#cceff7;font:600 .76rem 'Orbitron',sans-serif;cursor:pointer;transition:.25s}.cert-filter:hover,.cert-filter.active{background:var(--gradient);border-color:transparent;color:white;box-shadow:0 6px 18px rgba(0,217,255,.22)}.cert-card[hidden]{display:none}

.hero-photo-card{position:absolute;right:4%;bottom:4%;z-index:4;width:122px;padding:6px 6px 10px;border:1px solid rgba(0,217,255,.7);border-radius:14px;background:rgba(10,10,20,.88);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(0,217,255,.25);animation:profile-card-float 5s ease-in-out infinite}.hero-photo-card img{display:block;width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:center;border-radius:9px}.hero-photo-card span{display:block;margin-top:8px;color:#d9fbff;text-align:center;font-size:.66rem;font-family:'Orbitron',sans-serif;white-space:nowrap}.hero-photo-card i{font-size:.5rem;color:#29dc86;vertical-align:middle}@keyframes profile-card-float{50%{transform:translateY(-9px)}}@media(max-width:768px){.hero-photo-card{right:8%;bottom:1%;width:95px}.hero-photo-card span{font-size:.53rem}}

#particles-js {
    opacity: .55;
    pointer-events: none
}

.navbar {
    backdrop-filter: blur(7px)
}

.ai-robot {
    width: 410px;
    height: 470px;
    position: relative;
    isolation: isolate;
    animation: robot-float 5.5s ease-in-out infinite;
    filter: drop-shadow(0 22px 28px rgba(0, 217, 255, .22))
}

.robot-orbit {
    position: absolute;
    left: 50%;
    top: 48%;
    border: 1px solid rgba(0, 217, 255, .38);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1
}

.orbit-one {
    width: 390px;
    height: 170px;
    animation: robot-spin 16s linear infinite
}

.orbit-two {
    width: 320px;
    height: 420px;
    border-color: rgba(157, 0, 255, .3);
    animation: robot-spin 22s linear infinite reverse
}

.robot-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #00d9ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00d9ff;
    animation: spark 2.6s ease-in-out infinite
}

.spark-one {
    top: 11%;
    left: 11%
}

.spark-two {
    top: 33%;
    right: 5%;
    animation-delay: .8s
}

.spark-three {
    bottom: 17%;
    left: 5%;
    animation-delay: 1.4s
}

.robot-hair {
    position: absolute;
    left: 50%;
    top: 53px;
    width: 200px;
    height: 205px;
    transform: translateX(-50%);
    border-radius: 48% 48% 38% 38%;
    background: linear-gradient(145deg, #9d00ff, #300052 57%, #00d9ff);
    box-shadow: 0 0 25px rgba(157, 0, 255, .65)
}

.robot-head {
    position: absolute;
    left: 50%;
    top: 70px;
    width: 154px;
    height: 184px;
    transform: translateX(-50%);
    border: 3px solid rgba(148, 249, 255, .8);
    border-radius: 46% 46% 42% 42%;
    background: linear-gradient(140deg, #e6fbff 0%, #94e6ff 27%, #693ab1 75%, #281342);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, .65), 0 0 30px rgba(0, 217, 255, .6)
}

.robot-head:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -23px;
    width: 53px;
    height: 34px;
    transform: translateX(-50%);
    border: 3px solid #00d9ff;
    border-bottom: 0;
    border-radius: 50px 50px 0 0;
    box-shadow: 0 0 15px #00d9ff
}

.robot-eye {
    position: absolute;
    top: 76px;
    width: 27px;
    height: 13px;
    border-radius: 50%;
    background: #07101f;
    box-shadow: 0 0 0 5px rgba(0, 217, 255, .6), 0 0 16px #00d9ff
}

.eye-left {
    left: 34px
}

.eye-right {
    right: 34px
}

.robot-mouth {
    position: absolute;
    left: 50%;
    bottom: 35px;
    width: 42px;
    height: 9px;
    transform: translateX(-50%);
    border-bottom: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px #00d9ff
}

.robot-ear {
    position: absolute;
    top: 70px;
    width: 22px;
    height: 45px;
    background: #00d9ff;
    box-shadow: 0 0 15px #00d9ff
}

.ear-left {
    left: -20px;
    border-radius: 10px 0 0 10px
}

.ear-right {
    right: -20px;
    border-radius: 0 10px 10px 0
}

.robot-neck {
    position: absolute;
    left: 50%;
    top: 247px;
    width: 58px;
    height: 40px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #4a2b7f, #bff8ff, #4a2b7f);
    border: 2px solid #00d9ff
}

.robot-body {
    position: absolute;
    left: 50%;
    top: 280px;
    width: 250px;
    height: 153px;
    transform: translateX(-50%);
    border: 3px solid rgba(0, 217, 255, .8);
    border-radius: 95px 95px 28px 28px;
    background: linear-gradient(140deg, #111e47, #693ab1 56%, #00a9ce);
    box-shadow: inset 0 0 35px rgba(255, 255, 255, .18), 0 0 30px rgba(0, 217, 255, .4)
}

.robot-shoulder {
    position: absolute;
    top: 30px;
    width: 66px;
    height: 65px;
    border-radius: 50%;
    background: #211343;
    border: 3px solid #00d9ff;
    box-shadow: 0 0 20px rgba(0, 217, 255, .6)
}

.shoulder-left {
    left: -38px
}

.shoulder-right {
    right: -38px
}

.robot-core {
    position: absolute;
    left: 50%;
    top: 42px;
    width: 73px;
    height: 73px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    border: 3px solid #a8f8ff;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle, #00d9ff, #4e2393);
    box-shadow: 0 0 24px #00d9ff;
    font-size: 1.6rem;
    animation: core-pulse 2.5s ease-in-out infinite
}

@keyframes robot-float {
    50% {
        transform: translateY(-17px) rotate(1deg)
    }
}

@keyframes robot-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes spark {
    50% {
        transform: scale(1.8);
        opacity: .35
    }
}

@keyframes core-pulse {
    50% {
        box-shadow: 0 0 38px #00d9ff;
        transform: translateX(-50%) scale(1.08)
    }
}

.experience-section {
    padding-top: 30px
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem
}

.cert-card {
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    border: 1px solid rgba(0, 217, 255, .15);
    cursor: pointer;
    background: var(--bg-card);
    border-radius: 15px;
    overflow: hidden;
    transition: transform .3s, border-color .3s, box-shadow .3s
}

.cert-card:hover,
.cert-card:focus-visible {
    transform: translateY(-7px);
    border-color: rgba(0, 217, 255, .55);
    box-shadow: 0 15px 35px rgba(0, 217, 255, .15);
    outline: none
}

.cert-image {
    display: flex;
    height: 168px;
    background: #101522;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.cert-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .4s
}

.cert-card:hover .cert-image img {
    transform: scale(1.04)
}

.cert-pdf {
    flex-direction: column;
    gap: .6rem;
    color: #ff5c7f;
    background: linear-gradient(135deg, #291220, #151727);
    font-size: 2.4rem
}

.cert-pdf small {
    font-family: 'Orbitron', sans-serif;
    font-size: .75rem;
    color: #d7d9e7
}

.cert-content {
    display: block;
    padding: 1.3rem
}

.cert-content h3 {
    color: var(--text-light);
    font-size: 1.12rem;
    line-height: 1.35;
    margin: .7rem 0
}

.cert-content p {
    color: #b0b0c0;
    font-size: .92rem;
    line-height: 1.55
}

.cert-badge {
    display: inline-block;
    background: rgba(0, 217, 255, .12);
    color: var(--text-glow);
    border: 1px solid rgba(0, 217, 255, .25);
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-family: 'Orbitron', sans-serif
}

.cert-view {
    display: block;
    margin-top: 1rem;
    color: var(--text-glow);
    font-weight: 600;
    font-size: .9rem
}

.certificate-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .25s
}

.certificate-modal.is-open {
    opacity: 1;
    visibility: visible
}

.certificate-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 12, .86);
    backdrop-filter: blur(8px)
}

.certificate-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    max-height: 90vh;
    overflow: auto;
    padding: 1.25rem;
    background: #111521;
    border: 1px solid rgba(0, 217, 255, .45);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .6)
}

.certificate-modal__dialog h3 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 1.05rem;
    margin: 0 2rem 1rem 0
}

.certificate-modal__dialog img,
.certificate-modal__dialog embed {
    display: block;
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: 8px;
    background: #fff
}

.certificate-modal__dialog embed {
    height: 74vh
}

.certificate-modal__close {
    position: absolute;
    right: 12px;
    top: 9px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    background: #20293c;
    color: #fff
}

.certificate-modal__close:hover {
    background: var(--accent)
}

body.modal-open {
    overflow: hidden
}

@media(max-width:768px) {
    .ai-robot {
        transform: scale(.78);
        margin: -45px auto
    }

    .hero-visual {
        height: 395px
    }

    .experience-section {
        padding-top: 70px
    }

    .certificate-modal__dialog {
        padding: .85rem
    }

    .certificate-modal__dialog embed {
        height: 65vh
    }
}