html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #f9fbfc; color: #222; } .hero { background: linear-gradient(to right, #e6f1f7, #ffffff); padding: 60px 20px; text-align: center; } .hero h1 { font-family: 'Merriweather', serif; font-size: 2rem; margin-bottom: 10px; color: #005f99; } .hero p { font-size: 1rem; max-width: 600px; margin: auto; } img { max-width: 100%; height: auto; display: block; } .lazy-load { opacity: 0; transition: opacity 0.3s ease-in; } .lazy-load.loaded { opacity: 1; }.floating-header { position: fixed; top: 0; left: 0; right: 0; background: #ffffffcc; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); z-index: 999; backdrop-filter: blur(8px); padding: 12px 24px; }footer { background: #f2f6f9; padding: 40px 20px; text-align: center; color: #444; }