:root {
            --primary: #003b77;
            --secondary: #1da648;
            --dark: #101820;
            --light: #f4f7f9;
            --white: #ffffff;
            --text: #333;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--text); background: var(--light); }

        header { background: var(--primary); color: var(--white); padding: 1rem 5%; }
        nav { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 5%; background: #e0eaf3; }
        nav a { text-decoration: none; color: var(--primary); font-weight: 500; font-size: 0.9rem; }

        .hero { background: linear-gradient(135deg, var(--primary), #2a5a8c); color: var(--white); padding: 4rem 5%; text-align: center; }
        .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }

        .container { padding: 2rem 5%; max-width: 1200px; margin: auto; }
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }

        .card { background: var(--white); padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; }
        .card img { max-width: 120px; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
        
        footer { background: var(--dark); color: #999; padding: 2rem 5%; text-align: center; margin-top: 2rem; }

        @media (max-width: 768px) { .hero h1 { font-size: 1.8rem; } }