/* ===========================================================
   ENGINEERING EXPERTISE
=========================================================== */

#engineering-expertise{

    position:relative;

    overflow:hidden;

}

/* ===========================================================
   BACKGROUND GLOW
=========================================================== */

#engineering-expertise::before{

    content:"";

    position:absolute;

    top:-260px;
    left:50%;

    transform:translateX(-50%);

    width:900px;
    height:900px;

    border-radius:50%;

    background:radial-gradient(
            circle,
            rgba(94,168,255,.08) 0%,
            rgba(94,168,255,.03) 35%,
            transparent 72%
    );

    pointer-events:none;

    z-index:0;

}

#engineering-expertise .container{

    position:relative;

    z-index:2;

}

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

#engineering-expertise .section-header{

    margin-bottom:5rem;

}

#engineering-expertise .section-title{

    max-width:760px;

    margin-inline:auto;

}

#engineering-expertise .section-subtitle{

    max-width:720px;

}

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

.expertise-grid{

    display:grid;

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

    gap:32px;

    align-items:stretch;

}

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

.expertise-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:42px;
    
    min-height: 430px;

    overflow:hidden;

    isolation:isolate;

}

/* subtle highlight */

.expertise-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
    );

    opacity:.8;

}

/* glow */

.expertise-card::after{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:radial-gradient(
            circle,
            rgba(94,168,255,.16),
            transparent 72%
    );

    opacity:0;

    transition:opacity .45s ease;

    pointer-events:none;

}

.expertise-card:hover::after{

    opacity:1;

}

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

.expertise-icon{

    width:64px;
    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:18px;

    color:var(--color-primary);

    background:rgba(94,168,255,.08);

    border:1px solid rgba(94,168,255,.18);

    transition:
            transform .35s ease,
            background .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;

}

.expertise-card:hover .expertise-icon{

    transform:translateY(-4px);

    background:rgba(94,168,255,.12);

    border-color:rgba(94,168,255,.45);

    box-shadow:
            0 0 18px rgba(94,168,255,.18),
            0 10px 30px rgba(0,0,0,.18);

}

.expertise-icon svg{

    width:30px;
    height:30px;

}

.expertise-icon svg *{

    vector-effect:non-scaling-stroke;

}

/* ===========================================================
   TYPOGRAPHY
=========================================================== */

.expertise-title{

    margin-bottom:18px;

    font-size:1.45rem;

    font-weight:700;

    color:#ffffff;

    letter-spacing:-.02em;

}

.expertise-description{

    margin-bottom:30px;

    color:var(--color-text-muted);

    line-height:1.8;

    flex:1;

}

/* ===========================================================
   TECHNOLOGY CHIPS
=========================================================== */

.expertise-chips{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:auto;

}

.expertise-card .tech-chip{

    transition:
            transform .25s ease,
            background .25s ease,
            border-color .25s ease,
            color .25s ease;

}

.expertise-card:hover .tech-chip{

    border-color:rgba(94,168,255,.18);

}

.expertise-card .tech-chip:hover{

    transform:translateY(-2px);

}

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

.expertise-card{

    transition:
            transform .35s ease,
            border-color .35s ease,
            box-shadow .35s ease,
            background .35s ease;

}

.expertise-card:hover{

    transform:translateY(-8px);

    border-color:rgba(94,168,255,.28);

    box-shadow:
            0 18px 50px rgba(0,0,0,.32),
            0 0 0 1px rgba(94,168,255,.08);

}

/* ===========================================================
   STAGGERED ANIMATION
=========================================================== */

.expertise-card{

    opacity:0;

    transform:translateY(40px);

    animation:expertiseFade .8s ease forwards;

}

.expertise-card:nth-child(1){ animation-delay:.05s; }
.expertise-card:nth-child(2){ animation-delay:.12s; }
.expertise-card:nth-child(3){ animation-delay:.19s; }
.expertise-card:nth-child(4){ animation-delay:.26s; }
.expertise-card:nth-child(5){ animation-delay:.33s; }
.expertise-card:nth-child(6){ animation-delay:.40s; }

@keyframes expertiseFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================================
   TABLET
=========================================================== */

@media (max-width:1024px){

    .expertise-grid{

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

        gap:24px;

    }

    .expertise-card{

        padding:34px;

    }

}

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

@media (max-width:768px){

    .expertise-grid{

        grid-template-columns:1fr;

    }

    .expertise-card{

        padding:30px;

    }

    .expertise-title{

        font-size:1.3rem;

    }

    .expertise-description{

        margin-bottom:24px;

    }

    .expertise-icon{

        width:58px;

        height:58px;

        margin-bottom:22px;

    }

}

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

@media (max-width:480px){

    .expertise-card{

        padding:26px;

    }

    .expertise-title{

        font-size:1.2rem;

    }

    .expertise-chips{

        gap:10px;

    }

    .expertise-card .tech-chip{

        font-size:.78rem;

        padding:8px 14px;

    }

}

/* ===========================================================
   ACCESSIBILITY
=========================================================== */

@media (prefers-reduced-motion:reduce){

    .expertise-card,
    .expertise-card::after,
    .expertise-icon,
    .tech-chip{

        transition:none;

        animation:none;

    }

}