:root {
        --primary-blue: #0073aa;
        --dark-blue: #004a59;
        --light-gray: #f5f5f5;
        --text-color: #333;
    }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--text-color); margin: 0; }
    .site-header { background: var(--dark-blue); color: #fff; padding: 2rem; text-align: center; }
    .site-header a { color: #fff; text-decoration: none; }
    nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px; }
    nav a { color: #fff; font-weight: bold; }
    .site-main { max-width: 1000px; margin: 0 auto; padding: 2rem; }
    .hero { width: 100%; height: 300px; background-size: cover; background-position: center; margin-bottom: 2rem; border-radius: 8px; }
    .footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--light-gray); }
    .widget-image-box { width: 100%; height: 200px; background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); margin-bottom: 1rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
    footer { background: #000; color: #fff; padding: 2rem; text-align: center; }
    @media (min-width: 768px) {
        .content-layout { display: flex; gap: 2rem; }
        .main-content { flex: 3; }
        .sidebar { flex: 1; }
    }