:root{
  --bg:#0f0b08;
  --card:#1a1411;
  --muted:#d6c6b7;
  --gold:#d6a53a;
  --gold2:#f1c55b;
  --line:#3a2b21;
  --text:#fff7ef;
  --whatsapp:#25D366;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Tahoma, sans-serif;
  background:linear-gradient(180deg,#0f0b08,#17110d);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:rgba(12,9,7,.92); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:68px; height:68px; object-fit:cover; border-radius:18px; border:2px solid var(--gold)}
.brand h1{margin:0;font-size:32px}
.brand p{margin:4px 0 0;color:var(--muted)}
main{max-width:1200px; margin:0 auto; padding:24px}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.hero{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:24px; padding:24px; align-items:center;
}
.hero-image{width:100%; border-radius:22px; object-fit:cover; min-height:420px}
.pill{
  display:inline-block; padding:10px 16px; border:1px solid #8f6b2a;
  border-radius:999px; background:rgba(214,165,58,.12); color:#f6ddb1; margin-bottom:16px
}
.hero h2{font-size:56px; margin:0 0 12px}
.hero p{color:var(--muted); font-size:22px; line-height:1.8}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin:20px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px;
  padding:12px 20px; border-radius:16px; font-weight:700; border:1px solid transparent
}
.btn.primary{background:linear-gradient(90deg,var(--gold2),var(--gold)); color:#1b1308}
.btn.secondary{background:#f0f0f0; color:#232323}
.btn.gold{background:rgba(214,165,58,.18); color:#ffd67a; border-color:#7b5a1f; width:100%; margin-top:14px}
.links{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0}
.links a{
  padding:12px 16px; border:1px solid #5f4d42; border-radius:14px; color:#f4f0ea;
  background:rgba(255,255,255,.03)
}
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px
}
.contact-grid div{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line)
}
.contact-grid strong{display:block; color:#ffd67a; margin-bottom:8px}
.contact-grid span, .contact-grid a{color:#f1eee9}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:14px; margin:36px 0 18px}
.section-head h2{margin:0; font-size:38px}
.section-head p{margin:0; color:var(--muted)}
.menu-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px
}
.menu-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
}
.menu-card h3{margin:0 0 14px; color:#ffd67a; font-size:28px}
.menu-card ul{list-style:none; margin:0; padding:0}
.menu-card li{
  display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.08)
}
.menu-card li:last-child{border-bottom:none}
.menu-card strong{white-space:nowrap}
.menu-poster{margin-top:20px; padding:12px}
.menu-poster img{width:100%; border-radius:18px}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gallery img{width:100%; height:300px; object-fit:cover; border-radius:18px; border:1px solid var(--line)}
.floating-wa{
  position:fixed; left:16px; bottom:16px; z-index:20;
  background:var(--whatsapp); color:white; padding:14px 18px; border-radius:999px;
  font-weight:700; box-shadow:0 8px 18px rgba(0,0,0,.3)
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero h2{font-size:42px}
  .hero p{font-size:18px}
  .menu-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .topbar{flex-direction:column; align-items:flex-start}
  .menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.menu-card {
  background: #1a1a1a;
  border-radius: 15px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.2);
}

.menu-card img {
  width: 100%;
  border-radius: 10px;
}

.menu-card h3 {
  margin: 10px 0 5px;
  color: #fff;
}

.price {
  color: gold;
  font-weight: bold;
  margin-bottom: 10px;
}

.btn.gold {
  display: block;
  background: linear-gradient(45deg, gold, orange);
  color: #000;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
}
}