/* =========================================================
   A. HERO CAROUSEL
   ========================================================= */

.hero-carousel {
    position: relative;

    --hero-parallax-y: 0px;

    width: 100%;
    height: calc(100svh - 72px);

    min-height: 680px;
    max-height: 920px;

    overflow: hidden;
    isolation: isolate;

    background: #0b1320;
}


/* =========================================================
   IMAGINI
   ========================================================= */

.hero-carousel__media {
    position: absolute;
    inset: 0;

    z-index: 0;
}


.hero-carousel__slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.15s ease,
        visibility 1.15s;
}


.hero-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
}


.hero-carousel__slide picture {
    position: absolute;

    top: -22%;
    right: 0;
    bottom: -6%;
    left: 0;

    display: block;

    width: auto;
    height: auto;

    overflow: hidden;

    transform:
        translate3d(
            0,
            var(--hero-parallax-y),
            0
        );

    will-change: transform;
}


.hero-carousel__slide img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.015);

    transition:
        transform 7.5s ease-in-out;
}


.hero-carousel__slide.is-active img {
    transform: scale(1.065);
}


/* =========================================================
   OVERLAY DESKTOP
   ========================================================= */

.hero-carousel__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 12, 22, .20) 0%,
            rgba(5, 12, 22, .02) 30%,
            rgba(5, 12, 22, .05) 58%,
            rgba(5, 12, 22, .52) 100%
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .16) 0%,
            rgba(255, 255, 255, .03) 47%,
            rgba(5, 12, 22, .10) 100%
        );
}


/* =========================================================
   CONȚINUT
   ========================================================= */

.hero-carousel__content {
    position: relative;

    z-index: 2;

    height: 100%;
}


/* =========================================================
   INTRO FIX — STÂNGA SUS
   ========================================================= */

.hero-carousel__intro {
    position: absolute;

    top: clamp(54px, 7vh, 88px);
    left: 12px;

    width: min(540px, 44vw);

    z-index: 3;

    color: #152536;
    
}


/* =========================================================
   PRETITLU
   ========================================================= */

.hero-carousel__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

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

    font-size: clamp(.72rem, .78vw, .9rem);
    line-height: 1.3;

    font-weight: 650;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: #34495b;
}


.hero-carousel__eyebrow-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #4192ff,
            #46f484 55%,
            #e1ff58
        );

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


/* =========================================================
   TITLU PRINCIPAL
   ========================================================= */

.hero-carousel__title {
    width: max-content;
    max-width: 590px;

    margin: 0;
    padding: 16px 0;

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

    font-size: clamp(2.2rem, 4.2vw, 4.1rem);
    line-height: 1.18;

    font-weight: 750;

    letter-spacing: -.055em;

    color: #152536;

    text-transform: uppercase;
    text-wrap: balance;
}


.hero-carousel__title > span:last-child {
    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;
}


.hero-carousel__title .no-break,
.hero-carousel__title > .no-break {
    white-space: nowrap;
}


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

.hero-carousel__lead {
    width: min(475px, 100%);

    margin:
        clamp(16px, 2vh, 24px)
        0
        0;

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

    font-size: clamp(.97rem, 1.08vw, 1.16rem);
    line-height: 1.65;

    font-weight: 400;

    color: #182231;

    text-wrap: pretty;
}


/* =========================================================
   TEMA — DESKTOP
   ========================================================= */

.hero-carousel__theme {
    position: absolute;

    left: 12px;
    bottom: clamp(42px, 6vh, 72px);

    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0;

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

    font-size: clamp(.78rem, .85vw, .95rem);

    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;

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

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .35);
}


.hero-carousel__theme-line {
    display: block;

    width: 42px;
    height: 2px;

    flex: 0 0 42px;

    margin: 0;

    background:
        linear-gradient(
            90deg,
            #4192ff,
            #46f484,
            #e1ff58
        );
}




/* =========================================================
   ÎNTREBAREA — DESKTOP
   ========================================================= */

.hero-carousel__question {
    position: absolute;

    top: clamp(65px, 9vh, 105px);

    /*
       Se poate deplasa spre dreapta numai dacă există
       suficient spațiu real în afara containerului.
    */
    right:
        max(
            -180px,
            calc((1180px - 100vw) / 2 + 24px)
        );

    width: min(440px, 38vw);

    margin: 0;
    padding: 30px 32px;

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

    font-size: clamp(1.55rem, 2.1vw, 2rem);
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.035em;

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

    color: #13263a;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.76) 0%,
            rgba(255,255,255,.48) 48%,
            rgba(255,255,255,0) 92%
        );

    text-shadow:
        0 1px 1px rgba(255,255,255,.65);

    border-radius: 50%;
}


/* =========================================================
   SOLUȚIA — DESKTOP
   ========================================================= */

.hero-carousel__solution {
    position: absolute;

    right:
        max(
            -195px,
            calc((1180px - 100vw) / 2 + 24px)
        );

    bottom: clamp(42px, 6vh, 72px);

    width: min(480px, 40vw);

    margin: 0;

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

    font-size: clamp(.95rem, 1.15vw, 1.14rem);
    line-height: 1.55;

    font-weight: 400;

    text-align: right;

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

    text-wrap: balance;

    text-shadow:
        0 2px 14px rgba(0,0,0,.48);
}


/* =========================================================
   ANIMAȚII TEXTE
   ========================================================= */

.hero-carousel__theme,
.hero-carousel__question,
.hero-carousel__solution {
    transition:
        opacity .42s ease,
        transform .55s ease;
}


.hero-carousel.is-changing .hero-carousel__theme {
    opacity: 0;
    transform: translateX(-18px);
}


.hero-carousel.is-changing .hero-carousel__question {
    opacity: 0;
    transform: translateY(-18px);
}


.hero-carousel.is-changing .hero-carousel__solution {
    opacity: 0;
    transform: translateY(18px);
}


.hero-carousel.is-entering .hero-carousel__theme {
    animation:
        heroThemeIn .75s ease both;
}


.hero-carousel.is-entering .hero-carousel__question {
    animation:
        heroQuestionIn .82s .08s ease both;
}


.hero-carousel.is-entering .hero-carousel__solution {
    animation:
        heroSolutionIn .82s .18s ease both;
}


@keyframes heroThemeIn {

    from {
        opacity: 0;
        transform: translateX(-25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes heroQuestionIn {

    from {
        opacity: 0;
        transform: translateY(-28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroSolutionIn {

    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@media (min-width: 1200px) {

    .hero-carousel__question {
        top: clamp(400px, 46vh, 490px);
        bottom: auto;

        padding: 40px 42px;

        text-align: center;
    }

    .hero-carousel__solution {
        text-align: center;
    }

    .hero__trustline {
        margin-top: 30px;
    }

    .hero__actions {
        margin-top: 20px;
    }

}

/* =========================================================
   MOBIL + TABLETĂ
   IMAGINILE ---telefon.webp SUNT FOLOSITE PÂNĂ LA 1199px
   ========================================================= */

@media (max-width: 1199.98px) {

    .hero-carousel__slide img {
        object-position: center bottom;

        transform: scale(1.002);

        transition:
            transform 7.5s ease-in-out;
    }


    .hero-carousel__slide.is-active img {
        transform: scale(1.025);
    }


    /*
       Imaginile mobile au deja mult spațiu luminos sus.
    */

    .hero-carousel__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.54) 0%,
                rgba(255,255,255,.28) 30%,
                rgba(255,255,255,.06) 60%,
                rgba(255,255,255,0) 100%
            );
    }

}


/* =========================================================
   TABLETĂ + LAPTOP MIC
   768px — 1199px

   Folosește imaginile ---telefon.webp
   Întrebarea revine JOS, în zona mâinilor.
   ========================================================= */

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

    .hero-carousel {
        height: calc(100svh - 78px);
        min-height: 700px;
        max-height: 1100px;

        background: #f6f9fc;
    }

	.hero-carousel__slide picture {
    top: 0%;
    bottom: -14%;
}


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

    .hero-carousel__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.52) 0%,
                rgba(255,255,255,.30) 30%,
                rgba(255,255,255,.08) 58%,
                rgba(5,12,22,.10) 78%,
                rgba(5,12,22,.32) 100%
            );
    }


    /* =====================================================
       INTRO — STÂNGA SUS
       ===================================================== */

    .hero-carousel__intro {
        top: 42px;
        left: 0;

        width: 50%;
        max-width: 410px;

        padding: 12px 10px;

        background: #ffffffa9;
        border-radius: 10px;
    }


    .hero-carousel__eyebrow {
        margin-bottom: 12px;

        font-size:
            clamp(.62rem, 1vw, .76rem);
    }


    .hero-carousel__title {
        width: 100%;
        max-width: none;

        padding: 8px 0;

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

        line-height: 1.2;
    }


    .hero-carousel__lead {
        width: 94%;

        margin-top: 16px;

        font-size:
            clamp(.82rem, 1.2vw, .96rem);

        line-height: 1.55;
    }


    /* =====================================================
       BUTOANE
       ===================================================== */

    .hero-carousel .hero__actions {
        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 18px !important;
    }


    .hero-carousel .hero__actions .btn {
        min-height: 42px;

        padding: 9px 12px;

        font-size:
            clamp(.68rem, 1vw, .8rem);
    }


    /* =====================================================
       CELE 3 DIRECȚII
       Reapar sub butoane
       ===================================================== */

    .hero-carousel .hero__trustline {
        display: flex;

        flex-wrap: wrap;

        gap: 7px;

        margin-top: 28px;
    }


    .hero-carousel .hero__trustline span {
        padding: 6px 8px;

        font-size:
            clamp(.60rem, .85vw, .72rem);

        line-height: 1.2;
    }


    /* =====================================================
       TEMA

       Revine jos-stânga, ca pe desktop.
       ===================================================== */

    .hero-carousel__theme {
        top: auto;

        left: 0;
        right: auto;

        bottom:
            clamp(
                42px,
                5.5svh,
                66px
            );

        width: auto;

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

        text-shadow:
            0 2px 14px rgba(0,0,0,.42);

        font-size:
            clamp(.65rem, 1vw, .78rem);
    }


    .hero-carousel__theme-line {
        width: 32px;

        flex-basis: 32px;
    }


    /* =====================================================
       ÎNTREBAREA

       IMPORTANT:
       NU mai este sus.
       O coborâm în dreapta, spre zona mâinilor.
       ===================================================== */

    .hero-carousel__question {
        top: auto;

        left: auto;
        right: 0;

        bottom:
            clamp(
                175px,
                20svh,
                250px
            );

        width:
            min(
                410px,
                43%
            );

        max-width: none;

        margin: 0;

        padding: 32px 34px;

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

        line-height: 1.08;

        text-align: center;

        color: #152536;

        background:
            radial-gradient(
                ellipse at center,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.52) 47%,
                rgba(255,255,255,0) 92%
            );

        border-radius: 50%;

        text-shadow:
            0 1px 1px rgba(255,255,255,.7);
    }


    /* =====================================================
       SOLUȚIA

       Sub întrebare, dreapta-jos.
       ===================================================== */

    .hero-carousel__solution {
        top: auto;

        left: auto;
        right: 0;

        bottom:
            clamp(
                42px,
                5.5svh,
                66px
            );

        width:
            min(
                430px,
                43%
            );

        max-width: none;

        margin: 0;

        font-size:
            clamp(
                .78rem,
                1.25vw,
                .96rem
            );

        line-height: 1.5;

        color: rgba(255,255,255,.96);
        text-align: center;
        text-shadow:
            0 2px 13px rgba(0,0,0,.48);
    }

    .hero-carousel + .transition-3c {
        height: 30px;

        margin: 0;

        background: #fff;
    }

    .hero-carousel + .transition-3c a {
        transform: scale(.72);
        transform-origin: center;

        padding: 0;
    }

}




/* =========================================================
   TELEFON
   0 — 767px

   Mai mult spațiu între:
   titlu → butoane → criterii → întrebare → soluție
   ========================================================= */
/* =========================================================
   DESKTOP / TABLETĂ
   768px+
   ========================================================= */

@media (min-width: 768px) {

    .hero-carousel__mobil {
        display: none;
    }

    .hero-carousel__desktop {
        display: block;

        background: transparent;

        padding: 0;

        border-radius: 0;
    }

}


/* =========================================================
   TEXTE DINAMICE — MOBIL
   <= 767px
   ========================================================= */

@media (max-width: 767.98px) {

    /* ascundem varianta desktop */
    .hero-carousel__desktop {
        display: none;
    }


    /* afișăm panoul mobil */
    .hero-carousel__mobil {
        display: flex;
        flex-direction: column;

        position: relative;

        width: 100%;

        gap: 7px;

        margin-top: 18px;

        padding: 14px 12px;

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

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

        border-radius: 10px;

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

        box-shadow:
            0 8px 25px rgba(23, 37, 52, .07);

        z-index: 4;
    }


    /* =====================================================
       RESETĂM POZIȚIONAREA DE DESKTOP
       ===================================================== */

    .hero-carousel__mobil .hero-carousel__theme,
    .hero-carousel__mobil .hero-carousel__question,
    .hero-carousel__mobil .hero-carousel__solution {
        position: static;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-width: none;

        margin: 0;
    }


    /* =====================================================
       TEMA
       ===================================================== */

    .hero-carousel__mobil .hero-carousel__theme {
        display: flex;
        align-items: center;

        gap: 9px;

        padding: 0;

        font-size: clamp(.6rem, 2.5vw, .72rem);
        line-height: 1.2;

        letter-spacing: .11em;

        color: #506070;

        text-align: left;

        text-shadow: none;
    }


    .hero-carousel__mobil .hero-carousel__theme-line {
        width: 27px;
        height: 2px;

        flex: 0 0 27px;

        margin: 0;
    }


    /* =====================================================
       ÎNTREBAREA
       ===================================================== */

    .hero-carousel__mobil .hero-carousel__question {
        padding: 0;

        font-size: clamp(1.08rem, 4.8vw, 1.42rem);
        line-height: 1.1;

        font-weight: 700;

        letter-spacing: -.025em;

        color: #152536;

        text-align: left;

        background: none;

        border-radius: 0;

        text-shadow: none;

        text-wrap: balance;
    }


    /* =====================================================
       SOLUȚIA
       ===================================================== */

    .hero-carousel__mobil .hero-carousel__solution {
        padding: 0;

        font-size: clamp(.76rem, 3.2vw, .88rem);
        line-height: 1.45;

        font-weight: 400;

        color: #415160;

        text-align: left;

        text-shadow: none;

        text-wrap: pretty;
    }

}

@media (max-width: 767.98px) {

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

    .hero-carousel {
        /*
           Pe telefon nu încercăm să înghesuim totul
           într-un viewport scurt.

           Dacă telefonul este înalt, folosim înălțimea lui.
           Dacă este scurt, avem minimum 820px.
        */
        height:
            max(
                820px,
                calc(100svh - 68px)
            );

        min-height: 0;
        max-height: none;

        background: #f6f9fc;
    }

	

    /* =====================================================
       IMAGINE + REZERVĂ PENTRU PARALLAX
       ===================================================== */

	    .hero-carousel__slide picture {
        top: 0%;
        bottom: -45%;
    }

    /*
       Pe telefon mărim stratul PICTURE, nu IMG.
       Rezerva mai mare în partea de jos îi permite imaginii
       să urce mai mult la scroll fără să apară fundalul hero-ului.
    */
    .hero-carousel__slide picture {
        top: 28%;
        right: 0;
        bottom: -0%;
        left: 0;

        width: auto;
        height: auto;
    }


    .hero-carousel__slide img {
        object-position: center bottom;
    }


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

    .hero-carousel__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.94) 0%,
                rgba(255,255,255,.80) 18%,
                rgba(255,255,255,.54) 39%,
                rgba(255,255,255,.15) 58%,
                rgba(255,255,255,0) 72%
            );
    }


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

    .hero-carousel__content {
        display: flex;
        flex-direction: column;

        height: 100%;

        padding-top:
            clamp(
                18px,
                3svh,
                28px
            );

        padding-bottom: 22px;
    }


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

    .hero-carousel__intro {
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        max-width: none;

        z-index: 3;


}


    /* =====================================================
       PRETITLU
       ===================================================== */

    .hero-carousel__eyebrow {
        display: flex;
        align-items: center;

        gap: 7px;

        margin-bottom: 14px;

        font-size:
            clamp(
                .58rem,
                2.1vw,
                .68rem
            );

        line-height: 1.3;

        letter-spacing: .055em;
    }


    .hero-carousel__eyebrow-dot {
        width: 6px;
        height: 6px;

        flex: 0 0 6px;

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


    /* =====================================================
       TITLU
       ===================================================== */

    .hero-carousel__title {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

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

        line-height: 1.23;

        letter-spacing: -.045em;

        text-wrap: balance;
    }


    .hero-carousel__title > span:last-child {
        margin-top: .09em;
    }


    /*
       Nu afișăm descrierea lungă pe telefon.
    */

    .hero-carousel__lead {
        display: none;
    }


    /* =====================================================
       BUTOANE

       Mai mult spațiu față de titlu.
       ===================================================== */

    .hero-carousel .hero__actions {
        display: grid;

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

        gap: 10px;

        width: 100%;

        margin-top:
            clamp(
                20px,
                2.8svh,
                28px
            ) !important;
    }


    .hero-carousel .hero__actions .btn {
        width: 100%;

        min-height: 44px;

        padding: 9px 9px;

        font-size:
            clamp(
                .66rem,
                2.2vw,
                .76rem
            );

        line-height: 1.2;

        text-align: center;

        white-space: normal;
    }


    .hero-carousel .hero__actions .btn i {
        flex: 0 0 auto;

        font-size: 1rem;
    }


    /* =====================================================
       MISIUNE / VALORI / ATRACȚIE

       Le păstrăm vizibile.
       ===================================================== */

    .hero-carousel .hero__trustline {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 7px;

        width: 100%;

        margin-top: 25px;
        margin-bottom: 5px;
    }


    .hero-carousel .hero__trustline span {
        padding: 6px 8px;

        font-size:
            clamp(
                .58rem,
                2vw,
                .68rem
            );

        line-height: 1.15;

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

        border:
            1px solid rgba(220,229,242,.94);

        backdrop-filter: blur(5px);
    }


    /* =====================================================
       TEXTE DINAMICE

       Aici era prea înghesuit.
       Dăm spațiu clar după cele 3 criterii.
       ===================================================== */


    /* =====================================================
       TEMA
       ===================================================== */

    .hero-carousel__theme {
        position: static;

        display: flex;
        align-items: center;

        width: 100%;

        gap: 9px;

        margin: 0 0 2px;

        font-size:
            clamp(
                .61rem,
                2.1vw,
                .71rem
            );

        line-height: 1.2;

        letter-spacing: .11em;

        color: #506070;

        text-align: left;

        text-shadow: none;
    }

    .hero-carousel__intro {
        padding: 12px 10px;

        background: #ffffffa9;
        border-radius: 10px;
    }

    .hero-carousel__theme-line {
        width: 27px;
        height: 2px;

        flex: 0 0 27px;
    }


    .hero-carousel__theme-line {
        margin-top: 0;
    }


    /* =====================================================
       ÎNTREBAREA
       ===================================================== */

    .hero-carousel__question {
        position: static;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

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

        line-height: 1.12;

        font-weight: 700;

        letter-spacing: -.025em;

        color: #152536;

        text-align: left;

        background: none;
        border-radius: 0;

        text-shadow: none;

        text-wrap: balance;
    }


    /* =====================================================
       SOLUȚIA
       ===================================================== */

    .hero-carousel__solution {
        position: static;

        width: 100%;
        max-width: none;

        margin: 2px 0 0;
        padding: 0;

        font-size:
            clamp(
                .78rem,
                2.8vw,
                .91rem
            );

        line-height: 1.5;

        font-weight: 400;

        color: #415160;

        text-align: left;

        text-shadow: none;

        text-wrap: pretty;
    }


    /* =====================================================
       ANIMAȚII
       ===================================================== */

    .hero-carousel.is-changing .hero-carousel__theme {
        opacity: 0;
        transform: translateX(-8px);
    }


    .hero-carousel.is-changing .hero-carousel__question {
        opacity: 0;
        transform: translateY(-7px);
    }


    .hero-carousel.is-changing .hero-carousel__solution {
        opacity: 0;
        transform: translateY(7px);
    }

}


/* =========================================================
   TELEFOANE 421 — 600px
   ========================================================= */

@media (min-width: 421px) and (max-width: 600px) {

    /*
       Cele trei criterii au suficient spațiu
       să rămână compacte.
    */

    .hero-carousel .hero__trustline {
        justify-content: flex-start;

        margin-top: 16px;
    }

}


/* =========================================================
   TELEFOANE MICI
   <= 420px
   ========================================================= */

@media (max-width: 420px) {

    .hero-carousel {
        height:
            max(
                850px,
                calc(100svh - 68px)
            );
    }


    .hero-carousel__content {
        padding-top: 17px;
    }


    .hero-carousel__title {
        font-size:
            clamp(
                1.38rem,
                6.1vw,
                1.7rem
            );
    }


    /*
       Pe lățimi mici facem criteriile 2 + 1,
       nu le înghesuim toate trei.
    */

    .hero-carousel .hero__trustline {
        display: grid;

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

        gap: 6px;

        margin-top: 14px;
    }


    .hero-carousel .hero__trustline span {
        width: 100%;

        justify-content: center;

        padding: 6px 5px;

        text-align: center;

        font-size:
            clamp(
                .57rem,
                2.35vw,
                .65rem
            );
    }


    /*
       Al treilea criteriu stă centrat pe rândul 2.
    */

    .hero-carousel .hero__trustline span:last-child {
        grid-column: 1 / -1;

        width: max-content;
        max-width: 100%;

        justify-self: center;

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


    .hero-carousel__question {
        font-size:
            clamp(
                1.07rem,
                4.7vw,
                1.28rem
            );

        line-height: 1.12;
    }


    .hero-carousel__solution {
        font-size:
            clamp(
                .76rem,
                3.2vw,
                .85rem
            );
    }

}


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

@media (max-width: 360px) {

    .hero-carousel {
        height:
            max(
                900px,
                calc(100svh - 72px)
            );
    }


    /*
       La 320px și mai jos două butoane alăturate
       devin prea înguste.
    */

    .hero-carousel .hero__actions {
        grid-template-columns: 1fr;

        gap: 9px;

        margin-top: 18px !important;
    }


    .hero-carousel .hero__actions .btn {
        min-height: 41px;
    }


    .hero-carousel__title {
        font-size:
            clamp(
                1.28rem,
                6.7vw,
                1.5rem
            );
    }


    .hero-carousel__question {
        font-size: 1.05rem;
    }



    .site-nav__inner {
        width: calc(100% - 20px);

        min-height: 72px;
        height: auto;

        padding: 8px 0;
    }


    .site-nav__brand {
        min-width: 0;

        gap: 7px;
    }


    .site-nav__logo {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;
    }


    .site-nav__brandtext {
        font-size: .88rem;

        line-height: 1.15;

        letter-spacing: -.03em;
    }


    .site-nav__toggle {
        width: 40px;
        height: 40px;

        flex: 0 0 40px;
    }

	.hero-carousel__slide picture {
        top: -40%;
        bottom: -25%;
    }

}



/* =========================================================
   REDUCED MOTION
   Respectăm preferințele utilizatorului.
   ========================================================= */

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

    .hero-carousel__slide,
    .hero-carousel__slide picture,
    .hero-carousel__slide img,
    .hero-carousel__theme,
    .hero-carousel__question,
    .hero-carousel__solution {
        animation: none !important;

        transition:
            opacity .25s linear !important;

        transform: none !important;
    }
}

/* =========================================================
   HOVER BUTOANE
   ========================================================= */

@keyframes buttonZoomx {

    /* stă normal */
    0%,
    100% {
        transform: scale(1);
    }
}

.btn--soft:hover,
.btn--primary:hover,
.btn--dark:hover,
.btn--white:hover,
.btn--glass:hover,
.btn--small:hover,
.btn--wide:hover {
    transform: scale(0.95);
    box-shadow: none;

    animation: buttonZoomx 0s ease-in-out 1;
    transform-origin: center;
    will-change: transform;
}