:root {
            --primary: #0072bc;
            --secondary: #005a77;
            --text: #111;
            --light: #f4f4f4;
            --white: #ffffff;
        }
        * { box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: var(--text); line-height: 1.6; }
        
        /* Header */
        header { background: var(--white); padding: 1rem; text-align: center; border-bottom: 3px solid var(--primary); }
        .logo-placeholder { font-weight: bold; font-size: 2rem; color: var(--primary); margin: 0; }
        
        /* Navigation */
        nav { background: var(--secondary); padding: 0.5rem; }
        nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
        nav a { color: var(--white); text-decoration: none; font-weight: bold; padding: 5px 10px; }
        
        /* Hero */
        .hero { background: var(--primary); color: var(--white); padding: 4rem 1rem; text-align: center; }
        .hero h1 { margin: 0; }
        
        /* Layout */
        .container { max-width: 1000px; margin: auto; padding: 2rem 1rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
        @media (min-width: 768px) { .container { grid-template-columns: 2fr 1fr; } }
        
        /* Service Cards */
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
        .card { border: 1px solid #ddd; padding: 1rem; text-align: center; background: var(--light); }
        
        /* Utility */
        footer { background: #333; color: var(--white); padding: 2rem 1rem; text-align: center; margin-top: 2rem; }
        .accent-btn { display: inline-block; background: var(--primary); color: var(--white); padding: 10px 20px; text-decoration: none; border-radius: 4px; margin-top: 10px; }