/* Font and Base Styles */
html {
    overflow-x: hidden;
    width: 100%;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body { 
    font-family: 'Inter', sans-serif;
    position: relative;
}

.smooth-scroll { 
    scroll-behavior: smooth; 
}

/* Preload font for better performance */
@font-face { 
    font-family: 'Inter'; 
    font-display: swap; 
}

/* Core Web Vitals: reduce layout shift */
img { 
    display: block; 
}

/* Navigation */
.nav-button-whatsapp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
}

/* Cards and Components */
.card-hover {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Pricing Cards */
.pricing-card-featured {
    transform: translateY(-1rem);
    z-index: 10;
}

@media (max-width: 768px) {
    .pricing-card-featured {
        transform: none;
    }
}

/* CTA Buttons */
.btn-cta {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-cta:hover {
    transform: scale(1.05);
}

/* Section Backgrounds */
.section-blue-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
}

/* Blob Effects */
.blob-animation {
    mix-blend-mode: multiply;
    filter: blur(3rem);
    opacity: 0.3;
}

/* Prevent blobs from causing overflow */
section {
    overflow: hidden;
    position: relative;
}

/* Ensure all containers respect viewport */
.container, .max-w-7xl, .max-w-4xl, .max-w-3xl {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Utility Classes */
.text-balance {
    text-wrap: balance;
}

.icon-check {
    width: 1rem;
    height: 1rem;
    color: #10b981;
    margin-right: 0.5rem;
}

.icon-x {
    width: 1.25rem;
    height: 1.25rem;
    color: #f87171;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Prevent horizontal scroll */
    *, *::before, *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Footer mobile fixes */
    footer > div {
        flex-direction: column !important;
        text-align: center;
        gap: 1.5rem;
        align-items: center !important;
    }

    footer .flex {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }

    footer .space-x-6 {
        gap: 0.75rem !important;
    }

    footer a {
        word-break: break-word;
        max-width: 100%;
    }

    /* Ensure sections don't overflow */
    section {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Fix any absolute positioned blobs */
    .absolute {
        max-width: 100vw;
    }

    /* Ensure text doesn't break layout */
    p, h1, h2, h3, h4, h5, h6, span, a {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix any wide elements */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
}

/* Print Styles */
@media print {
    nav, footer {
        display: none;
    }
}