/* Critical Above-the-Fold CSS - To be inlined in */ /* Essential variables */ :root { --primary: #FF6B35; --secondary: #F59E0B; --dark: #0A0A0A; --dark-lighter: #141414; --dark-card: #1A1A1A; --light: #FAFAFA; --light-muted: #A0A0A0; --gradient: linear-gradient(135deg, #FF6B35 0%, #F59E0B 100%); --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Critical reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body */ body { font-family: var(--font-family); background: var(--dark); color: var(--light); line-height: 1.6; overflow-x: hidden; } /* Header (above-the-fold) */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(10px); transition: all 0.3s ease; } .header.transparent { background: transparent; backdrop-filter: none; } .header-container { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } /* Hero section (above-the-fold) */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding-top: 80px; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%); pointer-events: none; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Hide non-critical elements initially */ .lazy-load { opacity: 0; }