/* =====================================================
   PSIX INVEST — ABOUT
===================================================== */

.psix-about-page{
    min-height:600px;
    background:#f5f7fb;
}


.psix-about-container{
    width:100%;
    max-width:1440px;

    margin:0 auto;

    padding-left:28px;
    padding-right:28px;
}


/* =====================================================
   HERO
   SAME GEOMETRY AS CATEGORY BANNERS
===================================================== */

.psix-about-hero{
    width:100%;

    padding:
        30px
        0
        28px;
}


.psix-about-hero-banner{
    position:relative;

    width:calc(100% - 112px);
    max-width:1680px;

    height:540px;

    margin:0 auto;

    overflow:hidden;

    border-radius:28px;

    background-color:#101828;

    background-size:cover;

    /*
     * Баннер заполняет всю площадь как в категориях.
     * Кадр поднят вверх, чтобы голова и лицо Алексея
     * оставались полностью видны без уменьшения баннера.
     */
    background-position:
        center 24%;

    background-repeat:no-repeat;

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


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

.psix-about-hero-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(5,15,35,.96) 0%,
            rgba(7,19,41,.92) 28%,
            rgba(7,19,41,.76) 46%,
            rgba(7,19,41,.34) 66%,
            rgba(7,19,41,.10) 100%
        );
}


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

.psix-about-hero-content{
    position:relative;

    z-index:2;

    width:58%;
    max-width:850px;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        44px
        68px;
}


/* BREADCRUMBS */

.psix-about-breadcrumbs{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:32px;

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

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


.psix-about-breadcrumbs a{
    color:#ffffff;
}


.psix-about-breadcrumbs a:hover{
    color:#76a9ff;
}


/* KICKER */

.psix-about-hero-kicker{
    margin-bottom:18px;

    color:#6ca6ff;

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

    letter-spacing:.12em;
}


/* TITLE */

.psix-about-hero h1{
    margin:
        0
        0
        18px;

    color:#ffffff;

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

    letter-spacing:-1.5px;

    font-weight:900;
}


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

    color:#ffffff;
}


/* DESCRIPTION */

.psix-about-hero-description{
    max-width:700px;

    margin:
        0
        0
        30px;

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

    font-size:18px;
    line-height:1.55;
}


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

.psix-about-hero-tags{
    display:flex;

    gap:12px;
}


.psix-about-hero-tags > div{
    min-width:140px;

    padding:
        14px
        18px;

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

    border-radius:14px;

    background:
        rgba(12,26,53,.58);

    backdrop-filter:
        blur(8px);
}


.psix-about-hero-tags strong{
    display:block;

    margin-bottom:4px;

    color:#ffffff;

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


.psix-about-hero-tags span{
    display:block;

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

    font-size:12px;
}


/* =====================================================
   BIOGRAPHY
===================================================== */

.psix-about-biography{
    padding:
        2px
        0
        20px;
}


.psix-about-biography-inner{
    width:calc(100% - 240px);
    max-width:1180px;

    margin:0 auto;
}


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

.psix-about-biography-inner > h2,
.psix-about-biography-inner > h3,
.psix-about-biography-inner > h4{
    position:relative;

    margin:
        24px
        0
        0;

    padding:
        25px
        32px
        18px
        36px;

    border:
        1px solid
        #e2e7ef;

    border-bottom:0;

    border-radius:
        22px
        22px
        0
        0;

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

    color:#101828;

    font-weight:900;

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


.psix-about-biography-inner > h2{
    font-size:27px;
}


.psix-about-biography-inner > h3{
    font-size:23px;
}


.psix-about-biography-inner > h4{
    font-size:20px;
}


.psix-about-biography-inner > h2::before,
.psix-about-biography-inner > h3::before,
.psix-about-biography-inner > h4::before{
    content:"";

    position:absolute;

    left:0;
    top:20px;
    bottom:17px;

    width:5px;

    background:#2867ed;

    border-radius:
        0
        6px
        6px
        0;
}


/* =====================================================
   BIO PARAGRAPHS
===================================================== */

.psix-about-biography-inner > p{
    margin:0;

    padding:
        7px
        32px
        14px;

    border-left:
        1px solid
        #e6eaf1;

    border-right:
        1px solid
        #e6eaf1;

    background:#ffffff;

    color:#475467;

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


.psix-about-biography-inner > p:first-child{
    padding-top:28px;

    border-top:
        1px solid
        #e6eaf1;

    border-radius:
        22px
        22px
        0
        0;

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


.psix-about-biography-inner > p:has(+ h2),
.psix-about-biography-inner > p:has(+ h3),
.psix-about-biography-inner > p:has(+ h4),
.psix-about-biography-inner > p:last-child{
    margin-bottom:24px;

    padding-bottom:28px;

    border-bottom:
        1px solid
        #e6eaf1;

    border-radius:
        0
        0
        22px
        22px;
}


.psix-about-biography-inner strong{
    color:#101828;

    font-weight:900;
}


/* =====================================================
   COMMON KICKERS
===================================================== */

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

    color:#2867ed;

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

    letter-spacing:.11em;
}


/* =====================================================
   WHY
===================================================== */

.psix-about-section{
    padding:
        40px
        0
        0;
}


.psix-about-intro{
    display:grid;

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

    gap:70px;

    align-items:center;

    padding:
        38px
        42px;

    border:
        1px solid
        #e6eaf1;

    border-radius:25px;

    background:#ffffff;

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


.psix-about-intro h2{
    margin:0;

    color:#101828;

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


.psix-about-intro p{
    margin:0;

    color:#667085;

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


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

.psix-about-heading{
    max-width:780px;

    margin-bottom:38px;
}


.psix-about-heading h2{
    margin:0;

    color:#101828;

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

    letter-spacing:-1px;
}


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

.psix-about-principles{
    padding:
        78px
        0
        90px;
}


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

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

    gap:24px;
}


.psix-about-principle{
    padding:32px;

    border:
        1px solid
        #e6eaf1;

    border-radius:25px;

    background:#ffffff;

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


.psix-about-principle span{
    display:block;

    margin-bottom:24px;

    color:#2867ed;

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


.psix-about-principle h3{
    margin:
        0
        0
        13px;

    color:#101828;

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


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

    color:#667085;

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


/* =====================================================
   DIRECTIONS
===================================================== */

.psix-about-directions{
    padding:
        75px
        0
        85px;

    background:#ffffff;

    border-top:
        1px solid
        #edf0f5;

    border-bottom:
        1px solid
        #edf0f5;
}


.psix-about-directions-grid{
    display:grid;

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

    gap:20px;
}


.psix-about-directions-grid a{
    min-height:150px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:26px;

    border-radius:22px;

    background:#f7f9fc;

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


.psix-about-directions-grid a:hover{
    transform:
        translateY(-4px);

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


.psix-about-directions-grid strong{
    color:#101828;

    font-size:19px;
}


.psix-about-directions-grid span{
    color:#2867ed;

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


/* =====================================================
   DISCLAIMER
===================================================== */

.psix-about-disclaimer{
    padding:
        60px
        0
        0;
}


.psix-about-disclaimer-card{
    display:grid;

    grid-template-columns:
        .8fr
        1.6fr;

    gap:70px;

    align-items:center;

    padding:
        38px
        42px;

    border-radius:26px;

    background:#101828;
}


.psix-about-disclaimer-card h2{
    margin:0;

    color:#ffffff;

    font-size:30px;
}


.psix-about-disclaimer-card p{
    margin:0;

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

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


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

.psix-about-cta{
    padding:
        60px
        0
        90px;
}


.psix-about-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-about-cta-kicker{
    color:#70a6ff;
}


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

    margin:
        0
        0
        12px;

    color:#ffffff;

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


.psix-about-cta-card p{
    max-width:650px;

    margin:0;

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

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


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

    display:flex;
    flex-direction:column;

    gap:10px;
}


.psix-about-cta-buttons a{
    min-width:190px;
    min-height:48px;

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

    padding:
        0
        22px;

    border-radius:999px;

    color:#ffffff;

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


.psix-about-cta-buttons a:first-child{
    background:#2867ed;
}


.psix-about-cta-buttons a:last-child{
    border:
        1px solid
        rgba(255,255,255,.20);
}


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

@media(max-width:1000px){

    .psix-about-hero-banner{
        width:
            calc(100% - 48px);

        height:520px;
    }


    .psix-about-hero-content{
        width:70%;

        padding:
            38px
            44px;
    }


    .psix-about-hero h1{
        font-size:44px;
    }


    .psix-about-biography-inner{
        width:
            calc(100% - 80px);
    }


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

}


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

@media(max-width:680px){

    .psix-about-container{
        padding-left:16px;
        padding-right:16px;
    }


    .psix-about-hero{
        padding:
            14px
            0
            20px;
    }


    .psix-about-hero-banner{
        width:
            calc(100% - 24px);

        height:540px;

        border-radius:20px;

        background-size:cover;

        background-position:
            72% 24%;
    }


    .psix-about-hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(5,15,35,.32) 0%,
                rgba(5,15,35,.54) 38%,
                rgba(5,15,35,.96) 100%
            );
    }


    .psix-about-hero-content{
        width:100%;

        justify-content:flex-end;

        padding:
            28px
            24px;
    }


    .psix-about-breadcrumbs{
        margin-bottom:18px;
    }


    .psix-about-hero-kicker{
        margin-bottom:12px;
    }


    .psix-about-hero h1{
        font-size:36px;
        line-height:1.05;
    }


    .psix-about-hero-description{
        font-size:16px;
    }


    .psix-about-hero-tags{
        display:grid;

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

        gap:7px;
    }


    .psix-about-hero-tags > div{
        min-width:0;

        padding:
            11px
            10px;
    }


    .psix-about-hero-tags strong{
        font-size:12px;
    }


    .psix-about-hero-tags span{
        font-size:10px;
    }


    .psix-about-biography-inner{
        width:
            calc(100% - 32px);
    }


    .psix-about-biography-inner > p{
        padding:
            7px
            21px
            13px;

        font-size:15px;
    }


    .psix-about-biography-inner > h2,
    .psix-about-biography-inner > h3,
    .psix-about-biography-inner > h4{
        padding:
            21px
            21px
            16px
            25px;
    }


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

        gap:20px;

        padding:27px;
    }


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


    .psix-about-heading h2{
        font-size:34px;
    }


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


    .psix-about-directions-grid{
        grid-template-columns:1fr;
    }


    .psix-about-disclaimer-card{
        grid-template-columns:1fr;

        gap:20px;

        padding:
            29px
            26px;
    }


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

        flex-direction:column;

        padding:
            30px
            26px;
    }


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


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


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

}