html {
        scroll-behavior: smooth;
    }

    body {
        background: var(--global-secondary-500, #EFEEE5);
        overflow-x: hidden;
    }

    /* Force scroll to top on page load */
    html,
    body {
        scroll-top: 0;
    }

    /* Loading Animation Styles */
    .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        background: var(--global-primary-500, #151922);
    }

    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--global-secondary-500, #EFEEE5);
        font-family: "Playfair Display";
        font-size: 3vw;
        font-style: italic;
        font-weight: 400;
        text-transform: lowercase;
        letter-spacing: -2px;
        z-index: 10001;
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 10000;
    }

    .loading-block {
        position: fixed;
        width: 5%;
        height: 100vh;
        background: var(--global-secondary-500, #EFEEE5);
    }

    .loading-block-1 {
        left: 0;
    }

    .loading-block-2 {
        left: 5%;
    }

    .loading-block-3 {
        left: 10%;
    }

    .loading-block-4 {
        left: 15%;
    }

    .loading-block-5 {
        left: 20%;
    }

    .loading-block-6 {
        left: 25%;
    }

    .loading-block-7 {
        left: 30%;
    }

    .loading-block-8 {
        left: 35%;
    }

    .loading-block-9 {
        left: 40%;
    }

    .loading-block-10 {
        left: 45%;
    }

    .loading-block-11 {
        left: 50%;
    }

    .loading-block-12 {
        left: 55%;
    }

    .loading-block-13 {
        left: 60%;
    }

    .loading-block-14 {
        left: 65%;
    }

    .loading-block-15 {
        left: 70%;
    }

    .loading-block-16 {
        left: 75%;
    }

    .loading-block-17 {
        left: 80%;
    }

    .loading-block-18 {
        left: 85%;
    }

    .loading-block-19 {
        left: 90%;
    }

    .loading-block-20 {
        left: 95%;
    }

    /* Hide main content during loading */
    .main-content {
        opacity: 0;
        visibility: hidden;
    }

    .main-content.loaded {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile loading optimizations */
    @media (max-width: 767px) {
        .loader {
            font-size: 6vw;
            letter-spacing: -1px;
        }
    }

    /* Tablet loading optimizations */
    @media (min-width: 768px) and (max-width: 1024px) {
        .loader {
            font-size: 4vw;
        }
    }

    /* Desktop loading optimizations */
    @media (min-width: 1025px) {
        .loader {
            font-size: 2.5vw;
            max-font-size: 48px;
        }
    }

    .smooth-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .smooth-content {
        will-change: transform;
        position: relative;
        z-index: 1;
    }

    /* Mobile: Reset smooth scroll wrapper to normal layout */
    @media (max-width: 767px) {
        .smooth-wrapper {
            position: static !important;
            height: auto !important;
            overflow: visible !important;
        }

        .smooth-content {
            transform: none !important;
            will-change: auto;
        }

        body {
            height: auto !important;
        }
    }

    nav {
        display: flex;
        width: 1120px;
        max-width: 90%;
        margin: 0 auto;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px 20px;
        position: fixed;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(239, 238, 229, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
        backdrop-filter: blur(40px) saturate(1.3) brightness(1.1);
        border-radius: 0px 0px 24px 24px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-top: none;
        box-shadow: 
            0 16px 60px rgba(21, 25, 34, 0.2),
            0 8px 25px rgba(21, 25, 34, 0.1),
            0 2px 0 rgba(255, 255, 255, 0.4) inset,
            0 -1px 0 rgba(255, 255, 255, 0.1) inset;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
    }

    nav.nav-visible {
        top: 0;
    }

    nav ul {
        display: flex;
        width: 353px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 16px;
    }

    nav ul li {
        margin: 0;
        padding: 0;
    }

    nav ul li a {
        color: var(--global-primary-500, #151922);
        font: var(--Display-18-Reg);
        text-decoration: none;
        padding: 8px 16px;
        transition: all 0.3s ease;
        border-radius: 4px;
    }

    nav ul li a:hover {
        color: var(--global-primary-600, #12151C);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 8px rgba(21, 25, 34, 0.1);
    }

    nav ul li a.active {
        background: linear-gradient(135deg, rgba(21, 25, 34, 0.8) 0%, rgba(21, 25, 34, 0.9) 100%);
        color: var(--global-secondary-500, #EFEEE5);
        font-weight: 500;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 
            0 2px 8px rgba(21, 25, 34, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.1) inset;
    }

    footer {
    display: flex;
    padding: 16px 156px 16px 156px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--global-primary-200, #73757A);
}

footer .left {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}

footer .left .copyright {
    display: flex;
    align-items: center;
    gap: 4px;
}

footer .left .copyright h2 {
    color: var(--global-primary-300, #73757A);
    font: var(--Text-14-Reg);
    white-space: nowrap;
}

footer .left h1 {
    color: var(--global-primary-300, #73757A);
    font: var(--Text-14-Reg);
    white-space: nowrap;
}

footer h2 {
    color: var(--global-primary-300, #73757A);
    font: var(--Text-14-Reg);
    white-space: nowrap;
}

/* Footer Responsive */
@media (max-width: 767px) {
    footer {
        padding: 12px 20px;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    footer .left {
        gap: 8px;
        flex-wrap: nowrap;
    }

    footer .left .copyright {
        gap: 3px;
    }

    footer .left .copyright h2,
    footer .left h1,
    footer h2 {
        font-size: 12px;
        line-height: 1.2;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    footer {
        padding: 14px 40px;
    }

    footer .left {
        gap: 10px;
    }

    footer .left .copyright {
        gap: 3px;
    }

    footer .left .copyright h2,
    footer .left h1,
    footer h2 {
        font-size: 13px;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    footer {
        padding: 16px 80px;
    }
}

    /* Navigation Responsive */
    @media (max-width: 767px) {
        nav {
            width: 95%;
            max-width: 95%;
            padding: 12px 16px;
            border-radius: 0 0 8px 8px;
        }

        nav ul {
            width: 100%;
            max-width: 280px;
        }

        nav ul li a {
            font-size: 14px;
            padding: 6px 10px;
        }

        nav ul li a.active {
            background: var(--global-primary-500, #151922);
            color: var(--global-secondary-500, #EFEEE5);
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        nav {
            width: 90%;
            max-width: 90%;
            padding: 14px 24px;
            border-radius: 0 0 10px 10px;
        }

        nav ul {
            width: 320px;
        }

        nav ul li a {
            font-size: 16px;
            padding: 7px 14px;
        }

        nav ul li a.active {
            background: var(--global-primary-500, #151922);
            color: var(--global-secondary-500, #EFEEE5);
        }
    }

    .hero {
        display: flex;
        padding: 32px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        align-self: stretch;
        padding-top: 48px;
    }

    .heroheadings {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
    }

    .heroheadings h1 {
        color: var(--global-primary-500, #151922);
        text-align: center;
        font-family: "Playfair Display";
        font-size: 120px;
        font-style: italic;
        font-weight: 400;
        line-height: normal;
    }

    .typing-cursor {
        animation: blink 1s infinite;
        color: var(--global-primary-500, #151922);
    }

    @keyframes blink {

        0%,
        50% {
            opacity: 1;
        }

        51%,
        100% {
            opacity: 0;
        }
    }

    .editiontag {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        text-align: right;
    }

    .editiontag .tag {
        color: var(--global-primary-500, #151922);
        text-align: right;
        font: var(--Text-14-Reg);
    }

    .herobanner {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .herobanner img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-width: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    .herobanner-skeleton {
        position: absolute;
        width: 100%;
        height: 300px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 8px;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    .herobanner {
        position: relative;
    }

    .heroinfo {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
    }

    .quick-info-tabs {
        display: flex;
        width: 450px;
        align-items: flex-start;
        gap: 76px;
    }

    .profession {
        display: flex;
        width: 110px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex-shrink: 0;
    }

    .menu {
        display: flex;
        width: 90px;
        height: 96px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
    }

    .aka-menu h1 {
        text-wrap: nowrap;
    }

    .menu h2 {
        color: var(--global-primary-500, #151922);
        font: var(--Text-14-Reg);
    }

    .menu h1 {
        color: var(--global-primary-500, #151922);
        font-family: "Playfair Display";
        font-size: 24px;
        font-style: italic;
        font-weight: 400;
        line-height: normal;
    }

    .social-links-tabs {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        align-content: flex-start;
        gap: 32px;
        flex: 1 0 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .phone-container,
    .email-container,
    .linkedin-container,
    .github-container {
        position: relative;
        display: inline-block;
    }

    .phone-popup,
    .email-popup,
    .linkedin-popup,
    .github-popup {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--global-secondary-500, #EFEEE5);
        color: var(--global-primary-500, #151922);
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 8px 12px;

        border: 1px solid var(--global-primary-300, #73757A);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.6s ease;
        margin-top: 8px;
        z-index: 10;
    }

    .phone-container:hover .phone-popup,
    .email-container:hover .email-popup,
    .linkedin-container:hover .linkedin-popup,
    .github-container:hover .github-popup {
        opacity: 1;
        visibility: visible;
    }

    .copy-notification {
        position: absolute;
        top: calc(100% + 50px);
        left: 50%;
        transform: translateX(-50%);
        color: var(--global-primary-500, #151922);
        font-family: Poppins;
        font-size: 12px;
        font-style: italic;
        font-weight: 275;
        line-height: normal;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 11;
        pointer-events: none;
    }

    .copy-notification.show {
        opacity: 1;
        visibility: visible;
    }

    /* About me Section */
    .aboutmesection {
        display: flex;
        padding: 64px 0px 64px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .aboutme {
        display: flex;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .aboutme .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
    }

    .aboutme .content h1 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-30-Med);
    }

    .aboutme .content p {
        color: var(--global-primary-500, #151922);

        font: var(--Text-18-Reg);
    }

    .aboutme .content .location {
        display: flex;
        width: 332px;
        flex-direction: row;
        justify-content: flex-st;
        align-items: flex-start;
        gap: 12px;
        flex: 1 0 0;
        padding-top: 20px;
    }

    .aboutme .content .location img {
        display: flex;
        height: 19px;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        aspect-ratio: 25/19;
    }

    .aboutme .content .location h2 {
        color: var(--global-primary-500, #151922);

        font: var(--Text-18-Reg);
    }

    .aboutme img {
        height: 332.526px;
        flex: 1 0 0;
        aspect-ratio: 388.67/332.53;
        object-fit: cover;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        /* Performance optimizations */
        will-change: filter;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    /* Luminosity effect for all images including gif - Default for all screens */
    .aboutme img:nth-child(2),
    .aboutme img:nth-child(3),
    .aboutme img:nth-child(4) {
        filter: grayscale(100%) contrast(1.1);
        transition: filter 0.7s ease;
        position: relative;
        z-index: 2;
        /* Performance optimizations */
        will-change: filter;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .aboutme img:nth-child(2):hover,
    .aboutme img:nth-child(3):hover,
    .aboutme img:nth-child(4):hover {
        filter: grayscale(0%) contrast(1);
    }

    /* Mobile performance optimizations */
    @media (max-width: 767px) {
        .aboutme img {
            /* Reduce quality on mobile for performance */
            image-rendering: auto;
            /* Smaller size on mobile to reduce memory usage */
            max-height: 250px;
            /* Optimize for mobile */
            will-change: auto;
        }

        .aboutme img:nth-child(2),
        .aboutme img:nth-child(3),
        .aboutme img:nth-child(4) {
            /* Disable expensive effects on mobile only */
            filter: none !important;
            transition: none !important;
        }

        .aboutme img:nth-child(2):hover,
        .aboutme img:nth-child(3):hover,
        .aboutme img:nth-child(4):hover {
            filter: none !important;
        }
    }

    /* Desktop luminosity effects - restored */
    @media (min-width: 768px) {

        .aboutme img:nth-child(2),
        .aboutme img:nth-child(3),
        .aboutme img:nth-child(4) {
            filter: grayscale(100%) contrast(1.1);
            transition: filter 0.7s ease;
            position: relative;
            z-index: 2;
            /* Performance optimizations */
            will-change: filter;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        .aboutme img:nth-child(2):hover,
        .aboutme img:nth-child(3):hover,
        .aboutme img:nth-child(4):hover {
            filter: grayscale(0%) contrast(1);
        }
    }

    /* Loading state skeleton */
    .aboutme img[loading="lazy"] {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Reduce motion for performance */
    .reduce-motion * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reduce-motion .aboutme img {
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }

    .reduce-motion .hover-image {
        display: none !important;
    }

    /* Prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .aboutme img {
            filter: none !important;
            transform: none !important;
        }

        .hover-image {
            display: none !important;
        }
    }

    .vietnam {
        display: flex;
        height: 19px;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        aspect-ratio: 25/19;
    }

    /* Education section */
    .education {
        display: flex;
        padding: 32px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .education h1 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-30-Med);
    }

    .education-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .eduinfo {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
    }

    .eduinfo .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .eduinfo .right .eduline {
        display: flex;
        align-items: center;
        gap: 20px;
        align-self: stretch;
    }

    .eduinfo .right .eduline h2 {
        color: var(--global-primary-500, #151922);
        text-wrap: nowrap;
        font: var(--Text-20-Reg);
    }

    .eduinfo .right .eduline .fill {
        width: 100% !important;
        height: 2px !important;
        background: var(--global-primary-300, #73757A) !important;
        display: block !important;
    }

    .eduinfo .right .edudetail {
        color: var(--global-primary-400, #44474E);
        font: var(--Text-18-Reg);
        opacity: 0.65;
    }

    /* My Journey Section */
    .myjourney {
        display: flex;
        padding: 64px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        align-self: stretch;
    }

    .myjourney h1 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-30-Med);
    }

    .jobs {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .jobline {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
    }

    .job {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .company {
        color: var(--global-primary-200, #A1A3A7);

        font: var(--Text-18-Reg);
    }

    .job h2 {
        color: var(--global-primary-600, #12151C);
        font: var(--Text-20-Reg);
    }

    .jobdetail {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    .levelbar {
        display: flex;
        align-items: center;
        align-self: stretch;
        gap: 12px;
    }

    .levelbar h2 {
        color: var(--global-primary-200, #A1A3A7);

        font: var(--Text-18-Reg);
    }

    .divider {
        width: 1.6px;
        height: 18px;
        background: var(--global-primary-200, #A1A3A7);
    }

    .levelbar .year {
        color: var(--global-primary-200, #A1A3A7);

        font: var(--Text-18-Reg);
    }

    .jobline p {
        width: 456px;
        color: var(--global-primary-200, #A1A3A7);
        font: var(--Text-18-Reg);
    }

    /* Job Hover Images */
    .job-hover-images {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 1000;
    }

    .hover-image {
        position: absolute;
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        opacity: 0;
        transform: scale(0.8);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        filter: grayscale(0.2);
    }

    .jobline {
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .jobline:hover {
        transform: translateX(10px);
    }

    .jobline:hover .job h2 {
        color: var(--global-primary-200, #A1A3A7);
        transition: color 0.3s ease;
    }

    .jobline:hover .company {
        color: var(--global-primary-500, #151922);
        transition: color 0.3s ease;
    }

    .jobline:hover p {
        color: var(--global-primary-500, #151922);
        transition: color 0.3s ease;
    }

    /* Background Skills Section */
    .backgroundskills {
        display: flex;
        padding: 64px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .backgroundskills h1 {
        flex: 1 0 0;
        color: var(--global-primary-500, #151922);
        font: var(--Display-30-Med);
    }

    .dragzone {
        position: relative;
        height: 200px;

        align-self: stretch;
        border: 1.6px solid var(--global-primary-500, #151922);
        overflow: hidden;
        background: var(--global-secondary-500, #EFEEE5);
    }

    .dragzone .tag {
        display: inline-flex;
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        border: 1.6px solid var(--global-primary-500, #151922);
        background: var(--global-secondary-500, #EFEEE5);

        user-select: none;
        white-space: nowrap;
        font: var(--Text-18-Reg);
        color: var(--global-primary-500, #151922);
        opacity: 0;
        will-change: transform;
        transition: box-shadow 0.3s ease;
    }

    .dragzone .tag:hover {
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
    }

    .dragzone .software-icon {
        width: 64px;
        height: 64px;
        cursor: pointer;
        user-select: none;
        opacity: 0;
        will-change: transform;
        transition: filter 0.3s ease;
        object-fit: contain;
        object-position: center;
        flex-shrink: 0;
    }



    /* Physics animation states */
    .dragzone .tag.physics-active,
    .dragzone .software-icon.physics-active {
        opacity: 1;
    }

    /* Skills layout containers - simplified for physics */
    .dragzone .tag {
        position: absolute;
    }

    .dragzone .software-icon {
        position: absolute;
    }

    /* Mobile optimizations for physics */
    @media (max-width: 767px) {
        .backgroundskills {
            padding: 32px 24px;
        }

        .dragzone {
            height: auto;
            min-height: 200px;
            padding: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .dragzone .software-icon {
            width: 48px;
            height: 48px;
            object-fit: contain;
            object-position: center;
            position: static !important;
            transform: none !important;
            opacity: 1 !important;
        }

        .dragzone .tag {
            padding: 6px 10px;
            font-size: 12px;
            position: static !important;
            transform: none !important;
            opacity: 1 !important;
        }
    }

    /* Tablet optimizations */
    @media (min-width: 768px) and (max-width: 1024px) {
        .backgroundskills {
            padding: 48px 64px;
        }

        .dragzone {
            height: 280px;
        }

        .dragzone .software-icon {
            width: 56px;
            height: 56px;
            object-fit: contain;
            object-position: center;
        }
    }

    /* Reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {

        .dragzone .tag,
        .dragzone .software-icon {
            transition: none !important;
        }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .dragzone {
            border-width: 2px;
        }

        .dragzone .tag {
            border-width: 2px;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
        }
    }

    /* Projects Section */
    .projects {
        display: flex;
        padding: 64px 156px;
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
        align-self: stretch;
    }

    .projects h1 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-30-Med);
        text-align: left;
        opacity: 0;
        transform: translateY(40px);
    }

    .project-lines {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
        opacity: 0;
        transform: translateY(60px);
    }

    .project-line-up {
        display: flex;
        padding-bottom: 24px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border-bottom: 1.6px solid var(--global-primary-300, #73757A);
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 0.7;
        transform: scale(0.98);
    }

    .project-line-up:hover {
        background-color: rgba(21, 25, 34, 0.02);
    }

    .project-line-up img {
        width: 24px;
        height: 24px;
        /* CSS transition removed - handled by GSAP */
    }

    .project-line-up.active img {
        /* GSAP handles rotation animation */
    }

    .project-line-up h1 {
        color: var(--global-primary-500, #151922);

        font: var(--Display-24-Reg);
    }

    .project-line-up h2 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-24-Med);
    }

    .project-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        flex: 1 0 0;
    }

    .project-title h1 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-24-Reg);
    }

    .project-title h2 {
        color: var(--global-primary-500, #151922);
        font: var(--Display-24-Med) !important;
    }

    .project-line-down {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        align-self: stretch;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-top: 0;
        /* CSS transitions disabled - controlled by GSAP */
    }

    .project-line-down.active {
        /* No styles needed - GSAP handles everything */
    }

    .project-line-down img {
        width: 265px;
        height: 348px;
    }

    /* Lazy Loading Styles */
    .project-image-lazy {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .project-image-lazy.loaded {
        opacity: 1;
        background: none;
        animation: none;
    }

    .project-image-lazy.loading {
        opacity: 1;
    }

    .project-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .project-info .tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .project-info .tabs .tab {
        display: flex;
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        color: var(--global-primary-500, #151922);
        font: var(--Text-16-Reg);
        border: 1.6px solid var(--global-primary-500, #151922);
        background: var(--global-secondary-500, #EFEEE5);
    }

    .project-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .project-details .up {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
    }

    .project-details .up h2 {
        color: var(--global-primary-500, #151922);

        font: var(--Text-24-Reg);
    }

    .project-details .up h3 {
        color: var(--global-primary-200, #73757A);
        font: var(--Text-18-Reg);
    }

    .project-details .description {
        width: 580px;
        color: var(--global-primary-200, #A1A3A7);

        font: var(--Text-18-Reg);
    }

    .project-details .btn-seemore {
        display: flex;
        align-items: center;
        gap: 4px;
        align-self: stretch;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        width: fit-content;
        padding: 8px 0;
    }

    .project-details .btn-seemore h1 {
        color: var(--global-primary-300, #73757A);
        text-decoration: underline;
        font: var(--Text-18-Reg);
        transition: all 0.3s ease;
        position: relative;
    }

    .project-details .btn-seemore img {
        width: 18px;
        height: 18px;
        aspect-ratio: 1/1;
        transition: all 0.3s ease;
        transform: translateX(0);
    }

    /* Hover Effects */
    .project-details .btn-seemore:hover {
        gap: 8px;
    }

    .project-details .btn-seemore:hover h1 {
        color: var(--global-primary-500, #151922);
        text-decoration-color: var(--global-primary-500, #151922);
    }

    .project-details .btn-seemore:hover img {
        transform: translateX(4px) scale(1.1);
    }

    /* Active state */
    .project-details .btn-seemore:active {
        transform: scale(0.98);
    }

    /* Focus state for accessibility */
    .project-details .btn-seemore:focus-visible {
        outline: 2px solid var(--global-primary-500, #151922);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Keyframe animation for see more button */
    @keyframes seeMoreBounce {
        0% {
            transform: translateX(0) scale(1);
        }

        20% {
            transform: translateX(2px) scale(1.05);
        }

        40% {
            transform: translateX(6px) scale(1.1);
        }

        60% {
            transform: translateX(4px) scale(1.08);
        }

        80% {
            transform: translateX(5px) scale(1.09);
        }

        100% {
            transform: translateX(4px) scale(1.1);
        }
    }

    /* Project Toggle Mobile Responsive */
    @media (max-width: 767px) {
        .project-line-down.active {
            max-height: 800px;
            /* Increased for mobile content */
            padding-top: 24px;
        }

        .project-line-down {
            flex-direction: column;
            gap: 24px;
        }

        .project-line-down img {
            width: 100%;
            height: auto;
            max-width: 320px;
        }

        .project-details .description {
            width: 100%;
        }

        .project-line-up {
            padding: 16px 0;
        }

        .project-line-up img {
            width: 20px;
            height: 20px;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        .project-line-down.active {
            max-height: 650px;
        }

        .project-line-down img {
            width: 200px;
            height: 260px;
        }

        .project-details .description {
            width: 400px;
        }

        .project-details .btn-seemore:hover {
            gap: 6px;
        }

        .project-details .btn-seemore:hover img {
            transform: translateX(3px) scale(1.05);
        }
    }

    /* Mobile hover adjustments */
    @media (max-width: 767px) {
        .project-details .btn-seemore {
            padding: 12px 0;
        }

        .project-details .btn-seemore:hover {
            gap: 6px;
        }

        .project-details .btn-seemore:hover img {
            transform: translateX(2px) scale(1.05);
        }

        /* On mobile, add tap feedback */
        .project-details .btn-seemore:active {
            transform: scale(0.95);
            background-color: rgba(21, 25, 34, 0.05);
            border-radius: 4px;
        }
    }

    /* Mobile optimizations for lazy loading */
    @media (max-width: 767px) {
        .project-image-lazy {
            background-size: 300% 100%;
            animation-duration: 2s;
        }

        .project-line-down img {
            width: 100%;
            height: auto;
            max-width: 320px;
        }
    }

    /* Mobile font size overrides */
    @media (max-width: 575.98px) {
        .project-details .up h2 {
            font-size: 18px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.3;
        }

        .project-details .up h3 {
            font-size: 14px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.4;
        }

        .project-details .description {
            font-size: 14px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.6;
        }

        .project-details .btn-seemore h1 {
            font-size: 14px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
        }
    }

/* Disable smooth scroll wrapper during navigation */
body.nav-scrolling .smooth-wrapper {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}

body.nav-scrolling .smooth-content {
    transform: none !important;
    transition: none !important;
}

/* No active state needed - just hover effects */

    @media (min-width: 576px) and (max-width: 767.98px) {
        .project-details .up h2 {
            font-size: 20px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.3;
        }

        .project-details .up h3 {
            font-size: 15px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.4;
        }

        .project-details .description {
            font-size: 15px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
            line-height: 1.6;
        }

        .project-details .btn-seemore h1 {
            font-size: 15px !important;
            font-family: var(--font-family-text);
            font-weight: 400;
        }
    }