body {
            font-family: 'Inter', sans-serif;
        }
        .hero-bg {
            background-color: #f8f9fa; /* Light gray, similar to Justworks */
        }
        .section-padding {
            padding-top: 4rem; /* 64px */
            padding-bottom: 4rem; /* 64px */
        }
        @media (min-width: 768px) {
            .section-padding {
                padding-top: 6rem; /* 96px */
                padding-bottom: 6rem; /* 96px */
            }
        }
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }
        .testimonial-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* Carousel Styles */
        .carousel-container {
            overflow: hidden;
            width: 100%;
            position: relative;
        }
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-slide {
            min-width: 100%;
            box-sizing: border-box;
        }
        @media (min-width: 768px) { /* Medium screens and up, show 2 slides */
            .carousel-slide {
                min-width: 50%;
            }
        }
        @media (min-width: 1024px) { /* Large screens and up, show 3 slides */
            .carousel-slide {
                min-width: calc(100% / 3);
            }
        }
        .carousel-dots {
            position: absolute;
            bottom: 10px; /* Adjusted position slightly */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px; /* Increased gap */
            padding-top: 10px; /* Add some space above dots if content is close */
        }
        .carousel-dot {
            width: 12px; /* Slightly larger dots */
            height: 12px;
            border-radius: 50%;
            background-color: #d1d5db; /* Tailwind gray-300 - inactive dot */
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent; /* For active state transition */
        }
        .carousel-dot:hover {
            background-color: #9ca3af; /* Tailwind gray-400 */
        }
        .carousel-dot.active {
            background-color: #4f46e5; /* Tailwind indigo-600 - active dot */
            transform: scale(1.1); /* Slightly larger active dot */
            border-color: #6366f1; /* Lighter indigo for border */
        }

        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.8); /* Lighter background */
            color: #1f2937; /* Darker icon color for contrast */
            border: none;
            width: 40px; /* Circular button */
            height: 40px; /* Circular button */
            border-radius: 50%; /* Circular button */
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .carousel-button:hover {
            background-color: #4f46e5; /* Indigo background on hover */
            color: white; /* White icon on hover */
            transform: translateY(-50%) scale(1.05); /* Slight scale effect */
        }
        .carousel-button.prev {
            left: 1rem;
        }
        .carousel-button.next {
            right: 1rem;
        }
        .carousel-button svg { /* Style for SVG icons inside buttons */
            width: 20px;
            height: 20px;
        }