/* =========================================================
   F. METODA 3C
   NEVOIA DE PREGĂTIRE
========================================================= */

.method3c {
    --m3-blue: #4192ff;
    --m3-green: #46f484;
    --m3-gold: #e1ff58;

    --m3-ink: #142633;
    --m3-text: #526575;
    --m3-muted: #718493;

    position: relative;

    width: 100%;

    padding:
        clamp(100px, 10vw, 160px)
        0
        clamp(100px, 10vw, 155px);

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(70, 244, 132, .045),
            transparent 27%
        ),
        radial-gradient(
            circle at 10% 52%,
            rgba(65, 146, 255, .055),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 84%,
            rgba(225, 255, 88, .045),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fcfdfb 0%,
            #ffffff 48%,
            #fafcfb 100%
        );
}


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

.method3c__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    filter: blur(10px);
}


.method3c__ambient--blue {
    width: 500px;
    height: 500px;

    left: -330px;
    top: 20%;

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


.method3c__ambient--green {
    width: 470px;
    height: 470px;

    right: -310px;
    top: 4%;

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


.method3c__ambient--gold {
    width: 390px;
    height: 390px;

    right: -220px;
    bottom: 2%;

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


/* mici puncte ambientale */

.method3c::before,
.method3c::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    pointer-events: none;
}


.method3c::before {
    top: 12%;
    right: 18%;

    background:
        rgba(70, 244, 132, .24);

    box-shadow:
        330px 140px 0 rgba(65,146,255,.18),
        140px 320px 0 rgba(225,255,88,.20),
        -70px 470px 0 rgba(70,244,132,.16);
}


.method3c::after {
    bottom: 11%;
    left: 12%;

    background:
        rgba(65, 146, 255, .15);

    box-shadow:
        170px -100px 0 rgba(70,244,132,.16),
        470px 20px 0 rgba(225,255,88,.15);
}


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

.method3c__layout {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(280px, .70fr)
        minmax(0, 1.30fr);

    gap:
        clamp(
            70px,
            9vw,
            145px
        );

    align-items: start;
}


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

.method3c__intro {
    position: relative;

    min-width: 0;
}


.method3c__sticky {
    position: sticky;

    top:
        clamp(
            105px,
            13vh,
            145px
        );

    padding-bottom: 40px;
}


.method3c__sticky h2 {
    max-width: 460px;

    margin:
        18px
        0
        0;

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

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.8rem
        );

    line-height: .99;

    font-weight: 760;

    letter-spacing: -.06em;

    color:
        var(--m3-ink);

    text-wrap: balance;
}


.method3c__sticky h2 span {
    display: block;

    margin-top: .10em;

    background:
        linear-gradient(
            90deg,
            #307edb,
            #31ad68 52%,
            #899a2b
        );

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

    color: transparent;

    -webkit-text-fill-color: transparent;
}


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

.method3c__intro-text {
    max-width: 470px;

    margin:
        clamp(
            28px,
            3vw,
            38px
        )
        0
        0;

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

    font-size:
        clamp(
            .98rem,
            1.1vw,
            1.08rem
        );

    line-height: 1.78;

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


.method3c__intro-text strong {
    color:
        #243c4e;

    font-weight: 700;
}


/* =========================================================
   LEGENDĂ
========================================================= */

.method3c__legend {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

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


.method3c__legend-item {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        7px
        11px;

    border-radius: 999px;

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

    font-size: .68rem;

    line-height: 1;

    font-weight: 700;

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


.method3c__legend-item i {
    width: 6px;
    height: 6px;

    flex:
        0 0 6px;

    border-radius: 50%;
}


.method3c__legend-item--blue {
    color: #2670ca;

    background:
        rgba(65, 146, 255, .10);
}


.method3c__legend-item--blue i {
    background:
        var(--m3-blue);
}


.method3c__legend-item--green {
    color: #24794c;

    background:
        rgba(70, 244, 132, .11);
}


.method3c__legend-item--green i {
    background:
        #38c976;
}


.method3c__legend-item--gold {
    color: #75801e;

    background:
        rgba(225, 255, 88, .22);
}


.method3c__legend-item--gold i {
    background:
        #b2c53a;
}


/* activ JS */

.method3c__legend-item.is-active {
    transform:
        translateY(-2px)
        scale(1.035);

    box-shadow:
        0 8px 20px
        rgba(33, 57, 76, .08);
}


/* =========================================================
   ORIENTARE
========================================================= */

.method3c__orientation {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 28px;

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

    font-size: .73rem;

    line-height: 1.4;

    color:
        #84929e;
}


.method3c__orientation i {
    font-size: 1.05rem;

    color:
        #5d87a6;

    animation:
        method3cArrow 2.2s
        ease-in-out
        infinite;
}


@keyframes method3cArrow {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(5px);
    }

}


/* =========================================================
   AXĂ
========================================================= */

.method3c__axis {
    position: relative;

    min-width: 0;

    padding-left:
        clamp(
            68px,
            6vw,
            96px
        );
}


/* linia de bază */

.method3c__axis-line {
    position: absolute;

    top: 28px;
    bottom: 45px;

    left:
        clamp(
            27px,
            2.6vw,
            40px
        );

    width: 1px;

    overflow: hidden;

    background:
        rgba(75, 104, 126, .13);
}


/* progresul colorat */

.method3c__axis-line > span {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--m3-blue) 0%,
            var(--m3-green) 53%,
            #c7d840 100%
        );

    box-shadow:
        0 0 14px
        rgba(65, 146, 255, .20);

    transition:
        height .16s linear;
}


/* =========================================================
   ITEM
========================================================= */

.method3c__item {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr;

    min-height:
        clamp(
            500px,
            64vh,
            650px
        );

    padding:
        clamp(
            34px,
            4vw,
            55px
        )
        0
        clamp(
            70px,
            7vw,
            105px
        );

    border-bottom:
        1px solid
        rgba(53, 79, 100, .09);

    transition:
        background .55s ease,
        transform .55s ease;
}


.method3c__item:last-child {
    border-bottom: 0;
}


/* lumină foarte discretă pe item activ */

.method3c__item::before {
    content: "";

    position: absolute;

    inset:
        3%
        -28px
        3%
        -34px;

    z-index: -1;

    border-radius: 28px;

    opacity: 0;

    transition:
        opacity .55s ease;

    pointer-events: none;
}


.method3c__item--blue::before {
    background:
        radial-gradient(
            circle at 22% 45%,
            rgba(65, 146, 255, .055),
            transparent 66%
        );
}


.method3c__item--green::before {
    background:
        radial-gradient(
            circle at 22% 45%,
            rgba(70, 244, 132, .055),
            transparent 66%
        );
}


.method3c__item--gold::before {
    background:
        radial-gradient(
            circle at 22% 45%,
            rgba(225, 255, 88, .075),
            transparent 66%
        );
}


.method3c__item.is-active::before {
    opacity: 1;
}


/* =========================================================
   NUMERE
========================================================= */

.method3c__number {
    position: absolute;

    top:
        clamp(
            30px,
            4vw,
            50px
        );

    left:
        calc(
            -1 *
            clamp(
                68px,
                6vw,
                96px
            )
            +
            clamp(
                27px,
                2.6vw,
                40px
            )
        );

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%);

    border-radius: 50%;

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

    font-size: 1rem;

    line-height: 1;

    font-weight: 750;

    background: #fff;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1),

        box-shadow .45s ease,

        background .45s ease;
}


.method3c__item--blue
.method3c__number {
    color: #2878d5;

    border:
        2px solid
        rgba(65,146,255,.55);
}


.method3c__item--green
.method3c__number {
    color: #278353;

    border:
        2px solid
        rgba(70,244,132,.55);
}


.method3c__item--gold
.method3c__number {
    color: #7d8925;

    border:
        2px solid
        rgba(190,207,60,.60);
}


.method3c__item.is-active
.method3c__number {
    transform:
        translateX(-50%)
        scale(1.10);

    box-shadow:
        0 12px 30px
        rgba(30, 65, 91, .12);
}


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

.method3c__content {
    max-width: 760px;
}


.method3c__label {
    display: block;

    margin-bottom: 13px;

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

    font-size: .72rem;

    line-height: 1;

    font-weight: 780;

    letter-spacing: .14em;
}


.method3c__item--blue
.method3c__label {
    color: #327ed5;
}


.method3c__item--green
.method3c__label {
    color: #29925a;
}


.method3c__item--gold
.method3c__label {
    color: #84912a;
}


.method3c__content h3 {
    max-width: 780px;

    margin: 0;

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

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

    line-height: 1.10;

    font-weight: 735;

    letter-spacing: -.045em;

    color:
        var(--m3-ink);

    text-wrap: balance;
}


.method3c__content h3 > span {
    display: block;

    margin-top: .08em;

    color:
        #263e4f;
}


/* =========================================================
   DESCRIERE
========================================================= */

.method3c__description {
    max-width: 690px;

    margin:
        clamp(
            22px,
            2.5vw,
            30px
        )
        0
        0;

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

    font-size:
        clamp(
            .96rem,
            1.08vw,
            1.07rem
        );

    line-height: 1.75;

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


/* =========================================================
   ÎNTREBĂRI
========================================================= */

.method3c__questions {
    max-width: 700px;

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

    border-top:
        1px solid
        rgba(42, 70, 92, .10);
}


.method3c__question {
    position: relative;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    gap: 13px;

    align-items: start;

    padding:
        18px
        0;

    border-bottom:
        1px solid
        rgba(42, 70, 92, .08);

    transition:
        padding-left .35s ease,
        color .35s ease;
}


.method3c__question i {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size:
        .95rem;

    transition:
        transform .35s ease,
        background .35s ease;
}


.method3c__item--blue
.method3c__question i {
    color: #347fd5;

    background:
        rgba(65, 146, 255, .09);
}


.method3c__item--green
.method3c__question i {
    color: #288b56;

    background:
        rgba(70, 244, 132, .10);
}


.method3c__item--gold
.method3c__question i {
    color: #86932e;

    background:
        rgba(225, 255, 88, .20);
}


.method3c__question p {
    margin: 3px 0 0;

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

    font-size:
        clamp(
            .95rem,
            1.18vw,
            1.10rem
        );

    line-height: 1.48;

    font-weight: 620;

    letter-spacing: -.015em;

    color:
        #42596b;
}


/* hover numai unde există pointer */

@media (hover: hover) {

    .method3c__question:hover {
        padding-left: 8px;
    }


    .method3c__question:hover i {
        transform:
            scale(1.10);
    }

}


/* =========================================================
   TRANSFORMARE
========================================================= */

.method3c__transform {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 1.28fr);

    gap:
        clamp(
            55px,
            8vw,
            115px
        );

    align-items: center;

    margin-top:
        clamp(
            85px,
            10vw,
            145px
        );

    padding:
        clamp(
            55px,
            6vw,
            85px
        )
        clamp(
            40px,
            6vw,
            80px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(47, 78, 101, .09);

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            rgba(65,146,255,.035),
            rgba(255,255,255,.94) 35%,
            rgba(70,244,132,.025) 68%,
            rgba(225,255,88,.04)
        );

    box-shadow:
        0 25px 70px
        rgba(31, 59, 81, .07);
}


.method3c__transform::before {
    content: "";

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 3px;

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


/* =========================================================
   MINTE -> INIMĂ
========================================================= */

.method3c__transform-symbol {
    display: flex;
    align-items: center;

    gap:
        clamp(
            12px,
            2vw,
            24px
        );
}


.method3c__mind,
.method3c__heart {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.4rem
        );

    line-height: 1;

    font-weight: 760;

    letter-spacing: .04em;
}


.method3c__mind {
    color:
        #397fd1;
}


.method3c__heart {
    color:
        #31905b;
}


.method3c__transform-arrow {
    position: relative;

    flex: 1;

    min-width: 60px;

    display: flex;
    align-items: center;
}


.method3c__transform-arrow > span {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--m3-blue),
            var(--m3-green)
        );
}


.method3c__transform-arrow i {
    margin-left: -4px;

    font-size: 1.35rem;

    color:
        #42a069;
}


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

.method3c__transform-content {
    position: relative;

    z-index: 1;
}


.method3c__transform-content h3 {
    max-width: 720px;

    margin:
        16px
        0
        0;

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

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

    line-height: 1.12;

    font-weight: 730;

    letter-spacing: -.04em;

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


.method3c__transform-content h3 span {
    display: block;

    margin-top: .08em;

    color:
        #365267;
}


.method3c__transform-content > p {
    max-width: 700px;

    margin:
        23px
        0
        0;

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

    font-size:
        clamp(
            .95rem,
            1.06vw,
            1.04rem
        );

    line-height: 1.74;

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


/* =========================================================
   ȚINTA PROCESULUI
   CARD CU BORDURĂ 3C
========================================================= */

.method3c__principle {
    position: relative;

    margin-top: 32px;

    padding: 1.5px;

    border-radius: 14px;

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

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


/*
   Interiorul păstrează gradientul
   doar ca bordură.
*/
.method3c__principle-inner {
    position: relative;

    padding:
        22px
        24px;

    border-radius: 12.5px;

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

    overflow: hidden;
}


/* lumină foarte discretă în interior */

.method3c__principle-inner::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 160px;
    height: 100%;

    border-radius:
        0
        12.5px
        12.5px
        0;

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

    pointer-events: none;
}


.method3c__principle > div > span {
    position: relative;

    z-index: 1;

    display: block;

    margin-bottom: 9px;

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

    font-size: .66rem;

    line-height: 1;

    font-weight: 780;

    letter-spacing: .13em;

    color:
        #6c8270;
}


.method3c__principle strong {
    position: relative;

    z-index: 1;

    display: block;

    max-width: 650px;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.13rem
        );

    line-height: 1.62;

    font-weight: 600;

    font-style: italic;

    color:
        #415768;
}



/* =========================================================
   ANIMAȚIE
   ZOOM DIN INTERIOR SPRE EXTERIOR
========================================================= */

.method3c__principle--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;
}


/* glow discret în jurul cardului */

.method3c__principle--reveal::after {
    content: "";

    position: absolute;

    inset: -7px;

    z-index: -1;

    border-radius: 18px;

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

    filter: blur(18px);

    opacity: 0;

    transition:
        opacity 1.2s ease;
}


.method3c__principle--reveal.is-visible {
    opacity: 1;

    transform:
        scale(1);

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


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



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

@media (max-width: 767.98px) {

    .method3c__principle {
        margin-top: 28px;

        border-radius: 12px;
    }


    .method3c__principle-inner {
        padding:
            19px
            17px;

        border-radius: 10.5px;
    }


    .method3c__principle > div > span {
        font-size: .62rem;
    }


    .method3c__principle strong {
        font-size: .97rem;

        line-height: 1.58;
    }

}


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

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

    .method3c {
        padding:
            95px
            0
            110px;
    }


    .method3c__layout {
        grid-template-columns:
            minmax(220px, .65fr)
            minmax(0, 1.35fr);

        gap: 48px;
    }


    .method3c__sticky {
        top: 105px;
    }


    .method3c__sticky h2 {
        font-size:
            clamp(
                2.3rem,
                5.5vw,
                3.4rem
            );
    }


    .method3c__axis {
        padding-left: 64px;
    }


    .method3c__axis-line {
        left: 25px;
    }


    .method3c__number {
        left: -39px;

        width: 60px;
        height: 60px;
    }


    .method3c__item {
        min-height: 520px;
    }


    .method3c__transform {
        grid-template-columns:
            .70fr
            1.30fr;

        gap: 42px;

        padding:
            52px
            42px;
    }

}


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

@media (max-width: 767.98px) {

    .method3c {
        padding:
            78px
            0
            90px;
    }


    .method3c__layout {
        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .method3c__sticky {
        position: relative;

        top: auto;

        padding-bottom: 0;
    }


    .method3c__sticky h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.3rem,
                11vw,
                3.4rem
            );
    }


    .method3c__intro-text {
        max-width: none;

        font-size: .96rem;
    }


    .method3c__orientation {
        display: none;
    }


    /* axa */

    .method3c__axis {
        padding-left: 52px;
    }


    .method3c__axis-line {
        left: 18px;

        top: 20px;
        bottom: 25px;
    }


    .method3c__item {
        min-height: 0;

        padding:
            28px
            0
            72px;
    }


    .method3c__number {
        top: 24px;

        left: -34px;

        width: 48px;
        height: 48px;

        font-size: .79rem;
    }


    .method3c__content h3 {
        font-size:
            clamp(
                1.55rem,
                7.2vw,
                2.05rem
            );
    }


    .method3c__description {
        font-size: .93rem;

        line-height: 1.70;
    }


    .method3c__questions {
        margin-top: 27px;
    }


    .method3c__question {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap: 10px;

        padding:
            16px
            0;
    }


    .method3c__question i {
        width: 27px;
        height: 27px;

        font-size: .85rem;
    }


    .method3c__question p {
        margin-top: 2px;

        font-size: .94rem;
    }


    /* transform */

    .method3c__transform {
        grid-template-columns:
            1fr;

        gap: 42px;

        margin-top: 65px;

        padding:
            42px
            24px;

        border-radius: 2px;
    }


    .method3c__transform-symbol {
        max-width: 360px;

        width: 100%;

        margin: 0 auto;
    }


    .method3c__transform-content h3 {
        font-size:
            clamp(
                1.55rem,
                7vw,
                2rem
            );
    }


    .method3c__transform-content > p {
        font-size: .93rem;
    }



}


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

@media (max-width: 420px) {

    .method3c__axis {
        padding-left: 45px;
    }


    .method3c__axis-line {
        left: 15px;
    }


    .method3c__number {
        left: -30px;

        width: 43px;
        height: 43px;
    }


    .method3c__legend {
        gap: 6px;
    }


    .method3c__legend-item {
        padding:
            6px
            8px;

        font-size: .62rem;
    }


    .method3c__transform {
        padding:
            36px
            19px;
    }

}


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

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

    .method3c__orientation i {
        animation: none !important;
    }


    .method3c__item,
    .method3c__item::before,
    .method3c__number,
    .method3c__legend-item,
    .method3c__question,
    .method3c__question i,
    .method3c__axis-line > span {
        transition: none !important;
    }

	    .method3c__principle--reveal {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .method3c__principle--reveal::after {
        opacity: 1 !important;

        transition: none !important;
    }

}