/* ============================================================
   PRIMABI — animations.css
   3D scroll-reveal · parallax · tilt cards · magnetic buttons
   Drop-in — zero HTML changes required
   ============================================================ */

/* ── Respect user preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   1. UNIVERSAL SCROLL-REVEAL BASE
   ============================================================ */

/* Every animatable element starts hidden */
[data-anim] {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ── Fade up (default) ── */
[data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Fade in ── */
[data-anim="fade-in"] {
    opacity: 0;
    transition: opacity 0.85s ease;
}

/* ── Slide from left ── */
[data-anim="slide-left"] {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Slide from right ── */
[data-anim="slide-right"] {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Scale up ── */
[data-anim="scale-up"] {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Flip in (3D) ── */
[data-anim="flip-up"] {
    opacity: 0;
    transform: perspective(600px) rotateX(20deg) translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Visible state (added by JS) ── */
[data-anim].is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Stagger delay utilities ── */
[data-delay="100"] {
    transition-delay: 0.1s;
}

[data-delay="200"] {
    transition-delay: 0.2s;
}

[data-delay="300"] {
    transition-delay: 0.3s;
}

[data-delay="400"] {
    transition-delay: 0.4s;
}

[data-delay="500"] {
    transition-delay: 0.5s;
}

[data-delay="600"] {
    transition-delay: 0.6s;
}

[data-delay="700"] {
    transition-delay: 0.7s;
}

[data-delay="800"] {
    transition-delay: 0.8s;
}


/* ============================================================
   2. PRELOADER ENHANCED — 3D scale-in
   ============================================================ */

.preloader__inner {
    animation: preloaderFloat 3s ease-in-out infinite;
}

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

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

/* Particle dots behind preloader logo */
.preloader__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .preloader__particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--teal-bright);
        opacity: 0;
        animation: particleFly 3s ease-in-out infinite;
    }

        .preloader__particles span:nth-child(1) {
            left: 20%;
            top: 30%;
            animation-delay: 0s;
            animation-duration: 2.8s;
            width: 4px;
            height: 4px;
        }

        .preloader__particles span:nth-child(2) {
            left: 75%;
            top: 20%;
            animation-delay: 0.4s;
            animation-duration: 3.2s;
            background: var(--sky);
        }

        .preloader__particles span:nth-child(3) {
            left: 55%;
            top: 70%;
            animation-delay: 0.8s;
            animation-duration: 2.6s;
            width: 5px;
            height: 5px;
        }

        .preloader__particles span:nth-child(4) {
            left: 30%;
            top: 65%;
            animation-delay: 1.2s;
            animation-duration: 3.5s;
            background: var(--cyan);
            width: 3px;
            height: 3px;
        }

        .preloader__particles span:nth-child(5) {
            left: 85%;
            top: 50%;
            animation-delay: 0.2s;
            animation-duration: 2.9s;
        }

        .preloader__particles span:nth-child(6) {
            left: 10%;
            top: 50%;
            animation-delay: 1.6s;
            animation-duration: 3.1s;
            background: var(--sky);
            width: 4px;
            height: 4px;
        }

        .preloader__particles span:nth-child(7) {
            left: 60%;
            top: 15%;
            animation-delay: 0.6s;
            animation-duration: 2.7s;
            width: 3px;
            height: 3px;
        }

        .preloader__particles span:nth-child(8) {
            left: 45%;
            top: 80%;
            animation-delay: 1.0s;
            animation-duration: 3.3s;
            background: var(--cyan);
        }

@keyframes particleFly {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    20% {
        opacity: 0.8;
        transform: translateY(-20px) scale(1);
    }

    80% {
        opacity: 0.4;
        transform: translateY(-60px) scale(0.7);
    }

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


/* ============================================================
   3. HERO SECTION — parallax layers + text cinematic entry
   ============================================================ */

/* Title word-by-word reveal (JS splits words) */
.hero__title .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(25deg);
    transform-origin: 50% 100%;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

    .hero__title .word.is-visible {
        opacity: 1;
        transform: none;
    }

/* Badge slide-down */
.hero__badge {
    animation: heroItemIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

/* Desc fade-up */
.hero__desc {
    animation: heroItemIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

/* CTA button */
.hero__cta {
    animation: heroItemIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

@keyframes heroItemIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glass stats bar slide up */
.hero-glass-stats {
    animation: glassIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both;
}

@keyframes glassIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Stat number pop */
.hgs-title {
    animation: statPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--stagger, 2s) both;
}

.hgs-col:nth-child(1) .hgs-title {
    --stagger: 2.1s;
}

.hgs-col:nth-child(2) .hgs-title {
    --stagger: 2.3s;
}

.hgs-col:nth-child(3) .hgs-title {
    --stagger: 2.5s;
}

.hgs-col:nth-child(4) .hgs-title {
    --stagger: 2.7s;
}

@keyframes statPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll mouse bounce — already in your CSS, keep it */

/* ── Parallax: bg image moves at 0.4x scroll speed (set by JS) ── */
.hero__bg img {
    will-change: transform;
    transition: transform 0s linear;
}


/* ============================================================
   4. 3D TILT CARDS — feature cards, module cards, price cards
   ============================================================ */

/* Perspective wrapper (JS adds this class) */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    will-change: transform;
    cursor: default;
}

/* Inner shine layer (JS injects .tilt-shine inside each card) */
.tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18) 0%, transparent 60% );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.tilt-card:hover .tilt-shine {
    opacity: 1;
}

/* Feature cards 3D hover */
.feature-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.8s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.8s ease !important;
    transform-style: preserve-3d;
    position: relative;
}

/* Module cards */
.module-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
    transform-style: preserve-3d;
    position: relative;
}

    .module-card:hover {
        box-shadow: 0 24px 64px -16px rgba(14,117,109,0.25) !important;
    }

/* Pricing cards */
.price-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
    transform-style: preserve-3d;
    position: relative;
}

    .price-card:hover {
        box-shadow: 0 28px 72px -20px rgba(0,0,0,0.20) !important;
    }

.price-card--featured:hover {
    box-shadow: 0 36px 80px -20px rgba(14,117,109,0.35) !important;
}

/* Stats card tilt */
.stats-bar__card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
    transform-style: preserve-3d;
    position: relative;
}

/* Ops panels tilt */
.ops__panel {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
    transform-style: preserve-3d;
    position: relative;
}

    .ops__panel:hover {
        box-shadow: 0 20px 56px -16px rgba(14,117,109,0.15) !important;
    }


/* ============================================================
   5. MAGNETIC BUTTONS
   ============================================================ */

.hero__cta,
.demo-btn,
.why__nav-btn,
.nav-arrow,
.mod-arrow,
.price-btn {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
    will-change: transform;
}

    /* CTA arrow spin on hover */
    .hero__cta:hover .hero__cta-arrow {
        animation: arrowBounce 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

@keyframes arrowBounce {
    0% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(6px);
    }

    70% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(3px);
    }
}


/* ============================================================
   6. HOW IT WORKS — image parallax depth + step reveals
   ============================================================ */

.hiw__image-wrap {
    overflow: hidden;
    transition: box-shadow 0.5s ease;
}

    .hiw__image-wrap:hover {
        box-shadow: 0 32px 72px -20px rgba(0,0,0,0.18) !important;
    }

.hiw__image {
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw__image-wrap:hover .hiw__image {
    transform: scale(1.04);
}

/* Each step: slide in from right with stagger */
.hiw__step {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

    .hiw__step.is-visible {
        opacity: 1;
        transform: none;
    }

    .hiw__step:nth-child(1) {
        transition-delay: 0.05s;
    }

    .hiw__step:nth-child(2) {
        transition-delay: 0.15s;
    }

    .hiw__step:nth-child(3) {
        transition-delay: 0.25s;
    }

    .hiw__step:nth-child(4) {
        transition-delay: 0.35s;
    }

/* Left-side step text (reverse body) */
.hiw__body--reverse .hiw__step {
    transform: translateX(-40px);
}

    .hiw__body--reverse .hiw__step.is-visible {
        transform: none;
    }

/* HIW header */
.hiw__header-left {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

    .hiw__header-left.is-visible {
        opacity: 1;
        transform: none;
    }

.hiw__team {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

    .hiw__team.is-visible {
        opacity: 1;
        transform: none;
    }


/* ============================================================
   7. STATS BAR — number pop + icon float
   ============================================================ */

.stats-bar__item {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

    .stats-bar__item.is-visible {
        opacity: 1;
        transform: none;
    }

    .stats-bar__item:nth-child(1) {
        transition-delay: 0.0s;
    }

    .stats-bar__item:nth-child(3) {
        transition-delay: 0.12s;
    }

    .stats-bar__item:nth-child(5) {
        transition-delay: 0.24s;
    }

    .stats-bar__item:nth-child(7) {
        transition-delay: 0.36s;
    }

    /* Icon pulse on visible */
    .stats-bar__item.is-visible .stats-bar__icon {
        animation: iconPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
    }

@keyframes iconPulse {
    0% {
        transform: scale(0.6);
        background: #e0f2f1;
    }

    60% {
        transform: scale(1.15);
    }

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


/* ============================================================
   8. WHY PRIMABL — step icon hover + image 3D float
   ============================================================ */

/* ── CRITICAL: Why Primabl section always visible ── */
/* Override any animation hiding on this whole section */
.why-primabl,
.why-primabl .why__image-wrap,
.why-primabl .why__image,
.why-primabl .why__badge,
.why-primabl .why__title,
.why-primabl .why__eyebrow,
.why-primabl .why__eyebrow-line,
.why-primabl .why__body,
.why-primabl .why__image-col,
.why-primabl .why__slides-col,
.why-primabl .why__slide,
.why-primabl .why__slide.is-active,
.why-primabl .why__step,
.why-primabl .why__step-icon,
.why-primabl .why__step-content,
.why-primabl .why__step-num,
.why-primabl .why__step-desc,
.why-primabl .why__nav {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

    /* Keep the eyebrow line drawn */
    .why-primabl .why__eyebrow-line {
        transform: scaleX(1) !important;
    }

/* Image float animation */
.why__image {
    animation: floatY 5s ease-in-out infinite !important;
}

@keyframes floatY {
    0%, 100% {
        transform: translateY(0px) !important;
    }

    50% {
        transform: translateY(-10px) !important;
    }
}

/* Badge glow pulse */
.why__badge {
    animation: badgeGlow 3s ease-in-out infinite !important;
}

@keyframes badgeGlow {
    0%,100% {
        box-shadow: 0 8px 24px rgba(15,118,110,0.35);
    }

    50% {
        box-shadow: 0 14px 36px rgba(15,118,110,0.55);
    }
}

/* Step icon 3D flip on hover */
.why__step-icon {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease !important;
}



/* ============================================================
   9. FEATURE CARDS CAROUSEL — 3D entrance
   ============================================================ */

.feature-card {
    opacity: 0;
    transform: translateY(40px) perspective(800px) rotateX(8deg);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.8s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.8s ease !important;
}

    .feature-card.is-visible {
        opacity: 1;
        transform: translateY(0) perspective(800px) rotateX(0deg);
    }

    .feature-card:nth-child(1) {
        transition-delay: 0.0s;
    }

    .feature-card:nth-child(2) {
        transition-delay: 0.1s;
    }

    .feature-card:nth-child(3) {
        transition-delay: 0.2s;
    }

    .feature-card:nth-child(4) {
        transition-delay: 0.3s;
    }

    .feature-card:nth-child(5) {
        transition-delay: 0.4s;
    }


/* ============================================================
   10. OPS DASHBOARD — KPI cards fly in + bar animations
   ============================================================ */

.ops__kpi-card {
    opacity: 0;
    transform: translateY(32px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease !important;
}

    .ops__kpi-card.is-visible {
        opacity: 1;
        transform: none;
    }

    .ops__kpi-card:nth-child(1) {
        transition-delay: 0.05s;
    }

    .ops__kpi-card:nth-child(2) {
        transition-delay: 0.13s;
    }

    .ops__kpi-card:nth-child(3) {
        transition-delay: 0.21s;
    }

    .ops__kpi-card:nth-child(4) {
        transition-delay: 0.29s;
    }

    .ops__kpi-card:nth-child(5) {
        transition-delay: 0.37s;
    }

/* Panel 3D entrance */
.ops__panel {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
}

    .ops__panel.is-visible {
        opacity: 1;
        transform: none;
    }

/* Progress bar animated width */
.ops__flag-fill {
    width: 0% !important;
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

    .ops__flag-fill.is-visible {
        width: var(--fill-w) !important;
    }

/* Approval rows slide in */
.ops__approval-row {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

    .ops__approval-row.is-visible {
        opacity: 1;
        transform: none;
    }

    .ops__approval-row:nth-child(1) {
        transition-delay: 0.0s;
    }

    .ops__approval-row:nth-child(2) {
        transition-delay: 0.1s;
    }

    .ops__approval-row:nth-child(3) {
        transition-delay: 0.2s;
    }


/* ============================================================
   11. MODULE CARDS — 3D flip entrance
   ============================================================ */

.module-card {
    opacity: 0;
    transform: translateY(44px) perspective(700px) rotateX(10deg);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
}

    .module-card.is-visible {
        opacity: 1;
        transform: none;
    }



/* ============================================================
   12. PRICING — card 3D entrance with scale
   ============================================================ */

.price-card {
    opacity: 0;
    transform: translateY(48px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
}

    .price-card.is-visible {
        opacity: 1;
        transform: none;
    }

    .price-card:nth-child(1) {
        transition-delay: 0.0s;
    }

    .price-card:nth-child(2) {
        transition-delay: 0.18s;
    }

    .price-card:nth-child(3) {
        transition-delay: 0.36s;
    }

/* Featured card extra glow on entrance */
.price-card--featured.is-visible {
    transform: none;
}

/* Feature list items stagger */
.price-features li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.price-card.is-visible .price-features li {
    opacity: 1;
    transform: none;
}

    .price-card.is-visible .price-features li:nth-child(1) {
        transition-delay: 0.35s;
    }

    .price-card.is-visible .price-features li:nth-child(2) {
        transition-delay: 0.42s;
    }

    .price-card.is-visible .price-features li:nth-child(3) {
        transition-delay: 0.49s;
    }

    .price-card.is-visible .price-features li:nth-child(4) {
        transition-delay: 0.56s;
    }

    .price-card.is-visible .price-features li:nth-child(5) {
        transition-delay: 0.63s;
    }

    .price-card.is-visible .price-features li:nth-child(6) {
        transition-delay: 0.70s;
    }

    .price-card.is-visible .price-features li:nth-child(7) {
        transition-delay: 0.77s;
    }

    .price-card.is-visible .price-features li:nth-child(8) {
        transition-delay: 0.84s;
    }


/* ============================================================
   13. SECTION HEADERS — eyebrow line draw + title reveal
   ============================================================ */

/* Line draw animation — WHY section excluded (always shown) */
.hiw__eyebrow-line,
.modules-eyebrow-line,
.pricing-eyebrow-line,
.header-line {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

    .hiw__eyebrow-line.is-visible,
    .modules-eyebrow-line.is-visible,
    .pricing-eyebrow-line.is-visible,
    .header-line.is-visible {
        transform: scaleX(1);
    }

/* Why section eyebrow line always drawn */
.why__eyebrow-line {
    transform: scaleX(1) !important;
    transform-origin: left center;
}

/* Section titles — WHY title excluded (handled by section override above) */
.hiw__title,
.modules-title,
.pricing-title,
.features-title {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

    .hiw__title.is-visible,
    .modules-title.is-visible,
    .pricing-title.is-visible,
    .features-title.is-visible {
        opacity: 1;
        transform: none;
    }

/* Why title always visible */
.why__title {
    opacity: 1 !important;
    transform: none !important;
}

    /* Subtitles */
    .hiw__subtitle,
    .why__title + *,
    .modules-subtitle,
    .pricing-subtitle,
    .features-subtitle {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
    }

        .hiw__subtitle.is-visible,
        .modules-subtitle.is-visible,
        .pricing-subtitle.is-visible,
        .features-subtitle.is-visible {
            opacity: 1;
            transform: none;
        }


/* ============================================================
   14. NAVBAR LINK ACTIVE LINE ANIMATION
   ============================================================ */

.nav__link::after {
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ============================================================
   15. FOOTER — staggered column reveal
   ============================================================ */

.footer__brand {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .footer__brand.is-visible {
        opacity: 1;
        transform: none;
    }

.footer__col {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

    .footer__col.is-visible {
        opacity: 1;
        transform: none;
    }

    .footer__col:nth-child(1) {
        transition-delay: 0.1s;
    }

    .footer__col:nth-child(2) {
        transition-delay: 0.2s;
    }

    .footer__col:nth-child(3) {
        transition-delay: 0.3s;
    }


/* ============================================================
   16. SCROLL PROGRESS BAR (top of page)
   ============================================================ */

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal-bright) 50%, var(--cyan) 100%);
    z-index: 9999;
    transition: width 0.1s linear;
    transform-origin: left center;
    border-radius: 0 2px 2px 0;
}


/* ============================================================
   17. CURSOR FOLLOWER — DISABLED
   ============================================================ */

/* Cursor dot and ring are fully hidden */
#cursor-dot,
#cursor-ring {
    display: none !important;
}


/* ============================================================
   18. SECTION TRANSITION DIVIDERS (animated gradient sweep)
   ============================================================ */

.section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal-bright), var(--sky), transparent);
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position 0.8s ease;
}

    .section-divider.is-visible {
        background-position: 100% 0;
    }


/* ============================================================
   19. SMOOTH PAGE TRANSITION OVERLAY
   ============================================================ */

#page-transition {
    position: fixed;
    inset: 0;
    background: var(--teal);
    z-index: 100000;
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}

body.page-leave #page-transition {
    animation: pageLeave 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes pageLeave {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}


/* ============================================================
   20. WHY PRIMABL SLIDE — enhanced transition
   ============================================================ */

.why__slide {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Nav buttons micro hover */
.why__nav-btn {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

    .why__nav-btn:not(:disabled):hover {
        transform: scale(1.08) !important;
    }


/* ============================================================
   21. TABLE ROWS — stagger reveal
   ============================================================ */

.ops__table tbody tr {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ops__table.is-visible tbody tr {
    opacity: 1;
    transform: none;
}

    .ops__table.is-visible tbody tr:nth-child(1) {
        transition-delay: 0.1s;
    }

    .ops__table.is-visible tbody tr:nth-child(2) {
        transition-delay: 0.2s;
    }

    .ops__table.is-visible tbody tr:nth-child(3) {
        transition-delay: 0.3s;
    }

    .ops__table.is-visible tbody tr:nth-child(4) {
        transition-delay: 0.4s;
    }


/* ============================================================
   22. HERO SCROLL MOUSE — keep existing + add glow
   ============================================================ */

.hero__mouse {
    box-shadow: 0 0 0 0 rgba(20,184,166,0);
    animation: mouseGlow 2.5s ease-in-out infinite !important;
}

@keyframes mouseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(20,184,166,0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(20,184,166,0.25);
    }
}


/* ============================================================
   23. KPI VALUE COUNTER — flip number animation
   ============================================================ */

.ops__kpi-value,
.stats-bar__value,
.hgs-title {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* ============================================================
   24. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    /* Reduce 3D intensity on mobile */
    .tilt-card {
        transform: none !important;
    }

    .tilt-shine {
        display: none;
    }

    #cursor-dot, #cursor-ring {
        display: none;
    }

    [data-anim="slide-left"],
    [data-anim="slide-right"] {
        transform: translateY(32px) !important;
    }

    .hiw__step {
        transform: translateY(24px) !important;
    }
}