:root{
  --ferrugem:#B55239;
  --terra:#8C5A3C;
  --musgo:#4D6045;
  --areia:#F2EDE4;
  --grafite:#2B2B2B;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--grafite);background:var(--areia);}
a{color:var(--musgo);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.nav{position:sticky;top:0;background:rgba(242,237,228,.9);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #e0d8c9}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-logo{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid #e6dacc;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.brand-name{font-weight:800;letter-spacing:.2px}
.logo{width:26px;height:26px;background:linear-gradient(135deg,var(--musgo),var(--terra));border-radius:6px}
.primary-nav{display:flex;gap:6px;align-items:center;font-size:0}
.primary-nav a{padding:8px 12px;border-radius:999px;color:var(--grafite);font-size:14px}
.primary-nav a:hover{background:#efe7db;text-decoration:none}

.hero{position:relative;padding:140px 0 96px}
.hero h1{font-size:52px;line-height:1.1;margin:0}
.hero p{margin:12px 0 0;color:#574e46}
.ctas{display:flex;gap:12px;margin-top:18px}
.hero-copy{max-width:720px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--terra);background:var(--terra);color:#fff;display:inline-block}
.btn.alt{background:transparent;color:var(--terra)}
.btn:hover{filter:brightness(.95)}

.section{padding:28px 0}
.section h2{margin:0 0 14px;font-size:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border:1px solid #decfbf;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card img{display:block;width:100%;height:160px;object-fit:cover;background:#eee}
.card .body{padding:12px 14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{font-size:12px;background:#f1e8dc;color:#5a4b3e;border:1px solid #e2d6c6;padding:4px 8px;border-radius:999px}

.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.service{border:1px solid #decfbf;border-radius:16px;background:#fff;padding:16px}

.footer{border-top:1px solid #e0d8c9;background:#eaddcf;color:#3d332a}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 0;flex-wrap:wrap}
.footer a{color:#3d332a}

/* Hero visual with big logo */
.hero-visual{position:absolute;right:16px;top:40px;pointer-events:none}
.logo-frame{width:220px;height:220px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(77,96,69,.15),rgba(140,90,60,.15));border:1px solid #e6dacc;box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4);backdrop-filter:blur(4px)}
.logo-frame img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}

@media (min-width:900px){
  .hero h1{font-size:72px}
  .hero-copy{padding-right:0}
}
@media (max-width:720px){
  .hero{padding-top:56px}
  .hero-visual{position:static;margin-top:12px;display:flex;justify-content:center}
  .logo-frame{width:160px;height:160px}
}