:root {
        --brand: #C43A2B;
        /* primary red */
        --brand2: #E2573A;
        /* warm accent */
        --ink: #14171F;
        /* charcoal */
        --muted: #5B6472;
        /* slate */
        --line: #E6E8EE;
        /* border */
        --soft: #F7F8FB;
        /* soft background */
        --panel: #FFFFFF;
        /* cards */
        --radius: 16px;
    }

    * {
        font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    body {
        background: #fff;
        color: var(--ink);
    }

    a {
        text-decoration: none;
    }

    /* Background pattern for hero only */
    .bg-grid {
        background:
            radial-gradient(850px 420px at 80% -10%, rgba(196, 58, 43, .18), transparent 60%),
            radial-gradient(900px 460px at 10% 0%, rgba(226, 87, 58, .12), transparent 60%),
            linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
    }

    .bg-grid:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(to right, rgba(20, 23, 31, .06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(20, 23, 31, .06) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: radial-gradient(600px 360px at 40% 0%, #000 40%, transparent 70%);
        opacity: .35;
        pointer-events: none;
    }

    .angle-divider {
        position: relative;
    }

    .angle-divider:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 70px;
        background: linear-gradient(135deg, #fff 50%, transparent 50%);
        border-bottom: 1px solid var(--line);
        pointer-events: none;
    }

    /* Nav */
    .nav-shell {
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .nav-link {
        color: var(--muted);
        font-weight: 700;
    }

    .nav-link:hover {
        color: var(--ink);
    }

    /* Buttons */
    .btn-brand {
        --bs-btn-bg: var(--brand);
        --bs-btn-border-color: var(--brand);
        --bs-btn-hover-bg: #A93226;
        --bs-btn-hover-border-color: #A93226;
        --bs-btn-color: #fff;
        --bs-btn-hover-color: #fff;
        --bs-btn-active-bg: #8F2B21;
        --bs-btn-active-border-color: #8F2B21;
        border-radius: 14px;
        font-weight: 900;
        padding: .75rem 1rem;
    }

    .btn-ink {
        --bs-btn-bg: var(--ink);
        --bs-btn-border-color: var(--ink);
        --bs-btn-hover-bg: #0F1218;
        --bs-btn-hover-border-color: #0F1218;
        --bs-btn-color: #fff;
        --bs-btn-hover-color: #fff;
        border-radius: 14px;
        font-weight: 900;
        padding: .75rem 1rem;
    }

    .btn-ghost {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--ink);
        border-radius: 14px;
        font-weight: 800;
        padding: .75rem 1rem;
    }

    .btn-ghost:hover {
        background: var(--soft);
        border-color: #D7DBE6;
    }

    /* Cards */
    .cardx {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 16px 48px rgba(20, 23, 31, .06);
    }

    .cardx.pad {
        padding: 22px;
    }

    .accent-left {
        position: relative;
        overflow: hidden;
    }

    .accent-left:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, var(--brand), var(--brand2));
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: .45rem .7rem;
        border-radius: 999px;
        background: rgba(196, 58, 43, .08);
        border: 1px solid rgba(196, 58, 43, .18);
        color: #8F2B21;
        font-weight: 800;
        font-size: .85rem;
        white-space: nowrap;
    }

    .chip.gray {
        background: rgba(20, 23, 31, .04);
        border-color: rgba(20, 23, 31, .08);
        color: var(--muted);
    }

    .hero-title {
        letter-spacing: -1px;
        font-weight: 950;
        line-height: 1.05;
    }

    .sub {
        color: var(--muted);
        font-weight: 600;
    }

    .section-title {
        font-weight: 950;
        letter-spacing: -.6px;
    }

    /* Industry pills */
    .pillbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pillbtn {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--ink);
        border-radius: 999px;
        padding: .55rem .85rem;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }

    .pillbtn:hover {
        transform: translateY(-1px);
        background: var(--soft);
        border-color: #D7DBE6;
    }

    .pillbtn.active {
        background: rgba(196, 58, 43, .10);
        border-color: rgba(196, 58, 43, .35);
        color: #8F2B21;
    }

    .thumb {

        max-height: 100%;
        width: auto;
        object-fit: contain;
    }

    /* Forms */
    .form-control,
    .form-select {
        border-radius: 14px;
        border-color: var(--line);
        padding: .75rem .9rem;
        font-weight: 600;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(196, 58, 43, .55);
        box-shadow: 0 0 0 .25rem rgba(196, 58, 43, .16);
    }

    /* Sticky */
    .stickybar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1050;
        display: none;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 18px 58px rgba(20, 23, 31, .18);
        padding: 10px 12px;
    }

    @media (max-width: 768px) {
        .stickybar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .btn-ghost {
            border: 1px solid var(--line);
            background: #fff;
            color: var(--ink);
            border-radius: 14px;
            font-weight: 800;
            padding: .65rem 0.8rem;
        }

    }

    /* Footer */
    .foot {
        border-top: 1px solid var(--line);
        background: #fff;
    }

    /* ---------- NEW: Connected Process Timeline ---------- */
    .process-wrap {
        position: relative;
    }

    .process-line {
        position: absolute;
        left: 6%;
        right: 6%;
        top: 50%;
        height: 2px;
        background: rgba(20, 23, 31, .12);
        transform: translateY(-50%);
        border-radius: 999px;
        z-index: 0;
    }

    .process-progress {
        position: absolute;
        left: 6%;
        top: 50%;
        height: 2px;
        width: 0%;
        transform: translateY(-50%);
        border-radius: 999px;
        background: linear-gradient(90deg, var(--brand), var(--brand2));
        z-index: 1;
        transition: width 900ms ease;
    }

    .process-card {
        position: relative;
        z-index: 2;
        height: 100%;
        transform: translateY(8px);
        opacity: 0;
        transition: transform 700ms ease, opacity 700ms ease;
    }

    .process-card.reveal {
        transform: translateY(0);
        opacity: 1;
    }

    .step-dot {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: #fff;
        border: 3px solid rgba(196, 58, 43, .45);
        position: absolute;
        top: -18px;
        left: 22px;
        box-shadow: 0 10px 24px rgba(20, 23, 31, .08);
    }

    .step-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 950;
        color: var(--ink);
        background: rgba(20, 23, 31, .04);
        border: 1px solid rgba(20, 23, 31, .08);
        border-radius: 999px;
        padding: .35rem .65rem;
        font-size: .85rem;
    }

    /* Mobile: vertical line */
    @media (max-width: 992px) {

        .process-line,
        .process-progress {
            left: 18px;
            right: auto;
            top: 24px;
            bottom: 24px;
            width: 2px;
            height: auto;
            transform: none;
        }

        .process-progress {
            height: 0%;
            width: 2px;
            transition: height 900ms ease;
        }

        .step-dot {
            top: 22px;
            left: -9px;
        }
    }

    @media screen and (max-width: 480px) {

        .btn-ghost {
            border: 1px solid var(--line);
            background: #fff;
            color: var(--ink);
            border-radius: 14px;
            font-weight: 800;
            padding: .75rem 0.5rem;
        }

        .btn-ghost:hover {
            background: var(--soft);
            border-color: #D7DBE6;
        }

    }

    .logo-img {
        height: 65px;
        width: auto;
        object-fit: contain;

    }