/* =========================================================
   E. DESPRE MINE
   MODERN
========================================================= */

.about-e {
    --about-blue: #4192ff;
    --about-green: #46f484;
    --about-gold: #e1ff58;

    --about-ink: #132538;
    --about-text: #435365;
    --about-muted: #718093;

    position: relative;

    width: 100%;

    padding:
        clamp(90px, 9vw, 145px)
        0
        clamp(95px, 10vw, 155px);

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 12% 22%,
            rgba(65, 146, 255, .10),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 68%,
            rgba(70, 244, 132, .07),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 44%,
            #f9fcfb 100%
        );
}


/* linie discretă în partea de sus */

.about-e::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

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

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65, 146, 255, .30),
            rgba(70, 244, 132, .28),
            rgba(225, 255, 88, .34),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   AMBIENT GLOWS
========================================================= */

.about-e__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(8px);

    pointer-events: none;

    z-index: -1;
}


.about-e__glow--blue {
    width: 520px;
    height: 520px;

    top: 13%;
    left: -330px;

    background:
        radial-gradient(
            circle,
            rgba(65, 146, 255, .10),
            transparent 68%
        );
}


.about-e__glow--green {
    width: 440px;
    height: 440px;

    right: -260px;
    bottom: 8%;

    background:
        radial-gradient(
            circle,
            rgba(70, 244, 132, .08),
            transparent 70%
        );
}


.about-e__glow--gold {
    width: 300px;
    height: 300px;

    top: 2%;
    right: 13%;

    background:
        radial-gradient(
            circle,
            rgba(225, 255, 88, .07),
            transparent 70%
        );
}


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

.about-e__container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.about-e__heading {
    width:
        min(
            780px,
            100%
        );

    margin:
        0 auto
        clamp(55px, 6vw, 88px);

    text-align: center;
}


.about-e__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .76rem;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: .13em;

    color: #486274;
}


.about-e__eyebrow-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--about-blue),
            var(--about-green) 55%,
            var(--about-gold)
        );

    box-shadow:
        0 0 0 5px
        rgba(65, 146, 255, .07);
}


.about-e__heading h2 {
    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2.1rem,
            4.1vw,
            4rem
        );

    line-height: 1.25;

    font-weight: 750;

    letter-spacing: -.055em;

    color:
        var(--about-ink);

    text-wrap: balance;
}


.about-e__heading h2 > span {
    display: block;

    margin-top: .08em;

    background:
        linear-gradient(
            90deg,
            #327ee8 0%,
            #31b76c 52%,
            #91a82d 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


.about-e__heading > p {
    width:
        min(
            610px,
            100%
        );

    margin:
        24px auto
        0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            .98rem,
            1.15vw,
            1.12rem
        );

    line-height: 1.75;

    color:
        #647486;
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.about-e__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(0, 1.06fr);

    align-items: center;

    gap:
        clamp(
            60px,
            8vw,
            120px
        );
}


/* =========================================================
   VIZUAL
========================================================= */

.about-e__visual {
    position: relative;

    min-width: 0;
}


/* cerc fin în spatele imaginii */

.about-e__visual-orbit {
    position: absolute;

    width: 78%;
    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    transform:
        translate(
            -52%,
            -53%
        );

    border:
        1px solid
        rgba(65, 146, 255, .11);

    border-radius: 50%;

    pointer-events: none;
}


.about-e__visual-orbit::before,
.about-e__visual-orbit::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}


.about-e__visual-orbit::before {
    inset: 8%;

    border:
        1px solid
        rgba(70, 244, 132, .09);
}


.about-e__visual-orbit::after {
    inset: 18%;

    border:
        1px solid
        rgba(189, 209, 75, .08);
}


/* =========================================================
   PORTRET
========================================================= */

.about-e__portrait {
    position: relative;

    width:
        min(
            470px,
            88%
        );

    margin:
        0 auto;

    aspect-ratio:
        4 / 5;

    overflow: visible;
}


.about-e__portrait::before {
    content: "";

    position: absolute;

    inset:
        -18px
        18px
        18px
        -18px;

    z-index: -1;

    border:
        1px solid
        rgba(65, 146, 255, .15);

    border-radius:
        6px
        50px
        6px
        50px;

    background:
        linear-gradient(
            145deg,
            rgba(65, 146, 255, .05),
            rgba(70, 244, 132, .035),
            rgba(225, 255, 88, .035)
        );
}


.about-e__portrait > img {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    border-radius:
        4px
        46px
        4px
        46px;

    box-shadow:
        0 32px 70px
        rgba(18, 41, 64, .17);

    filter:
        saturate(.96)
        contrast(1.015);
}


/* linie 3C pe imagine */

.about-e__portrait-line {
    position: absolute;

    z-index: 3;

    top: 24px;
    left: -8px;

    width: 4px;
    height: 105px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--about-blue),
            var(--about-green),
            var(--about-gold)
        );

    box-shadow:
        0 5px 24px
        rgba(65, 146, 255, .22);
}


/* =========================================================
   IDENTITATE — badge peste imagine
========================================================= */

.about-e__identity {
    position: absolute;

    z-index: 5;

    right: -34px;
    bottom: 28px;

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 250px;

    padding:
        13px
        16px;

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

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

    border-radius: 10px;

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

    backdrop-filter:
        blur(14px);

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


.about-e__identity > img {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    object-fit: contain;
}


.about-e__identity > div {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.about-e__identity strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        .94rem;

    line-height: 1.2;

    color:
        var(--about-ink);
}


.about-e__identity span {
    margin-top: 3px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .76rem;

    line-height: 1.35;

    color:
        #6f7e8d;
}


/* =========================================================
   CELE 3 REPERE
   Nu sunt carduri separate.
========================================================= */

.about-e__proof {
    position: relative;

    display: grid;

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

    width:
        min(
            540px,
            100%
        );

    margin:
        40px auto
        0;

    padding:
        19px 0;

    border-top:
        1px solid
        rgba(38, 66, 91, .10);

    border-bottom:
        1px solid
        rgba(38, 66, 91, .10);
}


.about-e__proof > div {
    position: relative;

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

    gap: 9px;

    min-width: 0;

    padding:
        0
        12px;
}


.about-e__proof > div:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 10%;
    right: 0;

    width: 1px;
    height: 80%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(55, 83, 108, .14),
            transparent
        );
}


.about-e__proof i {
    flex: 0 0 auto;

    font-size:
        1.25rem;

    color:
        #428be5;
}


.about-e__proof > div:nth-child(2) i {
    color:
        #31b76c;
}


.about-e__proof > div:nth-child(3) i {
    color:
        #9ba936;
}


.about-e__proof span {
    display: flex;
    flex-direction: column;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .72rem;

    line-height: 1.25;

    color:
        #748291;
}


.about-e__proof strong {
    margin-top: 2px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        .79rem;

    font-weight: 700;

    color:
        #263c50;
}


/* =========================================================
   COPY
========================================================= */

.about-e__copy {
    position: relative;

    min-width: 0;

    max-width: 610px;
}


.about-e__lead {
    margin:
        0
        0
        24px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.22rem,
            1.75vw,
            1.55rem
        );

    line-height: 1.48;

    font-weight: 650;

    letter-spacing:
        -.025em;

    color:
        #1e3448;
}


.about-e__text {
    margin:
        0
        0
        18px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            .96rem,
            1.05vw,
            1.06rem
        );

    line-height: 1.78;

    color:
        var(--about-text);
}


.about-e__text strong {
    color:
        #223b51;

    font-weight: 700;
}


/* =========================================================
   ROL
   Accent, nu card.
========================================================= */

.about-e__role {
    position: relative;

    margin:
        clamp(
            36px,
            4vw,
            52px
        )
        0
        0;

    padding:
        3px
        0
        4px
        32px;
}


.about-e__role::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--about-blue),
            var(--about-green) 55%,
            #c0ce4a
        );
}


.about-e__mini {
    display: block;

    margin-bottom: 11px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .70rem;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing:
        .12em;

    color:
        #638093;
}


.about-e__role h3 {
    margin:
        0
        0
        16px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.4rem,
            2vw,
            1.9rem
        );

    line-height: 1.18;

    font-weight: 720;

    letter-spacing:
        -.035em;

    color:
        #173047;
}


.about-e__role h3 > span {
    display: block;

    margin-top: 3px;

    color:
        #398c65;
}


.about-e__role p {
    margin: 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            .93rem,
            1vw,
            1.02rem
        );

    line-height: 1.72;

    color:
        #526273;
}


/* =========================================================
   INVITAȚIE DE ÎNCHEIERE
   CHENAR 3C
========================================================= */

.about-e__invitation {
    position: relative;

    margin:
        clamp(
            40px,
            4vw,
            55px
        )
        0
        0;

    padding: 1.5px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--about-blue) 0%,
            var(--about-green) 52%,
            var(--about-gold) 100%
        );

    box-shadow:
        0 14px 34px
        rgba(30, 63, 90, .07);
}


/* interiorul alb păstrează gradientul
   vizibil doar ca bordură */

.about-e__invitation-content {
    position: relative;

    padding:
        clamp(
            22px,
            2.5vw,
            30px
        )
        clamp(
            22px,
            3vw,
            34px
        );

    border-radius: 10.5px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(249, 252, 255, .97) 48%,
            rgba(252, 255, 248, .97) 100%
        );
}


/* lumină discretă în interior */

.about-e__invitation-content::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 150px;
    height: 100%;

    border-radius:
        0
        10.5px
        10.5px
        0;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(70, 244, 132, .055),
            transparent 72%
        );

    pointer-events: none;
}


.about-e__invitation p {
    position: relative;

    z-index: 1;

    max-width: 520px;

    margin: 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            .96rem,
            1.1vw,
            1.05rem
        );

    line-height: 1.72;

    color: #5c6d7e;
}


.about-e__invitation strong {
    position: relative;

    z-index: 1;

    display: block;

    margin-top: 12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: .95rem;

    line-height: 1.4;

    font-weight: 700;

    color: #263f55;
}

/* =========================================================
   INVITAȚIE — ZOOM DIN INTERIOR SPRE EXTERIOR
========================================================= */

.about-e__invitation--reveal {
    opacity: 0;

    transform:
        scale(.88);

    transform-origin:
        center center;

    transition:
        opacity .9s
        cubic-bezier(.22, 1, .36, 1),

        transform 1.05s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow 1.05s
        cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform;
}


.about-e__invitation--reveal.is-visible {
    opacity: 1;

    transform:
        scale(1);

    box-shadow:
        0 18px 44px
        rgba(30, 63, 90, .10);
}

.about-e__invitation--reveal::after {
    content: "";

    position: absolute;

    inset: -6px;

    z-index: -1;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(65, 146, 255, .15),
            rgba(70, 244, 132, .10),
            rgba(225, 255, 88, .12)
        );

    filter: blur(18px);

    opacity: 0;

    transition:
        opacity 1.2s ease;
}


.about-e__invitation--reveal.is-visible::after {
    opacity: 1;
}

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

.about-e__actions {
    display: flex;

    margin-top:
        clamp(
            32px,
            3vw,
            42px
        );
}


.about-e__cta {
    position: relative;

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

    gap: 11px;

    min-height: 48px;

    padding:
        0
        20px;

    overflow: hidden;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .91rem;

    line-height: 1;

    font-weight: 700;

    color:
        #16334c;

    text-decoration: none;

    border:
        1px solid
        rgba(65, 146, 255, .20);

    border-radius: 10px;

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

    box-shadow:
        0 10px 30px
        rgba(34, 69, 100, .07);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.about-e__cta::before {
    content: "";

    position: absolute;

    inset:
        auto
        0
        0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--about-blue),
            var(--about-green),
            var(--about-gold)
        );

    transform:
        scaleX(.32);

    transform-origin:
        left center;

    transition:
        transform .35s ease;
}


.about-e__cta i {
    position: relative;

    z-index: 1;

    font-size:
        1.25rem;

    transition:
        transform .3s ease;
}


.about-e__cta span {
    position: relative;

    z-index: 1;
}


.about-e__cta:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(65, 146, 255, .35);

    background:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(34, 69, 100, .11);
}


.about-e__cta:hover::before {
    transform:
        scaleX(1);
}


.about-e__cta:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   REVEAL
========================================================= */

.about-e [data-e-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            30px,
            0
        );

    transition:
        opacity .85s
        cubic-bezier(.22, 1, .36, 1),

        transform .95s
        cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform;
}


.about-e
[data-e-reveal][data-e-reveal-side="left"] {
    transform:
        translate3d(
            -38px,
            18px,
            0
        );
}


.about-e
[data-e-reveal][data-e-reveal-side="right"] {
    transform:
        translate3d(
            38px,
            18px,
            0
        );
}


.about-e
[data-e-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


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

@media (min-width: 768px) and (max-width: 991.98px) {

    .about-e {
        padding:
            90px
            0
            105px;
    }


    .about-e__heading {
        margin-bottom:
            62px;
    }


    .about-e__layout {
        grid-template-columns:
            minmax(0, .88fr)
            minmax(0, 1.12fr);

        gap:
            50px;
    }


    .about-e__portrait {
        width: 92%;
    }


    .about-e__identity {
        right:
            -16px;

        bottom:
            20px;

        min-width:
            220px;
    }


    .about-e__proof {
        grid-template-columns:
            1fr;

        gap: 12px;

        padding:
            17px
            0;
    }


    .about-e__proof > div {
        justify-content:
            flex-start;

        padding:
            0
            12px;
    }


    .about-e__proof > div:not(:last-child)::after {
        display: none;
    }


    .about-e__proof span {
        flex-direction:
            row;

        align-items:
            baseline;

        gap: 4px;
    }


    .about-e__role {
        padding-left:
            25px;
    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 767.98px) {

    .about-e {
        padding:
            76px
            0
            88px;

        background:
            radial-gradient(
                circle at 50% 13%,
                rgba(65, 146, 255, .08),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #f9fbfe,
                #ffffff 48%,
                #f9fcfb
            );
    }


    .about-e__heading {
        margin-bottom:
            52px;

        text-align:
            left;
    }


    .about-e__heading h2 {
        font-size:
            clamp(
                2rem,
                9.5vw,
                3rem
            );
    }


    .about-e__heading > p {
        margin:
            20px
            0
            0;

        font-size:
            .94rem;
    }


    .about-e__layout {
        grid-template-columns:
            1fr;

        gap:
            58px;
    }


    .about-e__visual {
        width:
            min(
                500px,
                100%
            );

        margin:
            0 auto;
    }


    .about-e__visual-orbit {
        width:
            88%;
    }


    .about-e__portrait {
        width:
            calc(100% - 28px);

        max-width:
            410px;
    }


    .about-e__portrait::before {
        inset:
            -10px
            10px
            10px
            -10px;

        border-radius:
            4px
            36px
            4px
            36px;
    }


    .about-e__portrait > img {
        border-radius:
            3px
            32px
            3px
            32px;
    }


    .about-e__portrait-line {
        top: 20px;
        left: -4px;

        height:
            78px;
    }


    .about-e__identity {
        right:
            -8px;

        bottom:
            18px;

        min-width: 0;

        width:
            min(
                245px,
                calc(100% - 14px)
            );

        padding:
            11px
            13px;
    }


    .about-e__identity > img {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .about-e__proof {
        grid-template-columns:
            1fr;

        gap:
            11px;

        width:
            calc(100% - 12px);

        margin-top:
            31px;

        padding:
            17px
            0;
    }

	.about-e__proof strong {
    margin-top: -1px;}


    .about-e__proof > div {
        justify-content:
            flex-start;

        padding:
            0
            6px;
    }


    .about-e__proof > div:not(:last-child)::after {
        display: none;
    }


    .about-e__proof span {
        flex-direction:
            row;

        gap:
            4px;
    }


    .about-e__copy {
        max-width:
            none;
    }


    .about-e__lead {
        font-size:
            clamp(
                1.18rem,
                5.5vw,
                1.46rem
            );

        line-height:
            1.45;
    }


    .about-e__text {
        font-size:
            .94rem;

        line-height:
            1.72;
    }


    .about-e__role {
        margin-top:
            36px;

        padding-left:
            22px;
    }


    .about-e__role h3 {
        font-size:
            clamp(
                1.32rem,
                6vw,
                1.65rem
            );
    }


         .about-e__invitation {
        margin-top: 38px;

        border-radius: 11px;
    }


    .about-e__invitation-content {
        padding:
            20px
            18px;

        border-radius: 9.5px;
    }


    .about-e__invitation p {
        font-size: .93rem;

        line-height: 1.68;
    }


    .about-e__invitation strong {
        margin-top: 10px;

        font-size: .91rem;
    }

	


    .about-e__actions {
        margin-top:
            30px;
    }


    .about-e__cta {
        width:
            100%;

        justify-content:
            center;

        min-height:
            50px;

        padding:
            0
            16px;
    }


    /*
       Pe mobil intrăm doar de jos.
       Evităm mișcarea laterală.
    */

    .about-e
    [data-e-reveal][data-e-reveal-side="left"],

    .about-e
    [data-e-reveal][data-e-reveal-side="right"] {
        transform:
            translate3d(
                0,
                25px,
                0
            );
    }


    .about-e
    [data-e-reveal].is-visible {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


/* =========================================================
   TELEFOANE MICI
========================================================= */

@media (max-width: 420px) {

    .about-e {
        padding-top:
            68px;
    }


    .about-e__identity {
        right:
            -4px;

        bottom:
            14px;
    }


    .about-e__identity strong {
        font-size:
            .86rem;
    }


    .about-e__identity span {
        font-size:
            .70rem;
    }


    .about-e__proof {
        width: 100%;
    }


    .about-e__proof i {
        font-size:
            1.15rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-e [data-e-reveal] {
        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    .about-e__cta,
    .about-e__cta::before,
    .about-e__cta i {
        transition:
            none !important;
    }

	    .about-e__invitation--reveal {
        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }

}