:root {
    --background: #FCFBFB;
    --background-900: #FFE2E2;
    --background-800: #FEC8C9;
    --background-700: #FCAFB1;
    --background-600: #F7848B;
    --background-dark: #22090B;
    --background-dark-900: #341315;
    --background-dark-800: #522125;
    --background-dark-700: #6E2F34;
    --background-dark-600: #8C3E44;
    --dominant-color: #DEDBD2;
    --dominant-dark-color: #403100;
    --dominant-darken-color: #ACA9A1;
    --dominant-light-color: #F1EAD2;
    --dominant-lighten-color: #FFFFFF;
    --primary-color: #B0C4B1;
    --primary-dark-color: #153C1B;
    --primary-darken-color: #809482;
    --primary-light-color: #DDF0DD;
    --primary-lighten-color: #E2F7E3;
    --secondary-color: #EDAFB8;
    --secondary-dark-color: #51212B;
    --secondary-darken-color: #BA7F88;
    --secondary-light-color: #F6DAE0;
    --secondary-lighten-color: #FFE1EA;
    --success-color: #60E1A5;
    --success-dark-color: #1B4322;
    --success-darken-color: #1FAE76;
    --success-light-color: #D1EADD;
    --success-lighten-color: #96FFD7;
    --danger-color: #E35E6B;
    --danger-dark-color: #592826;
    --danger-darken-color: #AC2B40;
    --danger-light-color: #E3C7C9;
    --danger-lighten-color: #FF8F99;
    --warning-color: #FFD042;
    --warning-dark-color: #502907;
    --warning-darken-color: #C89F00;
    --warning-light-color: #E9E4CC;
    --warning-lighten-color: #FFFF75;
    --info-color: #4CD9F5;
    --info-dark-color: #003F59;
    --info-darken-color: #00A7C2;
    --info-light-color: #CFEDED;
    --info-lighten-color: #8AFFFF;
    --background-text: #000000;
    --background-900-text: #000000;
    --background-800-text: #000000;
    --background-700-text: #000000;
    --background-600-text: #000000;
}

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: #333;
}

/* Custom Styles for Video Background Hero */
.hero {
    position: relative;
    text-align: center;
    padding: 80px 20px; /* Increased padding for better visual space */
    overflow: hidden;
    min-height: 500px; /* Ensure sufficient height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white; /* Default text color for hero content */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Place video behind content */
    transform: translate(-50%, -50%); /* Center the video */
    object-fit: cover; /* Ensures the video covers the entire area without distortion */
    opacity: 0.5; /* Set the opacity to 0.5 */
}

.hero-content {
    position: relative;
    z-index: 2; /* Place content above the video */
    /* Tailwind classes will manage responsiveness and more */
}

/* Features Section (section2) with background image */
.section2 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px; /* Consistent padding */
    min-height: 450px;
    text-align: center;
    color: #fff; /* Default text color for sections with dark backgrounds */
}

    .section2 .img-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(https://images.unsplash.com/photo-1516880711640-ef7db81be3e1?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8OXx8dGVhbXdvcmt8ZW58MHwwfHx8MTc1MDI2NTQxM3ww&ixlib=rb-4.1.0&auto=format&fit=crop&w=1200&q=80);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 0; /* Place the background image behind the content */
        opacity: 0.1; /* Slightly less opaque for better content readability */
    }

    .section2 h2,
    .section2 p,
    .section2 .logos {
        position: relative;
        z-index: 1; /* Ensure content is above the background image */
    }

/* Specific styles for testimonial cards */
.testimonial-cards .card {
    background-color: var(--dominant-lighten-color); /* Use a light background from variables */
    transition: transform 0.2s ease-in-out;
}

    .testimonial-cards .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

/* News Flash Section */
.newsFlash .newsboard {
    transition: all 0.3s ease;
}

/* Modals - ensure visibility */
/* Custom styles for onboarding and signup modals to ensure they are hidden/shown via JS classes */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

    .modal-overlay.open {
        display: flex; /* Show when open */
    }

/* Custom style for the timeline dots */
.timeline-dot {
    width: 12px;
    height: 12px;
    background-color: var(--blue-600); /* Example dot color */
    border-radius: 50%;
    position: absolute;
    left: -6px; /* Half of width to center on line */
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item {
    position: relative;
    padding-left: 20px; /* Space for the line and dot */
}

    .timeline-item:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--blue-400); /* Example line color */
    }

/* Pricing card hover effect */
.pricing-card {
    transition: all 0.3s ease-in-out;
}

    .pricing-card:hover {
        transform: translateY(-10px) scale(1.02); /* Lift and slightly enlarge */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* More pronounced shadow */
        background-color: var(--background-dark-700); /* Slightly lighter background on hover */
    }

/* Onboarding and Signup Modal Specific Styles */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px; /* Default max-width for signup */
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative; /* For close button positioning */
}

    .modal-content.wide { /* For onboarding modal */
        max-width: 800px;
        width: 95%;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

/* Onboarding and Signup Modal Specific Styles */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px; /* Default max-width for signup */
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative; /* For close button positioning */
}

    .modal-content.wide { /* For onboarding modal */
        max-width: 800px;
        width: 95%;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

/* Styles for growOptions and monetizeOptions as multi-select checkboxes */
.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

    .tag-grid label {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 12px;
        background: #f9f9f9;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .tag-grid label.selected {
            background: #e6f4ff; /* Light blue background when selected */
            border-color: #00aaff; /* Blue border when selected */
        }

    .tag-grid input[type="checkbox"] {
        margin-right: 10px;
        /* Default Tailwind form-checkbox styles */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ccc;
        border-radius: 4px; /* Slightly rounded square for checkbox */
        outline: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .tag-grid input[type="checkbox"]:checked {
            background-color: #00aaff;
            border-color: #00aaff;
        }

            .tag-grid input[type="checkbox"]:checked::after {
                content: '✔'; /* Checkmark for checked state */
                font-size: 14px;
                color: white;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tag-grid input[type="checkbox"]:checked + span {
                font-weight: 600; /* Make text bolder when selected */
                color: #00aaff;
            }


/* Styles for radio buttons (categories) - unchanged from previous iteration */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

    .radio-grid label {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 12px;
        background: #f9f9f9;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .radio-grid input[type="radio"] {
        margin-right: 10px;
        /* Hide default radio button */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ccc;
        border-radius: 50%;
        outline: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .radio-grid input[type="radio"]:checked {
            background-color: #00aaff;
            border-color: #00aaff;
        }

            .radio-grid input[type="radio"]:checked::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: white;
                transform: translate(-50%, -50%);
            }

            .radio-grid input[type="radio"]:checked + span {
                font-weight: 600; /* Make text bolder when selected */
                color: #00aaff;
            }


.onboarding-modal .social-input {
    display: flex;
    align-items: center;
    background: #f1f1f1;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

    .onboarding-modal .social-input span {
        margin-right: 10px;
    }

.onboarding-modal .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

    .onboarding-modal .footer button {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        background: black;
        color: white;
        cursor: pointer;
    }

.onboarding-modal .step-count {
    font-size: 14px;
    color: #777;
}

.onboarding-modal .step {
    display: none; /* Steps are hidden by default and shown by JS */
}

.hidden {
    display: none;
}