/* =========================================================
   B. NEVOIA / PROBLEMA
   MATURITATE APARENTĂ SAU REALĂ
   ========================================================= */

.need-section {
    position: relative;

    overflow: hidden;

    padding:
        clamp(90px, 9vw, 150px)
        0
        clamp(100px, 10vw, 165px);

    background:
        radial-gradient(
            circle at 9% 20%,
            rgba(65, 146, 255, .07),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 62%,
            rgba(70, 244, 132, .055),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 52%,
            #ffffff 100%
        );
}


/* =========================================================
   DECORAȚII DE FUNDAL
   ========================================================= */

.need-section__glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

    opacity: .55;
}


.need-section__glow--blue {
    top: 10%;
    left: -250px;

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


.need-section__glow--green {
    right: -240px;
    bottom: 12%;

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


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

.need-heading {
    position: relative;

    width: min(920px, 100%);

    margin: 0 auto
        clamp(65px, 7vw, 105px);

    text-align: center;

    z-index: 2;
}


.need-heading .section-label {
    display: inline-block;

    margin-bottom: 22px;

    font-size:
        clamp(.72rem, .75vw, .86rem);

    letter-spacing: .15em;
}


.need-heading h2 {
    width: min(850px, 100%);

    margin: 0 auto;

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

    font-size:
        clamp(2rem, 3.4vw, 3.55rem);

    line-height: 1.07;

    font-weight: 750;

    letter-spacing: -.045em;

    color: #172638;

    text-wrap: balance;
	text-align: center;
}


.need-heading .lead-copy {
    width: min(790px, 100%);

    margin:
        clamp(24px, 2.5vw, 34px)
        auto
        0;

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

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

    line-height: 1.75;

    color: #617084;

    text-wrap: pretty;
}


/* =========================================================
   POVESTEA CU CELE DOUĂ MURE
   ========================================================= */

.need-story {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(320px, .85fr)
        minmax(420px, 1.15fr);

    align-items: center;

    gap:
        clamp(55px, 7vw, 110px);

    width: min(1080px, 100%);

    margin:
        0 auto
        clamp(100px, 10vw, 155px);

    z-index: 2;
}


/* linia subtilă care leagă vizual cele două părți */

.need-story::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 37%;

    width: 120px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(65,146,255,.55),
            rgba(70,244,132,.25),
            transparent
        );

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   IMAGINE
   ========================================================= */

.need-story__visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 410px;

    padding:
        clamp(25px, 4vw, 55px);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(245,249,255,.95),
            rgba(255,255,255,.72)
        );

    border:
        1px solid rgba(216,228,242,.75);

    box-shadow:
        0 25px 70px rgba(36,58,85,.08);

    isolation: isolate;
}


/*
   Cercul mare din spate.
   Nu este card în card, ci decor de profunzime.
*/

.need-story__visual::before {
    content: "";

    position: absolute;

    width: 70%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65,146,255,.075),
            rgba(70,244,132,.025) 55%,
            transparent 72%
        );

    z-index: -1;
}


.need-story__visual img {
    display: block;

    width: min(330px, 88%);

    height: auto;

}


/* =========================================================
   TEXT POVESTE
   ========================================================= */

.need-story__copy {
    position: relative;

    padding-right:
        clamp(0px, 3vw, 35px);
}


.need-story__copy .mini-kicker {
    display: block;

    margin-bottom: 13px;

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

    font-size: .77rem;

    font-weight: 750;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #327ee8;
}


.need-story__copy h3 {
    width: min(570px, 100%);

    margin:
        0
        0
        24px;

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

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

    line-height: 1.12;

    font-weight: 720;

    letter-spacing: -.035em;

    color: #172638;

    text-wrap: balance;
	text-align: center;
}


.need-story__copy p {
    max-width: 620px;

    margin:
        0
        0
        18px;

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

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

    line-height: 1.72;

    color: #4e5e70;
}


.need-story__copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CELE TREI GÂNDURI
   ========================================================= */

.need-assumptions {
    position: relative;

    width: min(1120px, 100%);

    margin:
        0 auto
        clamp(105px, 11vw, 165px);

    z-index: 2;
}


.need-assumptions__intro {
    width: min(650px, 100%);

    margin-bottom:
        clamp(40px, 8vw, 65px);

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


.need-assumptions__intro .mini-kicker {
    display: block;

    margin-bottom: 10px;

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

    font-size: .76rem;

    font-weight: 750;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #327ee8;
}


.need-assumptions__intro h3 {
    margin: 0;

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

    font-size:
        clamp(1.65rem, 2.5vw, 2.55rem);

    line-height: 1.12;

    font-weight: 720;

    letter-spacing: -.035em;

    color: #172638;
	text-align: center;
}


/* =========================================================
   FIECARE OBIECȚIE

   Nu folosim carduri.
   Sunt rânduri editoriale cu linii fine.
   ========================================================= */

/* =========================================================
   TRASEU 01 → 02 → 03
   ========================================================= */

.need-assumptions {
    --track-progress: 0%;

    position: relative;

    width: min(1080px, 100%);

    margin:
        0 auto
        clamp(105px, 11vw, 165px);

    padding-left: 15px;

    z-index: 2;
}


/* =========================================================
   RÂND
   ========================================================= */

.need-assumption {
    position: relative;

    display: grid;

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

    gap:
        clamp(28px, 4vw, 55px);

    align-items: center;

    min-height: 195px;

    padding:
        clamp(30px, 4vw, 44px)
        0;

    border-bottom:
        1px solid rgba(196,210,226,.55);

    opacity: .56;

    transform:
        translateX(0);

    transition:
        opacity .55s ease,
        transform .55s ease,
        border-color .55s ease;
}


.need-assumption:last-child {
    border-bottom: 0;
}


/* =========================================================
   CÂND RÂNDUL DEVINE ACTIV
   ========================================================= */

.need-assumption.is-active {
    opacity: 1;

    transform:  none;

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


/* =========================================================
   MARKER / NUMĂR
   ========================================================= */

.need-assumption__marker {
    position: relative;

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

    width: 88px;
    height: 88px;

    z-index: 3;
}


.need-assumption__number {
    position: relative;

    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;

    border-radius: 50%;

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

    font-size: 1.15rem;
    line-height: 1;

    font-weight: 750;

    letter-spacing: -.035em;

    color: #8090a2;

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

    border:
        1px solid rgba(197,211,226,.85);

    box-shadow:
        0 10px 28px rgba(32,50,73,.06);

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


/* =========================================================
   NUMĂR ACTIV
   ========================================================= */

.need-assumption.is-active
.need-assumption__number {
    transform:
        scale(1.12);

    color: #17304a;

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

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

    box-shadow:
        0 13px 36px rgba(65,146,255,.15),
        0 0 0 7px rgba(65,146,255,.055);
}


/* culorile individuale */

.need-assumption[data-step="1"].is-active
.need-assumption__number {
    border-color:
        rgba(65,146,255,.55);

    box-shadow:
        0 13px 36px rgba(65,146,255,.17),
        0 0 0 7px rgba(65,146,255,.06);
}


.need-assumption[data-step="2"].is-active
.need-assumption__number {
    border-color:
        rgba(70,217,137,.60);

    box-shadow:
        0 13px 36px rgba(70,217,137,.15),
        0 0 0 7px rgba(70,217,137,.06);
}


.need-assumption[data-step="3"].is-active
.need-assumption__number {
    border-color:
        rgba(213,187,66,.62);

    box-shadow:
        0 13px 36px rgba(213,187,66,.15),
        0 0 0 7px rgba(213,187,66,.06);
}


/* =========================================================
   SĂGEȚILE DINTRE PAȘI
   ========================================================= */

.need-assumption:not(:last-child)
{

    content: "";

    position: absolute;

    left: 50%;
    bottom: -31px;

    width: 11px;
    height: 11px;

    border-right:
        2px solid rgba(115,140,167,.55);

    border-bottom:
        2px solid rgba(115,140,167,.55);

    transform:
        translateX(-50%)
        rotate(45deg);

    z-index: 4;

    transition:
        border-color .45s ease,
        transform .45s ease;
}


.need-assumption.is-active:not(:last-child) {

    border-color:
        #4192ff;

    transform:
        translateX(-50%)
        translateY(4px)
        rotate(45deg);
}


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

.need-assumption__content {
    position: relative;

    max-width: 820px;

    transform: translateX(0);

    transition:
        transform .55s ease;
}

.need-assumption.is-active
.need-assumption__content {
    transform: translateX(10px);
}


.need-assumption h4 {
    width: min(720px, 100%);

    margin:
        0
        0
        13px;

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

    font-size:
        clamp(1.15rem, 1.55vw, 1.5rem);

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.025em;

    color: #172638;

    text-wrap: balance;
}


.need-assumption p {
    width: min(800px, 100%);

    margin: 0;

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

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

    line-height: 1.72;

    color: #58687a;
}


/* =========================================================
   VIDEO
   ========================================================= */

.need-video {
    position: relative;

    width: min(1120px, 100%);

    margin:
        0 auto
        clamp(95px, 10vw, 145px);

    z-index: 2;
}


.need-video__heading {
    display: grid;

    grid-template-columns:
        minmax(300px, .8fr)
        minmax(420px, 1.2fr);

    gap:
        clamp(35px, 6vw, 90px);

    align-items: end;

    margin-bottom:
        clamp(30px, 4vw, 50px);
}


.need-video__heading .mini-kicker {
    display: block;

    margin-bottom: 11px;

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

    font-size: .76rem;

    font-weight: 750;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #327ee8;
}


.need-video__heading h3 {
    margin: 0;

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

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

    line-height: 1.1;

    font-weight: 720;

    letter-spacing: -.04em;

    color: #172638;

    text-wrap: balance;
	text-align: center;
}


.need-video__heading p {
    margin: 0;

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

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

    line-height: 1.7;

    color: #5d6c7d;
}


/* =========================================================
   PLAYER
   ========================================================= */

.need-video .video-shell {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 22px;

    border:
        1px solid rgba(207,219,233,.85);

    box-shadow:
        0 30px 85px rgba(23,37,52,.13);

    background: #111b28;
}


.need-video .video-shell iframe,
.need-video .video-shell > img {
    width: 100%;
    height: 100%;

    border: 0;

    object-fit: cover;
}


/* =========================================================
   ÎNCHEIERE B → C
   ========================================================= */

.need-next {
    position: relative;

    display: grid;

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

    gap: 45px;

    align-items: center;

    width: min(1040px, 100%);

    margin: 0 auto;

    padding:
        clamp(35px, 5vw, 55px)
        clamp(32px, 5vw, 65px);

    border-radius: 24px;

    background:
        linear-gradient(
            120deg,
            rgba(65,146,255,.075),
            rgba(70,244,132,.065) 58%,
            rgba(225,255,88,.07)
        );

    border:
        1px solid rgba(206,221,236,.75);

    box-shadow:
        0 18px 55px rgba(34,55,80,.06);
}


.need-next__copy {
    max-width: 680px;
}


.need-next .mini-kicker {
    display: block;

    margin-bottom: 10px;

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

    font-size: .74rem;

    font-weight: 750;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #327ee8;
}


.need-next h3 {
    margin:
        0
        0
        12px;

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

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

    line-height: 1.15;

    font-weight: 720;

    letter-spacing: -.03em;

    color: #172638;
	text-align: center;
}


.need-next p {
    margin: 0;

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

    font-size: .98rem;

    line-height: 1.65;

    color: #59697a;
}


.need-next .btn {
    white-space: nowrap;
}


/* =========================================================
   TABLETĂ
   768px — 1199px
   ========================================================= */

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

    .need-section {
        padding:
            85px
            0
            110px;
    }


    .need-heading {
        width: min(780px, 92%);

        margin-bottom: 70px;
    }


    .need-heading h2 {
        font-size:
            clamp(2rem, 3.6vw, 2.85rem);
    }


    .need-story {
        grid-template-columns:
            .8fr
            1.2fr;

        gap: 45px;

        width: min(850px, 94%);

        margin-bottom: 100px;
		text-align: center;
    }


    .need-story::after {
        display: none;
    }


    .need-story__visual {
        min-height: 320px;

        padding: 30px;
    }


    .need-story__visual img {
        width: min(270px, 95%);
    }


    .need-story__copy h3 {
        font-size:
            clamp(1.45rem, 2.5vw, 1.9rem);
		text-align: center;
    }


    .need-assumptions {
        width: min(850px, 94%);

        margin-bottom: 105px;
    }


    .need-assumption {
        grid-template-columns:
            75px
            minmax(0, 1fr);

        gap: 28px;
    }


    .need-video {
        width: min(850px, 94%);
    }


    .need-video__heading {
        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .need-video__heading p {
        max-width: 680px;
    }


    .need-next {
        width: min(850px, 94%);
    }

}

/* Ridică ambele săgeți pe laptop / desktop */
@media (min-width: 768px) {

    /* prima săgeată — deja este bine */
    .b-journey__arrow--1 {
        translate: 0 -55px;
    }

    /* a doua săgeată — o ridicăm mai mult */
    .b-journey__arrow--2 {
        translate: 0 -100px;
    }

}

/* =========================================================
   MOBIL
   <= 767px
   ========================================================= */

@media (max-width: 767.98px) {

    .need-section {
        padding:
            68px
            0
            82px;
    }


    /* -----------------------------------------
       INTRO
       ----------------------------------------- */

    .need-heading {
        width: 100%;

        margin-bottom: 55px;

        text-align: left;
    }


    .need-heading .section-label {
        margin-bottom: 15px;

        font-size: .67rem;
    }


    .need-heading h2 {
        margin: 0;

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

        line-height: 1.08;

        text-align: center;

        text-wrap: pretty;
    }


    .need-heading .lead-copy {
        margin:
            20px
            0
            0;

        font-size:
            clamp(.94rem, 4vw, 1rem);

        line-height: 1.65;

        text-align: left;
    }


    /* -----------------------------------------
       POVESTE
       ----------------------------------------- */

    .need-story {
        display: flex;

        flex-direction: column;

        gap: 35px;

        width: 100%;

        margin-bottom: 82px;
    }


    .need-story::after {
        display: none;
    }


    .need-story__visual {
        width: 100%;

        min-height: 0;

        padding:
            30px
            18px;

        border-radius: 18px;
    }


    .need-story__visual img {
        width: min(320px, 92%);
    }


    .need-story__copy {
        padding: 0;
    }


    .need-story__copy .mini-kicker {
        margin-bottom: 9px;

        font-size: .68rem;
    }


    .need-story__copy h3 {
        margin-bottom: 18px;

        font-size:
            clamp(1.42rem, 6vw, 1.8rem);

        line-height: 1.12;

        text-align: center;
    }


    .need-story__copy p {
        margin-bottom: 15px;

        font-size:
            clamp(.94rem, 4vw, 1rem);

        line-height: 1.68;

        text-align: left;
    }


    /* -----------------------------------------
       CELE TREI GÂNDURI
       ----------------------------------------- */

   @media (max-width: 767.98px) {

    .need-assumptions {
        padding-left: 0;
    }


    


    .need-assumption {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap: 17px;

        min-height: 0;

        padding:
            29px
            0;

        opacity: .68;

        transform: none;
    }


    .need-assumption.is-active {
        transform: none;
    }


    .need-assumption__marker {
        width: 55px;
        height: 55px;
    }


    .need-assumption__number {
        width: 50px;
        height: 50px;

        font-size: .82rem;
    }


    .need-assumption.is-active
    .need-assumption__number {
        transform:
            scale(1.08);

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


    .need-assumption:not(:last-child)
    {

        bottom: -26px;

        width: 8px;
        height: 8px;
    }


    .need-assumption h4 {
        font-size:
            clamp(
                1.04rem,
                4.5vw,
                1.2rem
            );

        line-height: 1.28;
    }


    .need-assumption p {
        font-size:
            clamp(
                .91rem,
                3.8vw,
                .98rem
            );

        line-height: 1.62;
    }

}

	.b-journey__arrow {
    fill: none;

    stroke: #46d989;
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0;

    transform-box: fill-box;
    transform-origin: center;

    transform: scale(.65);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.75,.25,1);
}


.b-journey__arrow.is-visible {
    opacity: 1;
    transform: scale(1);
}


.b-journey__arrow--2 {
    stroke: #aebc43;
}

    /* -----------------------------------------
       VIDEO
       ----------------------------------------- */

    .need-video {
        width: 100%;

        margin-bottom: 75px;
		margin-top: -30%;
    }


    .need-video__heading {
        display: block;

        margin-bottom: 25px;
    }


    .need-video__heading .mini-kicker {
        font-size: .68rem;
    }


    .need-video__heading h3 {
        margin-bottom: 15px;

        font-size:
            clamp(1.45rem, 6.2vw, 1.85rem);

        text-align: center;
    }


    .need-video__heading p {
        font-size:
            clamp(.94rem, 4vw, 1rem);

        line-height: 1.65;

        text-align: left;
    }


    .need-video .video-shell {
        border-radius: 15px;

        box-shadow:
            0 18px 45px rgba(23,37,52,.12);
    }


    /* -----------------------------------------
       CTA SPRE TESTE
       ----------------------------------------- */

    .need-next {
        display: block;

        width: 100%;

        padding:
            28px
            22px;

        border-radius: 17px;
    }


    .need-next h3 {
        font-size:
            clamp(1.35rem, 5.7vw, 1.65rem);
		text-align: center;
    }


    .need-next .btn {
        width: 100%;

        margin-top: 25px;

        justify-content: center;
    }

}


/* =========================================================
   TELEFOANE FOARTE MICI
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    .need-section {
        padding-top: 58px;
    }


    .need-heading h2 {
        font-size: 1.62rem;
    }


    .need-story__visual {
        padding:
            24px
            12px;
    }


    .need-assumption {
        padding:
            25px
            0;
    }


    .need-next {
        padding:
            25px
            18px;
    }
	text-align: center;

}

/* =========================================================
   B — CĂLĂTORIE 01 → 02 → 03
   ========================================================= */

.b-journey {
    position: relative;

    width: min(1000px, 100%);

    height: 620px;

    margin:
        30px auto
        clamp(100px, 10vw, 150px);

    isolation: isolate;
}


/* =========================================================
   SVG
   ========================================================= */

.b-journey__svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}


.b-journey__svg--mobile {
    display: none;
}


/* traseul care încă nu a fost parcurs */

.b-journey__rail {
    fill: none;

    stroke:
        rgba(179, 197, 216, .35);

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* traseul colorat */

.b-journey__progress {
    fill: none;

    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    opacity: .95;

    transition:
        stroke-dashoffset
        1.35s
        cubic-bezier(.2,.72,.25,1);
}


.b-journey__progress--1 {
    stroke:
        url(#bJourneyGradient1);
}


.b-journey__progress--2 {
    stroke:
        url(#bJourneyGradient2);
}


.b-journey__progress.is-drawn {
    stroke-dashoffset: 0;
}


/* =========================================================
   OPRIRILE
   ========================================================= */

.b-journey__stop {
    position: absolute;

    display: grid;
    align-items: center;

    gap: 18px;

    width: min(680px, 68%);

    opacity: .42;

    z-index: 2;

    transition:
        opacity .55s ease;
}


.b-journey__stop--1 {
    top: 25px;
    left: 0;

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


.b-journey__stop--2 {
    top: 255px;
    right: 0;

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


.b-journey__stop--3 {
    top: 485px;
    left: 0;

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


.b-journey__card {
    position: relative;

    z-index: 3;

    background: rgba(255,255,255,.96);
	top: -40%;
}
.b-journey__card h4, .b-journey__card p {
	text-align: center;
}

.b-journey__marker {
    position: relative;

    z-index: 4;

top: -40%;
}

/* =========================================================
   ACTIV
   ========================================================= */

.b-journey__stop.is-active {
    opacity: 1;
}


/* =========================================================
   MARKER
   ========================================================= */

.b-journey__marker {
    display: grid;
    place-items: center;

    width: 80px;
    height: 80px;

    position: relative;

    z-index: 4;
}


.b-journey__marker span {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    border-radius: 50%;

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

    font-size: .9rem;

    font-weight: 750;

    color: #8291a2;

    background: #fff;

    border:
        1px solid
        rgba(188,204,222,.85);

    box-shadow:
        0 8px 25px
        rgba(26,45,68,.06);

    transform:
        scale(1);

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


/* =========================================================
   MARKER ACTIV
   ========================================================= */

.b-journey__stop.is-active
.b-journey__marker span {

    transform:
        scale(1.1);

    color: #172d45;
}


/* 01 albastru */

.b-journey__stop--1.is-active
.b-journey__marker span {

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

    box-shadow:
        0 10px 30px
        rgba(65,146,255,.18),

        0 0 0 7px
        rgba(65,146,255,.07);
}


/* 02 verde */

.b-journey__stop--2.is-active
.b-journey__marker span {

    border-color:
        rgba(70,217,137,.88);

    box-shadow:
        0 10px 30px
        rgba(70,217,137,.18),

        0 0 0 7px
        rgba(70,217,137,.07);
}


/* 03 auriu */

.b-journey__stop--3.is-active
.b-journey__marker span {

    border-color:
        rgba(213,187,66,.9);

    box-shadow:
        0 10px 30px
        rgba(213,187,66,.19),

        0 0 0 7px
        rgba(213,187,66,.08);
}


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

.b-journey__card {
    padding:
        20px
        24px;

    border-radius: 14px;

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

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

    backdrop-filter:
        blur(5px);

    box-shadow:
        0 10px 35px
        rgba(32,52,77,.045);

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


.b-journey__stop.is-active
.b-journey__card {

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

    box-shadow:
        0 13px 40px
        rgba(32,52,77,.07);
}


.b-journey__card h4 {
    margin:
        0
        0
        9px;

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

    font-size:
        clamp(1.05rem, 1.35vw, 1.32rem);

    line-height: 1.28;

    font-weight: 700;

    letter-spacing: -.025em;

    color: #172638;
}


.b-journey__card p {
    margin: 0;

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

    font-size:
        clamp(.9rem, .95vw, 1rem);

    line-height: 1.6;

    color: #5c6c7d;
}


/* 02 privește spre stânga */

.b-journey__stop--2
.b-journey__card {

    text-align: right;
}

/* =========================================================
   VIDEO — FUNDAL CINEMATIC LOCAL
   ========================================================= */

.need-video__media {
    position: relative;
    isolation: isolate;
}


.need-video__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    pointer-events: none;

    z-index: -1;
}


/* albastru — stânga sus */

.need-video__glow--blue {
    width: 46%;
    aspect-ratio: 1;

    top: -12%;
    left: -8%;

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


/* verde — dreapta jos */

.need-video__glow--green {
    width: 48%;
    aspect-ratio: 1;

    right: -8%;
    bottom: -14%;

    background:
        rgba(70, 217, 137, .12);
}

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

    .b-journey {
        width: min(850px, 96%);
    }


    .b-journey__stop {
        width: min(570px, 69%);
    }


    .b-journey__card {
        padding:
            18px
            20px;
    }

}

@media (max-width: 767.98px) {

    .b-journey {
        width: 100%;

        height: 800px;

        /*
           Spațiu clar după titlul
           „Poate te-ai gândit...”
        */
        margin-top: 95px;

        margin-bottom: 0px;
    }


    .b-journey__svg--desktop {
        display: none;
    }


    .b-journey__svg--mobile {
        display: block;
    }


    .b-journey__stop {
        width: 94%;

        gap: 10px;
    }


    /* 01 */

    .b-journey__stop--1 {
        top: 20px;
        left: 0;

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


    /* 02 */

    .b-journey__stop--2 {
        top: 280px;
        right: 0;

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


    /* 03 */

    .b-journey__stop--3 {
        top: 540px;
        left: 0;

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


    .b-journey__marker {
        width: 56px;
        height: 56px;
    }


    .b-journey__marker span {
        width: 48px;
        height: 48px;

        font-size: .7rem;
    }


    .b-journey__card {
        padding:
            14px
            13px;

        border-radius: 11px;
    }


    .b-journey__card h4 {
        font-size:
            clamp(
                .96rem,
                4.2vw,
                1.1rem
            );

        line-height: 1.28;
    }


    .b-journey__card p {
        font-size:
            clamp(
                .82rem,
                3.5vw,
                .91rem
            );

        line-height: 1.53;
    }

}

/* =========================================================
   TELEFOANE FOARTE ÎNGUSTE
   <= 359px
   ========================================================= */

@media (max-width: 359.98px) {

    /* mai mult spațiu vertical pentru traseu */
    .b-journey {
        width: 100%;
        height: 860px;

        margin-top: 80px;
        margin-bottom: 0;
    }


    /* folosim aproape toată lățimea disponibilă */
    .b-journey__stop {
        width: 100%;
        gap: 6px;
    }


    /* =====================================================
       01
       ===================================================== */

    .b-journey__stop--1 {
        top: 26px;
        left: 0;

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


    /* =====================================================
       02
       Linia SVG se întinde odată cu height:860px,
       de aceea coborâm și oprirea.
       ===================================================== */

    .b-journey__stop--2 {
        top: 320px;
        right: 0;

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


    /* =====================================================
       03
       ===================================================== */

    .b-journey__stop--3 {
        top: 614px;
        left: 0;

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


    /* cercurile puțin mai mici */
    .b-journey__marker {
        width: 46px;
        height: 46px;
    }


    .b-journey__marker span {
        width: 40px;
        height: 40px;

        font-size: .66rem;
    }


    /* cardurile câștigă spațiu pentru text */
    .b-journey__card {
        padding: 12px 9px;

        border-radius: 10px;
    }


    .b-journey__card h4 {
        font-size: .94rem;
        line-height: 1.24;

        margin-bottom: 7px;
    }


    .b-journey__card p {
        font-size: .79rem;
        line-height: 1.48;
    }


    /* titlul deasupra traseului */
    .need-assumptions__intro {
        padding-inline: 4px;
    }


    .need-assumptions__intro h3 {
        font-size: 1.32rem;
        line-height: 1.12;
    }

}

/* =========================================================
   B4 VIDEO — DESKTOP CINEMATIC
   ========================================================= */

@media (min-width: 1200px) {

    .need-video--cinematic {
        display: grid;

        grid-template-columns:
    minmax(350px, .82fr)
    minmax(600px, 1.18fr);

        align-items: center;

        gap: clamp(55px, 6vw, 95px);

        width: min(1180px, 100%);

        margin:
            0 auto
            clamp(110px, 10vw, 150px);
    }


    .need-video__copy {
        max-width: 430px;

        text-align: left;
    }


    .need-video__copy .mini-kicker {
        display: block;

        margin-bottom: 14px;
    }


    .need-video__copy h3 {
        margin:
            0
            0
            22px;

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

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

        line-height: 1.06;

        letter-spacing: -.045em;

        color: #172638;
		text-align: center;
    }


    .need-video__copy p {
        margin: 0;

        font-size: 1.03rem;

        line-height: 1.72;

        color: #5d6c7d;
    }


    .need-video__media {
        position: relative;
    }


    .need-video__media .video-shell {
        width: 100%;

        border-radius: 24px;

        box-shadow:
            0 30px 90px rgba(22, 39, 58, .15);
    }

	 .need-next--bridge {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: min(1040px, 100%);

        padding:
            clamp(45px, 5vw, 65px)
            clamp(50px, 6vw, 80px);

        text-align: center;
    }


    .need-next__copy {
        width: min(720px, 100%);
        max-width: none;
    }


    .need-next__action {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: auto;

        margin-top: 28px;
    }


    .need-next__action .btn {
        width: auto;

        min-width: 245px;

        justify-content: center;
    }


    .need-next__hint {
        display: block;

        margin-top: 18px;

        text-align: center;

        white-space: normal;
    }


	.need-video__copy,
    .need-video__media {
        opacity: 0;

        transition:
            opacity .85s ease,
            transform .95s cubic-bezier(.2,.7,.2,1);
    }


    /* textul vine puțin din stânga */

    .need-video__copy {
        transform:
            translate3d(-32px, 0, 0);
    }


    /* video-ul vine puțin din dreapta + mic zoom */

    .need-video__media {
        transform:
            translate3d(42px, 0, 0)
            scale(.975);
    }


    /* când zona intră în viewport */

    .need-video--cinematic.is-visible
    .need-video__copy,

    .need-video--cinematic.is-visible
    .need-video__media {

        opacity: 1;

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


    /* textul apare puțin înainte */

    .need-video--cinematic.is-visible
    .need-video__copy {

        transition-delay: .05s;
    }


    /* video-ul imediat după */

    .need-video--cinematic.is-visible
    .need-video__media {

        transition-delay: .15s;
    }

}

@media (max-width: 1199.98px) {

    .need-video__copy,
    .need-video__media {

        opacity: 0;

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

        transition:
            opacity .75s ease,
            transform .85s cubic-bezier(.2,.7,.2,1);
    }


    .need-video--cinematic.is-visible
    .need-video__copy,

    .need-video--cinematic.is-visible
    .need-video__media {

        opacity: 1;

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


    .need-video--cinematic.is-visible
    .need-video__media {

        transition-delay: .12s;
    }

}

/* =========================================================
   B6 CTA — TABLETĂ / LAPTOP MIC
   ========================================================= */

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

    .need-next--bridge {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 28px;

        width: min(850px, 94%);

        text-align: center;
    }


    .need-next__copy {
        width: min(650px, 100%);
    }


    .need-next__action {
        display: flex;

        flex-direction: column;

        align-items: center;

        width: min(350px, 100%);
    }


    .need-next__action .btn {
        width: 100%;

        justify-content: center;
    }


    .need-next__hint {
        display: block;

        width: 100%;

        margin-top: 18px;

        text-align: center;

        white-space: normal;
    }

}

@media (max-width: 767.98px) {

    .need-video--cinematic {
        display: block;
    }


    .need-video__copy {
        text-align: center;
    }


    .need-video__copy p {
        max-width: 520px;

        margin-inline: auto;
    }


    .need-video__media {
        margin-top: 28px;
    }


    .need-next__action {
        width: 100%;
    }


    .need-next__hint {
        display: block;

        width: 100%;

        margin-top: 18px;

        text-align: center;
    }

}

@media (max-width: 767.98px) {
		    /* 01 → 02 */
    .b-journey__arrow--1 {
        translate: 0 -32px;
    }

    /* 02 → 03 */
    .b-journey__arrow--2 {
        translate: 0 -32px;
    }

	.need-video .video-shell {        
		width: 90%;
        margin: 0 auto;}
}

@media (max-width: 359.98px) {

    .need-next--bridge {
        padding:
            24px
            14px;
    }


    .need-next__copy h3 {
        font-size: 1.25rem;
		text-align: center;
    }


    .need-next__copy p {
        font-size: .88rem;

        line-height: 1.55;
    }


    .need-next__action .btn {
        font-size: .82rem;

        padding-inline: 12px;
    }


    .need-next__hint {
        font-size: .71rem;
    }



}