/* =========================================================
   CLASSESOFIT CAREER — DARK 3D PREMIUM SECTION
========================================================= */

.career-dark-section {
    --career-blue: #38bdf8;
    --career-indigo: #6366f1;
    --career-purple: #a855f7;
    --career-cyan: #22d3ee;
    position: relative;
    min-height: 760px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 72% 45%, rgba(56,189,248,.13), transparent 25% ), radial-gradient( circle at 25% 75%, rgba(99,102,241,.12), transparent 28% ), #050914;
    color: #fff;
}


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

.career-dark-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: radial-gradient( ellipse at center, black 20%, transparent 78% );
    animation: careerGridMove 20s linear infinite;
}

@keyframes careerGridMove {

    0% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-25px,-20px,0);
    }

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


/* =========================================================
   GLOW SYSTEM
========================================================= */

.career-dark-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: -3;
}

.career-glow-1 {
    width: 350px;
    height: 350px;
    top: 5%;
    right: 10%;
    background: rgba(56,189,248,.13);
    animation: careerGlowOne 8s ease-in-out infinite;
}

.career-glow-2 {
    width: 300px;
    height: 300px;
    bottom: -10%;
    left: 5%;
    background: rgba(99,102,241,.12);
    animation: careerGlowTwo 10s ease-in-out infinite;
}

.career-glow-3 {
    width: 200px;
    height: 200px;
    top: 42%;
    left: 42%;
    background: rgba(168,85,247,.10);
    animation: careerGlowThree 7s ease-in-out infinite;
}

@keyframes careerGlowOne {

    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-35px,30px) scale(1.18);
    }
}

@keyframes careerGlowTwo {

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

    50% {
        transform: translate(40px,-30px);
    }
}

@keyframes careerGlowThree {

    0%,100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: .9;
        transform: scale(1.3);
    }
}


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

.career-dark-container {
    position: relative;
    z-index: 5;
    max-width: 1240px;
    min-height: 760px;
    margin: auto;
    padding: 100px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.career-dark-content {
    position: relative;
    z-index: 10;
}

.career-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(15px);
    color: #9edcff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    animation: careerLabelPulse 3s ease-in-out infinite;
}

    .career-mini-label span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--career-cyan);
        box-shadow: 0 0 8px var(--career-cyan), 0 0 22px var(--career-cyan);
        animation: careerDotPulse 2s ease-in-out infinite;
    }

@keyframes careerLabelPulse {

    0%,100% {
        box-shadow: 0 10px 40px rgba(0,0,0,.2);
    }

    50% {
        box-shadow: 0 10px 40px rgba(56,189,248,.08);
    }
}

@keyframes careerDotPulse {

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

    50% {
        transform: scale(1.7);
    }
}


/* =========================================================
   HEADING
========================================================= */

.career-dark-content h1 {
    margin: 28px 0 24px;
    max-width: 650px;
    font-size: clamp(48px,5.5vw,78px);
    line-height: .97;
    letter-spacing: -4px;
    font-weight: 800;
}

    .career-dark-content h1 span {
        display: block;
        background: linear-gradient( 100deg, #7dd3fc 0%, #818cf8 45%, #c084fc 100% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: careerGradient 5s linear infinite;
    }

@keyframes careerGradient {

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

    100% {
        background-position: 200% center;
    }
}


/* =========================================================
   DESCRIPTION
========================================================= */

.career-dark-content > p {
    max-width: 590px;
    margin: 0;
    color: #98a6bc;
    font-size: 16px;
    line-height: 1.8;
}


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

.career-dark-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}

.career-primary-btn,
.career-outline-btn {
    position: relative;
    min-height: 53px;
    padding: 0 22px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}


/* PRIMARY */

.career-primary-btn {
    color: #06101c;
    background: linear-gradient( 135deg, #7dd3fc, #818cf8 );
    box-shadow: 0 15px 35px rgba(56,189,248,.18);
}

    .career-primary-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent );
        transform: skewX(-20deg);
        animation: careerButtonShine 4s infinite;
    }

@keyframes careerButtonShine {

    0% {
        left: -120%;
    }

    40%,100% {
        left: 140%;
    }
}

.career-primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(56,189,248,.30);
}

.career-primary-btn span {
    position: relative;
    font-size: 18px;
}


/* OUTLINE */

.career-outline-btn {
    color: #dbeafe;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(12px);
}

    .career-outline-btn:hover {
        transform: translateY(-5px);
        border-color: rgba(125,211,252,.45);
        background: rgba(125,211,252,.07);
    }


/* =========================================================
   STATS
========================================================= */

.career-mini-stats {
    display: flex;
    gap: 40px;
    margin-top: 48px;
}

    .career-mini-stats div {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .career-mini-stats div:not(:last-child)::after {
            content: "";
            position: absolute;
            width: 1px;
            height: 32px;
            right: -20px;
            top: 3px;
            background: rgba(255,255,255,.10);
        }

    .career-mini-stats strong {
        font-size: 22px;
        background: linear-gradient( 135deg, #fff, #8bdcfb );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .career-mini-stats span {
        color: #66748a;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.7px;
    }


/* =========================================================
   3D VISUAL AREA
========================================================= */

.career-dark-visual {
    position: relative;
    width: min(500px,100%);
    aspect-ratio: 1;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    transform-style: preserve-3d;
}


/* =========================================================
   3D ORBIT RINGS
========================================================= */

.career-visual-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.ring-one {
    width: 90%;
    height: 42%;
    border: 1px solid rgba(56,189,248,.30);
    transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-20deg);
    box-shadow: 0 0 30px rgba(56,189,248,.06);
    animation: careerRingOne 13s linear infinite;
}

.ring-two {
    width: 72%;
    height: 72%;
    border: 1px solid rgba(129,140,248,.22);
    transform: translate(-50%,-50%) rotateY(68deg) rotateZ(18deg);
    animation: careerRingTwo 11s linear infinite;
}

.ring-three {
    width: 48%;
    height: 48%;
    border: 1px solid rgba(192,132,252,.25);
    transform: translate(-50%,-50%) rotateX(65deg);
    animation: careerRingThree 8s linear infinite;
}

@keyframes careerRingOne {

    from {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-20deg);
    }

    to {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(340deg);
    }
}

@keyframes careerRingTwo {

    from {
        transform: translate(-50%,-50%) rotateY(68deg) rotateZ(18deg);
    }

    to {
        transform: translate(-50%,-50%) rotateY(68deg) rotateZ(-342deg);
    }
}

@keyframes careerRingThree {

    from {
        transform: translate(-50%,-50%) rotateX(65deg) rotateZ(0);
    }

    to {
        transform: translate(-50%,-50%) rotateX(65deg) rotateZ(360deg);
    }
}


/* =========================================================
   3D CORE
========================================================= */

.career-core {
    position: relative;
    width: 205px;
    height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 43% 57% 60% 40% / 45% 40% 60% 55%;
    background: radial-gradient( circle at 30% 25%, rgba(125,211,252,.25), transparent 25% ), linear-gradient( 145deg, rgba(56,189,248,.13), rgba(99,102,241,.10), rgba(168,85,247,.08) );
    border: 1px solid rgba(255,255,255,.17);
    box-shadow: inset 12px 12px 30px rgba(255,255,255,.045), inset -15px -15px 35px rgba(0,0,0,.25), 0 0 45px rgba(56,189,248,.12), 0 30px 80px rgba(0,0,0,.35);
    backdrop-filter: blur(20px);
    transform-style: preserve-3d;
    animation: careerCoreFloat 5s ease-in-out infinite;
}

    .career-core::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: inherit;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: inset 0 0 30px rgba(125,211,252,.06);
    }

    .career-core::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        top: 25px;
        right: 35px;
        border-radius: 50%;
        background: #7dd3fc;
        box-shadow: 0 0 15px #7dd3fc, 0 0 35px rgba(125,211,252,.7);
        animation: careerCoreDot 3s ease-in-out infinite;
    }

@keyframes careerCoreFloat {

    0%,100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(-5deg);
    }

    50% {
        transform: translateY(-18px) rotateX(6deg) rotateY(-7deg) rotateZ(4deg);
    }
}

@keyframes careerCoreDot {

    0%,100% {
        opacity: .5;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


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

.career-core-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    transform: translateZ(30px);
}

.core-small {
    color: #7f8da5;
    font-size: 9px;
    letter-spacing: 3px;
    font-weight: 700;
}

.career-core strong {
    margin: 7px 0;
    font-size: 31px;
    letter-spacing: -1px;
    background: linear-gradient( 100deg, #fff, #8bdcfb, #a5b4fc );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   FLOATING LABELS
========================================================= */

.career-floating-label {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border-radius: 13px;
    color: #dbeafe;
    background: linear-gradient( 145deg, rgba(20,30,50,.82), rgba(9,15,28,.72) );
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 40px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
    font-size: 12px;
    font-weight: 600;
    transform-style: preserve-3d;
}

.label-icon {
    color: #7dd3fc;
    font-size: 16px;
    text-shadow: 0 0 12px rgba(125,211,252,.7);
}

.label-top {
    top: 7%;
    left: 25%;
    animation: careerFloatOne 4s ease-in-out infinite;
}

.label-right {
    top: 44%;
    right: -2%;
    animation: careerFloatTwo 5s ease-in-out infinite .5s;
}

.label-bottom {
    bottom: 7%;
    left: 31%;
    animation: careerFloatThree 4.5s ease-in-out infinite .8s;
}

.label-left {
    top: 52%;
    left: -3%;
    animation: careerFloatFour 5.5s ease-in-out infinite 1s;
}

@keyframes careerFloatOne {

    0%,100% {
        transform: translate3d(0,0,30px) rotate(-2deg);
    }

    50% {
        transform: translate3d(0,-12px,40px) rotate(3deg);
    }
}

@keyframes careerFloatTwo {

    0%,100% {
        transform: translate3d(0,0,20px) rotate(2deg);
    }

    50% {
        transform: translate3d(8px,-10px,40px) rotate(-3deg);
    }
}

@keyframes careerFloatThree {

    0%,100% {
        transform: translate3d(0,0,25px) rotate(2deg);
    }

    50% {
        transform: translate3d(-5px,-12px,40px) rotate(-2deg);
    }
}

@keyframes careerFloatFour {

    0%,100% {
        transform: translate3d(0,0,20px) rotate(-3deg);
    }

    50% {
        transform: translate3d(-7px,-10px,35px) rotate(3deg);
    }
}


/* =========================================================
   EXTRA FLOATING 3D OBJECTS
========================================================= */

.career-float {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.025) );
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
}

.career-float-code {
    width: 58px;
    height: 58px;
    left: 5%;
    top: 20%;
    border-radius: 17px;
    color: #7dd3fc;
    font-size: 19px;
    transform: rotate(-12deg);
    animation: careerCodeFloat 5s ease-in-out infinite;
}

.career-float-star {
    width: 45px;
    height: 45px;
    right: 7%;
    top: 14%;
    border-radius: 50%;
    color: #c084fc;
    font-size: 18px;
    animation: careerStarFloat 4s ease-in-out infinite .5s;
}

.career-float-plus {
    width: 40px;
    height: 40px;
    right: 5%;
    bottom: 17%;
    border-radius: 12px;
    color: #818cf8;
    font-size: 18px;
    animation: careerPlusFloat 4.5s ease-in-out infinite 1s;
}

@keyframes careerCodeFloat {

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

    50% {
        transform: translateY(-15px) rotate(-4deg) rotateX(15deg);
    }
}

@keyframes careerStarFloat {

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

    50% {
        transform: translateY(-13px) rotate(25deg);
    }
}

@keyframes careerPlusFloat {

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

    50% {
        transform: translateY(-12px) rotate(90deg);
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .career-dark-container {
        grid-template-columns: 1fr;
        gap: 80px;
        padding-top: 90px;
        padding-bottom: 90px;
        text-align: center;
    }

    .career-dark-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .career-dark-actions {
        justify-content: center;
    }

    .career-mini-stats {
        justify-content: center;
    }

    .career-dark-visual {
        width: min(460px,85vw);
    }

    .career-float-code {
        left: 0;
    }

    .career-float-star {
        right: 0;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .career-dark-section {
        min-height: auto;
    }

    .career-dark-container {
        min-height: auto;
        padding: 70px 18px 75px;
        gap: 65px;
    }

    .career-mini-label {
        font-size: 9px;
        padding: 8px 12px;
    }

    .career-dark-content h1 {
        margin-top: 23px;
        font-size: clamp(40px,12vw,55px);
        letter-spacing: -2.5px;
    }

    .career-dark-content > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .career-dark-actions {
        flex-direction: column;
        width: 100%;
    }

    .career-primary-btn,
    .career-outline-btn {
        width: 100%;
    }

    .career-mini-stats {
        gap: 28px;
        margin-top: 40px;
    }

        .career-mini-stats div:not(:last-child)::after {
            right: -14px;
        }

    .career-dark-visual {
        width: min(390px,92vw);
        margin-top: 10px;
    }

    .career-core {
        width: 155px;
        height: 155px;
    }

        .career-core strong {
            font-size: 25px;
        }

    .core-small {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .career-floating-label {
        padding: 8px 11px;
        font-size: 10px;
        border-radius: 10px;
    }

    .label-top {
        top: 5%;
        left: 18%;
    }

    .label-right {
        right: -1%;
        top: 42%;
    }

    .label-bottom {
        bottom: 5%;
        left: 24%;
    }

    .label-left {
        left: -1%;
        top: 53%;
    }

    .career-float-code {
        width: 45px;
        height: 45px;
        left: -2%;
        font-size: 15px;
    }

    .career-float-star {
        width: 38px;
        height: 38px;
        right: -2%;
    }

    .career-float-plus {
        width: 34px;
        height: 34px;
        right: 1%;
    }
}


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

@media (max-width: 380px) {

    .career-dark-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .career-dark-content h1 {
        font-size: 40px;
    }

    .career-dark-visual {
        width: 94vw;
    }

    .career-core {
        width: 135px;
        height: 135px;
    }

        .career-core strong {
            font-size: 22px;
        }

    .career-floating-label {
        font-size: 9px;
        padding: 7px 9px;
    }

    .career-mini-stats {
        gap: 21px;
    }

        .career-mini-stats strong {
            font-size: 19px;
        }

        .career-mini-stats span {
            font-size: 8px;
        }
}


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

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

    .career-dark-section *,
    .career-dark-section *::before,
    .career-dark-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}






/* =========================================================
   CLASSESOFIT — CAREER SECTION 02
   PREMIUM LIGHT 3D EXPERIENCE
========================================================= */

.career-light-section {
    --blue: #5965f2;
    --purple: #8b5cf6;
    --cyan: #06b6d4;
    --dark: #101828;
    --text: #344054;
    --muted: #667085;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 125px 25px 120px;
    background: radial-gradient(circle at 10% 18%, rgba(89,101,242,.13), transparent 24%), radial-gradient(circle at 90% 60%, rgba(6,182,212,.10), transparent 25%), radial-gradient(circle at 50% 100%, rgba(139,92,246,.08), transparent 35%), #f8fafc;
}


/* =========================================================
   3D GRID
========================================================= */

.career-bg-grid {
    position: absolute;
    inset: -15% -10%;
    z-index: -10;
    background-image: linear-gradient( rgba(89,101,242,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(89,101,242,.055) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(700px) rotateX(62deg) scale(1.45);
    transform-origin: center bottom;
    opacity: .8;
    mask-image: linear-gradient( to bottom, transparent 0%, black 25%, black 75%, transparent 100% );
    animation: careerGridMove 14s linear infinite;
}

@keyframes careerGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 55px;
    }
}


/* =========================================================
   3D FLOOR LIGHT
========================================================= */

.career-bg-floor {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -260px;
    height: 600px;
    z-index: -9;
    background: radial-gradient( ellipse at center, rgba(89,101,242,.16), rgba(89,101,242,.04) 35%, transparent 70% );
    transform: perspective(600px) rotateX(72deg);
    transform-origin: center top;
    filter: blur(2px);
    animation: floorPulse 7s ease-in-out infinite;
}

@keyframes floorPulse {

    0%,100% {
        opacity: .65;
        transform: perspective(600px) rotateX(72deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: perspective(600px) rotateX(72deg) scale(1.08);
    }
}


/* =========================================================
   AMBIENT GLOWS
========================================================= */

.career-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
    z-index: -6;
    mix-blend-mode: multiply;
}

.glow-a {
    width: 380px;
    height: 380px;
    top: 8%;
    right: -110px;
    background: rgba(89,101,242,.13);
    animation: glowFloatA 9s ease-in-out infinite;
}

.glow-b {
    width: 330px;
    height: 330px;
    left: -120px;
    bottom: 10%;
    background: rgba(6,182,212,.10);
    animation: glowFloatB 11s ease-in-out infinite;
}

.glow-c {
    width: 220px;
    height: 220px;
    top: 38%;
    left: 48%;
    background: rgba(139,92,246,.09);
    animation: glowFloatC 8s ease-in-out infinite;
}

@keyframes glowFloatA {

    0%,100% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(-50px,35px,0) scale(1.22);
    }
}

@keyframes glowFloatB {

    0%,100% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(55px,-40px,0) scale(1.15);
    }
}

@keyframes glowFloatC {

    0%,100% {
        transform: scale(.7);
        opacity: .25;
    }

    50% {
        transform: scale(1.35);
        opacity: .8;
    }
}


/* =========================================================
   FLOATING 3D OBJECTS
========================================================= */

.career-bg-shape {
    position: absolute;
    pointer-events: none;
    z-index: -5;
    transform-style: preserve-3d;
    background: linear-gradient( 135deg, rgba(255,255,255,.7), rgba(255,255,255,.12) );
    border: 1px solid rgba(89,101,242,.13);
    box-shadow: 0 20px 60px rgba(89,101,242,.07), inset 1px 1px 0 rgba(255,255,255,.9);
}

.shape-a {
    width: 95px;
    height: 95px;
    top: 13%;
    left: 4%;
    border-radius: 25px;
    transform: rotate(25deg) rotateX(45deg) rotateY(25deg);
    animation: shapeA 8s ease-in-out infinite;
}

.shape-b {
    width: 65px;
    height: 65px;
    top: 30%;
    right: 7%;
    border-radius: 50%;
    border-color: rgba(6,182,212,.18);
    box-shadow: 0 0 35px rgba(6,182,212,.10), inset 1px 1px 0 white;
    animation: shapeB 6s ease-in-out infinite;
}

.shape-c {
    width: 105px;
    height: 105px;
    right: 5%;
    bottom: 9%;
    border-radius: 28px;
    transform: rotate(35deg) rotateX(50deg) rotateY(-20deg);
    animation: shapeC 9s ease-in-out infinite;
}

@keyframes shapeA {

    0%,100% {
        transform: translate3d(0,0,0) rotate(25deg) rotateX(45deg) rotateY(25deg);
    }

    50% {
        transform: translate3d(0,-28px,30px) rotate(48deg) rotateX(70deg) rotateY(50deg);
    }
}

@keyframes shapeB {

    0%,100% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(-15px,-25px,20px) scale(1.18);
    }
}

@keyframes shapeC {

    0%,100% {
        transform: translate3d(0,0,0) rotate(35deg) rotateX(50deg);
    }

    50% {
        transform: translate3d(-20px,-30px,35px) rotate(55deg) rotateX(75deg);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.career-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient( 135deg, var(--cyan), var(--blue) );
    box-shadow: 0 0 8px rgba(89,101,242,.5), 0 0 22px rgba(89,101,242,.25);
    z-index: -4;
    animation: particleFloat 5s ease-in-out infinite;
}

.particle-1 {
    left: 18%;
    top: 22%;
}

.particle-2 {
    right: 23%;
    top: 17%;
    animation-delay: 1s;
}

.particle-3 {
    left: 44%;
    bottom: 18%;
    animation-delay: 1.7s;
}

.particle-4 {
    right: 11%;
    bottom: 25%;
    animation-delay: 2.2s;
}

.particle-5 {
    left: 7%;
    bottom: 32%;
    animation-delay: 3s;
}

@keyframes particleFloat {

    0%,100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .35;
    }

    50% {
        transform: translate3d(0,-20px,20px) scale(1.7);
        opacity: 1;
    }
}


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

.career-light-container {
    position: relative;
    width: 100%;
    max-width: 1220px;
    margin: auto;
    z-index: 5;
}


/* =========================================================
   HEADING
========================================================= */

.career-section-heading {
    max-width: 760px;
    margin-bottom: 65px;
}

.career-light-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(89,101,242,.15);
    border-radius: 100px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 10px 30px rgba(16,24,40,.05), inset 0 1px 0 white;
    backdrop-filter: blur(14px);
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

    .career-light-tag span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 0 5px rgba(89,101,242,.08), 0 0 18px rgba(89,101,242,.55);
        animation: tagPulse 2s infinite;
    }

@keyframes tagPulse {

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

    50% {
        transform: scale(1.55);
    }
}

.career-section-heading h2 {
    margin: 23px 0 20px;
    font-size: clamp(46px,5.5vw,72px);
    line-height: .97;
    letter-spacing: -3.5px;
    color: var(--dark);
    font-weight: 800;
}

    .career-section-heading h2 span {
        background: linear-gradient( 100deg, #4f46e5, #7c3aed, #0891b2, #4f46e5 );
        background-size: 250% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: careerHeadingGradient 5s linear infinite;
    }

@keyframes careerHeadingGradient {

    from {
        background-position: 0%;
    }

    to {
        background-position: 250%;
    }
}

.career-section-heading p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   MAIN EXPERIENCE
========================================================= */

.career-experience {
    display: grid;
    grid-template-columns: .85fr 1.3fr .85fr;
    gap: 45px;
    align-items: center;
    perspective: 1500px;
}


/* =========================================================
   LEFT STORY
========================================================= */

.career-story {
    position: relative;
    transform-style: preserve-3d;
}

.story-index {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    color: #98a2b3;
}

    .story-index span {
        color: var(--blue);
        font-size: 12px;
        font-weight: 800;
    }

    .story-index div {
        width: 35px;
        height: 1px;
        background: linear-gradient( 90deg, var(--blue), transparent );
    }

    .story-index small {
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

.career-story h3 {
    margin: 0 0 20px;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--dark);
}

    .career-story h3 span {
        display: block;
        background: linear-gradient( 100deg, var(--blue), var(--purple) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.career-story > p {
    margin: 0 0 15px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   STORY FEATURES
========================================================= */

.career-story-features {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .career-story-features > div {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 14px;
        transition: .35s ease;
    }

        .career-story-features > div:hover {
            transform: translateX(8px) translateZ(12px);
            background: rgba(255,255,255,.65);
            box-shadow: 0 12px 30px rgba(16,24,40,.06);
        }

        .career-story-features > div > span {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: var(--blue);
            background: linear-gradient( 145deg, #ffffff, #eef2ff );
            box-shadow: 5px 5px 12px rgba(16,24,40,.07), inset 1px 1px 0 white;
            font-size: 14px;
        }

    .career-story-features strong {
        display: block;
        color: var(--dark);
        font-size: 12px;
    }

    .career-story-features small {
        display: block;
        margin-top: 2px;
        color: #98a2b3;
        font-size: 10px;
    }


/* =========================================================
   CENTER 3D CAREER PATH
========================================================= */

.career-path {
    position: relative;
    height: 600px;
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: transform .18s ease-out;
}


/* =========================================================
   PATH ATMOSPHERE
========================================================= */

.path-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 330px;
    height: 530px;
    transform: translate(-50%,-50%);
    background: radial-gradient( ellipse, rgba(89,101,242,.15), rgba(139,92,246,.06) 35%, transparent 70% );
    filter: blur(30px);
    animation: pathGlowPulse 5s ease-in-out infinite;
}

@keyframes pathGlowPulse {

    0%,100% {
        opacity: .45;
        transform: translate(-50%,-50%) scale(.92);
    }

    50% {
        opacity: .9;
        transform: translate(-50%,-50%) scale(1.08);
    }
}


/* =========================================================
   PATH LINE
========================================================= */

.career-path-line {
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: linear-gradient( to bottom, transparent, rgba(89,101,242,.12), rgba(89,101,242,.45), rgba(139,92,246,.22), transparent );
    box-shadow: 0 0 18px rgba(89,101,242,.15);
}

    .career-path-line::before,
    .career-path-line::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 12px;
        height: 12px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: white;
        border: 2px solid var(--blue);
        box-shadow: 0 0 18px rgba(89,101,242,.5);
    }

    .career-path-line::before {
        top: 10%;
    }

    .career-path-line::after {
        bottom: 10%;
    }

.path-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 35%;
    border-radius: 20px;
    background: linear-gradient( to bottom, var(--cyan), #6366f1, var(--purple) );
    box-shadow: 0 0 14px rgba(89,101,242,.6), 0 0 30px rgba(89,101,242,.25);
    animation: pathProgress 5s ease-in-out infinite;
}

@keyframes pathProgress {

    0%,100% {
        height: 20%;
    }

    50% {
        height: 80%;
    }
}


/* =========================================================
   ENERGY DOT ON PATH
========================================================= */

.career-path-line .path-progress::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 10px;
    height: 10px;
    transform: translate(-50%,50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(89,101,242,.16), 0 0 20px rgba(89,101,242,.9), 0 0 40px rgba(6,182,212,.5);
}


/* =========================================================
   CENTER CORE
========================================================= */

.career-path-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 165px;
    height: 165px;
    transform: translate(-50%,-50%);
    border-radius: 43% 57% 55% 45% / 48% 44% 56% 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(235,239,255,.95) );
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: inset 10px 10px 25px rgba(255,255,255,.95), inset -12px -12px 25px rgba(89,101,242,.10), 0 25px 70px rgba(89,101,242,.18), 0 0 0 12px rgba(255,255,255,.45), 0 0 0 24px rgba(89,101,242,.035);
    z-index: 8;
    transform-style: preserve-3d;
    animation: coreMove 5s ease-in-out infinite;
}

    .career-path-core::before {
        content: "";
        position: absolute;
        inset: -9px;
        border-radius: inherit;
        border: 1px dashed rgba(89,101,242,.25);
        animation: coreRing 12s linear infinite;
    }

    .career-path-core::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        top: 13px;
        right: 20px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 15px var(--cyan), 0 0 30px rgba(6,182,212,.5);
        animation: coreDot 2s ease-in-out infinite;
    }

@keyframes coreMove {

    0%,100% {
        transform: translate(-50%,-50%) rotate(-3deg) translateZ(0);
    }

    50% {
        transform: translate(-50%,-50%) translateY(-12px) rotate(4deg) translateZ(25px);
    }
}

@keyframes coreRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coreDot {

    0%,100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}

.core-inner {
    position: relative;
    z-index: 2;
    transform: translateZ(25px);
}

    .core-inner small {
        display: block;
        color: #98a2b3;
        font-size: 7px;
        letter-spacing: 2.5px;
        font-weight: 800;
    }

    .core-inner strong {
        display: block;
        margin: 7px 0;
        font-size: 24px;
        line-height: .9;
        background: linear-gradient( 135deg, #4f46e5, #7c3aed, #0891b2 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .core-inner span {
        color: #98a2b3;
        font-size: 7px;
        letter-spacing: 1.5px;
    }


/* =========================================================
   ROLE ITEMS
========================================================= */

.career-path-item {
    position: absolute;
    width: 255px;
    min-height: 94px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(247,249,255,.70) );
    box-shadow: 0 18px 45px rgba(16,24,40,.08), inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(89,101,242,.035);
    backdrop-filter: blur(18px);
    transform-style: preserve-3d;
    z-index: 10;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}

    .career-path-item::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 120deg, rgba(255,255,255,.5), transparent 35% );
        pointer-events: none;
    }

    .career-path-item:hover {
        transform: translateY(-9px) translateZ(35px) rotateX(2deg);
        border-color: rgba(89,101,242,.25);
        box-shadow: 0 35px 70px rgba(16,24,40,.14), 0 0 35px rgba(89,101,242,.08), inset 1px 1px 0 white;
    }


    /* =========================================================
   CONNECTOR DOT
========================================================= */

    .career-path-item::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background: white;
        border: 2px solid var(--blue);
        box-shadow: 0 0 15px rgba(89,101,242,.5);
    }

.path-item-1::after,
.path-item-3::after {
    right: -48px;
}

.path-item-2::after,
.path-item-4::after {
    left: -48px;
}


/* NUMBER */

.path-number {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--blue);
    background: linear-gradient( 145deg, #ffffff, #eef2ff );
    box-shadow: 4px 4px 10px rgba(16,24,40,.07), inset 1px 1px 0 white;
    font-size: 9px;
    font-weight: 800;
}


/* CONTENT */

.path-content {
    min-width: 0;
}

    .path-content small {
        display: block;
        color: #98a2b3;
        font-size: 6px;
        letter-spacing: 1.3px;
        font-weight: 800;
    }

    .path-content h4 {
        margin: 4px 0;
        color: var(--dark);
        font-size: 14px;
    }

    .path-content p {
        margin: 0;
        color: #667085;
        font-size: 9px;
        line-height: 1.45;
    }


/* ARROW */

.career-path-item > a {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--dark);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: .35s ease;
}

    .career-path-item > a:hover {
        background: var(--blue);
        transform: rotate(45deg) translateZ(8px);
        box-shadow: 0 8px 20px rgba(89,101,242,.35);
    }


/* =========================================================
   ROLE POSITIONS
========================================================= */

.path-item-1 {
    top: 3%;
    left: -4%;
    animation: pathItemOne 5s ease-in-out infinite;
}

.path-item-2 {
    top: 22%;
    right: -4%;
    animation: pathItemTwo 5.5s ease-in-out infinite .5s;
}

.path-item-3 {
    bottom: 22%;
    left: -4%;
    animation: pathItemThree 5s ease-in-out infinite 1s;
}

.path-item-4 {
    bottom: 3%;
    right: -4%;
    animation: pathItemFour 5.5s ease-in-out infinite 1.5s;
}

@keyframes pathItemOne {

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

    50% {
        transform: translateY(-9px) translateZ(8px);
    }
}

@keyframes pathItemTwo {

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

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

@keyframes pathItemThree {

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

    50% {
        transform: translateY(-9px) translateZ(8px);
    }
}

@keyframes pathItemFour {

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

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


/* =========================================================
   RIGHT VALUES
========================================================= */

.career-values {
    padding-left: 15px;
    transform-style: preserve-3d;
}

.values-top {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.values-line {
    width: 35px;
    height: 1px;
    background: linear-gradient( 90deg, var(--blue), transparent );
}

.career-values h3 {
    margin: 22px 0 17px;
    font-size: 31px;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--dark);
}

    .career-values h3 span {
        display: block;
        background: linear-gradient( 100deg, var(--blue), var(--purple) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.career-values > p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   VALUE ITEMS
========================================================= */

.value-item {
    display: flex;
    gap: 12px;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(232,235,240,.9);
    border-radius: 12px;
    transition: .35s ease;
}

    .value-item:hover {
        transform: translateX(-6px) translateZ(15px);
        background: rgba(255,255,255,.55);
        box-shadow: 0 12px 30px rgba(16,24,40,.05);
    }

    .value-item:last-child {
        border-bottom: 0;
    }

.value-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient( 145deg, #ffffff, #eef2ff );
    color: var(--blue);
    box-shadow: 4px 4px 10px rgba(16,24,40,.06), inset 1px 1px 0 white;
    font-size: 8px;
    font-weight: 800;
}

.value-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dark);
    font-size: 11px;
}

.value-item p {
    margin: 0;
    color: #98a2b3;
    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   FINAL CTA
========================================================= */

.career-final-cta {
    position: relative;
    overflow: hidden;
    margin-top: 70px;
    padding: 34px 38px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: linear-gradient( 135deg, #0b1220, #141e36 55%, #18223a );
    box-shadow: 0 30px 75px rgba(16,24,40,.17);
    color: #fff;
    transform-style: preserve-3d;
}

    .career-final-cta::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: 8%;
        bottom: -350px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.015), 0 0 0 105px rgba(255,255,255,.01);
        animation: ctaRing 14s linear infinite;
    }

    .career-final-cta::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        top: -190px;
        left: 30%;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(89,101,242,.20), transparent 70% );
        filter: blur(15px);
        animation: ctaGlow 6s ease-in-out infinite;
    }

@keyframes ctaRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ctaGlow {

    0%,100% {
        transform: translateX(0);
        opacity: .4;
    }

    50% {
        transform: translateX(80px);
        opacity: .8;
    }
}

.cta-decoration {
    position: absolute;
    width: 8px;
    height: 8px;
    right: 35%;
    top: 22px;
    border-radius: 50%;
    background: #7dd3fc;
    box-shadow: 0 0 20px #7dd3fc, 0 0 45px rgba(125,211,252,.35);
    animation: ctaDot 3s infinite;
}

@keyframes ctaDot {

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

    50% {
        transform: translateY(20px) scale(1.35);
        opacity: 1;
    }
}

.cta-text {
    position: relative;
    z-index: 2;
}

    .cta-text small {
        color: #94a3b8;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.6px;
    }

    .cta-text h3 {
        margin: 8px 0 7px;
        font-size: 25px;
        letter-spacing: -.6px;
    }

        .cta-text h3 span {
            color: #a5b4fc;
        }

    .cta-text p {
        max-width: 560px;
        margin: 0;
        color: #94a3b8;
        font-size: 11px;
        line-height: 1.65;
    }


/* =========================================================
   CTA BUTTON
========================================================= */

.career-cta-button {
    position: relative;
    z-index: 3;
    min-height: 52px;
    padding: 0 21px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 13px;
    color: #101828;
    background: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 15px 30px rgba(0,0,0,.18);
    transition: .35s ease;
}

    .career-cta-button:hover {
        transform: translateY(-5px) translateZ(15px);
        box-shadow: 0 25px 45px rgba(0,0,0,.30);
    }

    .career-cta-button b {
        font-size: 17px;
        transition: .3s ease;
    }

    .career-cta-button:hover b {
        transform: translate(4px,-4px);
    }


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

@media (max-width: 1050px) {

    .career-experience {
        grid-template-columns: 1fr 1.25fr;
        gap: 35px;
    }

    .career-values {
        grid-column: 1 / -1;
        max-width: 700px;
        margin: 15px auto 0;
        padding-left: 0;
        text-align: center;
    }

    .values-top {
        justify-content: center;
    }

    .career-values h3 span {
        display: inline;
    }

    .value-item {
        text-align: left;
    }

    .career-path-item {
        width: 235px;
    }

    .path-item-1,
    .path-item-3 {
        left: -2%;
    }

    .path-item-2,
    .path-item-4 {
        right: -2%;
    }
}


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

@media (max-width: 700px) {

    .career-light-section {
        padding: 75px 16px 80px;
    }

    .career-bg-grid {
        background-size: 40px 40px;
        opacity: .35;
    }

    .career-bg-shape {
        opacity: .55;
    }

    .career-section-heading {
        margin-bottom: 45px;
    }

        .career-section-heading h2 {
            font-size: clamp(40px,11vw,53px);
            letter-spacing: -2.5px;
        }

        .career-section-heading p {
            font-size: 13px;
            line-height: 1.75;
        }


    /* MAIN */

    .career-experience {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }


    /* STORY */

    .career-story {
        width: 100%;
    }

        .career-story h3 {
            font-size: 34px;
        }


    /* PATH */

    .career-path {
        width: 100%;
        height: 650px;
        perspective: 1000px;
    }

    .career-path-line {
        left: 50%;
    }

    .career-path-core {
        width: 135px;
        height: 135px;
    }

    .core-inner strong {
        font-size: 21px;
    }


    /* PATH CARDS */

    .career-path-item {
        width: 225px;
        min-height: 85px;
        padding: 10px;
    }

    .path-item-1 {
        left: 0;
        top: 2%;
    }

    .path-item-2 {
        right: 0;
        top: 22%;
    }

    .path-item-3 {
        left: 0;
        bottom: 22%;
    }

    .path-item-4 {
        right: 0;
        bottom: 2%;
    }

    .career-path-item::after {
        display: none;
    }


    /* VALUES */

    .career-values {
        width: 100%;
        padding: 0;
        text-align: left;
    }

    .values-top {
        justify-content: flex-start;
    }

    .career-values h3 {
        font-size: 29px;
    }

        .career-values h3 span {
            display: block;
        }


    /* CTA */

    .career-final-cta {
        margin-top: 50px;
        padding: 27px 21px;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 20px;
    }

    .career-cta-button {
        width: 100%;
    }
}


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

@media (max-width: 400px) {

    .career-light-section {
        padding-left: 13px;
        padding-right: 13px;
    }

    .career-path {
        height: 610px;
    }

    .career-path-item {
        width: 195px;
        padding: 9px;
        gap: 8px;
    }

    .path-content h4 {
        font-size: 12px;
    }

    .path-content p {
        font-size: 8px;
    }

    .path-number {
        width: 28px;
        height: 28px;
    }

    .career-path-core {
        width: 115px;
        height: 115px;
    }

    .core-inner strong {
        font-size: 18px;
    }

    .career-story h3 {
        font-size: 31px;
    }

    .cta-text h3 {
        font-size: 21px;
    }
}


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

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

    .career-light-section *,
    .career-light-section *::before,
    .career-light-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}