:root {
    --mx-red: #E43724;
    --mx-red-2: #F2712E; /* warm orange, gradient partner */
    --mx-red-rgb: 228, 55, 36;
    --mx-navy: #223D7A;
    --mx-navy-rgb: 34, 61, 122;
    --mx-base: hsl(224, 48%, 6%); /* deep navy-black page */
    /*--mx-surface: hsl(224, 42%, 11%);*/ /* panel */
    --mx-surface: hsl(222, 56%, 31%,1); /* panel */
}
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.step-title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.step-num-big {
    font-size: 3.75rem;
    color: var(--mx-red);
    opacity: .18;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-5xl {
    max-width: 64rem;
}

/* ---- Brand gradients ---- */
.bg-gradient-brand {
    background-image: linear-gradient(90deg, var(--mx-red), var(--mx-red-2));
}

.text-gradient-brand {
    background-image: linear-gradient(90deg, var(--mx-red), var(--mx-red-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Progress rail ---- */
.process-rail {
    position: relative;
    height: 2px;
    top: 24px;
    margin-bottom: -2px;
    width: calc(100% - 96px);
    margin-left: 48px;
}

    .process-rail .rail-bg {
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.1);
        border-radius: 999px;
    }

#process-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    transition: width .7s ease-in-out;
}

/* ---- Step buttons ---- */
.process-step-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
}

    .process-step-btn:focus-visible {
        outline: 2px solid var(--mx-red);
        outline-offset: 4px;
        border-radius: 8px;
    }

.step-circle {
    position: relative;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    border: 2px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    transition: background .4s ease, border-color .4s ease, transform .3s ease;
}

.process-step-btn:hover .step-circle {
    transform: translateY(-2px);
}

.step-n {
   
    font-weight: 700;
    font-size: .8rem;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.step-label {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    transition: color .3s ease;
}

/* Completed → navy (the logo's wordmark colour) */
.process-step-btn.done .step-circle {
    background: rgba(var(--mx-navy-rgb), .45);
    border-color: rgba(var(--mx-navy-rgb), .9);
}

.process-step-btn.done .step-n {
    color: #000;
}

.process-step-btn.done .step-label {
    color: rgba(255,255,255,.6);
}

/* Active → red (the logo's mark colour) */
.process-step-btn.active .step-circle {
    background-image: linear-gradient(90deg, var(--mx-red), var(--mx-red-2));
    border-color: var(--mx-red);
    box-shadow: 0 0 22px rgba(var(--mx-red-rgb), .35);
}

.process-step-btn.active .step-n {
    color: #fff;
}

.process-step-btn.active .step-label {
    color: #fff;
}

.pulse-ring {
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 2px solid var(--mx-red);
    animation: pulse-ring 1.8s cubic-bezier(.25,.6,.35,1) infinite;
    pointer-events: none;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: .8;
    }

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

/* ---- Animation panel ---- */
#process-anim-wrap {
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    border: 1px solid rgba(var(--mx-navy-rgb), .55);
    background: var(--mx-surface);
    overflow: hidden;
    padding: .5rem;
    transition: opacity .25s;
}

#process-desc-wrap {
    transition: opacity .25s;
}

/* ---- SVG scene animations ---- */
@keyframes billet-glow {
    0%,100% {
        opacity: .35
    }

    50% {
        opacity: 1
    }
}

@keyframes ram-push {
    0% {
        transform: translateX(0)
    }

    60%,100% {
        transform: translateX(46px)
    }
}

@keyframes profile-out {
    0% {
        width: 0
    }

    60%,100% {
        width: 150px
    }
}

@keyframes run-out {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(150px)
    }
}

@keyframes drop-fall {
    0% {
        transform: translateY(0);
        opacity: .9
    }

    100% {
        transform: translateY(38px);
        opacity: 0
    }
}

@keyframes steam-rise {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }

    40% {
        opacity: .5
    }

    100% {
        opacity: 0;
        transform: translateY(-18px)
    }
}

@keyframes spin-fan {
    to {
        transform: rotate(360deg)
    }
}

@keyframes stretch-pull {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(9px)
    }
}

@keyframes saw-drop {
    0%,55% {
        transform: translateY(-34px)
    }

    70%,85% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-34px)
    }
}

@keyframes spin-saw {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spark-fly {
    0%,60% {
        opacity: 0
    }

    70% {
        opacity: 1
    }

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

@keyframes scan-sweep {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(230px)
    }
}

@keyframes tick-in {
    0%,70% {
        opacity: 0;
        transform: scale(.4)
    }

    85% {
        opacity: 1;
        transform: scale(1.15)
    }

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

.an-billet {
    animation: billet-glow 2.4s ease-in-out infinite;
}

.an-ram {
    animation: ram-push 3.2s ease-in-out infinite;
}

.an-extrude {
    animation: profile-out 3.2s ease-in-out infinite;
}

.an-runout {
    animation: run-out 3.6s linear infinite;
}

.an-drop {
    animation: drop-fall 1s linear infinite;
}

.an-steam {
    animation: steam-rise 2.2s ease-out infinite;
}

.an-fan {
    animation: spin-fan 1.1s linear infinite;
}

.an-jaw-l {
    animation: stretch-pull 2.6s ease-in-out infinite;
}

.an-jaw-r {
    animation: stretch-pull 2.6s ease-in-out infinite reverse;
}

.an-saw {
    animation: saw-drop 2.8s ease-in-out infinite;
}

.an-blade {
    animation: spin-saw .6s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.an-spark {
    animation: spark-fly 2.8s ease-out infinite;
}

.an-scan {
    animation: scan-sweep 3s ease-in-out infinite;
}

.an-tick {
    animation: tick-in 3s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}