/*==============================================================
WORKFLOW
==============================================================*/

.workflow{

    position:relative;

    padding:140px 0;

    background:#0a0a0a;

    overflow:hidden;

}

.workflow::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 20% 20%,rgba(198,155,88,.06),transparent 45%),
        radial-gradient(circle at 80% 70%,rgba(198,155,88,.05),transparent 50%);

    pointer-events:none;

}

.workflow .container{

    position:relative;

    z-index:2;

}

/*==============================================================
HEADING
==============================================================*/

.workflow-heading{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}

.workflow-heading .section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

    color:var(--color-gold);

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.82rem;

    font-weight:600;

}

.workflow-heading .section-label::before,
.workflow-heading .section-label::after{

    content:"";

    width:70px;

    height:1px;

    background:rgba(198,155,88,.45);

}

.workflow-heading h2{

    margin:0;

    color:#fff;

    font-size:4.6rem;

    line-height:1.05;

    letter-spacing:-.05em;

}

.workflow-heading h2 span{

    color:var(--color-gold);

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

    font-style:italic;

}

.workflow-heading p{

    margin:28px auto 0;

    max-width:700px;

    color:rgba(255,255,255,.72);

    font-size:1.15rem;

    line-height:1.9;

}

/*==============================================================
LAYOUT
==============================================================*/

.workflow-content{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:70px;

    align-items:start;

}

/*==============================================================
TIMELINE
==============================================================*/

.workflow-timeline{

    position:relative;

    padding-left:110px;

}

.workflow-line{

    position:absolute;

    left:40px;

    top:18px;

    bottom:18px;

    width:2px;

    background:rgba(198,155,88,.28);

}

.workflow-step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:28px;

    margin-bottom:70px;

}

.workflow-step:last-child{

    margin-bottom:0;

}

/*==============================================================
ICONOS
==============================================================*/

.workflow-icon{

    position:absolute;

    left:-110px;

    width:78px;

    height:78px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(18px);

}

.workflow-icon img{

    width:34px;

    height:34px;

    object-fit:contain;

    opacity:.85;

}

.workflow-info{

    color:#fff;

}

.workflow-number{

    display:block;

    margin-bottom:8px;

    color:var(--color-gold);

    font-size:1rem;

    font-weight:600;

}

.workflow-info h3{

    margin:0 0 12px;

    font-size:2rem;

    line-height:1.1;

}

.workflow-info p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.8;

    font-size:1rem;

}

/*==============================================================
PREVIEW
==============================================================*/

.workflow-preview{

    position:relative;

}

.workflow-preview img{

    width:100%;

    display:block;

    border-radius:26px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 30px 80px rgba(0,0,0,.35);

}

.workflow-card{

    margin-top:30px;

    display:flex;

    gap:24px;

    align-items:flex-start;

    padding:34px;

    border-radius:24px;

    background:#111;

    border:1px solid rgba(198,155,88,.28);

}

.workflow-card-icon{

    width:72px;

    height:72px;

    border-radius:50%;

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

    color:var(--color-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.7rem;

    flex-shrink:0;

}

.workflow-card h4{

    margin:0 0 12px;

    color:#fff;

    font-size:2rem;

}

.workflow-card p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.8;

}