/*==========================================================
    REVLO — HOW IT WORKS
    REVLO BLUE THEME
    Scoped under .hw-section — no global leakage.
==========================================================*/

.hw-section{
    --hw-brand:#2563EB;
    --hw-brand-dark:#1D4ED8;
    --hw-brand-light:#60A5FA;
    --hw-brand-soft:#EFF6FF;

    --hw-ink:#10213A;
    --hw-ink-soft:#607089;
    --hw-line:rgba(16,33,58,.09);

    --hw-paper:#FFFFFF;
    --hw-surface:#F6F9FF;

    --hw-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --hw-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hw-font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    position:relative;

    background:
        radial-gradient(
            700px 420px at 92% 0%,
            rgba(37,99,235,.065),
            transparent 68%
        ),
        radial-gradient(
            600px 420px at 5% 100%,
            rgba(96,165,250,.045),
            transparent 70%
        ),
        var(--hw-paper);

    padding:clamp(64px, 9vw, 140px) 0;
    color:var(--hw-ink);
}

.hw-section *{
    box-sizing:border-box;
}

.hw-container{
    max-width:1320px;
    margin:0 auto;
    padding:0 24px;
}

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

.hw-header{
    max-width:640px;
    margin:0 auto 84px;
    text-align:center;
}

.hw-eyebrow{
    display:inline-flex;
    align-items:center;

    padding:11px 20px;
    border-radius:100px;

    background:var(--hw-brand-soft);
    border:1px solid rgba(37,99,235,.18);

    color:var(--hw-brand-dark);

    font-family:var(--hw-font-mono);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.hw-heading{
    margin:24px 0 18px;

    font-family:var(--hw-font-display);
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.01em;
}

.hw-sub{
    margin:0;

    font-family:var(--hw-font-body);
    font-size:1.05rem;
    line-height:1.75;

    color:var(--hw-ink-soft);
}

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

.hw-timeline{
    position:relative;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.hw-line{
    position:absolute;

    top:28px;
    left:12.5%;
    right:12.5%;

    height:3px;

    background:var(--hw-line);
    border-radius:3px;

    overflow:hidden;
    z-index:0;
}

.hw-line__fill{
    height:100%;
    width:100%;

    background:
        linear-gradient(
            90deg,
            var(--hw-brand-dark),
            var(--hw-brand),
            var(--hw-brand-light)
        );

    transform:scaleX(0);
    transform-origin:left;

    transition:
        transform 1.1s cubic-bezier(.16,1,.3,1);
}

.hw-section.hw-inview .hw-line__fill{
    transform:scaleX(1);
}

/*==================================
    STEP
==================================*/

.hw-step{
    position:relative;
    z-index:1;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.hw-step__marker{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;

    border-radius:50%;

    background:var(--hw-paper);
    border:3px solid var(--hw-line);

    color:var(--hw-ink-soft);

    font-family:var(--hw-font-mono);
    font-size:.9rem;
    font-weight:700;

    transition:
        background .5s ease,
        border-color .5s ease,
        color .5s ease,
        transform .5s ease;

    transition-delay:calc(var(--hw-i, 0) * 150ms);

    box-shadow:
        0 4px 12px rgba(16,33,58,.04);
}

.hw-section.hw-inview .hw-step__marker{
    background:
        linear-gradient(
            135deg,
            var(--hw-brand-dark),
            var(--hw-brand),
            var(--hw-brand-light)
        );

    border-color:var(--hw-brand);

    color:#fff;

    transform:scale(1.06);

    box-shadow:
        0 8px 22px rgba(37,99,235,.22);
}

.hw-step__card{
    margin-top:26px;
    width:100%;

    padding:28px 22px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            var(--hw-surface) 100%
        );

    border:1px solid rgba(37,99,235,.09);
    border-radius:18px;

    box-shadow:
        0 12px 32px rgba(16,33,58,.045);

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

.hw-step:hover .hw-step__card{
    transform:translateY(-6px);

    border-color:rgba(37,99,235,.22);

    box-shadow:
        0 20px 40px rgba(37,99,235,.10),
        0 6px 18px rgba(16,33,58,.05);
}

.hw-step__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    margin-bottom:16px;

    border-radius:12px;

    background:var(--hw-brand-soft);
    color:var(--hw-brand);

    font-size:1.05rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);
}

.hw-step__card h3{
    margin:0 0 10px;

    font-family:var(--hw-font-body);
    font-size:1.06rem;
    font-weight:700;

    color:var(--hw-ink);
}

.hw-step__card p{
    margin:0;

    font-family:var(--hw-font-body);
    font-size:.92rem;
    line-height:1.65;

    color:var(--hw-ink-soft);
}

/*==================================
    RESPONSIVE
==================================*/

@media (max-width:900px){

    .hw-header{
        margin-bottom:56px;
    }

    .hw-timeline{
        grid-template-columns:1fr;
        gap:0;
    }

    .hw-step{
        flex-direction:row;
        align-items:flex-start;

        text-align:left;

        gap:22px;
        padding-bottom:36px;
    }

    .hw-step:last-child{
        padding-bottom:0;
    }

    .hw-step__card{
        margin-top:0;
    }

    .hw-line{
        top:28px;
        bottom:28px;

        left:28px;
        right:auto;

        width:3px;
        height:auto;
    }

    .hw-line__fill{
        width:100%;
        height:100%;

        transform:scaleY(0);
        transform-origin:top;

        background:
            linear-gradient(
                180deg,
                var(--hw-brand-dark),
                var(--hw-brand),
                var(--hw-brand-light)
            );
    }

    .hw-section.hw-inview .hw-line__fill{
        transform:scaleY(1);
    }
}

@media (max-width:480px){

    .hw-step__card{
        padding:22px 18px;
    }
}

/*==================================
    REDUCED MOTION
==================================*/

@media (prefers-reduced-motion:reduce){

    .hw-line__fill{
        transition:none;
        transform:none !important;
    }

    .hw-step__marker{
        transition:none;
    }

    .hw-step__card{
        transition:none;
    }
}

/*==========================================================
    END
========================================