/* =====================================================
   PSIX INVEST — START PAGE ONLY
===================================================== */

.psix-start-page{
    min-height:600px;
    background:#f7f9fc;
}


.psix-start-container{
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding-left:28px;
    padding-right:28px;
}


/* =====================================================
   HERO
===================================================== */

.psix-start-hero{
    padding:54px 0 62px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f7ff 100%
        );

    border-bottom:
        1px solid #e8edf5;
}


.psix-start-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.7fr)
        minmax(300px,.65fr);

    gap:70px;

    align-items:center;
}


.psix-start-kicker,
.psix-start-section-kicker,
.psix-start-cta-kicker{
    margin-bottom:13px;

    color:#2867ed;

    font-size:12px;
    font-weight:900;

    letter-spacing:.11em;
}


.psix-start-hero h1{
    max-width:850px;

    margin:0 0 24px;

    color:#101828;

    font-size:60px;
    line-height:1.05;

    letter-spacing:-2px;

    font-weight:900;
}


.psix-start-hero h1 span{
    display:block;

    color:#2867ed;
}


.psix-start-hero-content > p{
    max-width:760px;

    margin:0;

    color:#667085;

    font-size:19px;
    line-height:1.7;
}


.psix-start-buttons{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-top:32px;
}


.psix-start-button{
    min-height:50px;

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

    padding:0 26px;

    border-radius:999px;

    font-size:14px;
    font-weight:900;

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


.psix-start-button:hover{
    transform:translateY(-2px);
}


.psix-start-button-primary{
    background:#2867ed;

    color:#ffffff;

    box-shadow:
        0 10px 25px rgba(40,103,237,.24);
}


.psix-start-button-dark{
    background:#111827;

    color:#ffffff;
}


/* HERO PANEL */

.psix-start-hero-panel{
    padding:36px;

    border:
        1px solid #e1e8f3;

    border-radius:28px;

    background:#ffffff;

    box-shadow:
        0 18px 50px rgba(15,23,42,.07);
}


.psix-start-panel-label{
    margin-bottom:22px;

    color:#98a2b3;

    font-size:11px;
    font-weight:900;

    letter-spacing:.1em;
}


.psix-start-panel-number{
    color:#2867ed;

    font-size:82px;
    line-height:.95;

    font-weight:900;

    letter-spacing:-4px;
}


.psix-start-panel-title{
    margin-top:8px;

    color:#101828;

    font-size:22px;
    font-weight:900;
}


.psix-start-hero-panel p{
    margin:16px 0 0;

    color:#667085;

    font-size:14px;
    line-height:1.65;
}


/* =====================================================
   INTRO
===================================================== */

.psix-start-intro{
    padding:38px 0 0;
}


.psix-start-intro-card{
    display:grid;

    grid-template-columns:
        minmax(280px,.8fr)
        minmax(0,1.6fr);

    gap:70px;

    align-items:center;

    padding:36px 40px;

    border:
        1px solid #e6eaf1;

    border-radius:25px;

    background:#ffffff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.045);
}


.psix-start-intro-card h2{
    margin:0;

    color:#101828;

    font-size:31px;
    line-height:1.22;
}


.psix-start-intro-card p{
    margin:0;

    color:#667085;

    font-size:16px;
    line-height:1.75;
}


/* =====================================================
   HEADINGS
===================================================== */

.psix-start-section-header{
    max-width:780px;

    margin-bottom:38px;
}


.psix-start-section-header h2{
    margin:0;

    color:#101828;

    font-size:43px;
    line-height:1.12;

    letter-spacing:-1px;
}


.psix-start-section-header p{
    margin:15px 0 0;

    color:#667085;

    font-size:16px;
    line-height:1.65;
}


/* =====================================================
   ROADMAP
===================================================== */

.psix-start-roadmap{
    padding:76px 0 90px;
}


.psix-start-roadmap-grid{
    display:grid;

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

    gap:24px;
}


.psix-start-step{
    position:relative;

    min-height:330px;

    padding:30px;

    border:
        1px solid #e6eaf1;

    border-radius:25px;

    background:#ffffff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.045);

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


.psix-start-step:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.09);
}


.psix-start-step-number{
    position:absolute;

    top:27px;
    right:28px;

    color:#d6dce7;

    font-size:29px;
    font-weight:900;
}


.psix-start-step-icon{
    width:48px;
    height:48px;

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

    margin-bottom:25px;

    border-radius:15px;

    background:
        rgba(40,103,237,.09);

    color:#2867ed;

    font-size:21px;
    font-weight:900;
}


.psix-start-step h3{
    max-width:90%;

    margin:0 0 14px;

    color:#101828;

    font-size:23px;
    line-height:1.28;
}


.psix-start-step p{
    margin:0 0 22px;

    color:#667085;

    font-size:14px;
    line-height:1.7;
}


.psix-start-step a{
    position:absolute;

    right:30px;
    bottom:27px;
    left:30px;

    color:#2867ed;

    font-size:14px;
    font-weight:900;
}


/* =====================================================
   PRINCIPLES
===================================================== */

.psix-start-principles{
    padding:75px 0 85px;

    background:#ffffff;

    border-top:
        1px solid #edf0f5;

    border-bottom:
        1px solid #edf0f5;
}


.psix-start-principles-grid{
    display:grid;

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

    gap:24px;
}


.psix-start-principle{
    padding:29px;

    border-radius:23px;

    background:#f7f9fc;
}


.psix-start-principle strong{
    display:block;

    margin-bottom:22px;

    color:#2867ed;

    font-size:13px;
    font-weight:900;
}


.psix-start-principle h3{
    margin:0 0 12px;

    color:#101828;

    font-size:21px;
    line-height:1.3;
}


.psix-start-principle p{
    margin:0;

    color:#667085;

    font-size:14px;
    line-height:1.65;
}


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

.psix-start-cta{
    padding:70px 0 90px;
}


.psix-start-cta-card{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:50px;

    padding:45px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #101828,
            #172a4b
        );

    box-shadow:
        0 18px 50px rgba(15,23,42,.15);
}


.psix-start-cta-card h2{
    max-width:700px;

    margin:0 0 12px;

    color:#ffffff;

    font-size:33px;
    line-height:1.2;
}


.psix-start-cta-card p{
    max-width:680px;

    margin:0;

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

    font-size:15px;
    line-height:1.7;
}


.psix-start-cta-kicker{
    color:#70a6ff;
}


.psix-start-cta-buttons{
    flex-shrink:0;

    display:flex;
    flex-direction:column;

    gap:10px;
}


.psix-start-cta-primary,
.psix-start-cta-secondary{
    min-width:205px;
    min-height:48px;

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

    padding:0 22px;

    border-radius:999px;

    font-size:14px;
    font-weight:900;
}


.psix-start-cta-primary{
    background:#2867ed;
    color:#ffffff;
}


.psix-start-cta-secondary{
    border:
        1px solid rgba(255,255,255,.20);

    color:#ffffff;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .psix-start-hero-grid{
        grid-template-columns:1fr;
    }


    .psix-start-hero-panel{
        max-width:500px;
    }


    .psix-start-roadmap-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .psix-start-principles-grid{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:680px){

    .psix-start-container{
        padding-left:18px;
        padding-right:18px;
    }


    .psix-start-hero{
        padding:
            42px 0 48px;
    }


    .psix-start-hero-grid{
        gap:38px;
    }


    .psix-start-hero h1{
        font-size:39px;

        letter-spacing:-1px;
    }


    .psix-start-hero-content > p{
        font-size:17px;
    }


    .psix-start-buttons{
        flex-direction:column;
    }


    .psix-start-button{
        width:100%;
    }


    .psix-start-hero-panel{
        padding:28px;
    }


    .psix-start-panel-number{
        font-size:68px;
    }


    .psix-start-intro-card{
        grid-template-columns:1fr;

        gap:18px;

        padding:27px;
    }


    .psix-start-intro-card h2{
        font-size:27px;
    }


    .psix-start-section-header h2{
        font-size:34px;
    }


    .psix-start-roadmap-grid{
        grid-template-columns:1fr;
    }


    .psix-start-step{
        min-height:auto;

        padding-bottom:75px;
    }


    .psix-start-cta-card{
        align-items:flex-start;

        flex-direction:column;

        padding:30px 26px;
    }


    .psix-start-cta-card h2{
        font-size:28px;
    }


    .psix-start-cta-buttons{
        width:100%;
    }


    .psix-start-cta-primary,
    .psix-start-cta-secondary{
        width:100%;
    }

}