/* Critical CSS - Inline styles for faster loading */
body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
    background-color: #f0f4f8; 
    margin: 0; 
    padding: 0; 
}

.hero-section {
    background: linear-gradient(135deg, #eef2f5 0%, #d1d9e6 100%);
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.soft-bg { background-color: #f0f4f8; }
.soft-border { border: 1px solid #d9e2ec; }
.soft-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }

/* Loading skeleton */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* Basic layout */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* Mobile optimizations */
@media (max-width: 768px) {
    body { 
        overflow-x: hidden; 
        -webkit-text-size-adjust: 100%;
    }
    
    /* Touch targets */
    button, 
    a,
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Font scaling for mobile */
    .text-3xl, .text-4xl, .text-5xl, .text-6xl {
        line-height: 1.2;
    }
    
    /* Modal adjustments */
    .fixed {
        position: fixed;
        inset: 0;
    }
    
    /* Safe area for mobile */
    .hero-section {
        margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}