/* =========================================================
   RAPIDXPERTZ MORPH HERO - CLEAN FINAL CSS
   REPLACE THE OLD HERO CSS FILE WITH THIS FILE
   ========================================================= */

.rx-morph-hero {
    --rx-blue: #12366f;
    --rx-cyan: #22a9c0;
    --rx-purple: #8176c8;
    --rx-orange: #e69a43;
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
    isolation: isolate;
    font-family: inherit;
}

.rx-morph-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(69,139,190,.045) 0%, rgba(129,118,200,.02) 35%, transparent 70%);
    pointer-events: none;
}

/* ===================== SLIDES ===================== */

.rx-morph-slide {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    filter: none !important;
    will-change: opacity, transform;
}

.rx-morph-hero .rx-slide-1 { animation: rxSlide1Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-2 { animation: rxSlide2Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-3 { animation: rxSlide3Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-4 { animation: rxSlide4Clean 32s ease-in-out infinite; }
.rx-morph-hero .rx-slide-5 { animation: rxSlide5Clean 32s ease-in-out infinite; }

@keyframes rxSlide1Clean {
    0%, 2% { opacity:0; visibility:hidden; transform:translateY(16px); }
    4%, 18% { opacity:1; visibility:visible; transform:translateY(0); }
    20%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

@keyframes rxSlide2Clean {
    0%, 20% { opacity:0; visibility:hidden; transform:translateY(16px); }
    22%, 38% { opacity:1; visibility:visible; transform:translateY(0); }
    40%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

@keyframes rxSlide3Clean {
    0%, 40% { opacity:0; visibility:hidden; transform:translateY(16px); }
    42%, 58% { opacity:1; visibility:visible; transform:translateY(0); }
    60%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

@keyframes rxSlide4Clean {
    0%, 60% { opacity:0; visibility:hidden; transform:translateY(16px); }
    62%, 78% { opacity:1; visibility:visible; transform:translateY(0); }
    80%, 100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

@keyframes rxSlide5Clean {
    0%, 80% { opacity:0; visibility:hidden; transform:translateY(16px); }
    82%, 98% { opacity:1; visibility:visible; transform:translateY(0); }
    100% { opacity:0; visibility:hidden; transform:translateY(-10px); }
}

/* ===================== SLIDE 1 ===================== */

.rx-morph-kicker {
    position: relative;
    margin-bottom: 24px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 4px;
    font-weight: 600;
    color: #858585;
}

.rx-morph-kicker::before,
.rx-morph-kicker::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rx-cyan), var(--rx-purple));
    opacity: .65;
}
.rx-morph-kicker::before { right: calc(100% + 18px); }
.rx-morph-kicker::after { left: calc(100% + 18px); transform: rotate(180deg); }

.rx-slide-1 p,
.rx-slide-2 p,
.rx-slide-3 p,
.rx-slide-4 p,
.rx-slide-5 p {
    color: #777777;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    font-weight: 300;
}

.rx-slide-1 p { margin: 22px 0 0; }

/* ===================== SLIDE 2 ===================== */

.rx-slide-2 h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: clamp(38px, 4.8vw, 64px);
    line-height: 1.1;
    letter-spacing: -2px;
    font-weight: 300;
}
.rx-slide-2 .dark { color: #202020; }
.rx-slide-2 .gradient {
    background: linear-gradient(105deg,#786dc1,#398fc6,#22a9bf,#c67991,#e59a45);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    animation: rxColorFlow 4.5s ease-in-out infinite;
}

.rx-slide-line {
    position: relative;
    width: 105px;
    height: 2px;
    margin: 22px 0 18px;
    background: #ededed;
    overflow: hidden;
}
.rx-slide-line::after {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,var(--rx-purple),var(--rx-cyan),var(--rx-orange));
    animation: rxLineSweep 2.4s ease-in-out infinite;
}
.rx-slide-2 p { margin: 0; }

/* ===================== SLIDE 3 ===================== */

.rx-gradient-text {
    margin: 0;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 500;
    background: linear-gradient(105deg,#8276c9,#419ac9,#28aabe,#78916f,#c77d8d,#e49b47);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rxColorFlow 5s ease-in-out infinite;
}

.rx-with {
    margin-top: 16px;
    font-size: clamp(25px, 2.8vw, 36px);
    color: #777777;
    font-weight: 300;
}

.rx-gradient-box {
    position: relative;
    width: 440px;
    max-width: 85vw;
    height: 70px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(20,60,100,.035);
}
.rx-gradient-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(100deg,#7c72c7,#419ac8,#22a9bf,#8b8c74,#c77891,#e69a43,#7c72c7);
    background-size: 300% 100%;
    animation: rxBorderFlow 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.rx-gradient-box span {
    position: relative;
    z-index: 2;
    font-size: clamp(18px,2vw,24px);
    font-weight: 500;
    color: #555555;
}
.rx-slide-3 p { margin: 16px 0 0; }

/* ===================== SLIDE 4 ===================== */

.rx-final-small {
    font-size: clamp(16px,1.8vw,22px);
    color: #888888;
    font-weight: 300;
}
.rx-slide-4 h2 {
    margin: 10px 0 0;
    font-size: clamp(46px,5.5vw,74px);
    letter-spacing: -3px;
    line-height: 1;
    font-weight: 500;
}
.rx-slide-4 h2 span {
    background: linear-gradient(105deg,#7f74c8,#3c99c9,#2baabe,#d17d8c,#e59b44);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rxColorFlow 4.5s ease-in-out infinite;
}
.rx-slide-4 h2 strong { color:#161616; font-weight:500; }
.rx-slide-4 p { margin:18px auto 0; }

.rx-final-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 24px;
    padding: 14px 35px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(105deg,#536fb3,#338fc3,#20a6bd,#667fb2,#b66b91,#e08c47);
    background-size: 250% 100%;
    animation: rxButtonFlow 5s ease-in-out infinite;
}

/* ===================== SLIDE 5 ===================== */

.rx-slide-5 h2 {
    margin: 10px 0 0;
    font-size: clamp(40px, 5vw, 68px);
    letter-spacing: -3px;
    line-height: 1;
    font-weight: 500;
}

.rx-slide-5 h2 span {
    background: linear-gradient(105deg,#7f74c8,#3c99c9,#2baabe,#d17d8c,#e59b44);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rxColorFlow 4.5s ease-in-out infinite;
}

.rx-slide-5 h2 strong {
    color:#161616;
    font-weight:500;
}

.rx-slide-5 p {
    margin:18px auto 0;
}

.rx-slide-5 .rx-final-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 24px;
    padding: 14px 35px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(105deg,#536fb3,#338fc3,#20a6bd,#667fb2,#b66b91,#e08c47);
    background-size: 250% 100%;
    animation: rxButtonFlow 5s ease-in-out infinite;
}

/* ===================== REAL TYPEWRITER =====================
   This targets ONLY the span already added in your HTML.
   ========================================================== */

.rx-type-text {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
    max-width: 0;
    border-right: 2px solid #777777;
    box-sizing: border-box;
}

/* Slide 1: 53 characters */
.rx-slide-1 .rx-type-text {
    animation:
        rxTypingOne 32s steps(53, end) infinite,
        rxCursor .65s step-end infinite;
}

/* Slide 2: 70 characters */
.rx-slide-2 .rx-type-text {
    animation:
        rxTypingTwo 32s steps(70, end) infinite,
        rxCursor .65s step-end infinite;
}

@keyframes rxTypingOne {
    0%, 5% { max-width: 0; }
    12%, 17% { max-width: 700px; }
    20%, 100% { max-width: 0; }
}
@keyframes rxTypingTwo {
    0%, 25% { max-width: 0; }
    32%, 38% { max-width: 900px; }
    40%, 100% { max-width: 0; }
}
@keyframes rxCursor {
    50% { border-right-color: transparent; }
}

/* ===================== PROGRESS ===================== */

.rx-morph-progress {
    position: absolute;
    z-index: 20;
    left: 7%;
    right: 7%;
    bottom: 28px;
    height: 1px;
    background: #eeeeee;
}
.rx-morph-progress span {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,#6f7fc1,#27a8c0,#e28b45);
    animation: rxProgress 32s linear infinite;
}

/* ===================== COMMON ANIMATION ===================== */

@keyframes rxColorFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
@keyframes rxLineSweep {
    0% { left:-100%; }
    45%,65% { left:100%; }
    100% { left:100%; }
}
@keyframes rxBorderFlow {
    0% { background-position:0% 50%; }
    100% { background-position:300% 50%; }
}
@keyframes rxButtonFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
@keyframes rxProgress {
    from { width:0; }
    to { width:100%; }
}

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

@media (max-width: 1024px) {
    .rx-morph-hero { height:480px; min-height:480px; }
}

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

@media (max-width: 768px) {
    .rx-morph-hero {
        height: 430px;
        min-height: 430px;
    }
    .rx-morph-slide {
        padding-left:20px;
        padding-right:20px;
    }
    .rx-morph-kicker {
        margin-bottom:16px;
        font-size:8px;
        letter-spacing:3px;
    }
    .rx-morph-kicker::before,
    .rx-morph-kicker::after { display:none; }

    .rx-slide-1 p,
    .rx-slide-2 p,
    .rx-slide-3 p,
    .rx-slide-4 p,
    .rx-slide-5 p {
        max-width:90%;
        margin-left:auto;
        margin-right:auto;
        font-size:15px;
    }

    /* On mobile keep text readable instead of forcing one line */
    .rx-type-text {
        max-width:100%;
        white-space:normal;
        overflow:visible;
        border-right:0;
        animation:none !important;
    }

    .rx-slide-2 h2 {
        font-size:clamp(30px,8vw,42px);
        letter-spacing:-1px;
        gap:10px;
    }
    .rx-gradient-text { font-size:clamp(28px,7vw,38px); }
    .rx-with { font-size:clamp(22px,6vw,30px); }
    .rx-gradient-box {
        width:90%;
        max-width:90%;
        height:60px;
    }
    .rx-gradient-box span { font-size:16px; }
    .rx-slide-4 h2 { font-size:clamp(36px,9vw,48px); }
    .rx-slide-5 h2 { font-size:clamp(34px,8.5vw,46px); }

    .rx-slide-4 .rx-final-pill,
    .rx-slide-5 .rx-final-pill {
        flex-direction:column;
        gap:10px;
        padding:0;
        background:none;
        animation:none;
    }
    .rx-slide-4 .rx-final-pill span,
    .rx-slide-5 .rx-final-pill span {
        min-width:150px;
        padding:12px 22px;
        border-radius:50px;
        background:linear-gradient(105deg,#536fb3,#338fc3,#20a6bd,#667fb2,#b66b91,#e08c47);
        background-size:250% 100%;
        animation:rxButtonFlow 5s ease-in-out infinite;
    }
    .rx-slide-5 .rx-final-pill span {
        font-size: 13px;
        line-height: 1.45;
    }

    .rx-morph-progress {
        left:20px;
        right:20px;
        bottom:18px;
    }
}

@media (max-width: 480px) {
    .rx-morph-hero {
        height:400px;
        min-height:400px;
    }
    .rx-slide-1 p,
    .rx-slide-2 p,
    .rx-slide-3 p,
    .rx-slide-4 p { font-size:14px; }
}
/* =========================================================
   FIRST SLIDE - AANTRIO LOGO IMAGE
   ========================================================= */

.rx-slide-1 .rx-slide-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;

    opacity: 0;

    animation:
        rxLogoReveal 1.2s ease-out forwards;
}


/* LOGO IMAGE */

.rx-slide-1 .rx-slide-logo img {
    display: block;

    width: min(420px, 75vw);
    height: auto;

    max-height: 150px;

    object-fit: contain;

    /* Prevent blur */
    filter: none !important;

    animation:
        rxLogoFloat 4s ease-in-out infinite 1.2s;
}


/* =========================================================
   LOGO ENTER ANIMATION
   ========================================================= */

@keyframes rxLogoReveal {

    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   VERY SUBTLE FLOAT
   ========================================================= */

@keyframes rxLogoFloat {

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

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

}


/* =========================================================
   KEEP FIRST SLIDE TEXT CLEAR
   ========================================================= */

.rx-slide-1 .rx-morph-kicker {
    position: relative;
    z-index: 2;

    margin-top: 5px;
}


.rx-slide-1 p {
    position: relative;
    z-index: 2;

    opacity: 1 !important;
    filter: none !important;
}


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

@media (max-width: 768px) {

    .rx-slide-1 .rx-slide-logo {
        margin-bottom: 15px;
    }

    .rx-slide-1 .rx-slide-logo img {
        width: min(300px, 82vw);
        max-height: 110px;
    }

}
/* =========================================================
   UNIQUE AANTRIO LOGO ANIMATION
   ONLY FOR .rx-slide-logo
   ========================================================= */

.rx-slide-1 .rx-slide-logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin-bottom: 20px;

    perspective: 1000px;

    /* Same 32-second slider cycle */
    animation: rxLogoEntrance 32s ease-in-out infinite;
}


/* =========================================================
   LOGO IMAGE
   ========================================================= */

.rx-slide-1 .rx-slide-logo img {
    display: block;

    width: min(420px, 75vw);
    height: auto;

    max-height: 150px;
    object-fit: contain;

    filter: none !important;

    transform-origin: center;

    /* Floating after entrance */
    animation: rxLogoFloatUnique 3s ease-in-out infinite;
}


/* =========================================================
   LOGO ENTRANCE
   Starts from slightly back + rotates into position
   ========================================================= */

@keyframes rxLogoEntrance {

    /* Before slide appears */
    0%,
    2% {
        opacity: 0;
        transform:
            translateY(-35px)
            rotateX(-35deg)
            scale(0.82);
    }


    /* Logo smoothly enters */
    5% {
        opacity: 1;
        transform:
            translateY(5px)
            rotateX(5deg)
            scale(1.04);
    }


    /* Settle */
    7%,
    22% {
        opacity: 1;
        transform:
            translateY(0)
            rotateX(0deg)
            scale(1);
    }


    /* Exit with first slide */
    25%,
    100% {
        opacity: 0;
        transform:
            translateY(15px)
            rotateX(15deg)
            scale(0.95);
    }

}


/* =========================================================
   SUBTLE FLOATING MOTION
   ========================================================= */

@keyframes rxLogoFloatUnique {

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

    50% {
        transform:
            translateY(-7px)
            rotate(0.3deg);
    }

}


/* =========================================================
   UNIQUE LIGHT SWEEP
   A light passes across the logo
   ========================================================= */

.rx-slide-1 .rx-slide-logo::after {
    content: "";

    position: absolute;

    width: 55%;
    height: 120%;

    top: -10%;
    left: -80%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.05) 75%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    animation:
        rxLogoLightSweep 32s ease-in-out infinite;
}


/* =========================================================
   LIGHT SWEEP TIMING
   ========================================================= */

@keyframes rxLogoLightSweep {

    0%,
    7% {
        left: -80%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    13% {
        left: 130%;
        opacity: 1;
    }

    14%,
    100% {
        left: 130%;
        opacity: 0;
    }

}


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

@media (max-width: 768px) {

    .rx-slide-1 .rx-slide-logo {
        margin-bottom: 15px;
    }


    .rx-slide-1 .rx-slide-logo img {
        width: min(300px, 82vw);
        max-height: 110px;
    }


    @keyframes rxLogoFloatUnique {

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

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

    }

}

/* =========================================================
   REFINED SLIDES 3–5
   Keeps all existing HTML classes intact.
   Removes the "button" look and adds a premium animated
   service-strip/card treatment.
   ========================================================= */

/* ---------- SLIDE 3: GROWTH ---------- */

.rx-slide-3 .rx-gradient-text {
    position: relative;
    animation:
        rxGrowthTitle 32s ease-in-out infinite,
        rxColorFlow 5s ease-in-out infinite;
}

.rx-slide-3 .rx-with {
    animation: rxGrowthSub 32s ease-in-out infinite;
}

.rx-slide-3 .rx-gradient-box {
    width: min(720px, 88vw);
    min-height: 76px;
    height: auto;
    padding: 18px 34px;
    margin-top: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    box-shadow:
        0 18px 45px rgba(20,60,100,.045),
        0 0 0 1px rgba(42,155,192,.04);
    overflow: hidden;
    animation: rxGrowthStrip 32s ease-in-out infinite;
}

.rx-slide-3 .rx-gradient-box::before {
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background:
        linear-gradient(
            110deg,
            #786dc1 0%,
            #398fc6 20%,
            #22a9bf 40%,
            #c67991 65%,
            #e59a45 82%,
            #786dc1 100%
        );
    background-size: 260% 100%;
    animation:
        rxBorderFlow 4.5s linear infinite,
        rxGrowthBorder 32s ease-in-out infinite;
}

.rx-slide-3 .rx-gradient-box::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        110deg,
        transparent 42%,
        rgba(255,255,255,.72) 50%,
        transparent 58%
    );
    transform: translateX(-70%);
    animation: rxGrowthShine 32s ease-in-out infinite;
    pointer-events: none;
}

.rx-slide-3 .rx-gradient-box span {
    max-width: 620px;
    font-size: clamp(16px, 1.55vw, 20px);
    line-height: 1.5;
    color: #4d5662;
    font-weight: 500;
    letter-spacing: .1px;
}


/* ---------- SLIDE 4: TALENT SEARCH ---------- */

.rx-slide-4 .rx-final-small {
    position: relative;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: rxTalentSmall 32s ease-in-out infinite;
}

.rx-slide-4 h2 {
    animation: rxTalentTitle 32s ease-in-out infinite;
}

.rx-slide-4 .rx-final-pill {
    position: relative;
    width: min(760px, 90vw);
    min-height: 64px;
    height: auto;
    margin-top: 26px;
    padding: 15px 30px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    color: #3f4a57;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 550;
    line-height: 1.45;
    box-shadow:
        0 16px 42px rgba(20,60,100,.04),
        0 0 0 1px rgba(70,120,170,.045);
    overflow: hidden;
    animation: rxTalentStrip 32s ease-in-out infinite;
}

.rx-slide-4 .rx-final-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background:
        linear-gradient(
            100deg,
            #7c72c7,
            #419ac8,
            #22a9bf,
            #d17d8c,
            #e69a43,
            #7c72c7
        );
    background-size: 260% 100%;
    animation:
        rxBorderFlow 4.5s linear infinite,
        rxTalentBorder 32s ease-in-out infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rx-slide-4 .rx-final-pill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 28%;
    transform: skewX(-18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.78),
        transparent
    );
    animation: rxTalentShine 32s ease-in-out infinite;
    pointer-events: none;
}

.rx-slide-4 .rx-final-pill span {
    position: relative;
    z-index: 2;
}


/* ---------- SLIDE 5: MANAGED SERVICES ---------- */

.rx-slide-5 .rx-final-small {
    position: relative;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: rxManagedSmall 32s ease-in-out infinite;
}

.rx-slide-5 h2 {
    animation: rxManagedTitle 32s ease-in-out infinite;
}

.rx-slide-5 .rx-final-pill {
    position: relative;
    width: min(920px, 92vw);
    min-height: 66px;
    height: auto;
    margin-top: 26px;
    padding: 16px 32px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    color: #46515f;
    font-size: clamp(15px, 1.28vw, 18px);
    font-weight: 550;
    line-height: 1.5;
    box-shadow:
        0 16px 42px rgba(20,60,100,.04),
        0 0 0 1px rgba(70,120,170,.045);
    overflow: hidden;
    animation: rxManagedStrip 32s ease-in-out infinite;
}

.rx-slide-5 .rx-final-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background:
        linear-gradient(
            100deg,
            #398fc6,
            #22a9bf,
            #667fb2,
            #b66b91,
            #e08c47,
            #398fc6
        );
    background-size: 280% 100%;
    animation:
        rxBorderFlow 4.5s linear infinite,
        rxManagedBorder 32s ease-in-out infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rx-slide-5 .rx-final-pill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 28%;
    transform: skewX(-18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.78),
        transparent
    );
    animation: rxManagedShine 32s ease-in-out infinite;
    pointer-events: none;
}

.rx-slide-5 .rx-final-pill span {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SLIDE 3–5 MOTION
   ========================================================= */

@keyframes rxGrowthTitle {
    0%, 40% { opacity: 0; transform: translateY(18px); }
    42%, 57% { opacity: 1; transform: translateY(0); }
    60%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes rxGrowthSub {
    0%, 42% { opacity: 0; transform: translateY(14px); }
    45%, 57% { opacity: 1; transform: translateY(0); }
    60%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes rxGrowthStrip {
    0%, 44% {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }
    47%, 57% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    60%, 100% {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }
}

@keyframes rxGrowthBorder {
    0%, 46% { opacity: 0; }
    49%, 57% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

@keyframes rxGrowthShine {
    0%, 48% { transform: translateX(-70%); opacity: 0; }
    51% { opacity: 1; }
    57%, 100% { transform: translateX(350%); opacity: 0; }
}


@keyframes rxTalentSmall {
    0%, 60% { opacity: 0; transform: translateY(16px); }
    63%, 77% { opacity: 1; transform: translateY(0); }
    80%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes rxTalentTitle {
    0%, 61% { opacity: 0; transform: translateY(20px) scale(.98); }
    64%, 77% { opacity: 1; transform: translateY(0) scale(1); }
    80%, 100% { opacity: 0; transform: translateY(-8px) scale(.99); }
}

@keyframes rxTalentStrip {
    0%, 64% {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }
    67%, 77% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80%, 100% {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }
}

@keyframes rxTalentBorder {
    0%, 66% { opacity: 0; }
    69%, 77% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

@keyframes rxTalentShine {
    0%, 68% { left: -45%; opacity: 0; }
    71% { opacity: 1; }
    77%, 100% { left: 145%; opacity: 0; }
}


@keyframes rxManagedSmall {
    0%, 80% { opacity: 0; transform: translateY(16px); }
    83%, 97% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes rxManagedTitle {
    0%, 81% { opacity: 0; transform: translateY(20px) scale(.98); }
    84%, 97% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(.99); }
}

@keyframes rxManagedStrip {
    0%, 84% {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }
    87%, 97% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }
}

@keyframes rxManagedBorder {
    0%, 86% { opacity: 0; }
    89%, 97% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes rxManagedShine {
    0%, 88% { left: -45%; opacity: 0; }
    91% { opacity: 1; }
    97%, 100% { left: 145%; opacity: 0; }
}


/* =========================================================
   MOBILE REFINEMENT FOR SLIDES 3–5
   ========================================================= */

@media (max-width: 768px) {

    .rx-slide-3 .rx-gradient-box {
        width: 94%;
        min-height: 72px;
        padding: 15px 20px;
        border-radius: 20px;
    }

    .rx-slide-3 .rx-gradient-box span {
        font-size: 15px;
        line-height: 1.45;
    }

    .rx-slide-4 .rx-final-pill,
    .rx-slide-5 .rx-final-pill {
        width: 94%;
        min-height: 64px;
        padding: 14px 18px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.5;
    }

    .rx-slide-4 h2,
    .rx-slide-5 h2 {
        letter-spacing: -1.5px;
    }
}

@media (max-width: 480px) {

    .rx-slide-3 .rx-gradient-box {
        width: 96%;
        padding: 14px 16px;
    }

    .rx-slide-4 .rx-final-pill,
    .rx-slide-5 .rx-final-pill {
        width: 96%;
        padding: 13px 14px;
        font-size: 13px;
    }
}

/* =========================================================
   FINAL CURRENT-HTML ANIMATION LAYER
   Paste/use this as part of the external hero CSS.
   It is intentionally placed last so the current HTML classes
   win over older .rx-with/.rx-final-pill rules.
   ========================================================= */

/* Current unified elements must never be disabled by old rules */
.rx-morph-hero .rx-unified-slide .rx-unified-description {
    display: block !important;
    width: auto !important;
    max-width: 950px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 17px auto 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #777777 !important;
    font-size: clamp(14px, 1.25vw, 18px) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    text-align: center !important;

    overflow: visible !important;
}

/* ---------------------------------------------------------
   SLIDE 2
   --------------------------------------------------------- */

.rx-morph-hero .rx-slide-2 .rx-unified-title {
    animation: rxFinalS2Main 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-2 .rx-unified-subtitle {
    animation: rxFinalS2Sub 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-2 .rx-unified-subtitle .gradient {
    animation:
        rxFinalColorFlow 4.5s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-2 .rx-unified-description {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 92vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-right: 2px solid #777777 !important;

    animation:
        rxFinalS2Description 32s steps(72, end) infinite,
        rxFinalCursor .65s step-end infinite !important;
}

/* ---------------------------------------------------------
   SLIDE 3
   --------------------------------------------------------- */

.rx-morph-hero .rx-slide-3 .rx-unified-title {
    animation:
        rxFinalS3Main 32s ease-in-out infinite,
        rxFinalColorFlow 5s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-3 .rx-unified-subtitle {
    animation: rxFinalS3Sub 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-3 .rx-unified-description {
    animation:
        rxFinalS3Description 32s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   SLIDE 4
   --------------------------------------------------------- */

.rx-morph-hero .rx-slide-4 .rx-unified-title {
    animation: rxFinalS4Main 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-4 .rx-unified-title .gradient {
    animation:
        rxFinalColorFlow 4.5s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-4 .rx-unified-subtitle {
    animation: rxFinalS4Sub 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-4 .rx-unified-subtitle .gradient {
    animation:
        rxFinalColorFlow 4.5s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-4 .rx-unified-description {
    animation:
        rxFinalS4Description 32s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   SLIDE 5
   --------------------------------------------------------- */

.rx-morph-hero .rx-slide-5 .rx-unified-title {
    animation: rxFinalS5Main 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-5 .rx-unified-subtitle {
    animation: rxFinalS5Sub 32s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-5 .rx-unified-subtitle .gradient {
    animation:
        rxFinalColorFlow 4.5s ease-in-out infinite !important;
}

.rx-morph-hero .rx-slide-5 .rx-unified-description {
    animation:
        rxFinalS5Description 32s ease-in-out infinite !important;
}

/* =========================================================
   FINAL ANIMATION KEYFRAMES
   ========================================================= */

@keyframes rxFinalColorFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes rxFinalCursor {
    50% { border-right-color: transparent; }
}

/* Slide 2 */
@keyframes rxFinalS2Main {
    0%, 20% {
        opacity: 0;
        transform: translateY(28px);
        clip-path: inset(0 0 100% 0);
    }
    22%, 25% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
    38% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
    40%, 100% {
        opacity: 0;
        transform: translateY(-10px);
        clip-path: inset(100% 0 0 0);
    }
}

@keyframes rxFinalS2Sub {
    0%, 24% {
        opacity: 0;
        transform: translateY(18px);
    }
    27%, 38% {
        opacity: 1;
        transform: translateY(0);
    }
    40%, 100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes rxFinalS2Description {
    0%, 28% {
        opacity: 0;
        max-width: 0;
    }
    31%, 37% {
        opacity: 1;
        max-width: 900px;
    }
    40%, 100% {
        opacity: 0;
        max-width: 0;
    }
}

/* Slide 3 */
@keyframes rxFinalS3Main {
    0%, 40% {
        opacity: 0;
        transform: translateY(22px) scale(.94);
        filter: blur(8px);
    }
    43%, 46% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    58% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    60%, 100% {
        opacity: 0;
        transform: translateY(-10px) scale(.99);
        filter: blur(4px);
    }
}

@keyframes rxFinalS3Sub {
    0%, 45% {
        opacity: 0;
        transform: translateY(24px);
    }
    48%, 58% {
        opacity: 1;
        transform: translateY(0);
    }
    60%, 100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes rxFinalS3Description {
    0%, 49% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(10px);
    }
    52%, 58% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
    60%, 100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateY(-7px);
    }
}

/* Slide 4 */
@keyframes rxFinalS4Main {
    0%, 60% {
        opacity: 0;
        transform: translateX(-45px);
        clip-path: inset(0 100% 0 0);
    }
    63%, 66% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
    78% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
    80%, 100% {
        opacity: 0;
        transform: translateX(20px);
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes rxFinalS4Sub {
    0%, 65% {
        opacity: 0;
        transform: translateX(42px);
    }
    68%, 78% {
        opacity: 1;
        transform: translateX(0);
    }
    80%, 100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes rxFinalS4Description {
    0%, 69% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-14px);
    }
    72%, 78% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    80%, 100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateX(8px);
    }
}

/* Slide 5 */
@keyframes rxFinalS5Main {
    0%, 80% {
        opacity: 0;
        transform: translateY(24px) scale(.88);
        filter: blur(8px);
    }
    83%, 86% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    98% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(.99);
        filter: blur(3px);
    }
}

@keyframes rxFinalS5Sub {
    0%, 85% {
        opacity: 0;
        transform: translateY(30px);
    }
    88%, 98% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes rxFinalS5Description {
    0%, 89% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(12px);
    }
    92%, 98% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateY(-6px);
    }
}


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

@media (max-width: 768px) {

    .rx-morph-hero .rx-unified-slide .rx-unified-title {
        font-size: 42px !important;
        letter-spacing: -1.5px !important;
    }

    .rx-morph-hero .rx-unified-slide .rx-unified-subtitle {
        font-size: 24px !important;
    }

    .rx-morph-hero .rx-unified-slide .rx-unified-description {
        width: 92% !important;
        max-width: 92% !important;
        white-space: normal !important;
        overflow: hidden !important;
        border-right: 0 !important;
    }

    .rx-morph-hero .rx-slide-2 .rx-unified-description {
        animation: rxFinalS2DescriptionMobile 32s ease-in-out infinite !important;
    }

    .rx-morph-hero .rx-slide-3 .rx-unified-description {
        animation: rxFinalS3DescriptionMobile 32s ease-in-out infinite !important;
    }

    .rx-morph-hero .rx-slide-4 .rx-unified-description {
        animation: rxFinalS4DescriptionMobile 32s ease-in-out infinite !important;
    }

    .rx-morph-hero .rx-slide-5 .rx-unified-description {
        animation: rxFinalS5DescriptionMobile 32s ease-in-out infinite !important;
    }
}

@media (max-width: 480px) {

    .rx-morph-hero .rx-unified-slide .rx-unified-title {
        font-size: 35px !important;
    }

    .rx-morph-hero .rx-unified-slide .rx-unified-subtitle {
        font-size: 21px !important;
    }

    .rx-morph-hero .rx-unified-slide .rx-unified-description {
        font-size: 13px !important;
    }
}

@keyframes rxFinalS2DescriptionMobile {
    0%, 28% { opacity: 0; transform: translateY(10px); }
    31%, 38% { opacity: 1; transform: translateY(0); }
    40%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes rxFinalS3DescriptionMobile {
    0%, 49% { opacity: 0; transform: translateY(10px); }
    52%, 58% { opacity: 1; transform: translateY(0); }
    60%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes rxFinalS4DescriptionMobile {
    0%, 69% { opacity: 0; transform: translateX(-12px); }
    72%, 78% { opacity: 1; transform: translateX(0); }
    80%, 100% { opacity: 0; transform: translateX(8px); }
}

@keyframes rxFinalS5DescriptionMobile {
    0%, 89% { opacity: 0; transform: translateY(10px) scale(.98); }
    92%, 98% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-6px) scale(.99); }
}
/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION
   ADD this block to your existing hero CSS.
   Only slide 1 is changed; slides 2–5 are untouched.
   ========================================================= */
/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION  (FULL REPLACEMENT)
   ADD/REPLACE this block at the END of your existing hero CSS.
   =========================================================

   NEW TIMING PLAN (32s total cycle):
   Slide 1: 0%–35%   = 0s–11.2s   (plenty of time for full sequence)
   Slide 2: 35%–55%  = 11.2s–17.6s
   Slide 3: 55%–70%  = 17.6s–22.4s
   Slide 4: 70%–85%  = 22.4s–27.2s
   Slide 5: 85%–100% = 27.2s–32s

   Within slide 1 window (0%–35%):
   0–2%   = AANTRIO center appears       (0–0.6s)
   4–8%   = Tech node + line             (1.3–2.6s)
   8–12%  = Growth node + line           (2.6–3.8s)
   12–16% = Talent node + line           (3.8–5.1s)
   16–20% = Managed node + line          (5.1–6.4s)
   20–33% = All hold (2+ sec pause)
   33–35% = All fade out
   ========================================================= */

/* ── Override master slide animations for ALL 5 slides ── */
/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION  (FULL REPLACEMENT)
   ADD/REPLACE this block at the END of your existing hero CSS.
   =========================================================

   NEW TIMING PLAN (32s total cycle):
   Slide 1: 0%–35%   = 0s–11.2s   (plenty of time for full sequence)
   Slide 2: 35%–55%  = 11.2s–17.6s
   Slide 3: 55%–70%  = 17.6s–22.4s
   Slide 4: 70%–85%  = 22.4s–27.2s
   Slide 5: 85%–100% = 27.2s–32s

   Within slide 1 window (0%–35%):
   0–2%   = AANTRIO center appears       (0–0.6s)
   4–8%   = Tech node + line             (1.3–2.6s)
   8–12%  = Growth node + line           (2.6–3.8s)
   12–16% = Talent node + line           (3.8–5.1s)
   16–20% = Managed node + line          (5.1–6.4s)
   20–33% = All hold (2+ sec pause)
   33–35% = All fade out
/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION  (FULL REPLACEMENT)
   ADD/REPLACE this block at the END of your existing hero CSS.
   =========================================================

   NEW TIMING PLAN (32s total cycle):
   Slide 1: 0%–35%   = 0s–11.2s   (plenty of time for full sequence)
   Slide 2: 35%–55%  = 11.2s–17.6s
   Slide 3: 55%–70%  = 17.6s–22.4s
   Slide 4: 70%–85%  = 22.4s–27.2s
   Slide 5: 85%–100% = 27.2s–32s

   Within slide 1 window (0%–35%):
   0–2%   = AANTRIO center appears       (0–0.6s)
   4–8%   = Tech node + line             (1.3–2.6s)
   8–12%  = Growth node + line           (2.6–3.8s)
   12–16% = Talent node + line           (3.8–5.1s)
   16–20% = Managed node + line          (5.1–6.4s)
   20–33% = All hold (2+ sec pause)
   33–35% = All fade out
   ========================================================= */

/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION  (FULL REPLACEMENT)
   ADD/REPLACE this block at the END of your existing hero CSS.
   =========================================================

   NEW TIMING PLAN (32s total cycle):
   Slide 1: 0%–35%   = 0s–11.2s   (plenty of time for full sequence)
   Slide 2: 35%–55%  = 11.2s–17.6s
   Slide 3: 55%–70%  = 17.6s–22.4s
   Slide 4: 70%–85%  = 22.4s–27.2s
   Slide 5: 85%–100% = 27.2s–32s

   Within slide 1 window (0%–35%):
   0–2%   = AANTRIO center appears       (0–0.6s)
   4–8%   = Tech node + line             (1.3–2.6s)
   8–12%  = Growth node + line           (2.6–3.8s)
   12–16% = Talent node + line           (3.8–5.1s)
   16–20% = Managed node + line          (5.1–6.4s)
   20–33% = All hold (2+ sec pause)
   33–35% = All fade out
   ========================================================= */
/* =========================================================
   AANTRIO SLIDE 1 — DIAGRAM ANIMATION  (FULL REPLACEMENT)
   ADD/REPLACE this block at the END of your existing hero CSS.
   =========================================================

   NEW TIMING PLAN (32s total cycle):
   Slide 1: 0%–35%   = 0s–11.2s   (plenty of time for full sequence)
   Slide 2: 35%–55%  = 11.2s–17.6s
   Slide 3: 55%–70%  = 17.6s–22.4s
   Slide 4: 70%–85%  = 22.4s–27.2s
   Slide 5: 85%–100% = 27.2s–32s

   Within slide 1 window (0%–35%):
   0–2%   = AANTRIO center appears       (0–0.6s)
   4–8%   = Tech node + line             (1.3–2.6s)
   8–12%  = Growth node + line           (2.6–3.8s)
   12–16% = Talent node + line           (3.8–5.1s)
   16–20% = Managed node + line          (5.1–6.4s)
   20–33% = All hold (2+ sec pause)
   33–35% = All fade out
   ========================================================= */

/* ── Override master slide animations for ALL 5 slides ── */
.rx-morph-hero .rx-slide-1 {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    animation: rxS1Master 32s ease-in-out infinite !important;
}
.rx-morph-hero .rx-slide-2 { animation: rxS2Master 32s ease-in-out infinite !important; }
.rx-morph-hero .rx-slide-3 { animation: rxS3Master 32s ease-in-out infinite !important; }
.rx-morph-hero .rx-slide-4 { animation: rxS4Master 32s ease-in-out infinite !important; }
.rx-morph-hero .rx-slide-5 { animation: rxS5Master 32s ease-in-out infinite !important; }

@keyframes rxS1Master {
    0%,1%       { opacity:0; visibility:hidden;  transform:translateY(0); }
    2%,33%      { opacity:1; visibility:visible; transform:translateY(0); }
    35%,100%    { opacity:0; visibility:hidden;  transform:translateY(-10px); }
}
@keyframes rxS2Master {
    0%,35%      { opacity:0; visibility:hidden;  transform:translateY(16px); }
    37%,53%     { opacity:1; visibility:visible; transform:translateY(0); }
    55%,100%    { opacity:0; visibility:hidden;  transform:translateY(-10px); }
}
@keyframes rxS3Master {
    0%,55%      { opacity:0; visibility:hidden;  transform:translateY(16px); }
    57%,68%     { opacity:1; visibility:visible; transform:translateY(0); }
    70%,100%    { opacity:0; visibility:hidden;  transform:translateY(-10px); }
}
@keyframes rxS4Master {
    0%,70%      { opacity:0; visibility:hidden;  transform:translateY(16px); }
    72%,83%     { opacity:1; visibility:visible; transform:translateY(0); }
    85%,100%    { opacity:0; visibility:hidden;  transform:translateY(-10px); }
}
@keyframes rxS5Master {
    0%,85%      { opacity:0; visibility:hidden;  transform:translateY(16px); }
    87%,98%     { opacity:1; visibility:visible; transform:translateY(0); }
    100%        { opacity:0; visibility:hidden;  transform:translateY(-10px); }
}

/* ── Diagram wrapper fills the slide ── */
.rx-s1-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf4fb 0%, #f0f6fc 40%, #eef3fa 70%, #f5f0f8 100%);
}

/* ── Inner wrapper: locks the 1000x520 aspect ratio + caps max size
     so node circles (fixed px) and SVG lines (% based) always line up
     the same way, no matter how wide the browser window is ── */
.rx-s1-inner {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1100px;
    max-height: 572px;
    margin: 0 auto;
}

/* ── Scattered ambient dots ── */
.rx-s1-diagram::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, #22a9c0 1.5px, transparent 1.5px),
        radial-gradient(circle, #e69a43 1.5px, transparent 1.5px),
        radial-gradient(circle, #12366f 1px,   transparent 1px),
        radial-gradient(circle, #8176c8 1px,   transparent 1px);
    background-size: 180px 180px, 220px 220px, 140px 140px, 200px 200px;
    background-position: 30px 80px, 110px 40px, 60px 160px, 170px 120px;
    opacity: 0.35;
    pointer-events: none;
}

/* ── SVG overlay for connection lines ── */
.rx-s1-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Connection paths — longer dasharray for longer paths */
.rx-conn {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 0;
}
.rx-dot {
    opacity: 0;
    transform-origin: center;
}

/* ── Center circle ── */
.rx-s1-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rx-s1-center-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(34, 169, 192, 0.2);
    animation: rxRingPulse 3s ease-in-out infinite;
}
.rx-s1-ring-outer {
    width: 220px;
    height: 220px;
    animation-delay: 0s;
}
.rx-s1-ring-mid {
    width: 185px;
    height: 185px;
    border-color: rgba(34, 169, 192, 0.12);
    animation-delay: -1.5s;
}
@keyframes rxRingPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.04); }
}

.rx-s1-center-core {
    position: relative;
    z-index: 2;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffffff, #eef6fb 70%);
    box-shadow:
        0 0 0 2px rgba(34,169,192,0.15),
        0 8px 40px rgba(18,54,111,0.12),
        0 2px 12px rgba(34,169,192,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    animation: rxCenterPop 32s ease-in-out infinite;
}
.rx-s1-logo-img {
    width: 115px;
    height: auto;
    object-fit: contain;
    filter: none !important;
}

/* ── Satellite nodes ── */
.rx-s1-node {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: scale(0.7);
    min-height: 72px;
}

.rx-node-tech    { top: 15%; left: 20%; }
.rx-node-growth  { top: 15%; right: 20%; flex-direction: row-reverse; }
.rx-node-talent  { bottom: 23%; left: 20%; }
.rx-node-managed { bottom: 23%; right: 16%; flex-direction: row-reverse; }

.rx-s1-node-circle {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(18,54,111,0.1);
}
.rx-s1-node-circle svg { width: 38px; height: 38px; }

.rx-nc-blue   { border: 1.8px solid rgba(34,169,192,0.55); }
.rx-nc-orange { border: 1.8px solid rgba(230,154,67,0.6); box-shadow: 0 4px 24px rgba(230,154,67,0.15); }
.rx-nc-navy   { border: 1.8px solid rgba(18,54,111,0.4); }

.rx-s1-node-label { display:flex; flex-direction:column; gap:4px; max-width:150px; }
.rx-node-managed .rx-s1-node-label { max-width: 190px; }
.rx-s1-node-label strong {
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    color: #12366f; text-transform: uppercase;
}
.rx-s1-node-label span { font-size: 11px; color: #5a7fa0; font-weight: 400; letter-spacing: 0.3px; }
.rx-label-right { text-align: right; }

/* ── Bottom tagline ── */
.rx-s1-tagline {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 2.5px;
    color: #5a7fa0;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation: rxTaglineAnim 32s ease-in-out infinite;
}
.rx-s1-tl-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #22a9c0);
}
.rx-s1-tl-line:last-child { background: linear-gradient(90deg, #22a9c0, transparent); }

/* =========================================================
   ANIMATION KEYFRAMES — all timed to 32s cycle
   Slide 1 window: 2%–33%  (about 10 seconds)
   ========================================================= */

/* Center: pops in immediately */
@keyframes rxCenterPop {
    0%,1%    { opacity:0; transform:scale(0.65); }
    3%,4%    { opacity:1; transform:scale(1.06); }
    5%,33%   { opacity:1; transform:scale(1); }
    35%,100% { opacity:0; transform:scale(0.9); }
}

/* TECHNOLOGY — appears at 5% (~1.6s) */
.rx-node-tech { animation: rxNodeTech 32s ease-in-out infinite; }
@keyframes rxNodeTech {
    0%,4%    { opacity:0; transform:scale(0.65) translateY(8px); }
    6%,7%    { opacity:1; transform:scale(1.05) translateY(-2px); }
    8%,33%   { opacity:1; transform:scale(1) translateY(0); }
    35%,100% { opacity:0; transform:scale(0.88); }
}

/* GROWTH — appears at 9% (~2.9s) */
.rx-node-growth { animation: rxNodeGrowth 32s ease-in-out infinite; }
@keyframes rxNodeGrowth {
    0%,8%    { opacity:0; transform:scale(0.65) translateY(8px); }
    10%,11%  { opacity:1; transform:scale(1.05) translateY(-2px); }
    12%,33%  { opacity:1; transform:scale(1) translateY(0); }
    35%,100% { opacity:0; transform:scale(0.88); }
}

/* TALENT — appears at 13% (~4.2s) */
.rx-node-talent { animation: rxNodeTalent 32s ease-in-out infinite; }
@keyframes rxNodeTalent {
    0%,12%   { opacity:0; transform:scale(0.65) translateY(-8px); }
    14%,15%  { opacity:1; transform:scale(1.05) translateY(2px); }
    16%,33%  { opacity:1; transform:scale(1) translateY(0); }
    35%,100% { opacity:0; transform:scale(0.88); }
}

/* MANAGED — appears at 17% (~5.4s) */
.rx-node-managed { animation: rxNodeManaged 32s ease-in-out infinite; }
@keyframes rxNodeManaged {
    0%,16%   { opacity:0; transform:scale(0.65) translateY(-8px); }
    18%,19%  { opacity:1; transform:scale(1.05) translateY(2px); }
    20%,33%  { opacity:1; transform:scale(1) translateY(0); }
    35%,100% { opacity:0; transform:scale(0.88); }
}

/* TAGLINE — appears at 21% (~6.7s) after all 4 nodes visible */
@keyframes rxTaglineAnim {
    0%,20%   { opacity:0; transform:translateX(-50%) translateY(6px); }
    22%,33%  { opacity:1; transform:translateX(-50%) translateY(0); }
    35%,100% { opacity:0; transform:translateX(-50%) translateY(-4px); }
}

/* ── Connection line draws ── */

.rx-conn-tech { animation: rxLineTech 32s ease-in-out infinite; }
@keyframes rxLineTech {
    0%,3%    { stroke-dashoffset:600; opacity:0; }
    4%       { opacity:0.8; }
    7%,33%   { stroke-dashoffset:0; opacity:0.8; }
    35%,100% { opacity:0; stroke-dashoffset:0; }
}

.rx-conn-growth { animation: rxLineGrowth 32s ease-in-out infinite; }
@keyframes rxLineGrowth {
    0%,7%    { stroke-dashoffset:600; opacity:0; }
    8%       { opacity:0.85; }
    11%,33%  { stroke-dashoffset:0; opacity:0.85; }
    35%,100% { opacity:0; stroke-dashoffset:0; }
}

.rx-conn-talent { animation: rxLineTalent 32s ease-in-out infinite; }
@keyframes rxLineTalent {
    0%,11%   { stroke-dashoffset:600; opacity:0; }
    12%      { opacity:0.8; }
    15%,33%  { stroke-dashoffset:0; opacity:0.8; }
    35%,100% { opacity:0; stroke-dashoffset:0; }
}

.rx-conn-managed { animation: rxLineManaged 32s ease-in-out infinite; }
@keyframes rxLineManaged {
    0%,15%   { stroke-dashoffset:600; opacity:0; }
    16%      { opacity:0.75; }
    19%,33%  { stroke-dashoffset:0; opacity:0.75; }
    35%,100% { opacity:0; stroke-dashoffset:0; }
}

/* ── Midpoint dots ── */
.rx-dot-tech    { animation: rxDotT  32s ease-in-out infinite; }
.rx-dot-growth  { animation: rxDotG  32s ease-in-out infinite; }
.rx-dot-talent  { animation: rxDotTL 32s ease-in-out infinite; }
.rx-dot-managed { animation: rxDotM  32s ease-in-out infinite; }

@keyframes rxDotT  { 0%,6%   {opacity:0;transform:scale(0)} 7%,33%  {opacity:1;transform:scale(1)} 35%,100%{opacity:0} }
@keyframes rxDotG  { 0%,10%  {opacity:0;transform:scale(0)} 11%,33% {opacity:1;transform:scale(1)} 35%,100%{opacity:0} }
@keyframes rxDotTL { 0%,14%  {opacity:0;transform:scale(0)} 15%,33% {opacity:1;transform:scale(1)} 35%,100%{opacity:0} }
@keyframes rxDotM  { 0%,18%  {opacity:0;transform:scale(0)} 19%,33% {opacity:1;transform:scale(1)} 35%,100%{opacity:0} }

/* =========================================================
   ALSO UPDATE slides 2–5 internal element animations
   to match new timing windows
   ========================================================= */

/* Slide 2 internal (window 37%–53%) */
.rx-morph-hero .rx-slide-2 .rx-unified-title {
    animation: rxS2TitleNew 32s ease-in-out infinite !important;
}
@keyframes rxS2TitleNew {
    0%,35%   { opacity:0; transform:translateY(28px); clip-path:inset(0 0 100% 0); }
    37%,39%  { opacity:1; transform:translateY(0);    clip-path:inset(0 0 0 0); }
    53%      { opacity:1; }
    55%,100% { opacity:0; transform:translateY(-10px); clip-path:inset(100% 0 0 0); }
}
.rx-morph-hero .rx-slide-2 .rx-unified-subtitle {
    animation: rxS2SubNew 32s ease-in-out infinite !important;
}
@keyframes rxS2SubNew {
    0%,38%   { opacity:0; transform:translateY(18px); }
    41%,53%  { opacity:1; transform:translateY(0); }
    55%,100% { opacity:0; transform:translateY(-8px); }
}
/* SLIDE 2 DESCRIPTION - FIX ONLY */
.rx-morph-hero .rx-slide-2 .rx-unified-description {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 92vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-right: 2px solid #777 !important;

    animation:
        rxS2DescFixed 32s steps(60, end) infinite,
        rxCursorNew .65s step-end infinite !important;
}

@keyframes rxS2DescFixed {
    0%, 41% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(8px);
    }

    43%, 53% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }

    55%, 100% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(-6px);
    }
}

@keyframes rxCursorNew {
    50% {
        border-right-color: transparent;
    }
}

/* Slide 3 internal (window 57%–68%) */
.rx-morph-hero .rx-slide-3 .rx-unified-title {
    animation: rxS3TitleNew 32s ease-in-out infinite, rxFinalColorFlow 5s ease-in-out infinite !important;
}
@keyframes rxS3TitleNew {
    0%,55%   { opacity:0; transform:translateY(22px) scale(.94); filter:blur(8px); }
    58%,60%  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    68%      { opacity:1; }
    70%,100% { opacity:0; transform:translateY(-10px); filter:blur(4px); }
}
.rx-morph-hero .rx-slide-3 .rx-unified-subtitle {
    animation: rxS3SubNew 32s ease-in-out infinite !important;
}
@keyframes rxS3SubNew {
    0%,58%   { opacity:0; transform:translateY(24px); }
    61%,68%  { opacity:1; transform:translateY(0); }
    70%,100% { opacity:0; transform:translateY(-8px); }
}
.rx-morph-hero .rx-slide-3 .rx-unified-description {
    animation: rxS3DescNew 32s ease-in-out infinite !important;
}
@keyframes rxS3DescNew {
    0%,61%   { opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(10px); }
    64%,68%  { opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0); }
    70%,100% { opacity:0; }
}

/* Slide 4 internal (window 72%–83%) */
.rx-morph-hero .rx-slide-4 .rx-unified-title {
    animation: rxS4TitleNew 32s ease-in-out infinite !important;
}
@keyframes rxS4TitleNew {
    0%,70%   { opacity:0; transform:translateX(-45px); clip-path:inset(0 100% 0 0); }
    73%,75%  { opacity:1; transform:translateX(0); clip-path:inset(0 0 0 0); }
    83%      { opacity:1; }
    85%,100% { opacity:0; transform:translateX(20px); clip-path:inset(0 0 0 100%); }
}
.rx-morph-hero .rx-slide-4 .rx-unified-subtitle {
    animation: rxS4SubNew 32s ease-in-out infinite !important;
}
@keyframes rxS4SubNew {
    0%,74%   { opacity:0; transform:translateX(42px); }
    77%,83%  { opacity:1; transform:translateX(0); }
    85%,100% { opacity:0; transform:translateX(-10px); }
}
.rx-morph-hero .rx-slide-4 .rx-unified-description {
    animation: rxS4DescNew 32s ease-in-out infinite !important;
}
@keyframes rxS4DescNew {
    0%,77%   { opacity:0; clip-path:inset(0 100% 0 0); }
    80%,83%  { opacity:1; clip-path:inset(0 0 0 0); }
    85%,100% { opacity:0; }
}

/* Slide 5 internal (window 87%–98%) */
.rx-morph-hero .rx-slide-5 .rx-unified-title {
    animation: rxS5TitleNew 32s ease-in-out infinite !important;
}
@keyframes rxS5TitleNew {
    0%,85%   { opacity:0; transform:translateY(24px) scale(.88); filter:blur(8px); }
    88%,90%  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    98%      { opacity:1; }
    100%     { opacity:0; filter:blur(3px); }
}
.rx-morph-hero .rx-slide-5 .rx-unified-subtitle {
    animation: rxS5SubNew 32s ease-in-out infinite !important;
}
@keyframes rxS5SubNew {
    0%,89%   { opacity:0; transform:translateY(30px); }
    92%,98%  { opacity:1; transform:translateY(0); }
    100%     { opacity:0; }
}
.rx-morph-hero .rx-slide-5 .rx-unified-description {
    animation: rxS5DescNew 32s ease-in-out infinite !important;
}
@keyframes rxS5DescNew {
    0%,92%   { opacity:0; clip-path:inset(0 100% 0 0); }
    95%,98%  { opacity:1; clip-path:inset(0 0 0 0); }
    100%     { opacity:0; }
}

/* Color flow (reused) */
@keyframes rxFinalColorFlow {
    0%  { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

/* =========================================================
   TABLET (≤1024px)
   ========================================================= */
@media (max-width: 1024px) {
    .rx-s1-node-circle { width: 62px; height: 62px; }
    .rx-s1-node-circle svg { width: 32px; height: 32px; }
    .rx-s1-node-label strong { font-size: 11.5px; }
    .rx-s1-node-label span   { font-size: 10px; }
    .rx-s1-center-core { width: 134px; height: 134px; }
    .rx-s1-logo-img { width: 96px; }
    .rx-s1-ring-outer { width:190px; height:190px; }
    .rx-s1-ring-mid   { width:158px; height:158px; }
    .rx-s1-center { width:190px; height:190px; }
    .rx-s1-tagline { bottom: 48px; }
}

/* =========================================================
   MOBILE (≤768px)
   ========================================================= */
@media (max-width: 768px) {
    .rx-node-tech    { top: 10%; left: 1%; }
    .rx-node-growth  { top: 10%; right: 1%; }
    .rx-node-talent  { bottom: 20%; left: 1%; }
    .rx-node-managed { bottom: 20%; right: 1%; }

    .rx-s1-node { gap: 7px; }
    .rx-s1-node-circle { width: 52px; height: 52px; }
    .rx-s1-node-circle svg { width: 26px; height: 26px; }
    .rx-s1-node-label { max-width: 100px; }
    .rx-s1-node-label strong { font-size: 9px; letter-spacing: 1px; }
    .rx-s1-node-label span   { font-size: 8.5px; }

    .rx-s1-center-core { width: 80px; height: 80px; }
    .rx-s1-logo-img    { width: 54px; }
    .rx-s1-ring-outer  { width:120px; height:120px; }
    .rx-s1-ring-mid    { width:96px;  height:96px; }
    .rx-s1-center      { width:120px; height:120px; }

    .rx-s1-tagline {
        bottom: 44px;
        font-size: 7.5px;
        letter-spacing: 1.5px;
        white-space: normal;
        text-align: center;
        width: 90%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .rx-s1-tl-line { width: 20px; }
}

/* =========================================================
   SMALL MOBILE (≤480px)
   ========================================================= */
@media (max-width: 480px) {
    .rx-node-tech    { top: 8%;  left: 0; }
    .rx-node-growth  { top: 8%;  right: 0; }
    .rx-node-talent  { bottom: 18%; left: 0; }
    .rx-node-managed { bottom: 18%; right: 0; }

    .rx-s1-node-circle { width: 44px; height: 44px; }
    .rx-s1-node-circle svg { width: 22px; height: 22px; }
    .rx-s1-node-label strong { font-size: 8px; }
    .rx-s1-node-label span   { font-size: 7.5px; }
    .rx-s1-center-core { width: 70px; height: 70px; }
    .rx-s1-logo-img    { width: 46px; }
}