/*==================================================
  PORTFOLIO WHY MEGATECH
==================================================*/

.portfolio-why{

    position:relative;

    padding:150px 0;

    overflow:hidden;

}


/*==================================================
  CONTAINER
==================================================*/

.portfolio-why-container{

    width:100%;

    max-width:var(--container-width);

    margin:auto;

    padding:0 30px;

}


/*==================================================
  HEADER
==================================================*/

.portfolio-why-header{

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items:end;

    gap:60px;

    margin-bottom:80px;

}


.portfolio-why-title{

    margin:24px 0 0;

    font-family:var(--heading-font);

    font-size:clamp(
        2.6rem,
        5vw,
        4.8rem
    );

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:var(--fw-black);

}


.portfolio-why-intro{

    max-width:560px;

    margin:0;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.85;

}


/*==================================================
  MAIN SYSTEM
==================================================*/

.portfolio-why-system{

    display:grid;

    grid-template-columns:
        1.35fr
        .65fr;

    gap:20px;

}


/*==================================================
  ADVANTAGE GRID
==================================================*/

.portfolio-why-grid{

    display:grid;

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

    gap:20px;

}


/*==================================================
  CARD
==================================================*/

.portfolio-why-card{

    position:relative;

    min-height:310px;

    padding:28px;

    overflow:hidden;

    border:1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:
        border-color .4s ease,
        box-shadow .4s ease;

}


.portfolio-why-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            var(--border-primary),
            transparent 35%
        );

    opacity:.04;

    pointer-events:none;

}


.portfolio-why-card:hover{

    border-color:var(--border-primary);

    box-shadow:
        0 25px 60px rgba(0,0,0,.28),
        0 0 30px rgba(0,217,255,.04);

}


/*==================================================
  CARD TOP
==================================================*/

.why-card-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:40px;

}


.why-card-top > span{

    color:var(--border-primary);

    font-family:var(--heading-font);

    font-size:1.8rem;

    font-weight:var(--fw-black);

}


.why-card-top i{

    color:var(--primary);

    font-size:.7rem;

    filter:
        drop-shadow(
            0 0 7px var(--primary)
        );

}


/*==================================================
  ICON
==================================================*/

.why-card-icon{

    position:relative;

    z-index:2;

    width:56px;

    height:56px;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border-primary);

    background:var(--glass);

    color:var(--primary-light);

    font-size:1.1rem;

}


.why-card-icon i{

    filter:
        drop-shadow(
            0 0 8px var(--primary)
        );

}


/*==================================================
  LABEL
==================================================*/

.why-card-label{

    position:relative;

    z-index:2;

    display:block;

    margin-bottom:9px;

    color:var(--primary-light);

    font-size:.52rem;

    font-weight:var(--fw-bold);

    letter-spacing:2px;

}


/*==================================================
  TITLE
==================================================*/

.portfolio-why-card h3{

    position:relative;

    z-index:2;

    margin:0 0 13px;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:1.2rem;

    line-height:1.25;

}


/*==================================================
  TEXT
==================================================*/

.portfolio-why-card p{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--text-muted);

    font-size:.82rem;

    line-height:1.75;

}


/*==================================================
  TECHNOLOGY PANEL
==================================================*/

.portfolio-why-panel{

    position:relative;

    min-height:640px;

    padding:38px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    border:1px solid var(--border-primary);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

}


.why-panel-grid{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            var(--border-primary) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--border-primary) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    opacity:.035;

    pointer-events:none;

}


.why-panel-glow{

    position:absolute;

    width:300px;

    height:300px;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 70%
        );

    opacity:.06;

    filter:blur(15px);

    animation:
        whyPanelPulse
        5s
        ease-in-out
        infinite;

}


@keyframes whyPanelPulse{

    0%,
    100%{

        transform:
            translate(-50%,-50%)
            scale(.85);

        opacity:.04;

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.15);

        opacity:.1;

    }

}


/*==================================================
  PANEL CONTENT
==================================================*/

.why-panel-content{

    position:relative;

    z-index:2;

}


.why-panel-label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:28px;

    color:var(--primary-light);

    font-size:.55rem;

    font-weight:var(--fw-bold);

    letter-spacing:2px;

}


.why-panel-label i{

    font-size:.65rem;

    filter:
        drop-shadow(
            0 0 6px var(--primary)
        );

}


.why-panel-content h3{

    max-width:400px;

    margin:0 0 20px;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:2rem;

    line-height:1.15;

}


.why-panel-content p{

    max-width:420px;

    margin:0;

    color:var(--text-muted);

    font-size:.86rem;

    line-height:1.8;

}


/*==================================================
  TECHNOLOGY STACK
==================================================*/

.why-tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:35px;

}


.why-tech{

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 12px;

    border:1px solid var(--border);

    background:var(--glass);

    color:var(--text-muted);

    font-size:.52rem;

    letter-spacing:1px;

    transition:
        border-color .3s ease,
        color .3s ease;

}


.why-tech i{

    color:var(--primary-light);

    font-size:.8rem;

}


.why-tech:hover{

    border-color:var(--border-primary);

    color:var(--text-light);

}


/*==================================================
  PANEL STATUS
==================================================*/

.why-panel-status{

    position:absolute;

    left:38px;

    right:38px;

    bottom:28px;

    z-index:3;

    padding-top:18px;

    border-top:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    font-size:.48rem;

    letter-spacing:1.5px;

}


.why-panel-status span{

    display:flex;

    align-items:center;

    gap:7px;

    color:var(--text-muted);

}


.why-panel-status i{

    color:var(--primary);

    font-size:.35rem;

}


.why-panel-status strong{

    color:var(--primary-light);

}


/*==================================================
  METRICS
==================================================*/

.portfolio-why-metrics{

    margin-top:55px;

    padding-top:28px;

    border-top:1px solid var(--border);

    display:grid;

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

}


.why-metric{

    padding:0 25px;

    border-right:1px solid var(--border);

}


.why-metric:first-child{

    padding-left:0;

}


.why-metric:last-child{

    border-right:0;

}


.why-metric strong{

    display:block;

    margin-bottom:8px;

    color:var(--primary-light);

    font-family:var(--heading-font);

    font-size:1.1rem;

    letter-spacing:1px;

}


.why-metric span{

    color:var(--text-muted);

    font-size:.48rem;

    letter-spacing:1.5px;

}