*{margin:0;padding:0;box-sizing:border-box}
:root{--green:#5FAF47;--dark:#222}
body{font-family:Inter,sans-serif;color:var(--dark)}
.container{width:min(1200px,90%);margin:auto}
.site-header{position:fixed;top:0;width:100%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{font:800 1.5rem Manrope,sans-serif}.brand span{display:block;font-size:.8rem;letter-spacing:.25em}
nav a{margin:0 1rem;color:white;text-decoration:none}
.hero{min-height:100vh;background:url('../images/hero-bathroom.jpeg') center/cover;display:grid;place-items:center;position:relative}
.overlay{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.45))}
.hero-content{position:relative;text-align:center;color:#fff;width:min(800px,90%)}
.hero h1{font:800 clamp(3rem,6vw,5.5rem) Manrope,sans-serif;margin-bottom:1rem}
.hero p{font-size:1.25rem;margin-bottom:2rem}
.buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{text-decoration:none;padding:1rem 2rem;border-radius:999px}
.btn-primary,.cta{background:var(--green);color:#fff}
.btn-secondary{border:2px solid #fff;color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:3rem 0}
.card{padding:2rem;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
section.container{padding:5rem 0}