/* CSS Variables */
        :root {
            --primary: #91C75E;
            --secondary: #7A588D;
            --background: #F5F5F5;
            --dark: #1A202C;
            --gray-100: #F3F4F6;
            --gray-400: #9CA3AF;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --red-500: #EF4444;
        }

        /* Base & Resets */
        body {
            background-color: var(--background);
            color: var(--dark);
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

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

        a { text-decoration: none; }
        ul { padding-left: 0; list-style: none; margin-bottom: 0; }

        /* Custom Typography */
        .font-doodle { font-family: 'Caveat', cursive; }
        .font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }

        .fw-extrabold { font-weight: 800 !important; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .leading-tight { line-height: 1.1; }
        .leading-relaxed { line-height: 1.625; }

        /* Font Sizes mapped from Tailwind */
        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-3xl { font-size: 1.875rem; }
        .text-4xl { font-size: 2.25rem; }
        .text-5xl { font-size: 3rem; }
        .text-6xl { font-size: 3.75rem; }

        @media (max-width: 767px) {
            /*.md-text-5xl { font-size: 2.25rem; } 
            .md-text-6xl { font-size: 3rem; }   
            .md-text-7xl { font-size: 3.75rem; } 
            .md-text-8xl { font-size: 3.75rem; }*/
        }
        @media (min-width: 768px) {
            /*.md-text-5xl { font-size: 3rem; }
            .md-text-6xl { font-size: 3.75rem; }
            .md-text-7xl { font-size: 4.5rem; }
            .md-text-8xl { font-size: 6rem; }*/
        }

        /* Colors Customization */
        .text-primary-custom { color: var(--primary) !important; }
        .text-secondary-custom { color: var(--secondary) !important; }
        .text-dark-custom { color: var(--dark) !important; }
        .text-white { color: #ffffff !important; }
        .text-gray-400 { color: var(--gray-400) !important; }
        .text-gray-600 { color: var(--gray-600) !important; }
        .text-gray-700 { color: var(--gray-700) !important; }
        .text-gray-800 { color: var(--gray-800) !important; }
        .text-red-500 { color: var(--red-500) !important; }

        .bg-primary-custom { background-color: var(--primary) !important; }
        .bg-secondary-custom { background-color: var(--secondary) !important; }
        .bg-dark-custom { background-color: var(--dark) !important; }
        .bg-background { background-color: var(--background) !important; }
        .bg-gray-100 { background-color: var(--gray-100) !important; }

        /* Hand-drawn borders */
        .border-doodle {
            border: 3px solid var(--dark);
            /*border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;*/
        }
        /*.border-doodle-alt {
            border: 3px solid var(--dark);
            border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
        }*/
        .border-thick { border: 4px solid var(--dark) !important; }
        .border-bottom-thick { border-bottom: 4px solid var(--dark) !important; }
        .border-top-thick { border-top: 8px solid var(--secondary) !important; }

        .border-dashed-thick { border: 4px dashed var(--dark) !important; }
        .border-white-thick { border: 4px solid white !important; }

        /* Box Shadows */
        .shadow-doodle { box-shadow: 6px 6px 0px 0px var(--secondary); }
        .shadow-doodle-primary { box-shadow: 6px 6px 0px 0px var(--primary); }
        .shadow-doodle-dark { box-shadow: 6px 6px 0px 0px var(--dark); }
        .shadow-doodle-sm { box-shadow: 4px 4px 0px var(--dark); }
        .shadow-doodle-white { box-shadow: 8px 8px 0px #FFFFFF; }
        .shadow-btn-white { box-shadow: 6px 6px 0px 0px #FFFFFF; }
        .drop-shadow-md { filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); }
        .drop-shadow-sm { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); }

        /* Radii */
        .rounded-custom { border-radius: 2rem; }
        .rounded-3rem { border-radius: 3rem; }
        .rounded-1-5rem { border-radius: 1.5rem; }
        .rounded-t-2rem { border-top-left-radius: 2rem; border-top-right-radius: 2rem; }
        .rounded-b-2rem { border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; }

        @media (min-width: 768px) {
            /*.md-rounded-l-3rem { border-top-left-radius: 3rem; border-bottom-left-radius: 3rem; border-top-right-radius: 0; }
            .md-rounded-r-3rem { border-top-right-radius: 3rem; border-bottom-right-radius: 3rem; border-bottom-left-radius: 0; }
            .md-border-l-0 { border-left: 0 !important; }
            .md-border-t-0 { border-top: 0 !important; }
            .md-border-t-4 { border-top: 4px solid var(--dark) !important; }*/
        }

        /* Specific Component shapes */
        .mechanism-card-1 { border-top-left-radius: 10rem; border-top-right-radius: 10rem; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; box-shadow: 8px 8px 0px var(--secondary); transition: all 0.3s; }
        .mechanism-card-1:hover { transform: translateY(-12px); box-shadow: 12px 12px 0px var(--secondary); }

        .mechanism-card-2 { border: 4px solid white; border-top-left-radius: 4rem; border-bottom-right-radius: 4rem; border-top-right-radius: 1rem; border-bottom-left-radius: 1rem; box-shadow: 8px 8px 0px var(--primary); transition: all 0.3s; }
        .mechanism-card-2:hover { transform: translateY(-12px); box-shadow: 12px 12px 0px var(--primary); }

        .mechanism-card-3 { border: 4px dashed var(--dark); border-radius: 2rem; box-shadow: 8px 8px 0px #FFFFFF; transform: rotate(2deg); transition: all 0.3s; }
        .mechanism-card-3:hover { transform: translateY(-12px) rotate(0deg); box-shadow: 12px 12px 0px #FFFFFF; }

        /* Sizing Custom Utilities */
        .w-20 { width: 5rem !important; }
        .h-20 { height: 5rem !important; }
        .w-24 { width: 6rem !important; }
        .h-24 { height: 6rem !important; }
        .w-16 { width: 4rem !important; }
        .h-16 { height: 4rem !important; }
        .w-32 { width: 8rem !important; }
        .h-32 { height: 8rem !important; }
        .h-4 { height: 1rem !important; }

        .w-500px { width: 500px; }
        .h-500px { height: 500px; }
        .w-400px { width: 400px; }
        .h-400px { height: 400px; }
        .h-400px-md { height: 400px; }
        @media (min-width: 768px) { .h-400px-md { height: 500px; } }

        .max-w-2xl { max-width: 42rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-4xl { max-width: 56rem; }
        .max-w-5xl { max-width: 64rem; }
        .max-w-6xl { max-width: 72rem; }

        /* Spacing Custom Utilities */
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .pt-24 { padding-top: 6rem; }
        .pb-12 { padding-bottom: 3rem; }
        .mb-16 { margin-bottom: 4rem; }
        .mt-16 { margin-top: 4rem; }
        .gap-16 { gap: 4rem; }
        .gap-12 { gap: 3rem; }
        .gap-6 { gap: 1.5rem; }

        /* Micro-interactions & Animations */
        .transition-all-custom { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

        .card-hover { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .card-hover:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 8px 8px 0px var(--primary); }
        .card-hover-alt { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .card-hover-alt:hover { transform: translateY(-8px) rotate(1deg); box-shadow: 8px 8px 0px var(--secondary); }

        .btn-hover-fx { transition: all 0.3s; }
        .btn-hover-fx:hover { transform: translate(4px, 4px); box-shadow: none !important; }
        .btn-hover-up:hover { transform: translateY(-4px); box-shadow: none !important; }

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

        /* Transform Adjustments */
        .rot-12 { transform: rotate(12deg); }
        .rot-3 { transform: rotate(3deg); }
        .rot-minus-3 { transform: rotate(-3deg); }
        .rot-6 { transform: rotate(6deg); }
        .rot-minus-6 { transform: rotate(-6deg); }
        .rot-2 { transform: rotate(2deg); }
        .rot-minus-2 { transform: rotate(-2deg); }
        .rot-minus-1 { transform: rotate(-1deg); }
        .rot-1 { transform: rotate(1deg); }

        .condition-icon { transition: transform 0.3s; }
        .group:hover .condition-icon { transform: rotate(0deg); }

        .group:hover .group-hover-animate-wiggle { animation: wiggle 4s ease-in-out infinite; }
        .group:hover .group-hover-scale-110 { transform: scale(1.1); }
        .group:hover .group-hover-rot-0 { transform: rotate(0deg); }

        .callout-rotate { transition: transform 0.3s; }
        .callout-rotate:hover { transform: rotate(0deg); }

        .hover-translate-y-1 { transition: transform 0.3s; }
        .hover-translate-y-1:hover { transform: translateY(-4px); }

        @media (min-width: 768px) {
            .transform-md-up { transform: translateY(-1rem); }
        }
        @media (min-width: 576px) {
            .transform-sm-down { transform: translateY(2.5rem); }
        }
        @media (min-width: 992px) {
            .transform-lg-down { transform: translateY(2rem); }
        }

        /* SVG Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        @keyframes wiggle {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }
        @keyframes drawPath {
            to { stroke-dashoffset: 0; }
        }
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-wiggle { animation: wiggle 4s ease-in-out infinite; }
        .animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }
        .animate-spin-slow { animation: spin-slow 20s linear infinite; }

        .path-draw {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: drawPath 3s ease forwards;
        }

        /* Custom Elements */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--background); border-left: 2px solid var(--dark); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border: 2px solid var(--dark); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

        .glass-nav {
            background: rgba(245, 245, 245, 0.9);
            backdrop-filter: blur(12px);
            border-bottom: 3px solid var(--dark);
        }

        .blob-bg {
            position: absolute;
            filter: blur(80px);
            opacity: 0.4;
            z-index: -1;
            border-radius: 50%;
        }

        /* Utilities */
        .pointer-events-none { pointer-events: none; }
        .opacity-10 { opacity: 0.1 !important; }
        .opacity-20 { opacity: 0.2 !important; }
        .opacity-30 { opacity: 0.3 !important; }
        .opacity-40 { opacity: 0.4 !important; }
        .opacity-50 { opacity: 0.5 !important; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }

        /* Reset FAQ btn */
        /*.faq-btn { border: none; background: transparent; }*/