/* =========================================================
   IJOVIA PAY — HOMEPAGE LAYOUT CORRECTION
   ---------------------------------------------------------
   Purpose:
   - Restore consistent page margins
   - Lock homepage to the global content grid
   - Prevent hero clipping
   - Improve desktop composition
   - Improve product alignment
   - Prevent horizontal overflow
   ========================================================= */


/* =========================================================
   1. HOMEPAGE ROOT
   ========================================================= */

.ij-home {
    width: 100%;
    min-width: 0;
    overflow: hidden;

    background: #080a0f;
}


/* =========================================================
   2. HOMEPAGE CONTAINER
   ========================================================= */

/*
 * IMPORTANT:
 * We deliberately scope this to the homepage so that
 * unrelated public pages are not affected.
 */

.ij-home .ij-public-container {
    width: min(1240px, calc(100% - 48px));

    max-width: 1240px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   3. HERO
   ========================================================= */

.ij-home-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(75, 141, 255, .10),
            transparent 34rem
        ),
        radial-gradient(
            circle at 48% 78%,
            rgba(243, 183, 43, .055),
            transparent 28rem
        ),
        linear-gradient(
            135deg,
            #080a0f 0%,
            #090d14 52%,
            #080b11 100%
        );
}


/* =========================================================
   4. HERO INNER GRID
   ========================================================= */

.ij-home .ij-home-hero-inner {

    width: min(1240px, calc(100% - 48px));

    max-width: 1240px;

    min-height: 720px;

    margin-left: auto;
    margin-right: auto;

    padding-top: 92px;
    padding-bottom: 92px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, .86fr);

    align-items: center;

    column-gap: clamp(45px, 6vw, 90px);
}


/* =========================================================
   5. HERO COPY
   ========================================================= */

.ij-home-hero-copy {
    width: 100%;
    max-width: 700px;

    min-width: 0;
}


/* =========================================================
   6. EYEBROW
   ========================================================= */

.ij-home-eyebrow {
    max-width: max-content;

    margin-bottom: 24px;

    white-space: nowrap;
}


/* =========================================================
   7. HERO TITLE
   ========================================================= */

.ij-home-title {

    width: 100%;

    max-width: 760px;

    margin: 0;

    font-size:
        clamp(
            3.15rem,
            5.15vw,
            5.75rem
        );

    line-height: .91;

    letter-spacing: -.065em;

    font-weight: 900;

    overflow-wrap: normal;
}


/*
 * Keep the second line visually intentional.
 */

.ij-home-title span {
    display: block;

    max-width: 100%;
}


/* =========================================================
   8. HERO PARAGRAPH
   ========================================================= */

.ij-home-lead {

    max-width: 590px;

    margin-top: 28px;

    font-size: .98rem;

    line-height: 1.75;
}


/* =========================================================
   9. HERO BUTTONS
   ========================================================= */

.ij-home-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 29px;
}


/* =========================================================
   10. HERO TRUST ITEMS
   ========================================================= */

.ij-home-proof {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px 24px;

    margin-top: 29px;
}


/* =========================================================
   11. HERO VISUAL
   ========================================================= */

.ij-home-hero-visual {

    position: relative;

    width: 100%;

    min-width: 0;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/*
 * Keep the decorative orbit behind the interface.
 */

.ij-orbit-one,
.ij-orbit-two {
    pointer-events: none;
}


/* =========================================================
   12. PAYMENT CONSOLE
   ========================================================= */

.ij-payment-console {

    position: relative;

    z-index: 5;

    width: min(100%, 470px);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   13. INFRASTRUCTURE SECTION
   ========================================================= */

.ij-home-infrastructure {

    width: 100%;

    position: relative;

    background:
        linear-gradient(
            180deg,
            #0a0e14 0%,
            #080a0f 100%
        );
}


/*
 * Same grid width as hero.
 */

.ij-home-infrastructure > .ij-public-container {

    width: min(1240px, calc(100% - 48px));

    max-width: 1240px;

    margin-inline: auto;
}


/* =========================================================
   14. SECTION INTRO
   ========================================================= */

.ij-home-section-heading {

    width: 100%;

    max-width: 820px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* =========================================================
   15. PRODUCT ROW
   ========================================================= */

.ij-home-product {

    width: 100%;

    display: grid;

    grid-template-columns:
        58px
        minmax(300px, .82fr)
        minmax(440px, 1.18fr);

    align-items: center;

    column-gap: clamp(35px, 5vw, 78px);

    min-height: 390px;

    padding-top: 58px;
    padding-bottom: 58px;
}


/* =========================================================
   16. PRODUCT COPY
   ========================================================= */

.ij-home-product-copy {

    min-width: 0;

    width: 100%;

    max-width: 500px;
}

.ij-home-product-copy h3 {

    max-width: 470px;

    margin-top: 16px;
}

.ij-home-product-copy p {

    max-width: 470px;

    margin-top: 17px;
}


/* =========================================================
   17. PRODUCT INTERFACE
   ========================================================= */

.ij-product-interface {

    width: 100%;

    min-width: 0;

    max-width: 600px;

    justify-self: end;
}


/* =========================================================
   18. REMOVE THE OLD "REVERSE" BEHAVIOUR
   ========================================================= */

/*
 * The index stays on the left.
 * Copy and visual remain aligned.
 *
 * We don't want arbitrary grid reordering to make
 * the page feel inconsistent.
 */

.ij-home-product-reverse {
    grid-template-columns:
        58px
        minmax(440px, 1.18fr)
        minmax(300px, .82fr);
}

.ij-home-product-reverse .ij-home-product-copy {
    order: 2;
}

.ij-home-product-reverse .ij-product-interface {
    order: 3;
    justify-self: end;
}


/* =========================================================
   19. DEVELOPER SECTION
   ========================================================= */

.ij-home-developer {

    width: 100%;

    overflow: hidden;
}

.ij-home-developer > .ij-public-container {

    width: min(1240px, calc(100% - 48px));

    max-width: 1240px;

    margin-inline: auto;
}

.ij-home-developer-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(320px, .82fr)
        minmax(430px, 1.18fr);

    align-items: center;

    gap: clamp(45px, 7vw, 100px);
}

.ij-home-developer-copy {

    min-width: 0;

    max-width: 560px;
}

.ij-api-window {

    width: 100%;

    max-width: 620px;

    justify-self: end;

    min-width: 0;
}


/* =========================================================
   20. FINAL CTA
   ========================================================= */

.ij-home-final {

    width: 100%;

    overflow: hidden;
}

.ij-home-final > .ij-public-container {

    width: min(1240px, calc(100% - 48px));

    max-width: 1240px;

    margin-inline: auto;
}

.ij-home-final-inner {

    width: 100%;

    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* =========================================================
   21. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .ij-home .ij-public-container,
    .ij-home .ij-home-hero-inner,
    .ij-home-infrastructure > .ij-public-container,
    .ij-home-developer > .ij-public-container,
    .ij-home-final > .ij-public-container {

        width: min(1280px, calc(100% - 96px));

        max-width: 1280px;
    }

    .ij-home-title {
        font-size: clamp(
            4rem,
            5vw,
            6.2rem
        );
    }
}


/* =========================================================
   22. TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .ij-home .ij-public-container,
    .ij-home .ij-home-hero-inner,
    .ij-home-infrastructure > .ij-public-container,
    .ij-home-developer > .ij-public-container,
    .ij-home-final > .ij-public-container {

        width: min(
            100%,
            calc(100% - 40px)
        );
    }


    .ij-home .ij-home-hero-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .8fr);

        column-gap: 40px;
    }


    .ij-home-title {

        font-size:
            clamp(
                3rem,
                5.8vw,
                5rem
            );
    }


    .ij-home-product,
    .ij-home-product-reverse {

        grid-template-columns:
            50px
            minmax(260px, .85fr)
            minmax(330px, 1.15fr);

        column-gap: 30px;
    }


    .ij-home-product-reverse {

        grid-template-columns:
            50px
            minmax(330px, 1.15fr)
            minmax(260px, .85fr);
    }
}


/* =========================================================
   23. COLLAPSE PRODUCT GRID
   ========================================================= */

@media (max-width: 900px) {

    .ij-home .ij-home-hero-inner {

        grid-template-columns: 1fr;

        row-gap: 55px;

        min-height: auto;

        padding-top: 75px;
        padding-bottom: 75px;
    }


    .ij-home-hero-copy {

        max-width: 760px;
    }


    .ij-home-hero-visual {

        min-height: 390px;
    }


    .ij-home-product,
    .ij-home-product-reverse {

        grid-template-columns: 48px 1fr;

        column-gap: 25px;

        row-gap: 35px;

        min-height: auto;

        padding-top: 55px;
        padding-bottom: 55px;
    }


    .ij-home-product-copy,
    .ij-home-product-reverse .ij-home-product-copy {

        order: 1;

        max-width: 650px;
    }


    .ij-home-product-index {

        order: 0;
    }


    .ij-product-interface,
    .ij-home-product-reverse .ij-product-interface {

        order: 2;

        grid-column: 2;

        justify-self: start;

        max-width: 650px;
    }


    .ij-home-developer-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .ij-home-developer-copy {

        max-width: 700px;
    }


    .ij-api-window {

        justify-self: start;

        max-width: 700px;
    }
}


/* =========================================================
   24. MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .ij-home .ij-public-container,
    .ij-home .ij-home-hero-inner,
    .ij-home-infrastructure > .ij-public-container,
    .ij-home-developer > .ij-public-container,
    .ij-home-final > .ij-public-container {

        width: calc(100% - 32px);

        max-width: none;
    }


    .ij-home .ij-home-hero-inner {

        padding-top: 62px;
        padding-bottom: 62px;

        row-gap: 45px;
    }


    .ij-home-eyebrow {

        max-width: 100%;

        white-space: normal;

        font-size: .61rem;
    }


    .ij-home-title {

        max-width: 100%;

        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );

        line-height: .92;
    }


    .ij-home-lead {

        max-width: 100%;

        font-size: .9rem;

        line-height: 1.7;
    }


    .ij-home-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .ij-home-primary,
    .ij-home-secondary {

        width: 100%;
    }


    .ij-home-proof {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .ij-home-hero-visual {

        min-height: 330px;
    }


    .ij-payment-console {

        width: 100%;
    }


    .ij-home-section-heading {

        margin-bottom: 45px;
    }


    .ij-home-section-heading h2 {

        font-size:
            clamp(
                2.35rem,
                10vw,
                3.4rem
            );
    }


    .ij-home-product,
    .ij-home-product-reverse {

        grid-template-columns: 1fr;

        gap: 20px;

        padding-top: 45px;
        padding-bottom: 45px;
    }


    .ij-home-product-index {

        display: flex;

        align-items: center;

        gap: 10px;
    }


    .ij-home-product-index i {

        display: inline-block;

        margin-top: 0;
    }


    .ij-product-interface,
    .ij-home-product-reverse .ij-product-interface {

        grid-column: 1;

        width: 100%;

        max-width: none;

        justify-self: stretch;
    }


    .ij-home-developer,
    .ij-home-final {

        padding-top: 80px;
        padding-bottom: 80px;
    }
}


/* =========================================================
   25. PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

.ij-home,
.ij-home-hero,
.ij-home-infrastructure,
.ij-home-developer,
.ij-home-final {
    max-width: 100%;
    overflow-x: clip;
}