/* =================== FOOTER STYLES START =================== */
        .site-footer {
            background-color: var(--color-gray-800);
            color: var(--color-gray-300);
            padding: 3rem 1rem; /* py-12 px-4 */
        }

        .footer-container {
            max-width: 80rem; /* max-w-7xl */
            margin-left: auto;
            margin-right: auto;
        }

        .footer-section-title {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: 1rem; /* mb-4 */
            padding-bottom: 0.5rem; /* pb-2 */
            border-bottom-width: 2px;
        }

        .synopsis-title {
            border-color: var(--color-sky-500);
        }
        
        .functionality-title {
            border-color: var(--color-teal-400);
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .synopsis-section {
            margin-bottom: 3rem; /* mb-12 */
        }

        .synopsis-section p {
            font-size: 1rem; /* text-base */
            line-height: 1.625; /* leading-relaxed */
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
            gap: 2rem; /* gap-8 */
        }

        .feature-card {
            background-color: var(--color-gray-700);
            padding: 1.5rem; /* p-6 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            transition: background-color 0.3s ease;
        }

        .feature-card:hover {
            background-color: var(--color-gray-600);
        }

        .feature-card h3 {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            color: var(--color-white);
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .feature-card p {
            font-size: 0.875rem; /* text-sm */
        }

        .footer-bottom {
            margin-top: 3rem; /* mt-12 */
            text-align: center;
            color: var(--color-gray-500);
            font-size: 0.875rem; /* text-sm */
        }

        /* Responsive Breakpoints */
        @media (min-width: 640px) {
            .site-footer {
                padding-left: 1.5rem; /* sm:px-6 */
                padding-right: 1.5rem;
            }
        }

        @media (min-width: 768px) {
            .features-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
            }
        }

        @media (min-width: 1024px) {
            .site-footer {
                padding-left: 2rem; /* lg:px-8 */
                padding-right: 2rem;
            }
            .features-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
            }
        }
        /* =================== FOOTER STYLES END =================== */