/*==================================================*
* PORTFOLIO RESPONSIVE
*==================================================*/


/*==================================================*
* LARGE LAPTOPS / SMALL DESKTOPS
*==================================================*/

@media (max-width:1200px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:130px 0;
    }

    .portfolio-capabilities-container{
        padding:0 25px;
    }

    .portfolio-capabilities-header{
        grid-template-columns:
            minmax(0,1fr)
            minmax(260px,.7fr);

        gap:45px;

        margin-bottom:65px;
    }

    .portfolio-capabilities-title{
        font-size:clamp(
            2.6rem,
            5vw,
            4.5rem
        );
    }

    .portfolio-capability-card{
        min-height:370px;
        padding:30px 25px;
    }

    .portfolio-capability-meter{
        left:25px;
        right:25px;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:130px 0;
    }

    .portfolio-clients-container{
        padding:0 25px;
    }

    .portfolio-clients-header{
        margin-bottom:65px;
    }

    .client-card{
        width:265px;
    }

    .client-frame{
        height:315px;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:140px 0 110px;
    }

    .portfolio-contact-container{
        padding:0 25px;
    }

    .portfolio-contact-system{
        grid-template-columns:
            1.1fr
            .9fr;

        gap:18px;
    }

    .portfolio-contact-panel{
        min-height:500px;
        padding:45px;
    }

    .contact-panel-status{
        left:45px;
        right:45px;
    }

    .contact-info-card{
        padding:22px;
    }

/*==================================================
  PORTFOLIO HERO — RESPONSIVE 1200px
==================================================*/

     .portfolio-hero{
        min-height:780px;
        padding:120px 0 80px;
    }

    .portfolio-hero-grid{
        grid-template-columns:
            minmax(0,.95fr)
            minmax(0,1.05fr);

        gap:20px;

        padding:0 25px;
    }



     .portfolio-hero-title{
        font-size:clamp(
            2.8rem,
            5vw,
            4.6rem
        );
    }

    .portfolio-hero-text{
        font-size:1rem;
    }

    .portfolio-hero-visual{
        width:min(620px,100%);
        height:620px;
    }

    .portfolio-project-label.label-project-one{
        top:205px;
        left:70px;
    }


     .portfolio-project-label.label-project-two{
        top:350px;
        right:35px;
    }

    .portfolio-project-label.label-project-three{
        bottom:155px;
        left:75px;
    }

    .portfolio-hud.portfolio-hud-top{
        right:5%;
    }

    .portfolio-hud.portfolio-hud-bottom{
        left:5%;
    }


     /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 1200px
    ==================================================*/

    .portfolio-process{
        padding:120px 0 130px;
    }

    .portfolio-process-container{
        padding:0 25px;
    }

    .portfolio-process-system{
        gap:18px;
    }

    .portfolio-process-card{
        min-height:360px;
        padding:28px 22px;
    }

    .portfolio-process-status{
        left:22px;
    }




    /*==================================================
  PORTFOLIO WHY MEGATECH — 1200px
==================================================*/

.portfolio-why{
    padding:130px 0;
}

.portfolio-why-container{
    padding:0 25px;
}

.portfolio-why-header{
    gap:40px;
    margin-bottom:65px;
}

.portfolio-why-system{
    grid-template-columns:1.2fr .8fr;
}

.portfolio-why-card{
    min-height:300px;
    padding:25px;
}

.portfolio-why-panel{
    min-height:620px;
    padding:32px;
}

.why-panel-status{
    left:32px;
    right:32px;
}

.portfolio-projects{
    padding:120px 0;
}

.portfolio-projects-container{
    /* width scale: remains fluid within the container */
    width:min(var(--container-width), calc(100% - 50px));
}

.portfolio-projects-header{
    gap:40px;
    margin-bottom:65px;
}

.portfolio-project-card{
    min-height:650px;
}

.project-visual{
    height:280px;
}

.project-card-content{
    padding:26px;
}

.project-screen{
    /* width scale: slightly reduced for this breakpoint */
    width:76%;
}

}


/*==================================================*
* TABLETS / SMALL LAPTOPS
*==================================================*/

@media (max-width:992px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:115px 0;
    }

    .portfolio-capabilities-header{
        grid-template-columns:1fr;

        gap:25px;

        align-items:start;

        margin-bottom:55px;
    }

    .portfolio-capabilities-intro{
        max-width:650px;
    }

    .portfolio-capabilities-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:18px;
    }

    .portfolio-capability-card{
        min-height:370px;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:115px 0;
    }

    .portfolio-clients-header{
        max-width:680px;

        margin-bottom:60px;
    }

    .portfolio-clients-title{
        font-size:clamp(
            2.4rem,
            6vw,
            4.2rem
        );
    }

    .clients-marquee{
        padding:30px 0 45px;
    }

    .client-card{
        width:250px;
    }

    .client-frame{
        height:305px;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:125px 0 100px;
    }

    .portfolio-contact-header{
        margin-bottom:60px;
    }

    .portfolio-contact-title{
        font-size:clamp(
            2.8rem,
            7vw,
            5rem
        );
    }

    .portfolio-contact-system{
        grid-template-columns:1fr;
    }

    .portfolio-contact-panel{
        min-height:500px;
    }

    .portfolio-contact-info{
        display:grid;

        grid-template-columns:
            repeat(2,1fr);

        gap:12px;
    }

    .contact-info-card{
        min-height:115px;
    }



    /*==================================================
  PORTFOLIO HERO — RESPONSIVE 992px
==================================================*/

.portfolio-hero{
        min-height:auto;
        padding:120px 0 100px;
    }

    .portfolio-hero-grid{
        grid-template-columns:1fr;
        gap:50px;
        text-align:center;
    }

    .portfolio-hero-content{
        max-width:750px;
        margin:0 auto;
    }

    .portfolio-hero-title{
        margin-top:20px;
        font-size:clamp(
            3rem,
            7vw,
            4.8rem
        );
    }

    .portfolio-hero-text{
        max-width:680px;
        margin:0 auto;
    }

    .portfolio-hero-actions{
        justify-content:center;
    }

    .portfolio-hero-status{
        justify-content:center;
    }

    .portfolio-hero-visual{
        width:min(650px,100%);
        height:650px;
        flex-direction: column;
    }

    .portfolio-project-label.label-project-one{
        top:220px;
        left:75px;
    }

    .portfolio-project-label.label-project-two{
        top:365px;
        right:45px;
    }

    .portfolio-project-label.label-project-three{
        bottom:165px;
        left:80px;
    }

    .portfolio-hud.portfolio-hud-top{
        top:3%;
        right:4%;
    }

    .portfolio-hud.portfolio-hud-bottom{
        bottom:3%;
        left:4%;
    }

    .portfolio-hero-scroll{
        bottom:18px;
    }


    /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 992px
    ==================================================*/

    .portfolio-process{
        padding:120px 0;
    }

    .portfolio-process-header{
        margin-bottom:70px;
    }

    .portfolio-process-system{
        grid-template-columns:
            repeat(2,1fr);

        gap:20px;
    }

    .portfolio-process-line{
        display:none;
    }

    .portfolio-process-card{
        min-height:350px;
        padding:30px 25px;
    }

    .portfolio-process-footer{
        margin-top:45px;
    }



    /*==================================================
  PORTFOLIO WHY MEGATECH — 992px
==================================================*/

.portfolio-why{
    padding:115px 0;
}

.portfolio-why-container{
    padding:0 22px;
}

.portfolio-why-header{
    grid-template-columns:1fr;
    gap:25px;
    margin-bottom:55px;
}

.portfolio-why-intro{
    max-width:650px;
}

.portfolio-why-system{
    grid-template-columns:1fr;
}

.portfolio-why-grid{
    grid-template-columns:repeat(2,1fr);
}

.portfolio-why-panel{
    min-height:500px;
    padding:35px;
}

.why-panel-content h3{
    max-width:550px;
}

.why-panel-content p{
    max-width:600px;
}

.why-panel-status{
    left:35px;
    right:35px;
}

.portfolio-why-metrics{
    margin-top:45px;
}

.portfolio-projects{
    padding:110px 0;
}

.portfolio-projects-container{
    /* width scale: remains fluid */
    width:min(var(--container-width), calc(100% - 44px));
}

.portfolio-projects-header{
    grid-template-columns:1fr;
    gap:25px;
    margin-bottom:60px;
}

.projects-header-right{
    max-width:650px;
    justify-self:start;
}

.portfolio-project-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.portfolio-project-card{
    min-height:650px;
}

.project-visual{
    height:280px;
}

.project-card-content{
    padding:28px;
}

.project-screen{
    /* width scale: reduced slightly to fit the smaller visual area */
    width:74%;
}

}


/*==================================================*
* TABLETS
*==================================================*/

@media (max-width:768px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:100px 0;
    }

    .portfolio-capabilities-container{
        padding:0 20px;
    }

    .portfolio-capabilities-header{
        margin-bottom:50px;
    }

    .portfolio-capabilities-title{
        font-size:clamp(
            2.4rem,
            8vw,
            3.8rem
        );

        letter-spacing:-1.5px;
    }

    .portfolio-capabilities-intro{
        font-size:.9rem;
        line-height:1.75;
    }

    .portfolio-capabilities-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .portfolio-capability-card{
        min-height:350px;

        padding:30px 25px;
    }

    .portfolio-capability-icon{
        width:56px;
        height:56px;

        margin-bottom:24px;
    }

    .portfolio-capability-card h3{
        font-size:1.25rem;
    }

    .portfolio-capability-card p{
        font-size:.82rem;
    }

    .portfolio-capability-meter{
        left:25px;
        right:25px;
        bottom:25px;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:100px 0;
    }

    .portfolio-clients-container{
        padding:0 20px;
    }

    .portfolio-clients-header{
        margin-bottom:50px;
    }

    .portfolio-clients-title{
        font-size:clamp(
            2.3rem,
            8vw,
            3.8rem
        );

        letter-spacing:-1.5px;
    }

    .portfolio-clients-intro{
        font-size:.9rem;
        line-height:1.75;
    }

    .clients-marquee{
        padding:25px 0 40px;
    }

    .clients-marquee-track{
        gap:20px;
    }

    .client-card{
        width:240px;
    }

    .client-frame{
        height:295px;
    }

    .client-info{
        padding-top:17px;
    }

    .client-card:hover{
        transform:translateY(-7px);
    }

    .clients-system-status{
        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        line-height:1.7;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:105px 0 90px;
    }

    .portfolio-contact-container{
        padding:0 20px;
    }

    .portfolio-contact-header{
        margin-bottom:50px;
    }

    .portfolio-contact-title{
        font-size:clamp(
            2.6rem,
            9vw,
            4.5rem
        );

        letter-spacing:-2px;
    }

    .portfolio-contact-intro{
        font-size:.9rem;
        line-height:1.75;
    }

    .portfolio-contact-panel{
        min-height:480px;

        padding:40px 30px;
    }

    .contact-panel-content{
        max-width:100%;
    }

    .contact-panel-content h3{
        font-size:clamp(
            2rem,
            7vw,
            3.2rem
        );

        letter-spacing:-1px;
    }

    .contact-panel-content p{
        font-size:.86rem;
    }

    .contact-panel-status{
        left:30px;
        right:30px;
        bottom:25px;
    }

    .portfolio-contact-info{
        grid-template-columns:1fr;
    }

    .contact-info-card{
        min-height:110px;

        padding:22px;
    }

    .portfolio-contact-footer{
        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        line-height:1.7;
    }

    /*==================================================
  PORTFOLIO HERO — RESPONSIVE 768px
==================================================*/

.portfolio-hero{
        padding:105px 0 90px;
    }

    .portfolio-hero-grid{
        padding:0 20px;
        gap:35px;
    }

    .portfolio-hero-title{
        margin:18px 0 20px;

        font-size:clamp(
            2.6rem,
            9vw,
            4rem
        );

        letter-spacing:-1.5px;
    }

    .portfolio-hero-title span{
        margin-top:5px;
    }

    .portfolio-hero-text{
        font-size:.95rem;
        line-height:1.75;
    }

    .portfolio-hero-actions{
        margin-top:30px;
        gap:12px;
    }

    .portfolio-hero-status{
        margin-top:27px;
        font-size:.65rem;
    }

    .portfolio-hero-visual{
        width:100%;
        height:auto;
        min-height:520px;
        overflow: hidden;
        flex-direction: column;
    }

    .portfolio-core-svg{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

    .portfolio-project-label{
        font-size:.58rem;
        max-width:145px;
        padding:8px 11px;
        gap:7px;
    }

    .portfolio-project-label i{
        font-size:.68rem;
    }

    .portfolio-project-label.label-project-one{
        top:180px;
        left:45px;
    }

    .portfolio-project-label.label-project-two{
        top:305px;
        right:25px;
    }

    .portfolio-project-label.label-project-three{
        bottom:125px;
        left:50px;
    }

    .portfolio-hud{
        padding:8px 11px;
        font-size:.48rem;
        letter-spacing:1.2px;
    }

    .portfolio-hud strong{
        font-size:.56rem;
    }

    .portfolio-hud.portfolio-hud-top{
        top:4%;
        right:3%;
    }

    .portfolio-hud.portfolio-hud-bottom{
        bottom:4%;
        left:3%;
    }

    .portfolio-hero-scroll{
        font-size:.52rem;
        letter-spacing:1.5px;
        gap:8px;
    }


    /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 768px
    ==================================================*/

    .portfolio-process{
        padding:105px 0 110px;
    }

    .portfolio-process-container{
        padding:0 20px;
    }

    .portfolio-process-header{
        margin-bottom:60px;
    }

    .portfolio-process-title{
        margin:20px 0;

        font-size:clamp(
            2.3rem,
            8vw,
            3.8rem
        );

        letter-spacing:-1.5px;
    }

    .portfolio-process-intro{
        font-size:.92rem;
        line-height:1.75;
    }

    .portfolio-process-system{
        grid-template-columns:1fr;
        gap:18px;
    }

    .portfolio-process-card{
        min-height:330px;
        padding:28px 24px;
    }

    .portfolio-process-number{
        top:16px;
        right:18px;
        font-size:1.7rem;
    }

    .portfolio-process-icon{
        width:54px;
        height:54px;
        margin-bottom:24px;
    }

    .portfolio-process-card h3{
        font-size:1.25rem;
    }

    .portfolio-process-card p{
        font-size:.84rem;
    }

    .portfolio-process-status{
        left:24px;
        bottom:22px;
    }

    .portfolio-process-footer{
        margin-top:45px;
        font-size:.52rem;
    }




    /*==================================================
  PORTFOLIO WHY MEGATECH — 768px
==================================================*/

.portfolio-why{
    padding:100px 0;
}

.portfolio-why-container{
    padding:0 20px;
}

.portfolio-why-header{
    margin-bottom:50px;
}

.portfolio-why-title{
    letter-spacing:-1.5px;
}

.portfolio-why-system{
    grid-template-columns:1fr;
}

.portfolio-why-grid{
    grid-template-columns:1fr;
}

.portfolio-why-card{
    min-height:280px;
    padding:25px;
}

.portfolio-why-panel{
    min-height:480px;
    padding:30px;
}

.why-panel-content h3{
    font-size:1.8rem;
}

.why-panel-status{
    left:30px;
    right:30px;
}

.portfolio-why-metrics{
    grid-template-columns:repeat(2,1fr);
    row-gap:25px;
}

.why-metric{
    padding:0 20px;
}

.why-metric:nth-child(2){
    border-right:0;
}

.why-metric:nth-child(3){
    padding-left:0;
}

.portfolio-projects{
    padding:100px 0 110px;
}

.portfolio-projects-container{
    /* width scale: uses almost the full mobile/tablet width */
    width:calc(100% - 40px);
}

.portfolio-projects-header{
    margin-bottom:50px;
}

.portfolio-projects-title{
    letter-spacing:-1.5px;
}

.portfolio-project-showcase{
    grid-template-columns:1fr;
    gap:20px;
}

.portfolio-project-card{
    min-height:auto;
}

.project-visual{
    height:300px;
}

.project-screen{
    /* width scale: enlarged again because cards are now full width */
    width:72%;
}

.project-card-content{
    padding:28px;
}

.projects-bottom{
    margin-top:55px;
}

}


/*==================================================*
* LARGE MOBILE
*==================================================*/

@media (max-width:576px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:85px 0;
    }

    .portfolio-capabilities-container{
        padding:0 18px;
    }

    .portfolio-capabilities-title{
        font-size:clamp(
            2.2rem,
            10vw,
            3.2rem
        );

        line-height:1.05;
    }

    .portfolio-capabilities-title span{
        margin-top:5px;
    }

    .portfolio-capabilities-header{
        gap:20px;

        margin-bottom:40px;
    }

    .portfolio-capability-card{
        min-height:340px;

        padding:27px 22px;
    }

    .portfolio-capability-index{
        top:18px;
        right:18px;

        font-size:1.5rem;
    }

    .portfolio-capability-icon{
        width:52px;
        height:52px;

        margin-bottom:22px;

        font-size:1rem;
    }

    .portfolio-capability-label{
        font-size:.52rem;
        letter-spacing:1.6px;
    }

    .portfolio-capability-card h3{
        font-size:1.18rem;
    }

    .portfolio-capability-card p{
        font-size:.8rem;
        line-height:1.7;
    }

    .portfolio-capability-meter{
        left:22px;
        right:22px;
        bottom:22px;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:85px 0;
    }

    .portfolio-clients-container{
        padding:0 18px;
    }

    .portfolio-clients-header{
        margin-bottom:40px;
    }

    .portfolio-clients-title{
        font-size:clamp(
            2.1rem,
            10vw,
            3.2rem
        );

        letter-spacing:-1.2px;
    }

    .portfolio-clients-intro{
        font-size:.84rem;
    }

    .clients-marquee{
        padding:20px 0 35px;
    }

    .clients-marquee-track{
        gap:16px;
    }

    .client-card{
        width:225px;
    }

    .client-frame{
        height:280px;

        padding:8px;
    }

    .client-image-wrap{
        border-width:1px;
    }

    .client-info{
        padding:15px 2px 0;
    }

    .client-index{
        font-size:.5rem;
    }

    .client-info h3{
        font-size:.95rem;
    }

    .client-category{
        font-size:.5rem;
    }

    .client-tech-ring{
        width:75px;
        height:75px;

        right:-30px;
        bottom:-30px;
    }

    .clients-system-status{
        margin-top:35px;

        padding-top:18px;

        font-size:.5rem;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:90px 0 75px;
    }

    .portfolio-contact-container{
        padding:0 18px;
    }

    .portfolio-contact-header{
        margin-bottom:40px;
    }

    .portfolio-contact-title{
        font-size:clamp(
            2.4rem,
            11vw,
            3.5rem
        );

        letter-spacing:-1.5px;
    }

    .portfolio-contact-intro{
        font-size:.84rem;
    }

    .portfolio-contact-panel{
        min-height:470px;

        padding:35px 22px;
    }

    .contact-panel-label{
        margin-bottom:22px;

        font-size:.52rem;

        letter-spacing:1.6px;
    }

    .contact-panel-content h3{
        margin-bottom:20px;

        font-size:clamp(
            1.9rem,
            8vw,
            2.8rem
        );
    }

    .contact-panel-content p{
        font-size:.82rem;
        line-height:1.75;
    }

    .portfolio-contact-btn{
        width:100%;

        min-width:0;

        margin-top:28px;

        gap:20px;
    }

    .contact-panel-status{
        left:22px;
        right:22px;
        bottom:20px;

        font-size:.43rem;

        gap:12px;
    }

    .contact-info-card{
        min-height:100px;

        padding:18px;

        gap:14px;
    }

    .contact-info-icon{
        width:44px;
        height:44px;

        font-size:.9rem;
    }

    .contact-info-card span{
        font-size:.43rem;
    }

    .contact-info-card strong{
        font-size:.68rem;
    }

    .contact-info-arrow{
        font-size:.58rem;
    }

    .portfolio-contact-footer{
        margin-top:40px;
        padding-top:20px;

        font-size:.45rem;
    }

    /*==================================================
  PORTFOLIO HERO — RESPONSIVE 576px
==================================================*/

.portfolio-hero{
        padding:95px 0 80px;
    }

    .portfolio-hero-grid{
        padding:0 16px;
        gap:25px;
    }

    .portfolio-hero-title{
        font-size:clamp(
            2.35rem,
            11vw,
            3.2rem
        );

        line-height:1.04;
        letter-spacing:-1.2px;
    }

    .portfolio-hero-text{
        font-size:.88rem;
        line-height:1.7;
    }

    .portfolio-hero-actions{
        flex-direction:column;
        width:100%;
    }

    .portfolio-hero-actions > *{
        width:100%;
        max-width:300px;
    }

    .portfolio-hero-status{
        font-size:.58rem;
        letter-spacing:.8px;
    }

    .portfolio-hero-visual{
        min-height:430px;
        overflow:hidden;
        flex-direction: column;
    }

    .portfolio-core-svg{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

    .portfolio-project-label{
        font-size:.52rem;
        max-width:125px;
        padding:7px 9px;
        letter-spacing:.7px;
    }

    .portfolio-project-label i{
        font-size:.6rem;
    }

    .portfolio-project-label.label-project-one{
        top:145px;
        left:18px;
    }

    .portfolio-project-label.label-project-two{
        top:255px;
        right:5px;
    }

    .portfolio-project-label.label-project-three{
        bottom:100px;
        left:22px;
    }

    .portfolio-hud{
        padding:7px 9px;
        font-size:.42rem;
        letter-spacing:1px;
    }

    .portfolio-hud strong{
        font-size:.5rem;
    }

    .portfolio-hud.portfolio-hud-top{
        top:2%;
        right:0;
    }

    .portfolio-hud.portfolio-hud-bottom{
        bottom:2%;
        left:0;
    }

    .portfolio-hero-scroll{
        display:none;
    }

    .portfolio-hero::after{
        width:100%;
    max-width:600px;
    height:130px;
    }


    /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 576px
    ==================================================*/

    .portfolio-process{
        padding:90px 0 95px;
    }

    .portfolio-process-container{
        padding:0 16px;
    }

    .portfolio-process-header{
        margin-bottom:50px;
    }

    .portfolio-process-title{
        font-size:clamp(
            2.1rem,
            10vw,
            3rem
        );

        line-height:1.08;
    }

    .portfolio-process-intro{
        font-size:.86rem;
    }

    .portfolio-process-card{
        min-height:310px;
        padding:25px 20px;
    }

    .portfolio-process-number{
        font-size:1.5rem;
    }

    .portfolio-process-icon{
        width:50px;
        height:50px;
        margin-bottom:22px;
        font-size:1rem;
    }

    .portfolio-process-label{
        font-size:.55rem;
        letter-spacing:1.6px;
    }

    .portfolio-process-card h3{
        font-size:1.18rem;
    }

    .portfolio-process-card p{
        font-size:.8rem;
        line-height:1.7;
    }

    .portfolio-process-status{
        left:20px;
        bottom:20px;
        font-size:.47rem;
    }

    .portfolio-process-footer{
        margin-top:40px;
        padding-top:18px;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        line-height:1.6;
    }




    /*==================================================
  PORTFOLIO WHY MEGATECH — 576px
==================================================*/

.portfolio-why{
    padding:90px 0;
}

.portfolio-why-container{
    padding:0 18px;
}

.portfolio-why-header{
    margin-bottom:42px;
}

.portfolio-why-title{
    letter-spacing:-1px;
}

.portfolio-why-intro{
    font-size:.9rem;
    line-height:1.75;
}

.portfolio-why-card{
    min-height:270px;
    padding:22px;
}

.why-card-top{
    margin-bottom:30px;
}

.why-card-icon{
    width:52px;
    height:52px;
}

.portfolio-why-card h3{
    font-size:1.1rem;
}

.portfolio-why-card p{
    font-size:.8rem;
}

.portfolio-why-panel{
    min-height:460px;
    padding:25px;
}

.why-panel-content h3{
    font-size:1.65rem;
}

.why-panel-content p{
    font-size:.82rem;
}

.why-tech-stack{
    gap:8px;
    margin-top:28px;
}

.why-tech{
    padding:8px 10px;
}

.why-panel-status{
    left:25px;
    right:25px;
}

.portfolio-why-metrics{
    grid-template-columns:repeat(2,1fr);
    gap:20px 0;
}

.why-metric{
    padding:0 15px;
}

.portfolio-projects{
    padding:90px 0 100px;
}

.portfolio-projects-container{
    /* width scale: nearly full viewport */
    width:calc(100% - 36px);
}

.portfolio-projects-header{
    margin-bottom:45px;
}

.portfolio-projects-title{
    letter-spacing:-1px;
}

.projects-header-right p{
    font-size:.88rem;
}

.portfolio-project-card{
    min-height:auto;
}

.project-visual{
    height:270px;
}

.project-screen{
    /* width scale: slightly increased for the full-width card */
    width:76%;
}

.screen-content{
    padding:16px;
}

.screen-panels{
    margin-top:15px;
}

.project-card-content{
    padding:24px;
}

.project-card-content h3{
    font-size:1.3rem;
}

.project-card-content p{
    font-size:.8rem;
}

.projects-bottom{
    gap:12px;
}

.projects-bottom span{
    font-size:.5rem;
}

}


/*==================================================*
* SMALL MOBILE
*==================================================*/

@media (max-width:480px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:75px 0;
    }

    .portfolio-capabilities-container{
        padding:0 15px;
    }

    .portfolio-capabilities-title{
        font-size:clamp(
            2rem,
            11vw,
            2.8rem
        );

        letter-spacing:-1px;
    }

    .portfolio-capabilities-intro{
        font-size:.8rem;
    }

    .portfolio-capability-card{
        min-height:325px;

        padding:25px 20px;
    }

    .portfolio-capability-index{
        top:16px;
        right:16px;

        font-size:1.35rem;
    }

    .portfolio-capability-icon{
        width:48px;
        height:48px;

        margin-bottom:20px;
    }

    .portfolio-capability-card h3{
        font-size:1.1rem;
    }

    .portfolio-capability-card p{
        font-size:.76rem;
    }

    .portfolio-capability-meter{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .portfolio-capability-meter > span,
    .portfolio-capability-meter strong{
        font-size:.43rem;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:75px 0;
    }

    .portfolio-clients-container{
        padding:0 15px;
    }

    .portfolio-clients-title{
        font-size:clamp(
            2rem,
            11vw,
            2.9rem
        );
    }

    .portfolio-clients-intro{
        font-size:.8rem;
    }

    .client-card{
        width:210px;
    }

    .client-frame{
        height:265px;
    }

    .client-frame-corner{
        width:18px;
        height:18px;
    }

    .client-scan-line{
        left:8px;
        right:8px;
    }

    .client-info h3{
        font-size:.9rem;
    }

    .client-category{
        font-size:.46rem;
    }

    .clients-system-status{
        font-size:.45rem;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:80px 0 65px;
    }

    .portfolio-contact-container{
        padding:0 15px;
    }

    .portfolio-contact-title{
        font-size:clamp(
            2.2rem,
            12vw,
            3rem
        );

        letter-spacing:-1px;
    }

    .portfolio-contact-intro{
        font-size:.8rem;
    }

    .portfolio-contact-panel{
        min-height:450px;

        padding:30px 20px;
    }

    .contact-panel-content h3{
        font-size:clamp(
            1.8rem,
            9vw,
            2.5rem
        );
    }

    .contact-panel-content p{
        font-size:.78rem;
    }

    .portfolio-contact-btn{
        padding:13px 14px 13px 17px;

        font-size:.55rem;
    }

    .portfolio-contact-btn i{
        width:29px;
        height:29px;
    }

    .contact-panel-status{
        left:20px;
        right:20px;
        bottom:18px;

        font-size:.4rem;
    }

    .contact-info-card{
        min-height:95px;

        padding:16px;
    }

    .contact-info-icon{
        width:40px;
        height:40px;
    }

    .contact-info-card strong{
        font-size:.63rem;
    }

    .portfolio-contact-footer{
        font-size:.42rem;
    }

    /*==================================================
  PORTFOLIO HERO — RESPONSIVE 480px
==================================================*/

.portfolio-hero{
        padding:85px 0 70px;
    }

    .portfolio-hero-grid{
        padding:0 14px;
        gap:15px;
    }

    .portfolio-hero-title{
        font-size:clamp(
            2.1rem,
            12vw,
            2.8rem
        );

        letter-spacing:-1px;
    }

    .portfolio-hero-text{
        font-size:.82rem;
    }

    .portfolio-hero-actions{
        margin-top:25px;
    }

    .portfolio-hero-status{
        margin-top:22px;
        font-size:.52rem;
    }

    .portfolio-hero-visual{
       min-height:350px;
    overflow:hidden;
    flex-direction: column;
    }

    .portfolio-core-svg{
          width:100%;
    max-width:390px;
    height:auto;
    }

    .portfolio-project-label{
        max-width:105px;
        padding:6px 7px;
        font-size:.44rem;
        letter-spacing:.5px;
        gap:5px;
    }

    .portfolio-project-label i{
        font-size:.5rem;
    }

    .portfolio-project-label.label-project-one{
        top:118px;
        left:5px;
    }

    .portfolio-project-label.label-project-two{
    top:210px;
    right:2px;
}

    .portfolio-project-label.label-project-three{
        bottom:78px;
        left:8px;
    }

    .portfolio-hud{
        padding:6px 7px;
        font-size:.36rem;
        letter-spacing:.7px;
    }

    .portfolio-hud strong{
        font-size:.42rem;
    }

    .portfolio-hud strong i{
        margin-right:3px;
        font-size:.35rem;
    }

    .portfolio-hud.portfolio-hud-top{
        top:1%;
        right:2px;
    }

    .portfolio-hud.portfolio-hud-bottom{
        bottom:1%;
        left:-2px;
    }


    /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 480px
    ==================================================*/

    .portfolio-process{
        padding:80px 0 85px;
    }

    .portfolio-process-container{
        padding:0 14px;
    }

    .portfolio-process-header{
        margin-bottom:42px;
    }

    .portfolio-process-title{
        font-size:clamp(
            1.95rem,
            11vw,
            2.6rem
        );

        letter-spacing:-1px;
    }

    .portfolio-process-intro{
        font-size:.8rem;
        line-height:1.7;
    }

    .portfolio-process-system{
        gap:15px;
    }

    .portfolio-process-card{
        min-height:290px;
        padding:22px 18px;
    }

    .portfolio-process-number{
        top:14px;
        right:15px;
        font-size:1.35rem;
    }

    .portfolio-process-icon{
        width:46px;
        height:46px;
        margin-bottom:20px;
        font-size:.9rem;
    }

    .portfolio-process-label{
        margin-bottom:9px;
        font-size:.5rem;
        letter-spacing:1.4px;
    }

    .portfolio-process-card h3{
        margin-bottom:12px;
        font-size:1.08rem;
    }

    .portfolio-process-card p{
        font-size:.76rem;
        line-height:1.65;
    }

    .portfolio-process-status{
        left:18px;
        bottom:18px;
        font-size:.42rem;
        letter-spacing:1.2px;
    }

    .portfolio-process-footer{
        margin-top:35px;
        font-size:.45rem;
    }



    /*==================================================
  PORTFOLIO WHY MEGATECH — 480px
==================================================*/

.portfolio-why{
    padding:80px 0;
}

.portfolio-why-container{
    padding:0 15px;
}

.portfolio-why-header{
    gap:18px;
    margin-bottom:38px;
}

.portfolio-why-title{
    font-size:clamp(2.2rem,10vw,3.2rem);
    letter-spacing:-1px;
}

.portfolio-why-intro{
    font-size:.84rem;
    line-height:1.7;
}

.portfolio-why-grid{
    gap:15px;
}

.portfolio-why-card{
    min-height:255px;
    padding:20px;
}

.why-card-top{
    margin-bottom:25px;
}

.why-card-top > span{
    font-size:1.5rem;
}

.why-card-icon{
    width:48px;
    height:48px;
    margin-bottom:18px;
    font-size:1rem;
}

.why-card-label{
    font-size:.48rem;
}

.portfolio-why-card h3{
    font-size:1.05rem;
}

.portfolio-why-card p{
    font-size:.76rem;
    line-height:1.7;
}

.portfolio-why-panel{
    min-height:430px;
    padding:22px;
}

.why-panel-label{
    margin-bottom:22px;
}

.why-panel-content h3{
    font-size:1.5rem;
}

.why-panel-content p{
    font-size:.78rem;
}

.why-tech-stack{
    gap:7px;
    margin-top:25px;
}

.why-tech{
    padding:7px 9px;
    font-size:.48rem;
}

.why-tech i{
    font-size:.7rem;
}

.why-panel-status{
    left:22px;
    right:22px;
    bottom:22px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.portfolio-why-metrics{
    margin-top:40px;
    padding-top:22px;
}

.why-metric{
    padding:0 12px;
}

.why-metric strong{
    font-size:1rem;
}

.why-metric span{
    font-size:.43rem;
}

.portfolio-projects{
    padding:80px 0 90px;
}

.portfolio-projects-container{
    /* width scale: controlled to prevent horizontal overflow */
    width:calc(100% - 30px);
}

.portfolio-projects-header{
    gap:18px;
    margin-bottom:38px;
}

.portfolio-projects-title{
    font-size:clamp(2.2rem,10vw,3.2rem);
    letter-spacing:-1px;
}

.projects-header-right p{
    font-size:.82rem;
    line-height:1.7;
}

.projects-live-status{
    font-size:.55rem;
    margin-top:20px;
}

.portfolio-project-showcase{
    gap:16px;
}

.portfolio-project-card{
    min-height:auto;
}

.project-visual{
    height:240px;
}

.project-screen{
    /* width scale: keeps the mockup inside the visual */
    width:78%;
    height:145px;
}

.screen-topbar{
    height:22px;
}

.screen-content{
    padding:14px;
}

.screen-line{
    margin-bottom:7px;
}

.screen-panels{
    gap:5px;
    margin-top:13px;
}

.screen-panels div{
    height:35px;
}

.project-card-content{
    padding:20px;
}

.project-meta{
    font-size:.52rem;
}

.project-card-content h3{
    margin:16px 0 12px;
    font-size:1.2rem;
}

.project-card-content p{
    font-size:.76rem;
    line-height:1.7;
}

.project-tags{
    gap:5px;
    margin-top:18px;
}

.project-tags span{
    padding:5px 7px;
    font-size:.46rem;
}

.project-view-btn{
    margin-top:24px;
    padding:11px 12px;
    font-size:.6rem;
}

.project-technology{
    margin-top:20px;
    padding-top:14px;
}

.project-technology-stack{
    gap:5px;
}

.project-technology-stack span{
    padding:6px 8px;
    font-size:.48rem;
}

.projects-bottom{
    margin-top:45px;
    gap:10px;
}

.projects-bottom span{
    font-size:.44rem;
}


}


/*==================================================*
* VERY SMALL MOBILE
*==================================================*/

@media (max-width:360px){

    /*----------------------------------------------*
    * CAPABILITIES
    *----------------------------------------------*/

    .portfolio-capabilities{
        padding:65px 0;
    }

    .portfolio-capabilities-container{
        padding:0 12px;
    }

    .portfolio-capabilities-title{
        font-size:2rem;
    }

    .portfolio-capability-card{
        min-height:315px;

        padding:23px 17px;
    }

    .portfolio-capability-index{
        top:14px;
        right:14px;

        font-size:1.2rem;
    }

    .portfolio-capability-icon{
        width:45px;
        height:45px;

        margin-bottom:18px;
    }

    .portfolio-capability-card h3{
        font-size:1rem;
    }

    .portfolio-capability-card p{
        font-size:.72rem;
        line-height:1.65;
    }

    .portfolio-capability-meter{
        left:17px;
        right:17px;
        bottom:17px;
    }


    /*----------------------------------------------*
    * CLIENTS
    *----------------------------------------------*/

    .portfolio-clients{
        padding:65px 0;
    }

    .portfolio-clients-container{
        padding:0 12px;
    }

    .portfolio-clients-title{
        font-size:2rem;
    }

    .portfolio-clients-intro{
        font-size:.76rem;
    }

    .client-card{
        width:195px;
    }

    .client-frame{
        height:250px;
    }

    .client-info h3{
        font-size:.84rem;
    }

    .client-category{
        font-size:.43rem;
    }


    /*----------------------------------------------*
    * CONTACT
    *----------------------------------------------*/

    .portfolio-contact{
        padding:70px 0 55px;
    }

    .portfolio-contact-container{
        padding:0 12px;
    }

    .portfolio-contact-title{
        font-size:2.1rem;
    }

    .portfolio-contact-intro{
        font-size:.75rem;
    }

    .portfolio-contact-panel{
        min-height:430px;

        padding:27px 17px;
    }

    .contact-panel-label{
        font-size:.47rem;
    }

    .contact-panel-content h3{
        font-size:1.75rem;
    }

    .contact-panel-content p{
        font-size:.74rem;
    }

    .portfolio-contact-btn{
        font-size:.5rem;

        padding:12px 12px 12px 14px;
    }

    .contact-panel-status{
        left:17px;
        right:17px;
        bottom:16px;

        font-size:.36rem;
    }

    .contact-info-card{
        min-height:90px;

        padding:14px;

        gap:11px;
    }

    .contact-info-icon{
        width:37px;
        height:37px;

        font-size:.8rem;
    }

    .contact-info-card span{
        font-size:.39rem;
    }

    .contact-info-card strong{
        font-size:.58rem;
    }

    .contact-info-arrow{
        font-size:.5rem;
    }


    /*==================================================
  PORTFOLIO HERO — RESPONSIVE 360px
==================================================*/

.portfolio-hero{
        padding:75px 0 60px;
    }

    .portfolio-hero-grid{
        padding:0 12px;
    }

    .portfolio-hero-title{
        font-size:2rem;
    }

    .portfolio-hero-text{
        font-size:.76rem;
    }

    .portfolio-hero-status{
        font-size:.46rem;
        gap:7px;
    }

    .portfolio-status-dot{
        width:6px;
        height:6px;
    }

    .portfolio-hero-visual{
        min-height:300px;
         overflow:hidden;
         flex-direction: column;
    }

    .portfolio-core-svg{
       width:100%;
    max-width:335px;
    height:auto;
    }

    .portfolio-project-label{
        max-width:90px;
        padding:5px 6px;
        font-size:.39rem;
    }

    .portfolio-project-label.label-project-one{
        top:100px;
        left:0;
    }

    .portfolio-project-label.label-project-two{
    top:180px;
    right:2px;
}

    .portfolio-project-label.label-project-three{
        bottom:65px;
        left:2px;
    }

    .portfolio-hud{
        padding:5px 6px;
        font-size:.32rem;
    }

    .portfolio-hud strong{
        font-size:.37rem;
    }


    /*==================================================
      PORTFOLIO PROCESS — RESPONSIVE 360px
    ==================================================*/

    .portfolio-process{
        padding:70px 0 75px;
    }

    .portfolio-process-container{
        padding:0 12px;
    }

    .portfolio-process-header{
        margin-bottom:35px;
    }

    .portfolio-process-title{
        font-size:1.85rem;
    }

    .portfolio-process-intro{
        font-size:.75rem;
    }

    .portfolio-process-card{
        min-height:275px;
        padding:20px 16px;
    }

    .portfolio-process-number{
        top:12px;
        right:13px;
        font-size:1.2rem;
    }

    .portfolio-process-icon{
        width:43px;
        height:43px;
        margin-bottom:18px;
    }

    .portfolio-process-label{
        font-size:.46rem;
    }

    .portfolio-process-card h3{
        font-size:1rem;
    }

    .portfolio-process-card p{
        font-size:.72rem;
    }

    .portfolio-process-status{
        left:16px;
        bottom:16px;
        font-size:.39rem;
    }

    .portfolio-process-footer{
        font-size:.4rem;
        letter-spacing:1px;
    }




    /*==================================================
  PORTFOLIO WHY MEGATECH — 360px
==================================================*/

.portfolio-why{
    padding:70px 0;
}

.portfolio-why-container{
    padding:0 12px;
}

.portfolio-why-header{
    margin-bottom:32px;
}

.portfolio-why-title{
    font-size:clamp(2rem,11vw,2.7rem);
    letter-spacing:-.8px;
}

.portfolio-why-intro{
    font-size:.78rem;
}

.portfolio-why-grid{
    gap:12px;
}

.portfolio-why-card{
    min-height:245px;
    padding:18px;
}

.why-card-top{
    margin-bottom:22px;
}

.why-card-top > span{
    font-size:1.35rem;
}

.why-card-icon{
    width:44px;
    height:44px;
    margin-bottom:16px;
    font-size:.9rem;
}

.why-card-label{
    margin-bottom:7px;
    font-size:.44rem;
    letter-spacing:1.5px;
}

.portfolio-why-card h3{
    font-size:1rem;
    margin-bottom:10px;
}

.portfolio-why-card p{
    font-size:.72rem;
    line-height:1.65;
}

.portfolio-why-panel{
    min-height:420px;
    padding:19px;
}

.why-panel-label{
    font-size:.48rem;
    margin-bottom:20px;
}

.why-panel-content h3{
    font-size:1.35rem;
}

.why-panel-content p{
    font-size:.74rem;
}

.why-tech-stack{
    margin-top:22px;
    gap:5px;
}

.why-tech{
    padding:6px 8px;
    font-size:.44rem;
}

.why-panel-status{
    left:19px;
    right:19px;
    bottom:19px;
    font-size:.43rem;
}

.portfolio-why-metrics{
    margin-top:35px;
    padding-top:20px;
    gap:18px 0;
}

.why-metric{
    padding:0 9px;
}

.why-metric strong{
    font-size:.9rem;
}

.why-metric span{
    font-size:.39rem;
    letter-spacing:1px;
}

.portfolio-projects{
    padding:70px 0 80px;
}

.portfolio-projects-container{
    /* width scale: maximum safe width for 360px screens */
    width:calc(100% - 24px);
}

.portfolio-projects-header{
    margin-bottom:32px;
}

.portfolio-projects-title{
    font-size:clamp(2rem,11vw,2.7rem);
    letter-spacing:-.8px;
}

.projects-header-right p{
    font-size:.76rem;
}

.projects-live-status{
    gap:7px;
    font-size:.48rem;
}

.portfolio-project-showcase{
    gap:14px;
}

.project-visual{
    height:220px;
}

.project-screen{
    /* width scale: optimized for narrow screens */
    width:82%;
    height:130px;
}

.screen-topbar{
    height:20px;
    padding:0 7px;
}

.screen-topbar span{
    width:4px;
    height:4px;
}

.screen-content{
    padding:11px;
}

.screen-line{
    height:3px;
    margin-bottom:6px;
}

.screen-line.line-large{
    height:5px;
}

.screen-panels{
    gap:4px;
    margin-top:10px;
}

.screen-panels div{
    height:30px;
}

.project-card-content{
    padding:18px;
}

.project-meta{
    font-size:.46rem;
}

.project-card-content h3{
    font-size:1.1rem;
    margin:14px 0 10px;
}

.project-card-content p{
    font-size:.72rem;
    line-height:1.65;
}

.project-tags{
    margin-top:16px;
}

.project-tags span{
    padding:4px 6px;
    font-size:.42rem;
}

.project-view-btn{
    margin-top:20px;
    padding:10px;
    font-size:.55rem;
}

.project-technology{
    margin-top:18px;
    padding-top:12px;
}

.project-technology-heading > span{
    font-size:.48rem;
}

.project-technology-heading small{
    font-size:.42rem;
}

.project-technology-stack{
    gap:4px;
}

.project-technology-stack span{
    padding:5px 7px;
    font-size:.44rem;
}

.project-technology-stack span i{
    font-size:.65rem;
}

.projects-bottom{
    margin-top:38px;
    gap:7px;
}

.projects-bottom span{
    font-size:.4rem;
    letter-spacing:1px;
}

}


/*==================================================*
* TOUCH DEVICES
*==================================================*/

@media (hover:none){

    .portfolio-capability-card:hover{
        border-color:var(--border);
        background:
            linear-gradient(
                145deg,
                var(--glass-strong),
                var(--glass)
            );

        box-shadow:none;
    }

    .portfolio-capability-card:hover::after{
        opacity:.08;
        transform:none;
    }

    .portfolio-capability-card:hover
    .portfolio-capability-icon{
        border-color:var(--border-primary);
    }

    .client-card:hover{
        transform:none;
    }

    .client-card:hover .client-image{
        transform:none;

        filter:
            saturate(.85)
            brightness(.8);
    }

    .client-card:hover .client-frame{
        border-color:var(--border);

        box-shadow:none;
    }

    .contact-info-card:hover{
        transform:none;

        box-shadow:none;
    }

    .contact-info-card:hover::before{
        opacity:0;
    }

    .portfolio-contact-btn:hover{
        border-color:var(--border-primary);

        box-shadow:none;
    }

}