/* =========================================================
   BOOSTPME — HERO
   VERSION VALIDÉE + CONVERSATION ANIMÉE
========================================================= */

.boost-hero {
    position: relative;
    overflow: hidden;

    min-height: 820px;

    padding:
        150px
        0
        105px;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(121, 86, 255, .20),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(255, 82, 155, .14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #faf9f7 0%,
            #f5f2f9 55%,
            #f8f5f1 100%
        );

    color: #131218;
}


/* =========================================================
   BACKGROUND
========================================================= */

.boost-hero-grid {
    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(75, 62, 110, .10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(75, 62, 110, .10) 1px,
            transparent 1px
        );

    background-size:
        58px
        58px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 84%
        );
}


.boost-hero-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.boost-hero-orb-one {
    width: 360px;
    height: 360px;

    right: 4%;
    top: -150px;

    background:
        rgba(84, 108, 255, .24);
}


.boost-hero-orb-two {
    width: 400px;
    height: 400px;

    right: -170px;
    bottom: -120px;

    background:
        rgba(255, 79, 154, .18);
}


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

.boost-hero-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .95fr);

    gap: 70px;

    align-items: center;
}


.boost-hero-content {
    max-width: 730px;
}


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

.boost-hero-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #7d7587;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.4px;
}


.boost-hero-kicker i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #526eff,
            #ff5799
        );

    box-shadow:
        0 0 18px
        rgba(120, 83, 255, .55);
}


.boost-hero h1 {
    margin: 0;

    font-size:
        clamp(
            58px,
            6.3vw,
            98px
        );

    line-height: .88;

    letter-spacing: -5px;

    font-weight: 520;
}


.boost-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #506cff,
            #9358ff,
            #ff5598,
            #ff944b
        );

    background-size:
        220%
        220%;

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

    color: transparent;

    animation:
        boostHeroGradient
        8s
        ease
        infinite;
}


@keyframes boostHeroGradient {

    50% {
        background-position:
            100%
            50%;
    }

}


.boost-hero-content > p {
    max-width: 620px;

    margin:
        30px
        0
        0;

    color: #6e6873;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.boost-hero-actions {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 34px;
}


.boost-hero-btn {
    min-height: 52px;

    display: inline-flex;

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

    gap: 13px;

    padding:
        0
        22px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

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


.boost-hero-btn-primary {
    background: #16141b;

    color: #fff;

    box-shadow:
        0 18px 45px
        rgba(28, 22, 42, .15);
}


.boost-hero-btn-secondary {
    border:
        1px solid
        rgba(25, 20, 35, .10);

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

    color: #17151c;

    backdrop-filter:
        blur(10px);
}


.boost-hero-btn:hover {
    transform:
        translateY(-3px);
}


/* =========================================================
   TRUST
========================================================= */

.boost-hero-trust {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: 26px;
}


.boost-hero-trust span {
    padding:
        7px
        10px;

    border:
        1px solid
        rgba(25, 20, 35, .08);

    border-radius: 999px;

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

    color: #827b86;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   AI STAGE
========================================================= */

.boost-hero-ai-stage {
    position: relative;

    min-height: 570px;

    padding: 21px;

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

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .78),
            rgba(255, 255, 255, .46)
        );

    backdrop-filter:
        blur(24px);

    box-shadow:
        0 35px 90px
        rgba(69, 50, 118, .15);
}


.boost-hero-stage-glow {
    position: absolute;

    width: 190px;
    height: 190px;

    right: -35px;
    top: 28%;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #745cff,
            #ff5a9d
        );

    filter: blur(70px);

    opacity: .18;
}


/* =========================================================
   AI HEADER
========================================================= */

.boost-hero-ai-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 17px;

    border-bottom:
        1px solid
        rgba(30, 25, 45, .08);
}


.boost-hero-stack-avatars {
    display: flex;

    align-items: center;
}


.boost-round-avatar {
    display: block;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 8px 24px
        rgba(66, 45, 120, .16);
}


.boost-hero-ai-header > div:nth-child(2) {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.boost-hero-ai-header strong {
    color: #26222c;

    font-size: 12px;
}


.boost-hero-ai-status {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #85808b;

    font-size: 8px;
}


.boost-hero-ai-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #75bf50;

    box-shadow:
        0 0 10px
        rgba(117, 191, 80, .45);
}


.boost-hero-live-pill {
    margin-left: auto;

    padding:
        6px
        8px;

    border-radius: 999px;

    background:
        rgba(111, 88, 225, .08);

    color: #7c60c7;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   CHAT
========================================================= */

.boost-hero-chat {
    position: relative;

    z-index: 2;

    min-height: 420px;

    padding-top: 18px;
}


/* IMPORTANT :
   toutes les bulles commencent invisibles
*/

.hero-chat-bubble {
    display: flex;

    gap: 9px;

    align-items: flex-start;

    margin-bottom: 14px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(.97);

    transition:
        opacity .42s ease,
        visibility .42s ease,
        transform .42s ease;
}


/* IMPORTANT :
   cette règle manquait dans votre dossier
*/

.hero-chat-bubble.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.hero-chat-user {
    flex-direction: row-reverse;
}


/* =========================================================
   AVATARS
========================================================= */

.hero-chat-avatar-img {
    width: 31px;
    height: 31px;

    flex:
        0 0
        31px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 6px 18px
        rgba(55, 42, 90, .12);
}


.hero-chat-avatar-img.ai {
    box-shadow:
        0 6px 20px
        rgba(124, 81, 220, .16);
}


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

.hero-chat-content {
    max-width: 78%;

    display: flex;

    flex-direction: column;
}


.hero-chat-user
.hero-chat-content {
    align-items: flex-end;
}


.hero-chat-name {
    margin-bottom: 5px;

    color: #8e8792;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.hero-chat-text {
    padding:
        11px
        13px;

    border-radius:
        6px
        15px
        15px
        15px;

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

    color: #322e36;

    font-size: 10px;

    line-height: 1.58;

    box-shadow:
        0 9px 25px
        rgba(38, 28, 65, .06);
}


.hero-chat-user
.hero-chat-text {
    border-radius:
        15px
        6px
        15px
        15px;

    background: #19171d;

    color: #f7f6f8;

    box-shadow:
        0 10px 28px
        rgba(25, 22, 33, .13);
}


.hero-chat-ai
.hero-chat-text {
    position: relative;

    min-height: 38px;

    background:
        linear-gradient(
            145deg,
            #f0edf8,
            #ffffff
        );

    color: #302b34;
}


/* TYPE CURSOR */

.hero-chat-ai
.hero-chat-text.is-typing::after {
    content: "";

    display: inline-block;

    width: 5px;
    height: 12px;

    margin-left: 3px;

    vertical-align: -2px;

    background: #8e67da;

    animation:
        boostCursor
        .8s
        steps(1)
        infinite;
}


@keyframes boostCursor {

    50% {
        opacity: 0;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.boost-hero-ai-footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(30, 25, 45, .08);

    color: #827b87;

    font-size: 8px;
}


.boost-hero-ai-footer > span {
    display: flex;

    align-items: center;

    gap: 7px;
}


.boost-hero-ai-footer > span i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #73ba4c;
}


.boost-hero-ai-footer > div {
    display: flex;

    gap: 5px;
}


.boost-hero-ai-footer b {
    padding:
        5px
        7px;

    border-radius: 999px;

    background: #eeebf1;

    color: #77707d;

    font-size: 7px;

    letter-spacing: .6px;
}


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

@media(max-width:1050px) {

    .boost-hero-container {
        grid-template-columns: 1fr;
    }

    .boost-hero-ai-stage {
        max-width: 680px;
    }

    .boost-hero {
        padding-top: 125px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px) {

    .boost-hero {
        min-height: auto;

        padding:
            110px
            0
            75px;
    }


    .boost-hero h1 {
        font-size: 54px;

        letter-spacing: -3px;
    }


    .boost-hero-content > p {
        font-size: 14px;
    }


    .boost-hero-actions {
        flex-direction: column;
    }


    .boost-hero-btn {
        width: 100%;
    }


    .boost-hero-ai-stage {
        min-height: 555px;

        padding: 16px;

        border-radius: 22px;
    }


    .hero-chat-content {
        max-width: 84%;
    }

}


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

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

    .hero-chat-bubble {
        transition: none;
    }

}