#howIWork .sectionTitle {
    font-family: "Audiowide";
    font-size: clamp(2.1rem, 5vw, 4.4rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: white;
    text-align: center;
}

#howIWork .sectionIntro {
    max-width: 900px;
    margin: 0 auto 90px;
    margin-top: 45px;
    font-family: "Kode Mono";
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-glow-color);
    background-color: rgba(0, 0, 0, .30);
    padding: 8px 5%;
    background: rgba(10,25,35,.45);
    backdrop-filter:blur(12px);
    border: 1px solid rgba(120,220,255,.35);
    border-radius: 22px;
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 20px rgba(120,220,255,.18);
}

/*==================================================
    HOW I WORK
==================================================*/
#howIWork{
    position:relative;
    padding:180px 0;
    overflow:hidden;
    background:
        radial-gradient(
            circle at top,
            rgba(70,120,200,.08),
            transparent 65%
        );
}

#howIWork::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(120,220,255,.04),
            transparent 70%
        );
    pointer-events:none;
}

/*==================================================
    CONTENT
==================================================*/
.howIWorkContent{
    position:relative;
    z-index:5;
    width:min(1200px,92%);
    margin:auto;
}

/*==================================================
    INTRODUCTION
==================================================*/
.howIWorkContent .sectionIntro{
    max-width:850px;
    margin:0 auto 80px;
    text-align:center;
    line-height:2;
    font-size:1.15rem;
    color:var(--text-secondary);
}

/*==================================================
    GRID
==================================================*/
.workflowGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(320px,1fr));
    gap:35px;
}

/*==================================================
    CARD
==================================================*/
.workflowCard{

    position:relative;

    padding:45px;

    background:rgba(10,25,35,.45);

    backdrop-filter:blur(12px);

    border-radius:24px;

    border:1px solid rgba(120,220,255,.10);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

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

.workflowCard:hover{
    border-color:rgba(120,220,255,.35);
    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 35px rgba(120,220,255,.12);
}

/*==================================================
    STEP NUMBER
==================================================*/
.workflowNumber{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    font-family:"Audiowide";
    font-size:1.3rem;
    color:#FFFFFF;
    background:linear-gradient(
        135deg,
        #4DBBFF,
        #7E8EFF
    );
    box-shadow:  0 0 25px rgba(120,220,255,.35);
}

/*==================================================
    TITLES
==================================================*/
.workflowCard h3{
    margin-bottom:20px;
    font-family:"Audiowide";
    font-size:1.35rem;
    color:#FFFFFF;
    letter-spacing:.05em;
}

/*==================================================
    TEXT
==================================================*/
.workflowCard p{
    font-size:1.05rem;
    color:var(--text-secondary);
    margin:0;
    font-family: "Kode Mono";
    font-size: 1.15rem;
    line-height: 1.9;
}

/*==================================================
    CLOSING
==================================================*/
.workflowClosing{
    font-family: "Kode Mono";
    font-size: 1.15rem;
    line-height: 1.9;
    max-width:900px;
    margin:90px auto 0;
    padding:50px;
    text-align:center;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.025)
        );

    border-radius:28px;
    border:1px solid rgba(120,220,255,.10);
    backdrop-filter:blur(12px);
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.workflowClosing p{
    margin:0;
    font-size:1.2rem;
    line-height:2;
    color:#BEEFFF;
}

/*==================================================
    MOBILE
==================================================*/
@media(max-width:900px){

    .workflowGrid{
        grid-template-columns:1fr;
    }

    .workflowCard{
        padding:35px;
    }

    .workflowClosing{
        padding:35px 25px;
    }

    .workflowClosing p{
        font-size:1.08rem;
    }
}

@media(max-width:600px){

    #howIWork{
        padding:120px 0;
    }

    .workflowCard{
        padding:28px;
    }

    .workflowNumber{
        width:58px;
        height:58px;
        font-size:1rem;
    }

    .workflowCard h3{
        font-size:1.15rem;
    }

    .workflowCard p{
        font-size:.98rem;
        line-height:1.8;
    }
}