:root {
        --primary: #00a1df;
        --dark: #202022;
        --gray: #868686;
        --light: #f2f2f2;
        --success: #688c4b;
    }
    body { font-family: sans-serif; color: #4c4c4c; line-height: 1.6; margin: 0; }
    header, footer { padding: 20px; background: #fff; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
    .row { display: flex; flex-wrap: wrap; gap: 20px; }
    .grid-12 { width: 100%; }
    .grid-4 { flex: 1; min-width: 300px; }
    img { max-width: 100%; height: auto; }
    nav ul { display: flex; list-style: none; gap: 20px; padding: 0; }
    nav a { text-decoration: none; color: var(--dark); font-weight: bold; }
    .btn-default { display: inline-block; padding: 10px 20px; background: var(--primary); color: #fff; text-decoration: none; border-radius: 4px; }
    .hero { padding: 60px 0; background: var(--light); text-align: center; }
    .footer { background: var(--dark); color: #fff; text-align: center; padding: 40px 0; }
    .socials { display: flex; justify-content: center; gap: 15px; font-size: 24px; }
    .missing-img { background: #ddd; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #888; border-radius: 50%; }
    
    @media (max-width: 768px) {
        .row { flex-direction: column; }
    }