/*==================================================
  MARKETPLACE PROCESS
==================================================*/

.marketplace-process{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    isolation:isolate;

}


/*==================================================
  AMBIENT ATMOSPHERE
==================================================*/

.marketplace-process::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

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

    border-radius:50%;

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

    filter:blur(80px);

    opacity:.35;

    pointer-events:none;

    z-index:-2;

}


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

.marketplace-process-container{

    position:relative;

    width:100%;

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

    margin:0 auto;

    padding:0 30px;

    z-index:2;

}


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

.marketplace-process-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}


.marketplace-process-title{

    margin:25px 0 20px;

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

    font-size:clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height:1.05;

    letter-spacing:-2px;

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

}


.marketplace-process-intro{

    max-width:680px;

    margin:0 auto;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.85;

}


/*==================================================
  PROCESS SYSTEM
==================================================*/

.marketplace-process-system{

    position:relative;

    display:grid;

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

    gap:20px;

}


/*==================================================
  CONNECTING LINE
==================================================*/

.marketplace-process-system::before{

    content:"";

    position:absolute;

    left:9%;

    right:9%;

    top:64px;

    height:1px;

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

    opacity:.7;

}


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

.marketplace-process-card{

    position:relative;

    min-height:330px;

    padding:28px;

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

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

    backdrop-filter:blur(18px);

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

    overflow:hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .45s ease;

}


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

.marketplace-process-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-90px;

    right:-70px;

    border-radius:50%;

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

    opacity:.06;

    transition:
        opacity .45s ease,
        transform .45s ease;

}


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

.marketplace-process-card:hover{

    transform:
        translateY(-10px);

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

    box-shadow:
        0 25px 60px rgba(0,0,0,.22),
        0 0 30px var(--glass);

}


.marketplace-process-card:hover::before{

    opacity:.15;

    transform:scale(1.4);

}


/*==================================================
  NUMBER
==================================================*/

.marketplace-process-number{

    position:absolute;

    top:18px;

    right:20px;

    color:var(--border-primary);

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

    font-size:1.8rem;

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

}


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

.marketplace-process-icon{

    position:relative;

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:55px;

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

    border-radius:20px;

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

    color:var(--primary-light);

    font-size:1.4rem;

    box-shadow:
        0 0 25px var(--glass),
        inset 0 0 18px var(--glass);

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

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.marketplace-process-card:hover
.marketplace-process-icon{

    transform:
        translateY(-5px)
        scale(1.06);

    box-shadow:
        0 0 35px var(--glass-strong),
        inset 0 0 25px var(--glass);

}


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

.marketplace-process-content{

    position:relative;

    z-index:2;

}


.marketplace-process-content span{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:.55rem;

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

    letter-spacing:2px;

}


.marketplace-process-content h3{

    margin:0 0 14px;

    color:var(--text-light);

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

    font-size:1.3rem;

    line-height:1.2;

}


.marketplace-process-content p{

    margin:0;

    color:var(--text-muted);

    font-size:.82rem;

    line-height:1.75;

}


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

.marketplace-process-line{

    position:absolute;

    left:28px;

    right:28px;

    bottom:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            transparent
        );

    opacity:.55;

}


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

.marketplace-process-status{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    margin-top:55px;

    padding-top:22px;

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

    color:var(--text-muted);

    font-size:.55rem;

    letter-spacing:1.5px;

}


.marketplace-process-status span{

    display:flex;

    align-items:center;

    gap:8px;

}


.marketplace-process-status span i{

    color:var(--primary);

    font-size:.4rem;

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

}


.marketplace-process-status strong{

    color:var(--primary-light);

    font-size:.55rem;

    letter-spacing:1.5px;

}


.marketplace-process-status strong i{

    margin:0 8px;

    color:var(--primary);

    font-size:.45rem;

}


/*==================================================
  TOUCHUP
==================================================*/

.marketplace-process-card,
.marketplace-process-icon{

    will-change:
        transform;

}


.marketplace-process-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:45%;

    height:100%;

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

    transform:
        skewX(-20deg);

    transition:
        left .8s ease;

    pointer-events:none;

}


.marketplace-process-card:hover::after{

    left:130%;

}