:root {
            --primary: #0081b8;
            --accent: #02e49b;
            --text: #1a1a1a;
            --bg: #f9f9f9;
        }

        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.6; color: var(--text); margin: 0; background: var(--bg); }
        header { background: #fff; padding: 20px; border-bottom: 3px solid var(--primary); text-align: center; }
        .logo-text { font-size: 1.5rem; font-weight: bold; color: var(--primary); text-decoration: none; }
        nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: #eee; padding: 10px; }
        nav a { color: var(--text); text-decoration: none; font-size: 0.85rem; padding: 5px 10px; border-radius: 4px; }
        nav a:hover { background: var(--primary); color: #fff; }

        .container { max-width: 1000px; margin: 20px auto; padding: 0 15px; }
        .hero { background: linear-gradient(rgba(0,129,184,0.7), rgba(0,129,184,0.9)), url('/assets/000000015944.jpg') center/cover; padding: 60px 20px; color: #fff; text-align: center; border-radius: 8px; }
        
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
        .card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .card img { width: 100%; height: 200px; object-fit: cover; }
        .card-content { padding: 15px; }
        
        footer { text-align: center; padding: 30px; background: #333; color: #fff; margin-top: 40px; }

        @media (min-width: 768px) { nav { justify-content: flex-start; } }