/* ════════════════════════════════════════
   PROCESS  –  Section & Steps
   ════════════════════════════════════════ */

#process {
    padding: 6rem 5rem;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.process-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.process-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

.process-header p {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.75;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--bs);
}

.step {
    background: var(--bg2);
    padding: 1.8rem 1.6rem;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}

.step:hover { background: var(--bg3); }

.step::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--purple);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.step:hover::after { transform: scaleX(1); }

.step-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    color: var(--purple);
    letter-spacing: .15em;
    margin-bottom: .9rem;
}

.step-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .6rem;
}

.step-desc {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.6;
}