* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary, #111827);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Ensure all text is visible with fallback colors */
h1, h2, h3, h4, h5, h6, p, span, a, li, label, button, input, textarea {
    color: var(--text-primary, #111827);
}

/* Override for hero section which has white text */
.hero, .hero * {
    color: white !important;
}

/* CTA strip (gradient section) — white headline/buttons on colored bg */
.cta-section,
.cta-section * {
    color: white !important;
}

.cta-section a.btn-primary,
.cta-section .btn-primary {
    color: var(--primary-blue) !important;
}

/* Ensure all text elements use Inter */
p, input, textarea, select, a, span, label, li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Buttons use Space Grotesk (matches headers), no border radius */
button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-secondary,
.btn-large,
.cta-btn,
.hero-form-button,
.marketplace-tab,
.pricing-tab,
.category-btn,
.install-btn,
.details-btn,
.deployment-choice-btn,
.email-collection-submit,
.footer-deploy-btn {
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 100px !important;
}

/* Add padding to body when footer popup is visible */
body.footer-popup-visible {
    padding-bottom: var(--footer-popup-space, 100px);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Scroll animations - elements are always visible */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Ensure all content inside fade-in elements is visible (but preserve their display type) */
.fade-in * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure buttons and interactive elements are clickable */
button, a, input, select, textarea, [role="button"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Optional: if you want fade-in animation, uncomment below and ensure JS adds .visible class */
/*
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, 30px) rotate(180deg); }
}