.apollo-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;

    padding-top: 190px;
    padding-bottom: 150px;
}

.apollo-hero .apollo-inner {
    max-width: 1350px;
}

.apollo-hero h1 {
    max-width: 1250px;

    margin-bottom: 38px;

    color: #fff;

    font-size: clamp(70px, 7vw, 136px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.apollo-hero h1 > span {
    padding-right: 0.06em;
    background: linear-gradient(100deg, #fff 0%, #e069ff 55%, #00E5FF 115%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.apollo-hero p {
    max-width: 790px;

    margin-bottom: 0;

    color: var(--apollo-muted);

    font-size: clamp(19px, 1.35vw, 25px);
    line-height: 1.55;
}

.apollo-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 42px;
}

.apollo-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    gap: 34px;

    padding: 0 24px;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 10px;

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

    color: #fff !important;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none !important;

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

.apollo-button:hover {
    transform: translateY(-3px);
    border-color: var(--apollo-3);
}

.apollo-button-primary {
    border-color: var(--apollo-4);

    background:
        linear-gradient(
            135deg,
            var(--apollo-1),
            var(--apollo-2)
        );
}

.apollo-hero-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 52px;
}

.apollo-hero-tags span {
    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;

    color: #9999a5;

    font-size: 13px;
}

/* Point de départ de la timeline */
.apollo-hero-node {
    position: absolute;

    left: var(--apollo-line-x);
    top: 150px;

    width: 34px;
    height: 34px;

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

    transform: translateX(-15px);

    border: 1px solid var(--apollo-1);
    border-radius: 50%;

    background: var(--apollo-bg);

    box-shadow:
        0 0 20px rgba(190,85,237,.35);

    z-index: 8;
}

.apollo-hero-node span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--apollo-3);

    box-shadow:
        0 0 14px var(--apollo-3);
}

@media (max-width: 991px) {

    .apollo-hero {
        min-height: auto;

        padding-top: 150px;
        padding-bottom: 120px;
    }

    .apollo-hero h1 {
        font-size: clamp(50px, 11vw, 80px);
    }

    .apollo-hero-node {
        top: 120px;
        transform: translateX(-15px);
    }

    .apollo-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   HERO - REMONTEE DU CONTENU DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .apollo-hero .apollo-inner {
        transform: translateY(-80px);
    }

}


/* =========================================================
   HERO - BOUTON PRINCIPAL GRADIENT ANIME AU HOVER
   ========================================================= */

.apollo-button-primary {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #722a7e,
            #be55ed
        );

    background-size: 200% 200%;
}

.apollo-button-primary::before {
    content: "";

    position: absolute;
    inset: -2px;


    opacity: 0;

    background:
        linear-gradient(
            120deg,
            #722a7e,
            #be55ed,
            #e069ff,
            #7045dd,
            #be55ed,
            #722a7e
        );

    background-size: 300% 300%;

    transition:
        opacity .25s ease;
}

.apollo-button-primary:hover::before {
    opacity: 1;

    animation:
        apolloHeroGradientFlow
        3.2s
        ease
        infinite;
}

.apollo-button-primary:hover {
    color: #fff !important;
}

@keyframes apolloHeroGradientFlow {

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

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

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


/* =========================================================
   HERO - CTA PRINCIPAL / GRADIENT INITIAL + FLOW AU HOVER
   ========================================================= */

/* Neutralise la tentative précédente */
.apollo-button-primary::before {
    display: none !important;
}

/* Dégradé initial du bouton */
.apollo-button-primary {
    background:
        linear-gradient(
            120deg,
            var(--apollo-1),
            var(--apollo-2)
        ) !important;

    background-size: 100% 100% !important;

    animation: none !important;
}

/*
 * Au hover : exactement les mêmes couleurs,
 * mais elles circulent et se mélangent.
 */
.apollo-button-primary:hover {
    background:
        linear-gradient(
            120deg,
            var(--apollo-1) 0%,
            var(--apollo-2) 35%,
            var(--apollo-1) 65%,
            var(--apollo-2) 100%
        ) !important;

    background-size: 300% 300% !important;

    animation:
        apolloButtonColorFlow 3s
        ease-in-out
        infinite !important;
}

@keyframes apolloButtonColorFlow {

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

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

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


/* =========================================================
   HERO - AJUSTEMENTS TYPO + CTA HOVER
   ========================================================= */

@media (min-width: 992px) {

    .apollo-hero h1 {
        font-size: clamp(66px, 6.6vw, 128px);
    }

    .apollo-hero p {
        font-size: clamp(18px, 1.2vw, 23px);
    }
}


/* Bouton : fond initial conservé */
.apollo-button-primary {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            var(--apollo-1),
            var(--apollo-2)
        ) !important;
}


/* Couche animée uniquement au hover */
.apollo-button-primary::after {
    content: "";

    position: absolute;
    inset: 0;


    opacity: 0;

    background:
        linear-gradient(
            110deg,
            var(--apollo-1) 0%,
            var(--apollo-2) 25%,
            var(--apollo-1) 50%,
            var(--apollo-2) 75%,
            var(--apollo-1) 100%
        );

    background-size: 320% 320%;

    transition: opacity .2s ease;
}


.apollo-button-primary:hover::after {
    opacity: 1;

    animation:
        apolloButtonFlow
        2.4s
        linear
        infinite;
}


@keyframes apolloButtonFlow {

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

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


/* =========================================================
   HERO CTA - MELANGE DE COULEURS ORGANIQUE
   ========================================================= */

.apollo-button-primary::after {
    content: "";

    position: absolute;
    inset: -35%;


    opacity: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            var(--apollo-1) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 80% 25%,
            var(--apollo-2) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 35% 80%,
            var(--apollo-2) 0%,
            transparent 40%
        ),
        radial-gradient(
            circle at 75% 75%,
            var(--apollo-1) 0%,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--apollo-1),
            var(--apollo-2)
        );

    filter: blur(6px);

    transform:
        scale(1.15)
        rotate(0deg);

    transition: opacity .2s ease;
}

.apollo-button-primary:hover::after {
    opacity: 1;

    animation:
        apolloButtonOrganicFlow
        5s
        ease-in-out
        infinite alternate;
}

@keyframes apolloButtonOrganicFlow {

    0% {
        transform:
            translate(-6%, -4%)
            scale(1.12)
            rotate(0deg);

        background-position:
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            50% 50%;
    }

    33% {
        transform:
            translate(5%, -3%)
            scale(1.20)
            rotate(6deg);

        background-position:
            20% 10%,
            80% 20%,
            15% 85%,
            90% 70%,
            60% 40%;
    }

    66% {
        transform:
            translate(-3%, 5%)
            scale(1.16)
            rotate(-5deg);

        background-position:
            10% 25%,
            90% 10%,
            30% 70%,
            75% 90%,
            40% 60%;
    }

    100% {
        transform:
            translate(6%, 3%)
            scale(1.22)
            rotate(4deg);

        background-position:
            25% 15%,
            75% 25%,
            20% 80%,
            85% 75%,
            55% 45%;
    }
}


/* =========================================================
   HERO CTA - MELANGE VISIBLE
   ========================================================= */

.apollo-button-primary {
    position: relative;
    overflow: hidden;
}

/* La matière colorée passe AU-DESSUS du fond */
.apollo-button-primary::after {
    z-index: 0 !important;

    opacity: 0;

    filter: blur(10px);

    mix-blend-mode: screen;

    transform: scale(1.35);

    background:
        radial-gradient(
            circle at 15% 25%,
            #722a7e 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 20%,
            #be55ed 0%,
            transparent 40%
        ),
        radial-gradient(
            circle at 25% 85%,
            #e069ff 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 80%,
            #7045dd 0%,
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #722a7e,
            #be55ed
        );
}

/* Texte et flèche restent au premier plan */
.apollo-button-primary > * {
    position: relative;
    z-index: 2;
}

.apollo-button-primary:hover::after {
    opacity: 1;

    animation:
        apolloButtonLiquidMix
        3.4s
        ease-in-out
        infinite alternate;
}

@keyframes apolloButtonLiquidMix {

    0% {
        transform:
            translate(-10%, -8%)
            scale(1.35)
            rotate(-8deg);
    }

    25% {
        transform:
            translate(8%, -10%)
            scale(1.50)
            rotate(7deg);
    }

    50% {
        transform:
            translate(10%, 8%)
            scale(1.40)
            rotate(-4deg);
    }

    75% {
        transform:
            translate(-8%, 10%)
            scale(1.52)
            rotate(9deg);
    }

    100% {
        transform:
            translate(-3%, -4%)
            scale(1.42)
            rotate(-6deg);
    }
}


/* =========================================================
   HERO CTA - MELANGE MULTIDIRECTIONNEL FINAL
   ========================================================= */

/* On neutralise les anciennes couches animées */
.apollo-button-primary::before,
.apollo-button-primary::after {
    display: none !important;
}

/* Etat normal : bouton d'origine */
.apollo-button-primary {
    background:
        linear-gradient(
            120deg,
            var(--apollo-1),
            var(--apollo-2)
        ) !important;

    background-size: 100% 100% !important;
    animation: none !important;
}

/*
 * Hover :
 * plusieurs masses violet / rose se déplacent
 * indépendamment dans différentes directions.
 */
.apollo-button-primary:hover {
    background:
        radial-gradient(
            circle at 10% 20%,
            var(--apollo-1) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 90% 15%,
            var(--apollo-2) 0%,
            transparent 44%
        ),
        radial-gradient(
            circle at 20% 90%,
            var(--apollo-2) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 85% 85%,
            var(--apollo-1) 0%,
            transparent 44%
        ),
        linear-gradient(
            120deg,
            var(--apollo-1),
            var(--apollo-2)
        ) !important;

    background-size:
        170% 170%,
        190% 190%,
        180% 180%,
        200% 200%,
        100% 100% !important;

    animation:
        apolloButtonMix
        3.2s
        ease-in-out
        infinite alternate !important;
}

@keyframes apolloButtonMix {

    0% {
        background-position:
            -30% -20%,
            130% -25%,
            -20% 130%,
            125% 125%,
            50% 50%;
    }

    25% {
        background-position:
            40% 15%,
            75% 45%,
            25% 85%,
            95% 55%,
            50% 50%;
    }

    50% {
        background-position:
            85% 60%,
            25% 70%,
            75% 15%,
            20% 30%,
            50% 50%;
    }

    75% {
        background-position:
            15% 90%,
            65% 10%,
            90% 75%,
            35% 85%,
            50% 50%;
    }

    100% {
        background-position:
            105% 10%,
            -15% 80%,
            15% -20%,
            110% 95%,
            50% 50%;
    }
}


/* =========================================================
   HERO CTA - RETOUR AU BOUTON D'ORIGINE
   ========================================================= */

.apollo-button-primary,
.apollo-button-primary:hover {
    background:
        linear-gradient(
            120deg,
            var(--apollo-1),
            var(--apollo-2)
        ) !important;

    background-size: 100% 100% !important;

    animation: none !important;
}

.apollo-button-primary::before,
.apollo-button-primary::after {
    display: none !important;
}


/* =========================================================
   HERO - NODE UNIFIE AVEC LES AUTRES SECTIONS
   ========================================================= */

@media (min-width: 992px) {

    .apollo-hero .apollo-hero-node {
        top: 50%;

        width: 14px;
        height: 14px;

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

        border: 2px solid rgba(255,255,255,.22);
        background: var(--apollo-bg);

        box-shadow: none;
    }

    .apollo-hero.is-node-live .apollo-hero-node {
        width: 34px;
        height: 34px;

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

        border: 1px solid var(--apollo-node-color, var(--apollo-1));

        box-shadow:
            0 0 0 8px rgba(190,85,237,.05),
            0 0 20px rgba(190,85,237,.38);
    }

}



/* =========================================================
   V3 - CTA HERO LIQUID HOVER
   ========================================================= */

.apollo-hero .apollo-button-primary {
    position: relative;
    overflow: hidden;

    /* Apparence normale du bouton */
    background:
        linear-gradient(
            115deg,
            #7045dd 0%,
            #a342e6 48%,
            #d353ef 100%
        );

    border-color: rgba(255,255,255,.16);

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


/* Texte toujours au-dessus du liquide */
.apollo-hero .apollo-button-primary > * {
    position: relative;
    z-index: 5;
}


/* Première couche liquide */
.apollo-hero .apollo-button-primary::before {
    content: "";

    position: absolute;
    z-index: 1;

    width: 190%;
    height: 260%;

    left: -45%;
    top: -80%;

    opacity: 0;

    background:
        radial-gradient(
            circle at 20% 25%,
            #f26cff 0 15%,
            transparent 35%
        ),
        radial-gradient(
            circle at 75% 20%,
            #7045dd 0 18%,
            transparent 39%
        ),
        radial-gradient(
            circle at 25% 80%,
            #be55ed 0 19%,
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 78%,
            #ff5bd7 0 17%,
            transparent 40%
        ),
        radial-gradient(
            circle at 50% 50%,
            #8d42e8 0 24%,
            transparent 52%
        );

    filter: blur(7px);

    transform:
        rotate(-8deg)
        scale(1.05);

    transition:
        opacity .28s ease;

    pointer-events: none;
}


/* Deuxième couche = mélange / profondeur */
.apollo-hero .apollo-button-primary::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: -60%;

    opacity: 0;

    background:
        radial-gradient(
            ellipse at 30% 50%,
            rgba(255,126,239,.80) 0 12%,
            transparent 31%
        ),
        radial-gradient(
            ellipse at 70% 45%,
            rgba(84,88,255,.75) 0 14%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 52% 78%,
            rgba(212,75,244,.78) 0 15%,
            transparent 36%
        );

    filter: blur(12px);

    transform:
        rotate(12deg)
        scale(1);

    transition:
        opacity .28s ease;

    pointer-events: none;
}


/* Activation */
.apollo-hero .apollo-button-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 34px rgba(190,85,237,.28),
        0 0 28px rgba(224,105,255,.16);
}


.apollo-hero .apollo-button-primary:hover::before {
    opacity: 1;

    animation:
        apolloLiquidLayerOne
        3.4s
        ease-in-out
        infinite
        alternate;
}


.apollo-hero .apollo-button-primary:hover::after {
    opacity: .88;

    animation:
        apolloLiquidLayerTwo
        4.6s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   MOUVEMENT LIQUIDE 1
   ========================================================= */

@keyframes apolloLiquidLayerOne {

    0% {
        transform:
            translate3d(-3%, -4%, 0)
            rotate(-10deg)
            scale(1.03);
    }

    22% {
        transform:
            translate3d(7%, 2%, 0)
            rotate(4deg)
            scale(1.13);
    }

    47% {
        transform:
            translate3d(-2%, 8%, 0)
            rotate(13deg)
            scale(.99);
    }

    71% {
        transform:
            translate3d(9%, -3%, 0)
            rotate(-2deg)
            scale(1.11);
    }

    100% {
        transform:
            translate3d(-6%, 5%, 0)
            rotate(-14deg)
            scale(1.05);
    }
}


/* =========================================================
   MOUVEMENT LIQUIDE 2
   ========================================================= */

@keyframes apolloLiquidLayerTwo {

    0% {
        transform:
            translate3d(6%, 5%, 0)
            rotate(15deg)
            scale(1.02);
    }

    28% {
        transform:
            translate3d(-7%, -2%, 0)
            rotate(-8deg)
            scale(1.15);
    }

    55% {
        transform:
            translate3d(3%, -8%, 0)
            rotate(8deg)
            scale(.97);
    }

    79% {
        transform:
            translate3d(-4%, 7%, 0)
            rotate(18deg)
            scale(1.09);
    }

    100% {
        transform:
            translate3d(7%, -4%, 0)
            rotate(-5deg)
            scale(1.03);
    }
}


/* Respect accessibilite */
@media (prefers-reduced-motion: reduce) {

    .apollo-hero .apollo-button-primary:hover::before,
    .apollo-hero .apollo-button-primary:hover::after {
        animation: none;
    }

}

/* MOBILE - PARAGRAPHE HERO */
@media (max-width: 767px) {

    .apollo-hero > .apollo-inner > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

}

/* =========================================================
   APOLLO HOME V4 - BOUTONS HERO MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .apollo-hero-actions {
        gap: 12px !important;
    }

    .apollo-hero .apollo-liquid-button {
        min-height: 50px !important;
    }

    .apollo-hero .apollo-liquid-content {
        min-height: 50px !important;
        padding: 0 18px !important;
        gap: 20px !important;

        font-size: 12px !important;
    }

    .apollo-hero .apollo-button {
        min-height: 48px !important;
        padding: 0 18px !important;

        font-size: 12px !important;
    }

}

/* HERO MOBILE - BOUTONS PLUS COMPACTS */
@media (max-width: 767px) {

    .apollo-hero-actions {
        gap: 9px !important;
    }

    .apollo-hero .apollo-liquid-button {
        min-height: 44px !important;
    }

    .apollo-hero .apollo-liquid-content {
        min-height: 44px !important;
        padding: 0 15px !important;
        font-size: 11px !important;
    }

    .apollo-hero .apollo-button {
        min-height: 42px !important;
        padding: 0 15px !important;
        font-size: 11px !important;
    }

}


/* =========================================================
   APOLLO HOME V4 - HERO MOBILE LARGEUR
   ========================================================= */

@media (max-width: 767px) {

    .apollo-hero {
        padding-top: 110px !important;
        padding-bottom: 55px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .apollo-hero .apollo-inner {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* =========================================================
   APOLLO HOME V4 - HERO BADGES MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .apollo-hero-tags {
        gap: 7px !important;
        margin-top: 38px !important;
    }

    .apollo-hero-tags span {
        padding: 7px 11px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;

        border-color: rgba(255,255,255,.09) !important;
        background: rgba(255,255,255,.015);
    }

}