/* Critical CSS - Above-the-fold styles only */ /* Inline this in for fastest First Contentful Paint */ :root { --primary-color: #9333ea; --accent-color: #ec4899; --text-dark: #1e293b; --text-light: #64748b; --bg-light: #f8fafc; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; color: var(--text-dark); background: #ffffff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Header - Critical */ .header { background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000; padding: 0; } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo-image { height: 50px; width: auto; } .nav ul { display: flex; list-style: none; gap: 2rem; } .nav a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.3s; } /* Hero Section - Critical */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4rem 0; text-align: center; position: relative; overflow: hidden; min-height: 400px; contain: layout style; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; min-height: 72px; font-display: swap; } .hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; min-height: 60px; font-display: swap; } .cta-button { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: white; padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s; border: none; cursor: pointer; min-height: 56px; min-width: 200px; font-display: swap; will-change: transform; } /* Cookie Consent - Critical (shows immediately) */ .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 1.5rem; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); z-index: 10000; } .cookie-consent-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .cookie-icon { font-size: 3rem; color: var(--accent-color); } .cookie-text { flex: 1; min-width: 300px; } .cookie-btn { padding: 0.875rem 2rem; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s; } /* Mobile Menu Toggle */ .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; } @media (max-width: 768px) { .hamburger { display: block; } .nav { display: none; } .hero h1 { font-size: 2rem; } .cookie-consent-content { flex-direction: column; text-align: center; } }