/* =========================================================
   D. GHID GRATUIT
   VERSIONARE FINALĂ / CURATĂ
========================================================= */


/* =========================================================
   1. SECȚIUNEA
========================================================= */

#ghid.guide-section--modern {
    --guide-blue: #4192ff;
    --guide-green: #46f484;
    --guide-gold: #e1ff58;

    --guide-ink: #15242e;
    --guide-text: #5d707d;

    --guide-parallax-y: 0px;
	 /* dimensiunea fotografiei de fundal */
    --guide-photo-scale: .95;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            180deg,
            #fbfcfb 0%,
            #f8fbfa 52%,
            #fbfcfb 100%
        );
}


/* =========================================================
   2. FUNDAL FOTO
========================================================= */

#ghid .guide-scene {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


#ghid .guide-scene__picture {
    position: absolute;

    /*
       Container mai mare decât secțiunea.
       Astfel putem micșora fotografia fără
       să apară margini goale și avem spațiu
       suficient pentru parallax.
    */

    top: -14%;
    right: -5%;
    bottom: -14%;
    left: -5%;

    display: block;

    /*
       Imaginea desktop este oglindită pentru
       ca bărbatul să rămână în partea stângă.
    */

    transform: scaleX(-1);

    transform-origin: center;
}


#ghid .guide-scene__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        right center;

    opacity: .42;

    /*
       Parallax + micșorarea fotografiei.

       translate = mișcarea la scroll
       scale     = omul puțin mai mic
    */

    transform:
        translate3d(
            0,
            var(--guide-parallax-y),
            0
        )
        scale(
            var(--guide-photo-scale)
        );

    transform-origin:
        center center;

    will-change:
        transform;

    filter:
        saturate(.92)
        contrast(.96);

    user-select: none;
}


/* =========================================================
   3. FADE PESTE FOTOGRAFIE
========================================================= */

#ghid .guide-scene__veil {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(225, 255, 88, .11),
            transparent 27%
        ),

        radial-gradient(
            circle at 85% 18%,
            rgba(65, 146, 255, .075),
            transparent 29%
        ),

        radial-gradient(
            circle at 15% 78%,
            rgba(70, 244, 132, .065),
            transparent 26%
        ),

        linear-gradient(
            90deg,
            rgba(251, 253, 252, .16) 0%,
            rgba(251, 253, 252, .30) 28%,
            rgba(251, 253, 252, .58) 48%,
            rgba(251, 253, 252, .88) 67%,
            rgba(251, 253, 252, .96) 100%
        );
}


/* =========================================================
   4. DECORAȚII AMBIENTALE
========================================================= */

#ghid .guide-bg {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);
}


#ghid .guide-bg--one {
    width: 430px;
    height: 430px;

    left: -180px;
    top: 5%;

    opacity: .18;

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


#ghid .guide-bg--two {
    width: 520px;
    height: 520px;

    right: -260px;
    bottom: -180px;

    opacity: .14;

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


/* =========================================================
   5. GRID FIN
========================================================= */

#ghid .guide-grid-pattern {
    position: absolute;
    inset: 0;

    z-index: 1;

    opacity: .055;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(20, 31, 43, .15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 31, 43, .15) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );
}


/* =========================================================
   6. CONTAINER DESKTOP
========================================================= */

#ghid .guide-container {
    position: relative;

    z-index: 4;

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

    min-height:
        clamp(
            680px,
            68vw,
            820px
        );

    margin: 0 auto;

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

    display: grid;

    grid-template-columns:
        minmax(280px, .88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap:
        clamp(
            52px,
            7vw,
            105px
        );
}


/* =========================================================
   7. ZONA CĂRȚII
========================================================= */

#ghid .guide-visual {
    position: relative;

    min-width: 0;

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


#ghid .guide-book-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            42vw,
            470px
        );

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .78) 0%,
            rgba(65, 146, 255, .09) 32%,
            rgba(70, 244, 132, .055) 52%,
            transparent 72%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* =========================================================
   8. STAGE CARTE
========================================================= */

#ghid .guide-book-stage {
    position: relative;

    width:
        min(
            100%,
            430px
        );

    display: flex;
    justify-content: center;

    perspective: 1300px;

    z-index: 2;
}


#ghid .guide-book-stage::before {
    content: "";

    position: absolute;

    width: 120%;
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-12deg);

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

    border-radius: 50%;

    pointer-events: none;
}


#ghid .guide-book-stage::after {
    content: "";

    position: absolute;

    width: 103%;
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(15deg);

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

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   9. TILT CARTE
========================================================= */

#ghid .guide-book-tilt {
    position: relative;

    width: 100%;

    --guide-rx: 0deg;
    --guide-ry: -6deg;

    transform:
        rotateX(var(--guide-rx))
        rotateY(var(--guide-ry));

    transform-style: preserve-3d;

    transition:
        transform .16s ease-out;

    will-change: transform;
}


/* =========================================================
   10. FLOAT CARTE
========================================================= */

#ghid .guide-book-float {
    position: relative;

    animation:
        guideBookFloat
        6s
        ease-in-out
        infinite;
}


@keyframes guideBookFloat {

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

    50% {
        transform:
            translateY(-10px);
    }
}


/* =========================================================
   11. CARTE
========================================================= */

#ghid .guide-book {
    position: relative;

    width:
        clamp(
            230px,
            27vw,
            350px
        );

    transform-style: preserve-3d;

    filter:
        drop-shadow(
            0 32px 32px
            rgba(26, 55, 72, .16)
        );
}


#ghid .guide-book::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: 2.5%;
    bottom: 2.5%;

    right: -9px;

    width: 14px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            to right,
            #e3e0d9,
            #fbfaf5 45%,
            #d5d1c8
        );

    transform:
        translateZ(-5px);

    opacity: .9;
}


#ghid .guide-book::after {
    content: "";

    position: absolute;

    z-index: -2;

    left: 5%;
    right: -5px;

    bottom: -8px;

    height: 14px;

    border-radius: 50%;

    background:
        rgba(12, 25, 36, .13);

    filter: blur(8px);

    transform:
        translateZ(-15px);
}


#ghid .guide-book-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius:
        3px 7px 7px 3px;

    user-select: none;

    pointer-events: none;
}


/* =========================================================
   12. CONȚINUT
========================================================= */

#ghid .guide-content {
    position: relative;

    min-width: 0;

    max-width: 610px;
}


/* =========================================================
   13. EYEBROW
========================================================= */

#ghid .guide-eyebrow {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 22px;

    color: #607785;

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

    font-size: .76rem;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;
}


#ghid .guide-eyebrow-line {
    width: 52px;
    height: 2px;

    flex:
        0 0 52px;

    border-radius: 999px;

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


/* =========================================================
   14. TITLU
========================================================= */

#ghid .guide-title {
    max-width: 650px;

    margin: 0;

    color:
        var(--guide-ink);

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

    font-size:
        clamp(
            2.3rem,
            4.2vw,
            4.15rem
        );

    font-weight: 760;

    line-height: 1.03;

    letter-spacing: -.052em;

    text-wrap: balance;
}


#ghid .guide-title span {
    position: relative;

    display: block;

    margin-top: .09em;

    background:
        linear-gradient(
            90deg,
            #347fd8 0%,
            #31a765 54%,
            #899929 100%
        );

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

    color: transparent;

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


#ghid .guide-title span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 58%;
    height: 4px;

    border-radius: 999px;

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

    opacity: .8;
}


/* =========================================================
   15. DESCRIERE
========================================================= */

#ghid .guide-description {
    max-width: 570px;

    margin:
        30px
        0
        0;

    color:
        var(--guide-text);

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

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

    line-height: 1.78;
}


/* =========================================================
   16. PRINCIPII
========================================================= */

#ghid .guide-principles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        10px
        13px;

    margin-top: 27px;

    color: #3f5968;

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

    font-size: .79rem;

    font-weight: 650;
}


#ghid .guide-principles-dot {
    width: 5px;
    height: 5px;

    flex:
        0 0 5px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--guide-blue),
            var(--guide-green),
            var(--guide-gold)
        );
}


/* =========================================================
   17. ACȚIUNI
========================================================= */

#ghid .guide-actions {
    margin-top: 34px;
}


#ghid .guide-button {
    position: relative;

    min-height: 52px;

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

    gap: 12px;

    padding:
        13px
        20px;

    overflow: hidden;

    border: 0;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #347fd8 0%,
            #348f9b 55%,
            #35a36b 100%
        );

    box-shadow:
        0 14px 30px
        rgba(41, 105, 149, .16);

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

    font-size: .91rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .35s
            cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease,
        filter .35s ease;
}


#ghid .guide-button::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -85%;

    width: 45%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent
        );

    transition:
        left .6s ease;
}


#ghid .guide-button-arrow {
    position: relative;

    width: 20px;
    height: 20px;

    flex:
        0 0 20px;

    transition:
        transform .35s
        cubic-bezier(.22, 1, .36, 1);
}


@media (hover: hover) {

    #ghid .guide-button:hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 18px 36px
            rgba(41, 105, 149, .22);

        filter:
            brightness(1.025);
    }


    #ghid .guide-button:hover::before {
        left: 140%;
    }


    #ghid .guide-button:hover
    .guide-button-arrow {
        transform:
            translateX(4px);
    }
}


/* =========================================================
   18. META
========================================================= */

#ghid .guide-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;

    color: #71838e;

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

    font-size: .75rem;
}


/* =========================================================
   19. REVEAL DESKTOP
========================================================= */

#ghid .guide-reveal {
    opacity: 0;

    transform:
        translateY(46px);

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


#ghid .guide-content.guide-reveal {
    transform:
        translateX(42px)
        translateY(12px);

    transition-delay: .13s;
}


#ghid .guide-reveal.is-visible {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0);
}

/* =========================================================
   GHID — CARTEA VINE DIN PROFUNZIMEA FUNDALULUI
   ========================================================= */

/*
 * Pentru zona cărții nu mai folosim reveal-ul general.
 * Părintele rămâne stabil, iar cartea se animează separat.
 */

#ghid .guide-visual.guide-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}


/* =========================================================
   CARTEA — STARE INIȚIALĂ
   pare departe, în interiorul fundalului
   ========================================================= */

#ghid .guide-visual.guide-reveal
.guide-book-stage {

    opacity: 0;

    transform:
        translate3d(0, 18px, 0)
        scale(.60);

    transform-origin:
        center center;

    filter:
        blur(7px);

    transition:
        opacity .65s ease,
        transform 1.15s
            cubic-bezier(.16, 1, .30, 1),
        filter .85s ease;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   CARTEA — POZIȚIA FINALĂ
   ========================================================= */

#ghid .guide-visual.guide-reveal.is-visible
.guide-book-stage {

    opacity: 1;

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

    filter:
        blur(0);
}


/* =========================================================
   GLOW — PORNEȘTE MIC DIN SPATELE CĂRȚII
   ========================================================= */

#ghid .guide-visual.guide-reveal
.guide-book-glow {

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.45);

    transition:
        opacity .75s ease .12s,
        transform 1.25s
            cubic-bezier(.16, 1, .30, 1)
            .06s;
}


/* glow final */

#ghid .guide-visual.guide-reveal.is-visible
.guide-book-glow {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   20. TABLETĂ + TELEFON
   <= 991.98px

   ORDINE:
   1 eyebrow
   2 titlu
   3 descriere
   4 principii
   5 carte
   6 buton + meta
========================================================= */

@media (max-width: 991.98px) {

    #ghid .guide-container {
        width:
            min(
                calc(100% - 36px),
                760px
            );

        min-height: auto;

        margin: 0 auto;

        padding:
            82px
            0
            100px;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;
    }


    /*
       Copiii lui .guide-content intră direct
       în fluxul .guide-container.
    */

    #ghid .guide-content {
        display: contents;
    }


    /* 1 */

    #ghid .guide-eyebrow {
        order: 1;

        width: 100%;

        justify-content: center;

        margin:
            0
            0
            20px;
    }


    /* 2 */

    #ghid .guide-title {
        order: 2;

        width: 100%;
        max-width: 760px;

        margin: 0;

        text-align: center;
    }


    #ghid .guide-title span::after {
        left: 21%;

        width: 58%;
    }


    /* 3 */

    #ghid .guide-description {
        order: 3;

        width: 100%;
        max-width: 650px;

        margin:
            28px
            auto
            0;

        text-align: center;
    }


    /* 4 */

    #ghid .guide-principles {
        order: 4;

        width: 100%;

        justify-content: center;

        margin-top: 28px;

        text-align: center;
    }


    /* 5 */

    #ghid .guide-visual {
        order: 5;

        width: 100%;

        min-height: auto;

        margin-top: 50px;

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


    /* 6 */

    #ghid .guide-actions {
        order: 6;

        width: 100%;

        margin-top: 42px;

        display: flex;
        flex-direction: column;
        align-items: center;
    }


    #ghid .guide-meta {
        justify-content: center;
    }


    /*
       Pe tabletă și telefon nu folosim tilt mouse.
    */

    #ghid .guide-book-tilt {
        --guide-rx: 0deg !important;
        --guide-ry: 0deg !important;

        transform:
            none !important;
    }


    /*
       .guide-content este display: contents.
       Animăm copiii săi în locul cutiei.
    */

    #ghid .guide-content.guide-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }


    #ghid .guide-content.guide-reveal > * {
        opacity: 0;

        transform:
            translateY(22px);

        transition:
            opacity .7s
                cubic-bezier(.22, 1, .36, 1),
            transform .7s
                cubic-bezier(.22, 1, .36, 1);
    }


    #ghid .guide-content.guide-reveal.is-visible > * {
        opacity: 1;

        transform:
            translateY(0);
    }


    #ghid .guide-content.guide-reveal.is-visible
    .guide-title {
        transition-delay: .05s;
    }


    #ghid .guide-content.guide-reveal.is-visible
    .guide-description {
        transition-delay: .10s;
    }


    #ghid .guide-content.guide-reveal.is-visible
    .guide-principles {
        transition-delay: .15s;
    }


    #ghid .guide-content.guide-reveal.is-visible
    .guide-actions {
        transition-delay: .20s;
    }
	
	#ghid .guide-visual.guide-reveal
	.guide-book-stage {
	
	    transform:
	        translate3d(0, 15px, 0)
	        scale(.68);
	
	    filter:
	        blur(5px);
	}


	#ghid .guide-visual.guide-reveal.is-visible
	.guide-book-stage {
	
	    transform:
	        translate3d(0, 0, 0)
	        scale(1);
	
	    filter:
	        blur(0);
	}

}


/* =========================================================
   21. TABLETĂ
   768px — 991.98px
========================================================= */

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

   #ghid.guide-section--modern {
        --guide-photo-scale: .90;
    }


    #ghid .guide-title {
        font-size:
            clamp(
                2.5rem,
                5.5vw,
                3.45rem
            );
    }


    #ghid .guide-book {
        width:
            clamp(
                240px,
                34vw,
                290px
            );
    }


    /*
       Mai mult decor în jurul bărbatului.
       Spațiu și pentru parallax.
    */

    #ghid .guide-scene__picture {
        top: -18%;
        right: -8%;
        bottom: -18%;
        left: -8%;
    }


    #ghid .guide-scene__image {
        opacity: .27;

        object-position:
            74% center;
    }


    #ghid .guide-scene__veil {
        background:

            radial-gradient(
                circle at 12% 16%,
                rgba(225, 255, 88, .08),
                transparent 27%
            ),

            radial-gradient(
                circle at 82% 18%,
                rgba(65, 146, 255, .06),
                transparent 30%
            ),

            linear-gradient(
                180deg,
                rgba(251, 253, 252, .30) 0%,
                rgba(251, 253, 252, .40) 30%,
                rgba(251, 253, 252, .57) 55%,
                rgba(251, 253, 252, .78) 78%,
                rgba(251, 253, 252, .92) 100%
            );
    }

}


/* =========================================================
   22. TABLETĂ VERTICALĂ / TELEFON MARE
   576px — 767.98px
========================================================= */

@media
(min-width: 576px)
and
(max-width: 767.98px) {

    #ghid.guide-section--modern {
        --guide-photo-scale: .88;
    }


    #ghid .guide-container {
        width:
            min(
                calc(100% - 36px),
                680px
            );

        padding:
            80px
            0
            96px;
    }


    #ghid .guide-title {
        font-size:
            clamp(
                2.35rem,
                7vw,
                3.15rem
            );
    }


    #ghid .guide-description {
        max-width:
            590px;
    }


    #ghid .guide-book {
        width:
            clamp(
                235px,
                42vw,
                275px
            );
    }


    /*
       Container mai mare pentru fotografie.
    */

    #ghid .guide-scene__picture {
        top: -19%;
        right: -10%;
        bottom: -19%;
        left: -10%;

        transform:
            scaleX(-1);
    }


    #ghid .guide-scene__image {
        opacity: .27;

        object-position:
            72% center;
    }


    #ghid .guide-scene__veil {
        background:

            radial-gradient(
                circle at 14% 12%,
                rgba(225, 255, 88, .07),
                transparent 30%
            ),

            linear-gradient(
                180deg,
                rgba(251, 253, 252, .27) 0%,
                rgba(251, 253, 252, .40) 30%,
                rgba(251, 253, 252, .59) 55%,
                rgba(251, 253, 252, .82) 80%,
                rgba(251, 253, 252, .95) 100%
            );
    }

}


/* =========================================================
   23. TELEFON
   <= 575.98px
========================================================= */

@media (max-width: 575.98px) {

    #ghid.guide-section--modern {
        --guide-photo-scale: .86;
    }


    #ghid .guide-container {
        width:
            min(
                calc(100% - 28px),
                540px
            );

        padding:
            72px
            0
            88px;
    }


    /* =====================================================
       FOTOGRAFIE TELEFON
       barbat-matur.webp
    ====================================================== */

    #ghid .guide-scene__picture {
        /*
           Mult spațiu suplimentar în jurul imaginii
           pentru scale(.86) + parallax.
        */

        top: -20%;
        right: -10%;
        bottom: -20%;
        left: -10%;

        /*
           Imaginea portrait NU se oglindește.
        */

        transform: none;
    }


    #ghid .guide-scene__image {
        opacity: .23;

        object-position:
            56% top;

        transform:
            translate3d(
                0,
                var(--guide-parallax-y),
                0
            )
            scale(
                var(--guide-photo-scale)
            );

        transform-origin:
            center center;

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


    #ghid .guide-scene__veil {
        background:

            radial-gradient(
                circle at 15% 8%,
                rgba(225, 255, 88, .07),
                transparent 28%
            ),

            linear-gradient(
                180deg,
                rgba(251, 253, 252, .18) 0%,
                rgba(251, 253, 252, .30) 24%,
                rgba(251, 253, 252, .48) 44%,
                rgba(251, 253, 252, .70) 62%,
                rgba(251, 253, 252, .89) 80%,
                #fbfdfc 96%,
                #fbfdfc 100%
            );
    }


    #ghid .guide-eyebrow {
        gap: 13px;

        margin-bottom: 18px;

        font-size: .70rem;
    }


    #ghid .guide-eyebrow-line {
        width: 40px;

        flex-basis: 40px;
    }


    #ghid .guide-title {
        font-size:
            clamp(
                2rem,
                9.5vw,
                2.75rem
            );

        line-height: 1.04;

        letter-spacing: -.045em;
    }


    #ghid .guide-title span::after {
        bottom: -7px;

        height: 3px;
    }


    #ghid .guide-description {
        max-width: 510px;

        margin-top: 26px;

        font-size: .92rem;

        line-height: 1.72;
    }


    #ghid .guide-principles {
        max-width: 460px;

        margin-top: 26px;

        gap:
            8px
            10px;

        font-size: .73rem;

        line-height: 1.5;
    }


    #ghid .guide-visual {
        margin-top: 42px;
    }


    #ghid .guide-book-stage {
        width:
            min(
                300px,
                78vw
            );
    }


    #ghid .guide-book {
        width:
            min(
                64vw,
                245px
            );
    }


    #ghid .guide-book-glow {
        width: 330px;

        max-width: 92vw;
    }


    #ghid .guide-actions {
        margin-top: 35px;
    }


    #ghid .guide-button {
        width: 100%;

        min-height: 52px;

        padding:
            13px
            16px;

        font-size: .87rem;
    }


    #ghid .guide-meta {
        margin-top: 14px;

        justify-content: center;

        font-size: .70rem;
    }

}


/* =========================================================
   24. TELEFOANE FOARTE ÎNGUSTE
   <= 359.98px
========================================================= */

@media (max-width: 359.98px) {

    #ghid .guide-container {
        width:
            calc(100% - 20px);

        padding:
            64px
            0
            82px;
    }


    #ghid .guide-eyebrow {
        font-size: .64rem;
    }


    #ghid .guide-title {
        font-size:
            clamp(
                1.72rem,
                9.5vw,
                2rem
            );

        letter-spacing: -.04em;
    }


    #ghid .guide-description {
        font-size: .86rem;
    }


    #ghid .guide-principles {
        font-size: .67rem;
    }


    #ghid .guide-book {
        width:
            min(
                72vw,
                215px
            );
    }


    #ghid .guide-button {
        font-size: .82rem;
    }

}


/* =========================================================
   25. MODAL
========================================================= */

#guideModal.modalBackdrop {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    padding: 22px;

    background:
        rgba(11, 20, 27, .62);

    backdrop-filter:
        blur(12px);

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


#guideModal.modalBackdrop.open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   26. CUTIA MODALULUI
========================================================= */

#guideModal .guide-modal {
    position: relative;

    width:
        min(
            500px,
            100%
        );

    max-height:
        calc(100vh - 44px);

    overflow-y: auto;

    padding:
        46px
        clamp(25px, 5vw, 45px)
        38px;

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

    border-radius: 18px;

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

    box-shadow:
        0 30px 100px
        rgba(5, 16, 25, .30);

    transform:
        translateY(24px)
        scale(.96);

    transition:
        transform .35s
        cubic-bezier(.2, .8, .2, 1);
}


#guideModal.open .guide-modal {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   27. ÎNCHIDERE MODAL
========================================================= */

#guideModal .guide-modal-close {
    position: absolute;

    top: 14px;
    right: 16px;

    width: 38px;
    height: 38px;

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

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #334650;

    font-size: 29px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


#guideModal .guide-modal-close:hover {
    background:
        rgba(25, 42, 53, .06);

    transform:
        rotate(5deg);
}


/* =========================================================
   28. HEADER MODAL
========================================================= */

#guideModal .guide-modal-header {
    text-align: center;
}


#guideModal .guide-modal-label {
    display: block;

    margin-bottom: 9px;

    color: #287be6;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;
}


#guideModal .guide-modal h2 {
    margin: 0;

    color: #16232c;

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

    font-size:
        clamp(
            25px,
            5vw,
            32px
        );

    font-weight: 750;

    letter-spacing: -.035em;
}


#guideModal .guide-modal-header p {
    max-width: 390px;

    margin:
        13px
        auto
        0;

    color: #687985;

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

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   29. FORMULAR
========================================================= */

#guideModal .guide-form {
    margin-top: 28px;
}


#guideModal .guide-form-group {
    position: relative;
}


#guideModal .guide-status-group {
    margin-bottom: 18px;
}


#guideModal .guide-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #263944;

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

    font-size: 13px;

    font-weight: 650;
}


/* =========================================================
   30. INPUT
========================================================= */

#guideModal .guide-form-group input {
    width: 100%;
    height: 54px;

    padding:
        0
        16px;

    box-sizing: border-box;

    border:
        1px solid
        #dce3e7;

    border-radius: 10px;

    outline: none;

    background: #fff;

    color: #172832;

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

    font-size: 15px;

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


#guideModal .guide-form-group input:focus {
    border-color:
        var(--guide-blue, #4192ff);

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


/* =========================================================
   31. SELECT
========================================================= */

#guideModal .guide-form-group select {
    width: 100%;
    height: 54px;

    padding:
        0
        44px
        0
        16px;

    box-sizing: border-box;

    border:
        1px solid
        #dce3e7;

    border-radius: 10px;

    outline: none;

    background-color: #fff;

    color: #172832;

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

    font-size: 15px;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #667985 50%
        ),
        linear-gradient(
            135deg,
            #667985 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 23px,
        calc(100% - 15px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

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


#guideModal .guide-form-group select:focus {
    border-color: #4192ff;

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


#guideModal .guide-form-group select:invalid {
    color: #7b7b7b;
}


/* =========================================================
   32. CONFIDENȚIALITATE
========================================================= */

#guideModal .guide-form-privacy {
    margin:
        10px
        0
        0;

    color: #81909a;

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

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   33. SUBMIT
========================================================= */

#guideModal .guide-submit {
    width: 100%;

    min-height: 54px;

    margin-top: 22px;

    padding:
        13px
        20px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #347fd8,
            #35a36b
        );

    box-shadow:
        0 12px 28px
        rgba(40, 123, 230, .18);

    color: #fff;

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

    font-size: 14px;

    font-weight: 750;

    cursor: pointer;

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


#guideModal .guide-submit:hover:not(:disabled) {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px
        rgba(40, 123, 230, .24);

    filter:
        brightness(1.02);
}


#guideModal .guide-submit:disabled {
    opacity: .65;

    cursor: wait;
}


/* =========================================================
   34. MESAJ AȘTEPTARE
========================================================= */

#guideModal .guide-form-wait {
    margin:
        11px
        0
        0;

    text-align: center;

    color: #8c9aa3;

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

    font-size: 11px;
}


/* =========================================================
   35. MESAJ FORMULAR
========================================================= */

#guideModal .guide-message {
    display: none;

    margin-top: 17px;

    padding:
        13px
        15px;

    border-radius: 10px;

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

    font-size: 13px;

    line-height: 1.5;
}


#guideModal .guide-message.show {
    display: block;
}


#guideModal .guide-message.success {
    border:
        1px solid
        rgba(34, 162, 88, .20);

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

    color: #17683b;
}


#guideModal .guide-message.error {
    border:
        1px solid
        rgba(205, 68, 68, .18);

    background:
        rgba(205, 68, 68, .07);

    color: #9a3030;
}


/* =========================================================
   36. MODAL TELEFON
========================================================= */

@media (max-width: 575.98px) {

    #guideModal.modalBackdrop {
        padding: 14px;
    }


    #guideModal .guide-modal {
        max-height:
            calc(100vh - 28px);

        padding:
            44px
            21px
            28px;

        border-radius: 15px;
    }


    #guideModal .guide-modal-close {
        top: 8px;
        right: 9px;
    }

}


/* =========================================================
   37. ACCESSIBILITY / REDUCED MOTION
========================================================= */

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

    #ghid .guide-scene__image {
        transform:
            none !important;
    }


    #ghid .guide-reveal,
    #ghid .guide-content.guide-reveal > * {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    #ghid .guide-book-float {
        animation:
            none !important;
    }


    #ghid .guide-book-tilt {
        transform:
            none !important;

        transition:
            none !important;
    }


    #ghid .guide-button,
    #ghid .guide-button-arrow,
    #guideModal .guide-modal,
    #guideModal .guide-submit {
        transition:
            none !important;
    }

}