:root {
            --hc-primary: #001d37;
            --hc-primary-container: #0d3254;
            --hc-secondary: #785917;
            --hc-surface: #f6faff;
            --hc-surface-low: #ebf5ff;
            --hc-surface-lowest: #ffffff;
            --hc-surface-high: #daeaf9;
            --hc-surface-highest: #d4e4f3;
            --hc-surface-container: #e0f0ff;
            --hc-outline-variant: #c3c6cf;
            --hc-on-surface: #0e1d28;
            --hc-on-surface-variant: #43474e;
            --hc-on-primary: #ffffff;
            --hc-on-primary-container: #7c9bc2;
            --hc-error: #ba1a1a;
        }

        body {
            font-family: "Inter", sans-serif;
            background: var(--hc-surface);
            color: var(--hc-on-surface);
        }

        h1, h2, h3, h4, h5, h6,
        .font-headline {
            font-family: "Manrope", sans-serif;
        }

        .font-label,
        .btn,
        .navbar-nav .nav-link {
            font-family: "Plus Jakarta Sans", sans-serif;
        }
.round img{border-radius: 100%;}

.nav-link.active {
    color: var(--hc-secondary) !important;
    border-bottom: 3px solid var(--hc-primary);
}
.hassall-card {
    padding: 2rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    margin-bottom: 1rem;
}
        /* Text Styles */
        .hc-eyebrow {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #785917;
}

.hc-primary {
    color: var(--hc-primary);
}

.hc-secondary {
    color: var(--hc-secondary);
}


.hc-highlight {
    color: #785917;
    font-weight: 700;
}

.hc-fineprint {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6c757d;
}

.hc-lead {
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    line-height: 1.7;
    color: #43474e;
    margin-bottom: 1.5rem;
}

.hc-section-intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #43474e;
    max-width: 48rem;
}

.hc-kicker {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #785917;
    margin-bottom: 0.75rem;
}

.hc-hero-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
}
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }

        .bg-surface { background-color: var(--hc-surface); }
        .bg-surface-low { background-color: var(--hc-surface-low); }
        .bg-surface-lowest { background-color: var(--hc-surface-lowest); }
        .bg-surface-high { background-color: var(--hc-surface-high); }
        .bg-surface-highest { background-color: var(--hc-surface-highest); }
        .bg-surface-container { background-color: var(--hc-surface-container); }

        .text-primary-hc { color: var(--hc-primary); }
        .text-secondary-hc { color: var(--hc-secondary); }
        .text-muted-hc { color: var(--hc-on-surface-variant); }

        .bg-primary-hc { background-color: var(--hc-primary); }
        .bg-primary-container-hc { background-color: var(--hc-primary-container); }
        .bg-secondary-hc { background-color: var(--hc-secondary); }

        .btn-primary-hc {
            background: linear-gradient(90deg, var(--hc-primary), var(--hc-primary-container));
            color: #fff;
            border: none;
        }

        .btn-primary-hc:hover {
            color: #fff;
            opacity: 0.95;
        }

        .btn-secondary-hc {
            background-color: var(--hc-secondary);
            color: #fff;
            border: none;
        }

        .btn-secondary-hc:hover {
            color: #fff;
            filter: brightness(1.05);
        }

        .glass-nav {
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 1rem 2rem rgba(13, 50, 84, 0.06);
        }

        .hero-section {
            position: relative;
            min-height: 819px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--hc-surface);
        }

        .hero-title {
            font-size: clamp(3rem, 7vw, 5.5rem);
            line-height: 1.1;
            font-weight: 800;
            letter-spacing: -0.04em;
        }

        .eyebrow-badge {
            background: var(--hc-surface-high);
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem .8rem;
        }

        .eyebrow-badge  p {
            margin-bottom: 0;
        }

        .eyebrow-dot {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background: var(--hc-secondary);
            display: inline-block;
        }

        .hero-visual-wrap {
            position: relative;
            aspect-ratio: 1 / 1;
            background: var(--hc-surface-highest);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .hero-visual-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.2;
            background-image: radial-gradient(var(--hc-secondary) 1.5px, transparent 1.5px);
            background-size: 24px 24px;
            border-radius: 50%;
        }

        .hero-visual-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 8px solid #fff;
            box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.18);
            position: relative;
            z-index: 2;
        }

        .hero-stat-card {
            position: absolute;
            bottom: -1rem;
            left: -1rem;
            background: #fff;
            padding: 1.5rem;
            border-radius: .75rem;
            box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.15);
            max-width: 200px;
            z-index: 3;
        }

        .hero-bg-accent {
            position: absolute;
            top: 0;
            right: 0;
            width: 33.333%;
            height: 100%;
            background: rgba(13, 50, 84, 0.05);
            transform: skewX(-12deg) translateX(5rem);
        }

        .section-pad {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }

        .service-card {
            background: var(--hc-surface-lowest);
            padding: 2.5rem;
            border-radius: .75rem;
            box-shadow: 0 .25rem .75rem rgba(0,0,0,0.04);
            transition: all .25s ease;
            height: 100%;
        }

        .service-card:hover {
            box-shadow: 0 1rem 2rem rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

        .service-card.secondary-border {
            border-left: 4px solid var(--hc-secondary);
        }

        .service-card.primary-border {
            border-left: 4px solid var(--hc-primary);
        }

        .icon-box {
            width: 56px;
            height: 56px;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
            transition: all .25s ease;
        }

        .icon-box.secondary {
            background: var(--hc-surface-container);
            color: var(--hc-secondary);
        }

        .icon-box.primary {
            background: var(--hc-surface-container);
            color: var(--hc-primary);
        }

        .service-card:hover .icon-box.secondary {
            background: var(--hc-secondary);
            color: #fff;
        }

        .service-card:hover .icon-box.primary {
            background: var(--hc-primary);
            color: #fff;
        }

        .methodology {
            position: relative;
        }

        .methodology-line {
            position: absolute;
            top: 24px;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(195, 198, 207, 0.5);
        }

        .step-badge {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 1.125rem;
            box-shadow: 0 0 0 8px var(--hc-surface);
            transition: transform .25s ease;
        }

        .step-item:hover .step-badge {
            transform: scale(1.08);
        }

        .erp-section {
            background: var(--hc-primary);
            color: #fff;
            overflow: hidden;
        }

        .erp-glow {
            position: absolute;
            top: -3rem;
            left: -3rem;
            width: 16rem;
            height: 16rem;
            background: rgba(120, 89, 23, 0.10);
            border-radius: 50%;
            filter: blur(48px);
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: .5rem;
            background: var(--hc-primary-container);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .dashboard-card {
            background: rgba(212, 228, 243, 0.10);
            backdrop-filter: blur(12px);
            border-radius: 1rem;
            border: 1px solid rgba(255,255,255,0.1);
            padding: 2rem;
            box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.2);
        }

        .dashboard-mini-card {
            background: rgba(255,255,255,0.05);
            padding: 1rem;
            border-radius: .75rem;
        }

        .progress-track-hc {
            width: 100%;
            height: 6px;
            background: rgba(255,255,255,0.10);
            border-radius: 999px;
            overflow: hidden;
            margin-top: .5rem;
        }

        .progress-fill-hc {
            height: 100%;
            width: 99.98%;
            background: var(--hc-secondary);
        }

        .bar-chart {
            height: 12rem;
            display: flex;
            align-items: flex-end;
            gap: .25rem;
        }

        .bar-chart span {
            display: block;
            width: 100%;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            background: var(--hc-secondary);
        }

        .cta-card {
            background: #fff;
            border-radius: 1.5rem;
            padding: 4rem;
            box-shadow: 0 1.5rem 3rem rgba(0, 29, 55, 0.08);
            position: relative;
            overflow: hidden;
        }

        .cta-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.03;
            pointer-events: none;
            background-image:
                linear-gradient(to right, currentColor 1px, transparent 1px),
                linear-gradient(to bottom, currentColor 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .footer-link {
            color: #64748b;
            text-decoration: underline;
            text-decoration-color: rgba(120, 89, 23, 0.3);
            text-underline-offset: 4px;
        }

        .footer-link:hover {
            color: var(--hc-primary);
        }

        @media (max-width: 991.98px) {
            .hero-section {
                min-height: auto;
                padding-top: 5rem;
                padding-bottom: 5rem;
            }

            .hero-bg-accent,
            .methodology-line {
                display: none;
            }
        }

        @media (max-width: 575.98px) {
            .cta-card {
                padding: 2.5rem 1.5rem;
            }
        }
    }