:root {
            /* Bootstrap overrides to match brand */
            --bs-primary: #91C75E;
            --bs-primary-rgb: 145, 199, 94;
            --bs-secondary: #7A588D;
            --bs-secondary-rgb: 122, 88, 141;
            --bs-dark: #1A202C;
            --bs-dark-rgb: 26, 32, 44;
            --bs-body-bg: #F5F5F5;
            --bs-body-color: #1A202C;
            --bs-font-sans-serif: 'Inter', sans-serif;
            --bs-border-color: #1A202C;
            --bs-link-color: #91C75E;
            --bs-link-hover-color: #7A588D;

            /* Original Custom Vars */
            --primary: #91C75E;
            --secondary: #7A588D;
            --dark: #1A202C;
            --background: #F5F5F5;
            --surface: #FFFFFF;
        }

        body {
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            font-family: var(--bs-font-sans-serif);
        }

        ::selection {
            background-color: var(--secondary);
            color: white;
        }

        /* ------------------------------------- */
        /* Typography & Colors                   */
        /* ------------------------------------- */
        .font-doodle { font-family: 'Caveat', cursive; }

        .text-primary { color: var(--primary) !important; }
        .text-secondary { color: var(--secondary) !important; }
        .text-dark { color: var(--dark) !important; }
        .text-white { color: #ffffff !important; }
        .text-gray-100 { color: #F3F4F6 !important; }
        .text-gray-300 { color: #D1D5DB !important; }
        .text-gray-500 { color: #6B7280 !important; }
        .text-gray-600 { color: #4B5563 !important; }
        .text-gray-700 { color: #374151 !important; }
        .text-gray-800 { color: #1F2937 !important; }
        .text-danger-custom { color: #EF4444 !important; }

        .bg-primary { background-color: var(--primary) !important; }
        .bg-secondary { background-color: var(--secondary) !important; }
        .bg-dark { background-color: var(--dark) !important; }
        .bg-white { background-color: var(--surface) !important; }
        .bg-background { background-color: var(--background) !important; }
        .bg-danger-custom { background-color: #EF4444 !important; }

        .bg-primary-20 { background-color: rgba(145, 199, 94, 0.2) !important; }
        .bg-primary-30 { background-color: rgba(145, 199, 94, 0.3) !important; }
        .bg-primary-40 { background-color: rgba(145, 199, 94, 0.4) !important; }
        .bg-secondary-20 { background-color: rgba(122, 88, 141, 0.2) !important; }
        .bg-secondary-40 { background-color: rgba(122, 88, 141, 0.4) !important; }

        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-5xl { font-size: 3rem; line-height: 1.1; }
        .text-6xl { font-size: 3.75rem; line-height: 1.1; }
        .text-7xl { font-size: 4.5rem; line-height: 1.1; }
        .text-8xl { font-size: 6rem; line-height: 1.1; }

        @media (min-width: 768px) {
            .md-text-5xl { font-size: 3rem; line-height: 1.1; }
            .md-text-6xl { font-size: 3.75rem; line-height: 1.1; }
            .md-text-7xl { font-size: 4.5rem; line-height: 1.1; }
            .md-text-8xl { font-size: 6rem; line-height: 1.1; }
        }

        .fw-medium { font-weight: 500 !important; }
        .fw-bold { font-weight: 700 !important; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .leading-none { line-height: 1; }
        .leading-tight { line-height: 1.25; }
        .leading-snug { line-height: 1.375; }
        .leading-relaxed { line-height: 1.625; }

        /* ------------------------------------- */
        /* Sizing & Spacing Matches              */
        /* ------------------------------------- */
        .max-w-7xl { max-width: 80rem !important; }
        .max-w-5xl { max-width: 64rem !important; }
        .max-w-4xl { max-width: 56rem !important; }
        .max-w-2xl { max-width: 42rem !important; }
        .max-w-xl { max-width: 36rem !important; }
        .max-w-lg { max-width: 32rem !important; }
        .max-w-md { max-width: 28rem !important; }

        .w-10 { width: 2.5rem !important; } .h-10 { height: 2.5rem !important; }
        .w-12 { width: 3rem !important; }   .h-12 { height: 3rem !important; }
        .w-14 { width: 3.5rem !important; } .h-14 { height: 3.5rem !important; }
        .w-16 { width: 4rem !important; }   .h-16 { height: 4rem !important; }
        .w-20 { width: 5rem !important; }   .h-20 { height: 5rem !important; }
        .w-32 { width: 8rem !important; }   .h-32 { height: 8rem !important; }
        .w-64 { width: 16rem !important; }  .h-64 { height: 16rem !important; }
        .w-96 { width: 24rem !important; }  .h-96 { height: 24rem !important; }
        .h-500px { height: 500px !important; }
        .min-h-90vh { min-height: 90vh !important; }

        .w-11-12 { width: 91.666667% !important; }
        .w-4-5 { width: 80% !important; }
        @media (min-width: 576px) {
            .sm-w-11-12 { width: 91.666667% !important; }
            .sm-w-4-5 { width: 80% !important; }
        }

        /* Paddings & Margins */
        .pt-custom-32 { padding-top: 8rem !important; }
        .pb-custom-20 { padding-bottom: 5rem !important; }
        .py-custom-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
        .py-custom-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
        .px-custom-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
        .p-custom-5 { padding: 1.25rem !important; }
        .p-custom-8 { padding: 2rem !important; }
        .p-custom-10 { padding: 2.5rem !important; }

        .mb-custom-6 { margin-bottom: 1.5rem !important; }
        .mb-custom-8 { margin-bottom: 2rem !important; }
        .mb-custom-10 { margin-bottom: 2.5rem !important; }
        .mb-custom-12 { margin-bottom: 3rem !important; }
        .mb-custom-16 { margin-bottom: 4rem !important; }
        .mt-custom-10 { margin-top: 2.5rem !important; }

        .gap-custom-3 { gap: 0.75rem !important; }
        .gap-custom-5 { gap: 1.25rem !important; }
        .gap-custom-8 { gap: 2rem !important; }
        .gap-custom-16 { gap: 4rem !important; }

        /* Custom Bootstrap Gaps */
        .g-custom-6 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
        .g-custom-8 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
        .g-custom-12 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
        .g-custom-16 { --bs-gutter-x: 4rem; --bs-gutter-y: 4rem; }

        @media (min-width: 576px) {
            .sm-p-8 { padding: 2rem !important; }
            .sm-mt-custom-n10 { margin-top: -2.5rem !important; }
            .sm-mt-n4 { margin-top: -1.5rem !important; }
            .sm-mt-24 { margin-top: 6rem !important; }
        }
        @media (min-width: 768px) {
            .md-p-10 { padding: 2.5rem !important; }
            .md-p-16 { padding: 4rem !important; }
            .md-px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
            .md-end-n4 { right: -1rem !important; }
        }
        @media (min-width: 992px) {
            .lg-ms-12 { margin-left: 3rem !important; }
            .lg-me-12 { margin-right: 3rem !important; }
        }

        /* Negative Positioning */
        .top-n4 { top: -1rem !important; }
        .top-n5 { top: -1.25rem !important; }
        .top-n6 { top: -1.5rem !important; }
        .top-n8 { top: -2rem !important; }
        .start-n4 { left: -1rem !important; }
        .start-n5 { left: -1.25rem !important; }
        .end-n4 { right: -1rem !important; }
        .end-n5 { right: -1.25rem !important; }
        .end-n6 { right: -1.5rem !important; }
        .bottom-n1 { bottom: -0.25rem !important; }
        .bottom-n2 { bottom: -0.5rem !important; }

        /* ------------------------------------- */
        /* Borders, Shadows, Opacity & Visuals   */
        /* ------------------------------------- */
        .border-gray-200 { border-color: #E5E7EB !important; }
        .border-gray-300 { border-color: #D1D5DB !important; }
        .border-dashed { border-style: dashed !important; }
        .border-start-8 { border-left-width: 8px !important; border-left-style: solid; }

        .opacity-5 { opacity: 0.05 !important; }
        .opacity-10 { opacity: 0.1 !important; }
        .opacity-20 { opacity: 0.2 !important; }
        .opacity-30 { opacity: 0.3 !important; }
        .opacity-40 { opacity: 0.4 !important; }

        .aspect-square { aspect-ratio: 1 / 1; }
        .blur-3xl { filter: blur(64px); }
        .backdrop-blur-md { backdrop-filter: blur(12px); }
        .mix-blend-multiply { mix-blend-mode: multiply; }
        .hidden { display: none !important; }

        .doodle-border {
            border: 3px solid var(--dark);
            /*border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;*/
        }

        /*.doodle-border-alt {
            border: 3px solid var(--dark);
            border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
        }*/

        .shadow-doodle-primary { box-shadow: 6px 6px 0px 0px var(--primary) !important; }
        .shadow-doodle-secondary { box-shadow: 6px 6px 0px 0px var(--secondary) !important; }
        .shadow-doodle-dark { box-shadow: 6px 6px 0px 0px var(--dark) !important; }

        .shadow-custom-primary { box-shadow: 4px 4px 0 0 var(--primary) !important; }
        .shadow-custom-secondary { box-shadow: 4px 4px 0 0 var(--secondary) !important; }
        .shadow-custom-dark { box-shadow: 4px 4px 0 0 var(--dark) !important; }
        .shadow-custom-white { box-shadow: 4px 4px 0 0 #FFF !important; }
        .shadow-custom-white-sm { box-shadow: 2px 2px 0 0 #FFF !important; }
        .shadow-custom-dark-sm { box-shadow: 2px 2px 0 0 var(--dark) !important; }
        .shadow-custom-primary-lg { box-shadow: 8px 8px 0 0 var(--primary) !important; }

        .hover-shadow-none:hover { box-shadow: 2px 2px 0px 0px var(--dark) !important; transform: translate(4px, 4px) !important; }

        /* ------------------------------------- */
        /* Transforms via Variables              */
        /* ------------------------------------- */
        .custom-transform {
            --tw-translate-x: 0; --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-scale-x: 1; --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
        .transition-all { transition: all 0.3s ease; }
        .transition-transform { transition: transform 0.3s ease; }
        .transition-colors { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
        .duration-300 { transition-duration: 300ms; }

        .rotate-1 { --tw-rotate: 1deg; }
        .-rotate-1 { --tw-rotate: -1deg; }
        .rotate-2 { --tw-rotate: 2deg; }
        .-rotate-2 { --tw-rotate: -2deg; }
        .rotate-3 { --tw-rotate: 3deg; }
        .-rotate-3 { --tw-rotate: -3deg; }
        .rotate-4 { --tw-rotate: 4deg; }
        .-rotate-6 { --tw-rotate: -6deg; }
        .-rotate-12 { --tw-rotate: -12deg; }
        .scale-x-invert { --tw-scale-x: -1; }

        .hover-rotate-0:hover { --tw-rotate: 0deg !important; }
        .hover-rotate-1:hover { --tw-rotate: 1deg !important; }
        .hover--rotate-1:hover { --tw-rotate: -1deg !important; }
        .hover-rotate-2:hover { --tw-rotate: 2deg !important; }
        .hover--rotate-2:hover { --tw-rotate: -2deg !important; }

        .hover-scale-105:hover { --tw-scale-x: 1.05 !important; --tw-scale-y: 1.05 !important; }
        .hover--translate-y-1:hover { --tw-translate-y: -0.25rem !important; }
        .hover--translate-y-2:hover { --tw-translate-y: -0.5rem !important; }
        .hover-translate-x-1:hover { --tw-translate-x: 0.25rem !important; }
        .hover-translate-x-2:hover { --tw-translate-x: 0.5rem !important; }
        .hover--translate-x-2:hover { --tw-translate-x: -0.5rem !important; }
        .hover-z-30:hover { z-index: 30 !important; }

        /* Group Hovers */
        .group:hover .group-hover-animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
        .group:hover .group-hover-scale-110 { --tw-scale-x: 1.1 !important; --tw-scale-y: 1.1 !important; }
        .group:hover .group-hover--translate-y-1 { --tw-translate-y: -0.25rem !important; }
        .group:hover .group-hover-translate-x-1 { --tw-translate-x: 0.25rem !important; }
        .group:hover .group-hover-translate-x-2 { --tw-translate-x: 0.5rem !important; }
        .group:hover .group-hover--translate-x-2 { --tw-translate-x: -0.5rem !important; }
        .group:hover .group-hover-bg-secondary { background-color: var(--secondary) !important; }
        .group:hover .group-hover-text-white { color: #fff !important; }
        .group:hover .group-hover-bg-primary { background-color: var(--primary) !important; }
        .group:hover .group-hover-text-dark { color: var(--dark) !important; }
        .group:hover .group-hover-bg-dark { background-color: var(--dark) !important; }
        .group:hover .group-hover-text-primary { color: var(--primary) !important; }
        .group:hover .group-hover-text-secondary { color: var(--secondary) !important; }

        .hover-text-primary:hover { color: var(--primary) !important; }
        .hover-text-dark:hover { color: var(--dark) !important; }

        /* ------------------------------------- */
        /* Keyframes                             */
        /* ------------------------------------- */
        .blob-shape { animation: blob 10s infinite alternate; }
        @keyframes blob {
            0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
            50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
            100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
        }

        .animate-float { animation: float 6s ease-in-out infinite; }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        .animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
        @keyframes wiggle {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }

        .animate-spin-slow { animation: spin 20s linear infinite; }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

        .animate-bounce { animation: bounce 4s infinite; }
        @keyframes bounce {
            0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
            50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
        }

        .path-draw {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: draw 3s forwards;
        }
        @keyframes draw { to { stroke-dashoffset: 0; } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #F5F5F5; border-left: 2px solid #1A202C; }
        ::-webkit-scrollbar-thumb { background: #91C75E; border: 2px solid #1A202C; border-radius: 10px; }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
        }
        #mobile-menu.open {
            transform: translateX(0);
        }