Here's a clean, complete footer sized to match a real site — richer than the last compact bar, but not overbuilt. **CSS** ```css :root{--bg:#f6f8f4;--line:#dce4da;--ink:#16241b;--muted:#5b6b60;--green:#1f6b3a;--green-dark:#123b21;--amber:#e0a020;} footer{background:var(--green-dark);color:#e8f3ea;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;} footer .wrap{max-width:1000px;margin:0 auto;padding:44px 24px 28px;} .foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;} @media(max-width:700px){.foot-top{grid-template-columns:1fr 1fr;}} .foot-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:#fff;margin-bottom:10px;} .foot-desc{font-size:13.5px;color:#a9c8b3;max-width:28ch;margin:0;} .foot-top h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:#8fb49b;margin:0 0 12px;font-weight:600;} .foot-top ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px;} .foot-top a{color:#d3e8d9;text-decoration:none;} .foot-top a:hover{color:var(--amber);} .foot-bottom{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#8fb49b;} ``` **HTML** ```html ``` Four columns on desktop, two on mobile, dark green with amber accents to match the rest of the site. Update the placeholder links, company name, and copyright year to your real details.