/* =============================================================================
   RESYD HOW IT WORKS SECTION
   PREMIUM CINEMATIC FLOW EXPERIENCE
   ALIGNED WITH CORE + COMPONENTS + FORM + LINKS + FOOTER
   ============================================================================= */

/* =============================================================================
   SECTION
   ============================================================================= */

.how-it-works {

    position:
        relative;

    padding:
        120px 0 140px;

    background:
        linear-gradient(
            180deg,
            #060708 0%,
            #0a0d10 45%,
            #050607 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;

    z-index:
        2;
}

.how-it-works::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top left,
            rgba(199,170,116,.08),
            transparent 34%
        );

    pointer-events:
        none;
}

.how-it-works::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto 0 0 0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199,170,116,.28),
            transparent
        );
}

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

.how-it-works .container {

    width:
        min(100% - 2rem, 1440px);

    margin-inline:
        auto;

    position:
        relative;

    z-index:
        2;
}

/* =============================================================================
   WELCOME
   ============================================================================= */

.how-welcome {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 22px;

    border-radius:
        999px;

    margin-bottom:
        34px;

    background:
        rgba(199,170,116,.08);

    border:
        1px solid rgba(199,170,116,.16);

    color:
        #e3c693;

    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 12px 28px rgba(0,0,0,.22);
}

/* =============================================================================
   TITLE
   ============================================================================= */

.how-it-works h2 {

    max-width:
        980px;

    color:
        #ffffff;

    font-size:
        clamp(2.8rem,6vw,5.8rem);

    line-height:
        .96;

    letter-spacing:
        -.06em;

    margin-bottom:
        34px;
}

/* =============================================================================
   LIVE BARS
   ============================================================================= */

.how-live,
.how-scarcity {

    position:
        relative;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    padding:
        0 26px;

    border-radius:
        22px;

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

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

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

    font-size:
        .88rem;

    font-weight:
        800;

    line-height:
        1.6;

    backdrop-filter:
        blur(14px);

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

    overflow:
        hidden;
}

.how-live {

    margin-bottom:
        18px;
}

.how-scarcity {

    margin-bottom:
        58px;
}

.how-live::before,
.how-scarcity::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        4px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            #d7bc8a,
            #9fe18d
        );
}

/* =============================================================================
   STEPS
   ============================================================================= */

.steps {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        28px;

    margin-bottom:
        62px;
}

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

.step {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        340px;

    padding:
        34px;

    border-radius:
        34px;

    background:
        linear-gradient(
            180deg,
            rgba(18,20,22,.98),
            rgba(8,10,12,.98)
        );

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

    box-shadow:
        0 26px 80px rgba(0,0,0,.34);

    transition:
        transform .38s ease,
        border-color .34s ease,
        box-shadow .34s ease;

    isolation:
        isolate;
}

.step:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(199,170,116,.18);

    box-shadow:
        0 38px 90px rgba(0,0,0,.46);
}

.step::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.10),
            transparent 36%
        );

    opacity:
        0;

    transition:
        opacity .34s ease;

    pointer-events:
        none;
}

.step:hover::before {

    opacity:
        1;
}

/* =============================================================================
   CONNECTOR
   ============================================================================= */

.step::after {

    content:
        "";

    position:
        absolute;

    top:
        72px;

    right:
        -28px;

    width:
        56px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            rgba(199,170,116,.42),
            transparent
        );
}

.step:last-child::after {

    display:
        none;
}

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

.step-icon {

    width:
        84px;

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        24px;

    margin-bottom:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(199,170,116,.18),
            rgba(199,170,116,.06)
        );

    border:
        1px solid rgba(199,170,116,.18);

    color:
        #ffffff;

    font-size:
        2rem;

    box-shadow:
        0 18px 38px rgba(0,0,0,.22);
}

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

.step h3 {

    color:
        #ffffff;

    font-size:
        1.5rem;

    font-weight:
        800;

    line-height:
        1.3;

    margin-bottom:
        18px;
}

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

.step p {

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

    font-size:
        .98rem;

    line-height:
        1.9;

    max-width:
        320px;
}

/* =============================================================================
   TRUST
   ============================================================================= */

.how-triggers {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        14px;

    margin-bottom:
        48px;
}

.how-triggers span {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 20px;

    border-radius:
        999px;

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

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

    color:
        #ece2d2;

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .03em;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.how-triggers span::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #9fe18d;

    box-shadow:
        0 0 14px rgba(159,225,141,.72);

    animation:
        howPulse 2s infinite;
}

/* =============================================================================
   ALERT
   ============================================================================= */

.how-alert {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    padding:
        0 24px;

    border-radius:
        24px;

    margin-bottom:
        52px;

    background:
        linear-gradient(
            135deg,
            rgba(199,170,116,.10),
            rgba(199,170,116,.04)
        );

    border:
        1px solid rgba(199,170,116,.14);

    color:
        #f0e0c6;

    font-size:
        .88rem;

    font-weight:
        800;

    text-align:
        center;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}

/* =============================================================================
   LINKS
   ============================================================================= */

.how-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        14px;

    margin-bottom:
        62px;
}

.how-links a {

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 20px;

    border-radius:
        999px;

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

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

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

    font-size:
        .76rem;

    font-weight:
        800;

    text-decoration:
        none;

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

.how-links a:hover {

    transform:
        translateY(-2px);

    background:
        rgba(199,170,116,.08);

    border-color:
        rgba(199,170,116,.16);

    color:
        #ffffff;
}

/* =============================================================================
   CTA
   ============================================================================= */

.how-cta {

    display:
        flex;

    justify-content:
        center;
}

.how-cta .cta {

    min-width:
        340px;

    min-height:
        64px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 32px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #d7bc8a,
            #b58545
        );

    color:
        #ffffff;

    font-size:
        .92rem;

    font-weight:
        900;

    letter-spacing:
        .04em;

    text-decoration:
        none;

    border:
        0;

    box-shadow:
        0 22px 48px rgba(181,133,69,.28);

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}

.how-cta .cta:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 30px 62px rgba(181,133,69,.34);
}

/* =============================================================================
   MOBILE
   ============================================================================= */

@media (max-width: 1080px) {

    .steps {

        grid-template-columns:
            1fr;

        gap:
            24px;
    }

    .step::after {

        display:
            none;
    }
}

@media (max-width: 720px) {

    .how-it-works {

        padding:
            78px 0 92px;
    }

    .how-it-works h2 {

        font-size:
            clamp(2.2rem,11vw,4rem);
    }

    .step {

        min-height:
            auto;

        padding:
            26px;
    }

    .step-icon {

        width:
            72px;

        height:
            72px;

        font-size:
            1.7rem;
    }

    .how-live,
    .how-scarcity,
    .how-alert {

        padding:
            18px;
    }

    .how-cta .cta {

        width:
            100%;

        min-width:
            0;
    }
}

/* =============================================================================
   ANIMATION
   ============================================================================= */

@keyframes howPulse {

    0%,100% {

        opacity:
            1;
    }

    50% {

        opacity:
            .42;
    }
}