/* ============================================================
   fab-big-numbers.css — "FAB Big Numbers Parallax" (ISOLADO, .fab-big-numbers / .fbn__*).
   Figma kPNQN...: 1920 1:1872 · 1440 1:3876 · 992 1:2030 · tablet 1:2486 · mobile 1:3217.
   Tokens da host. Desktop-first. Breakpoints: 1441 · 1024 · 768 · 680 (empilha).

   Track alto (200vh) com um PIN sticky (100vh) que segura a imagem + título; os cards com bg
   glass têm --parallax (JS) e passam pela tela no scroll. ≤680: empilha estático.
   ============================================================ */
.fbn__card--1 {
    --speed: 1;
    --delay: 50px;
}

.fbn__card--2 {
    --speed: 1;
    --delay: 50px;
}
.fbn__card--3 {
    --speed: 1;
    --delay: 50px;
}
.fbn__card--4 {
    --speed: 1;
    --delay: 50px;
}
.fab-big-numbers {
    --head-start: 400px;
    --early-release: 400px;
}

.fab-big-numbers {
    position: relative;
    height: 200vh; /* track de scroll p/ o parallax */
    background: #0b0b12;
}

.fbn__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: clip;
    isolation: isolate;
}

.fbn__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.fbn__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.fbn__title {
    position: absolute;
    right: max(40px, calc((100% - 1920px) / 2 + 40px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    /*width: 360px;*/
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight);
    font-size: 80px;
    line-height: 80px;
    letter-spacing: 0;
    /*color: var(--title-inverse);*/
}

/* ---------- cards glass (parallax) ---------- */
.fbn__card {
    position: absolute;
    left: calc(50% + var(--x, 0px));
    top: calc(50% + var(--y, 0px));
    transform: translate(-50%, calc(-50% + var(--parallax, 0px)));
    width: clamp(208px, 18vw, 280px);
    padding: clamp(24px, 2vw, 40px) 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: rgba(1,1,1,.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    will-change: transform;
}

.fbn__card--1 {
    --x: -244px;
    --y: -92px;
    z-index: 7;
}

.fbn__card--2 {
    --x: -540px;
    --y: 228px;
    z-index: 6;
}

.fbn__card--3 {
    --x: -244px;
    --y: 600px;
    z-index: 5;
}

.fbn__card--4 {
    --x: -561px;
    --y: 944px;
    z-index: 4;
}

.fbn__up,
.fbn__label {
    margin: 0;
    width: 100%;
    font-family: var(--font-sans);
    font-weight: var(--fw-light);
    font-size: 18px;
    line-height: 24px;
    color: var(--body-inverse); /* white */
}

.fbn__value {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: var(--fw-thin); /* 100 */
    font-size: 85px;
    line-height: 1;
    letter-spacing: -0.85px;
    color: var(--title-inverse);
    white-space: nowrap;
}

.fbn__tilde {
    font-size: 0.44em;
    font-weight: var(--fw-extralight);
}

/* ============================================================ ≥1441 — frame 1920 ======= */
/*@media (min-width: 1441px) {
    .fbn__card--1 {
        --x: -138px;
        --y: -92px;
        z-index: 7;
    }

    .fbn__card--2 {
        --x: -540px;
        --y: 228px;
        z-index: 6;
    }

    .fbn__card--3 {
        --x: -213px;
        --y: 600px;
        z-index: 5;
    }

    .fbn__card--4 {
        --x: -430px;
        --y: 870px;
        z-index: 4;
    }

}

@media (max-width:1440px) {
    .fbn__card--1 {
        --x: -244px;
        --y: -92px;
        z-index: 7;
    }

    .fbn__card--2 {
        --x: -540px;
        --y: 228px;
        z-index: 6;
    }

    .fbn__card--3 {
        --x: -244px;
        --y: 600px;
        z-index: 5;
    }

    .fbn__card--4 {
        --x: -561px;
        --y: 944px;
        z-index: 4;
    }

    /* ============================================================ ≤1024 — compacto ========= */
    @media (max-width: 1024px) {
        .fbn__card--1 {
            --x: -120px;
            --y: -210px;
        }

        .fbn__card--2 {
            --x: -290px;
            --y: 115px;
        }

        .fbn__card--3 {
            --x: -140px;
            --y: 442px;
        }

        .fbn__card--4 {
            --x: -290px;
            --y: 730px;
        }
    }

    /* ============================================================ ≤768 — tablet ============ */
    @media (max-width: 768px) {
        .fbn__title {
            font-size: 64px;
            line-height: 64px;
        }

        .fbn__value {
            font-size: 64px;
            letter-spacing: -0.64px;
        }

        .fbn__card--1 {
            --x: -206px;
            --y: -180px;
        }

        .fbn__card--2 {
            --x: -43px;
            --y: 113px;
        }

        .fbn__card--3 {
            --x: -206px;
            --y: 402px;
        }
        .fbn__card--4 {
            --x: -43px;
            --y: 690px;
        }
    }

    /* ============================================================ ≤680 — mobile (empilha) == */
    @media (max-width: 680px) {
        .fab-big-numbers {
            height: auto;
        }

        .fbn__pin {
            position: sticky;
            height: auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            padding: 92px 20px 80px;
        }

        .fbn__title {
            position: static;
            transform: none;
            width: 100%;
            align-self: flex-start;
            font-size: 48px;
            line-height: 48px;
            /* gradiente sutil do frame mobile (dark → lavanda → dark) clipado no texto */
            /*  background-image: linear-gradient(90deg, #010101 6%, var(--lavender-500) 55%, #010101 94%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;*/
        }

        .fbn__card {
            position: absolute;
            left: 50%;
            width: 208px;
            padding: 24px;
            transform: translate( calc(-50% + var(--x)), calc(-50% + var(--y) + var(--parallax)) );
        }

        .fbn__card--1 {
            --x: 20px;
            --y: -151px;
        }

        .fbn__card--2 {
            --x: 40px;
            --y: 0px;
        }

        .fbn__card--3 {
            --x: 20px;
            --y: 152px;
        }

        .fbn__card--4 {
            --x: 40px;
            --y: 304px;
        }

        .fbn__value {
            font-size: 64px;
            letter-spacing: -0.64px;
        }
    }
   
       

    @media (prefers-reduced-motion: reduce) {
        .fbn__card {
            transition: none;
        }
    }