/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --accent: #b7902a;
  --ink: #1d1a14;
  --muted: #5b564d;
  --bg: #ffffff;
  --bg-soft: #faf7f0;
  --border: #e8e2d6;
  --radius: 14px;
  --shadow: 0 12px 40px rgba(0,0,0,.06);
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: var(--bg);
}

/* ====== Header / Nav ====== */
.topbar{
  position: sticky; top: 0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
}
.brand img{ height: 50px; width:auto; }
.nav{ display:flex; gap:.2rem; align-items:center; }
.nav .tab{ padding:.55rem .9rem; border-radius: 999px; font-weight:600; color:#3b3427; }
.nav .tab:hover{ background: var(--bg-soft); }
.nav .tab.active{ background: linear-gradient(135deg,#f2df9a,var(--accent)); color:#1a1200; box-shadow: var(--shadow); }

.nav-toggle{ display:none; font-size:1.5rem; border:0; background:none; padding:.35rem .55rem; border-radius:10px; }

/* ====== Hero ====== */
.hero{ border-bottom:1px solid var(--border); background: radial-gradient(100% 80% at 50% 0%, #fff8e1 0%, #ffffff 60%); }
.hero-inner{ max-width:1100px; margin:0 auto; padding: 6rem 1rem; text-align:center; }
.hero h1{ margin:0 0 .4rem; font-size:clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing:-.02em; }
.hero p{ margin:0 0 1.2rem; color: var(--muted); }
.btn{ display:inline-block; padding:.9rem 1.2rem; border-radius:999px; background: linear-gradient(135deg,#f0d685,var(--accent)); font-weight:700; color:#1a1200; box-shadow: var(--shadow); }
.btn:hover{ transform: translateY(-1px); }

/* ====== Layout ====== */
.container{ max-width:1100px; margin:0 auto; padding: 3rem 1rem; }
.container.soft{ background: var(--bg-soft); border-block:1px solid var(--border); }
.grid{ display:grid; gap:1.1rem; }
.grid.cards{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.gallery{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.flex{ display:flex; gap:1.1rem; flex-wrap: wrap; }
.flex-1{ flex:1 1 280px; }
.flex-2{ flex:2 1 340px; }
.card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow); }
.card h3{ margin-top:0; }

ul.check{ padding-left:1.1rem; }
ul.check li{ margin:.35rem 0; }

/* Forms */
form label{ display:block; font-weight:600; margin:.6rem 0 .35rem; }
input, select, textarea{ width:100%; padding:.78rem .85rem; border:1px solid var(--border); border-radius: 10px; font: inherit; background:#fff; }
form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; }
small.muted{ color:#6d675d; }

/* Gallery */
figure{ margin:0; }
figure img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--border); }
figcaption{ font-size:.95rem; color:#6b655b; margin-top:.4rem; text-align:center; }

/* Footer */
.footer{ border-top:1px solid var(--border); text-align:center; padding:1.4rem 1rem; color:#6b655b; }

/* Responsive */
@media (max-width:900px){
  .nav{ display:none; position:absolute; right:1rem; top:64px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.5rem; flex-direction:column; box-shadow: var(--shadow); }
  .nav.show{ display:flex; }
  .nav-toggle{ display:block; }
  form .row{ grid-template-columns: 1fr; }
}