/* Critical above-the-fold CSS only */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: #fff; color: #333; line-height: 1.5; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0; line-height: 1.6; }
header { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 50; }
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-bold { font-weight: 700; }
.text-emerald-700 { color: #047857; }
main { min-height: 100vh; }
.hero-section { min-height: 600px; background: linear-gradient(to bottom, #f9fafb, #fff); }
.space-y-4 > * + * { margin-top: 1rem; }
img { max-width: 100%; height: auto; display: block; }
#root { min-height: 100vh; }