/* ===========================================================
   HERO
=========================================================== */
.hero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding-top:9rem;

    padding-bottom:5rem;

    background:#0B0D10;

}
.hero-container{

    width:min(1280px,90%);

    margin:0 auto;

    display:grid;

    grid-template-columns:1.08fr .92fr;

    align-items:start;

    gap:120px;

    position:relative;

    z-index:2;

}
.hero-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}
.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}
.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.22;

}
.hero-glow-1{

    width:600px;

    height:600px;

    background:#2B6DFF;

    left:-220px;

    top:120px;

}
.hero-glow-2{

    width:500px;

    height:500px;

    background:#4E9DFF;

    right:-180px;

    top:60px;

}
.hero-eyebrow{

    margin-bottom:26px;

    color:#5EA8FF;

    text-transform:uppercase;

    letter-spacing:.45em;

    font-size:.85rem;

    font-weight:600;

}
.hero-title{

    max-width:820px;

    margin:0;

    font-size:clamp(3.8rem,6vw,6.2rem);

    line-height:.95;

    font-weight:800;

    letter-spacing:-.05em;

    color:#F5F7FA;

}
.hero-description{

    max-width:640px;

    margin-top:52px;

    color:#A9B3C2;

    font-size:1.45rem;

    line-height:1.75;

}
.hero-actions{

    display:flex;

    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;

}
.hero-highlight{

    color:#5EA8FF;

}
.hero-project-card{

    padding:40px;
    
    justify-self:center;

    width:100%;

    max-width:700px;

}
.project-preview{

    margin:30px 0;

    border-radius:20px;

    overflow:hidden;

    aspect-ratio:16 / 10;

    background:#141922;
    
    border:1px solid rgba(255,255,255,.05);

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    box-shadow:

            inset 0 0 0 1px rgba(255,255,255,.03),

            0 20px 50px rgba(0,0,0,.25);

}
.project-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
            transform .5s ease,
            opacity .35s ease;

}
/* ===========================================================
   HERO STATS
=========================================================== */

.hero-stats{

    display:grid;

    grid-template-columns:repeat(3,180px);

    gap:16px;

    margin-top:56px;

    justify-content:start;

}
.hero-stat{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:150px;

    padding:28px 20px;

    text-align:center;

}
.hero-stat-number{

    display:block;

    font-size:1.75rem;

    font-weight:700;

    color:#FFFFFF;

    margin-bottom:8px;

}
.hero-stat-label{

    display:block;

    color:#9FA8B7;

    font-size:.85rem;

    line-height:1.4;

}
.hero-technologies{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:42px;

}
.project-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:28px;

}
.hero-project-card:hover .project-preview img{

    transform:scale(1.03);

}
.hero-project-card h2{

    margin:10px 0 8px;

    font-size:2.2rem;

    font-weight:700;

    color:#FFFFFF;

}
.project-type{

    color:#A5AFBF;

    margin-bottom:30px;

    font-size:1rem;

}
.project-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:6px;

    color:#5EA8FF;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}
.project-link:hover{

    transform:translateX(5px);

}
.hero-stat:hover{

    transform:none;

    box-shadow:none;

    border-color:rgba(255,255,255,.08);

}

.hero-project-image{

    display:block;

    width:100%;

    height:auto;

    border-radius:18px;

    transition:transform .35s ease;

}

.hero-project-card:hover .hero-project-image{

    transform:scale(1.02);

}

/* ===========================================================
   HERO - TABLET (≤1100px)
=========================================================== */

@media (max-width:1100px){

    .hero-section{

        min-height:auto;

        padding-top:8rem;

        padding-bottom:4rem;

    }
    .hero-container{

        grid-template-columns:1fr;

        gap:48px;

    }
    .hero-content{

        max-width:700px;

        margin:0 auto;

        align-items:center;

        text-align:center;

    }

    .hero-title{

        max-width:none;

    }

    .hero-description{

        max-width:680px;

        margin-top:40px;

    }

    .hero-stats{

        grid-template-columns:repeat(3, minmax(140px, 1fr));

        width:100%;

        max-width:700px;

        justify-content:center;

    }

    .hero-stat{

        min-height:130px;

    }
}
/* ===========================================================
   HERO - MOBILE (≤768px)
=========================================================== */

@media (max-width:768px){

    .hero-container{

        width:100%;

        padding:0 24px;

        box-sizing:border-box;

    }

    .hero-title{

        font-size:3.2rem;

    }

    .hero-description{

        max-width:100%;

        font-size:1.2rem;

    }

    .hero-stats{

        grid-template-columns:1fr;

        max-width:320px;

    }

}