/* Critical CSS - Load first for faster rendering */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333; }

/* Layout */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col, [class*="col-"] { padding: 0 15px; }

/* Typography - Critical */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { margin-bottom: 1rem; }

/* Buttons - Critical */
.btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s; }
.btn-primary { background: #6366f1; color: white; border-color: #6366f1; }
.btn-primary:hover { background: #4f46e5; border-color: #4f46e5; }

/* Forms - Critical */
.form-control { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background: white; border: 1px solid #ced4da; border-radius: 0.375rem; }
.form-label { display: inline-block; margin-bottom: 0.5rem; font-weight: 500; }

/* Loading States */
.spinner-border { display: inline-block; width: 1rem; height: 1rem; border: 0.15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border 0.75s linear infinite; }
@keyframes spinner-border { to { transform: rotate(360deg); } }

/* Hero Section - Critical */
.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; overflow: hidden; }
.hero-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%); }

/* Cards */
.card { background: white; border-radius: 0.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.card-body { padding: 1.5rem; }

/* Utility Classes - Critical */
.text-center { text-align: center; }
.text-white { color: white !important; }
.bg-primary { background-color: #6366f1 !important; }
.bg-light { background-color: #f8f9fa !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.d-flex { display: flex !important; }
.gap-3 { gap: 1rem !important; }
.fw-bold { font-weight: 700 !important; }

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    .container { padding: 0 10px; }
}