/* section */

.work {
    padding: 100px 0px 0px 0px;
}

/* intro */

.work-intro {
    max-width: 700px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.work-intro h2 {
    font-size: 56px;
    line-height: 1.1;
    margin: 20px 0;
    font-weight: 600;
    color: #111;
}

.work-intro h2 span {
    background: linear-gradient(90deg, #5a6cff, #2cc7e6);
    -webkit-background-clip: text;
    color: transparent;
}

.work-intro p {
    color: #666;
}

/* horizontal system */

.work-wrapper {
    position: relative;
}

.work-track {
    display: flex;
    gap: 40px;
    /* reduced for cleaner spacing */
    padding: 0 10%;
}

/* project card */

.project {

    min-width: 520px;

    border-radius: 15px;

    height: 350px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;

    padding: 40px;

    transition: .3s ease;

    position: relative;
    overflow: hidden;

}

/* hover */

.project:hover {

    transform: scale(1.01);
}

/* subtle gradient accent instead of dark glow */

.project::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 30% 20%, rgba(90, 108, 255, 0.08), transparent 60%);

    opacity: 0;
    transition: .3s;

}

.project:hover::before {
    opacity: 1;
}

/* content */

.project-content span {
    font-size: 12px;
    color: #999;
    letter-spacing: 2px;
}

.project-content h3 {
    font-size: 28px;
    margin: 10px 0;
    font-weight: 600;
    color: #111;
}

.project-content p {
    color: #666;
    max-width: 360px;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1023px) {
    .work-track {
        flex-direction: column;
        padding: 0 5%;
    }

    .project {
        min-width: 100%;
        height: auto;
        min-height: 280px;
        padding: 30px;
    }
}