:root { --gold:#b45309; --gold2:#d97706; --stone:#78716c; --bg:#fafaf9; --card:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:#1c1917; line-height:1.6; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1100px; margin:0 auto; padding:0 1rem; }
.banner { background:linear-gradient(90deg,#78350f,#b45309); color:#fff; text-align:center; padding:.6rem; font-weight:600; }
.banner a { color:#fff; }
header { background:#fff; border-bottom:1px solid #e7e5e4; padding:1rem 0; }
.logo { font-size:1.4rem; font-weight:700; color:var(--gold); }
nav { display:flex; gap:1.2rem; margin-top:.4rem; flex-wrap:wrap; }
.hero { background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('/assets/img/hero.jpg') center/cover; color:#fff; padding:4rem 0; text-align:center; }
.hero h1 { font-size:2.4rem; margin-bottom:.5rem; }
.btn { display:inline-block; background:var(--gold); color:#fff; padding:.7rem 1.4rem; border-radius:8px; font-weight:600; margin:.3rem; }
.btn:hover { background:var(--gold2); text-decoration:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; margin:1.5rem 0; }
.card { background:var(--card); border:1px solid #e7e5e4; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.card img { width:100%; height:180px; object-fit:cover; }
.card-body { padding:1rem; }
.card h3 { color:var(--gold); margin-bottom:.3rem; }
.salon-hero { height:280px; background:center/cover no-repeat; border-radius:12px; margin:1rem 0; }
.salon-info { background:#fff; border:1px solid #e7e5e4; border-radius:12px; padding:1.5rem; margin:1rem 0; }
footer { background:#1c1917; color:#d6d3d1; padding:2rem 0; margin-top:3rem; text-align:center; font-size:.9rem; }
@media(max-width:600px){ .hero h1{font-size:1.7rem} }