:root {
            /* Theme Colors */
            --primary: #91C75E;
            --secondary: #7A588D;
            --bgcolor: #F5F5F5;
            --dark: #1A202C;
            --surface: #FFFFFF;

            /* Typography */
            --font-sans: 'Inter', sans-serif;
            --font-doodle: 'Caveat', cursive;
        }

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

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

        /* SVG Sketch Pattern */
        .bg-sketch {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.83v58.34h-58.34v-.83l57.51-58.34zM0 0l.83.83v58.34H0V0z' fill='%231A202C' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

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

        .font-sans { font-family: var(--font-sans); }
        .font-doodle { font-family: var(--font-doodle); }

        .text-primary-custom { color: var(--primary) !important; }
        .text-secondary-custom { color: var(--secondary) !important; }
        .text-dark-custom { color: var(--dark) !important; }
        .text-gray-700 { color: #374151 !important; }
        .text-gray-600 { color: #4B5563 !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-bgcolor-custom { background-color: var(--bgcolor) !important; }

        .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; }
        .text-7xl { font-size: 4.5rem; }
        .text-8xl { font-size: 6rem; }

        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }
        .font-medium { font-weight: 500; }

        .leading-tight { line-height: 1.1; }
        .leading-relaxed { line-height: 1.625; }
        .tracking-wide { letter-spacing: 0.025em; }

        .border-4 { border-width: 4px !important; border-style: solid; }
        .border-b-4 { border-bottom-width: 4px !important; border-style: solid; }
        .border-l-4 { border-left-width: 4px !important; border-style: solid; }

        .border-dark { border-color: var(--dark) !important; }
        .border-primary { border-color: var(--primary) !important; }
        .border-secondary { border-color: var(--secondary) !important; }

        .border-doodle {
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        }
        .border-doodle-alt {
            border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
        }

        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-full { border-radius: 9999px; }

        /*.shadow-doodle { box-shadow: 6px 6px 0px 0px var(--dark); }*/
        .shadow-doodle-sm { box-shadow: 4px 4px 0px 0px var(--dark); }
        .shadow-doodle-primary { box-shadow: 6px 6px 0px 0px var(--primary); }
        .shadow-doodle-secondary { box-shadow: 6px 6px 0px 0px var(--secondary); }
        .shadow-doodle-dark { box-shadow: 6px 6px 0px 0px var(--dark); }
        .shadow-inner-custom { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }

        .container-xl-custom { max-width: 80rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
        .container-lg-custom { max-width: 72rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
        .container-md-custom { max-width: 66rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

        .py-section { padding-top: 6rem; padding-bottom: 6rem; }
        .hero-padding { padding-top: 6rem; padding-bottom: 3rem; }
        .min-h-95 { min-height: 95vh; }

        .rotate-n2 { transform: rotate(-2deg); }
        .rotate-2 { transform: rotate(2deg); }
        .rotate-3 { transform: rotate(3deg); }
        .rotate-n3 { transform: rotate(-3deg); }
        .rotate-6 { transform: rotate(6deg); }
        .rotate-n6 { transform: rotate(-6deg); }
        .rotate-n10 { transform: rotate(-10deg); }
        .rotate-n12 { transform: rotate(-12deg); }

        .transition-transform { transition-property: transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .transition-all { transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .duration-500 { transition-duration: 500ms; }
        .duration-700 { transition-duration: 700ms; }
        .duration-1000 { transition-duration: 1000ms; }

        .hover-up:hover { transform: translateY(-0.25rem) translateX(-0.25rem); box-shadow: none; }
        .hover-lift:hover { transform: translateY(-0.5rem); }
        .hover-lift-rotate:hover { transform: translateY(-0.5rem) rotate(1deg); }
        .hover-lift-rotate-n:hover { transform: translateY(-0.5rem) rotate(-1deg); }
        .hover-zero:hover { transform: rotate(0deg); }

        .group:hover .group-hover-spin { animation: spin 15s linear infinite; }
        .group:hover .group-hover-trans-x { transform: translateX(0.5rem); }
        .group:hover .group-hover-trans-nx { transform: translateX(-0.5rem); }
        .group:hover .group-hover-zero { transform: rotate(0deg); }

        @keyframes wiggle {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes drawPath { to { stroke-dashoffset: 0; } }
        @keyframes bounce-custom {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-25%); }
        }
        @keyframes ping-custom {
            75%, 100% { transform: scale(2); opacity: 0; }
        }

        .animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-spin-slow { animation: spin 15s linear infinite; }
        .animate-bounce { animation: bounce-custom 1s infinite; }
        .animate-ping { animation: ping-custom 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

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

        .z-n10 { z-index: -10; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }

        /* Reveal Step initial states for JS */
        .opacity-0 { opacity: 0; }
        .opacity-100 { opacity: 1; }
        .translate-y-10 { transform: translateY(2.5rem); }
        .translate-y-16 { transform: translateY(4rem); }
        .translate-y-0 { transform: translateY(0); }
        .ease-out { transition-timing-function: cubic-bezier(0.0, 0, 0.2, 1); }

     /* Main Card */
.reveal-step > div{
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Number Circle */
.reveal-step .rounded-full{
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        background-color .35s ease;
    will-change: transform;
}

/* Tape */
.reveal-step .position-absolute.start-50{
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* SVG Arrow */
.reveal-step svg{
    transition: transform .45s ease;
}

/* Hover */
.reveal-step:hover > div{
    transform: translateY(-10px) rotate(-1deg);
    /*box-shadow: 14px 14px 0 rgba(0,0,0,.22);*/
}

.reveal-step:hover .rounded-full{
    transform: scale(1.08) rotate(10deg);
}

.reveal-step:hover .position-absolute.start-50{
    transform: translateX(-50%) translateY(-3px) rotate(6deg);
}

.reveal-step:hover svg{
    transform: scale(1.03);
}