/* Premium Typography Reset and Micro-animations */

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

/* Custom CSS Scroll-driven SVG pipeline animation metrics */
.pipeline-dash {
    stroke-dasharray: 8;
    animation: dashMove 20s linear infinite;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -1000;
    }
}

/* Structural Accordion dynamic adjustments */
[x-cloak] { display: none !important; }

canvas {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Precise Word-by-Word Sequence Loop */
@keyframes wordWave {
    0%, 25% {
        color: #0022FF; /* Crisp Blue from your Logo340255.png and image_246ed8.png */
    }
    25.01%, 100% {
        color: #A3A3A3; /* Neutral 400 Elegant Gray */
    }
}
/* Workflow Step Isolation Cycle */
@keyframes workflowFill {
    /* Active State: Illuminates to crisp white and punches font prominence */
    0%, 25% {
        opacity: 1;
    }
    0% h3, 25% h3 {
        color: #FFFFFF !important;
    }
    0% .desc-text, 25% .desc-text {
        color: #E5E7EB !important; /* Neutral 200 White Gray */
        font-weight: 700 !important;
    }

    /* Idle State: Drops back to modern muted slate tracking tone */
    25.01%, 100% {
        opacity: 0.9;
    }
    25.01% h3, 100% h3 {
        color: #4B5563 !important; /* Neutral 600 Soft Slate */
    }
    25.01% .desc-text, 100% .desc-text {
        color: #6B7280 !important; /* Neutral 500 Subdued Description */
        font-weight: 500 !important;
    }
}

/* --- Master Workflow Highlights Timeline Engine --- */

/* Step 1 Profile: Active 0s to 1s (0% - 25%) */
@keyframes workflowStepOne {
    0%, 25% { color: #FFFFFF; font-weight: 700; }
    0% h3, 25% h3 { color: #FFFFFF; }
    0% .desc-text, 25% .desc-text { color: #E5E7EB; font-weight: 700; }
    25.01%, 100% { color: #4B5563; font-weight: 500; }
    25.01% h3, 100% h3 { color: #4B5563; }
    25.01% .desc-text, 100% .desc-text { color: #6B7280; font-weight: 500; }
}

/* Step 2 Profile: Active 1s to 2s (25% - 50%) */
@keyframes workflowStepTwo {
    0%, 25% { color: #4B5563; font-weight: 500; }
    0% h3, 25% h3 { color: #4B5563; }
    0% .desc-text, 25% .desc-text { color: #6B7280; font-weight: 500; }
    25.01%, 50% { color: #FFFFFF; font-weight: 700; }
    25.01% h3, 50% h3 { color: #FFFFFF; }
    25.01% .desc-text, 50% .desc-text { color: #E5E7EB; font-weight: 700; }
    50.01%, 100% { color: #4B5563; font-weight: 500; }
    50.01% h3, 100% h3 { color: #4B5563; }
    50.01% .desc-text, 100% .desc-text { color: #6B7280; font-weight: 500; }
}

/* Step 3 Profile: Active 2s to 3s (50% - 75%) */
@keyframes workflowStepThree {
    0%, 50% { color: #4B5563; font-weight: 500; }
    0% h3, 50% h3 { color: #4B5563; }
    0% .desc-text, 50% .desc-text { color: #6B7280; font-weight: 500; }
    50.01%, 75% { color: #FFFFFF; font-weight: 700; }
    50.01% h3, 75% h3 { color: #FFFFFF; }
    50.01% .desc-text, 75% .desc-text { color: #E5E7EB; font-weight: 700; }
    75.01%, 100% { color: #4B5563; font-weight: 500; }
    75.01% h3, 100% h3 { color: #4B5563; }
    75.01% .desc-text, 100% .desc-text { color: #6B7280; font-weight: 500; }
}

/* Step 4 Profile: Active 3s to 4s (75% - 100%) */
@keyframes workflowStepFour {
    0%, 75% { color: #4B5563; font-weight: 500; }
    0% h3, 75% h3 { color: #4B5563; }
    0% .desc-text, 75% .desc-text { color: #6B7280; font-weight: 500; }
    75.01%, 100% { color: #FFFFFF; font-weight: 700; }
    75.01% h3, 100% h3 { color: #FFFFFF; }
    75.01% .desc-text, 100% .desc-text { color: #E5E7EB; font-weight: 700; }
}