* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0b0b;
  color: #f3f3f3;
  line-height: 1.5;
}
.container { width: min(1100px, 92%); margin: 0 auto; }

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #000;
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.logo {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.25));
}
.nav { display: flex; align-items: center; gap: 18px; }
.nav a {
  color: #e8e8e8;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.9;
}
.nav a:hover { opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd86b, #caa23a);
  color: #140f00;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover { filter: brightness(1.05); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd86b;
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.btn-outline:hover { border-color: rgba(255, 215, 0, 0.7); }

/* Hero */
.hero {
  background: radial-gradient(circle at top, rgba(255, 215, 0, 0.12), transparent 55%),
              linear-gradient(180deg, #050505, #0b0b0b);
  padding: 64px 0 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-inner h1 {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.3px;
}
.hero-inner p {
  margin: 0 0 20px;
  max-width: 60ch;
  color: rgba(255,255,255,0.82);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Sections */
.section { padding: 54px 0; }
.section.alt {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
h2 { margin: 0 0 12px; font-size: 1.6rem; }

.section-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.search-wrap input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.22);
  background:#0b0b0b;
  color:#f3f3f3;
  outline:none;
  min-width: 260px;
}
.search-wrap input:focus{ border-color: rgba(255,215,0,0.6); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255, 215, 0, 0.16);
  border-radius: 16px;
  padding: 16px;
}
.card h3 { margin: 0 0 8px; color: #ffd86b; }
.card p { margin: 0; color: rgba(255,255,255,0.82); }

.muted { color: rgba(255,255,255,0.65); }
.tiny { font-size: 0.9rem; }

a { color: #ffd86b; }
a:hover { filter: brightness(1.1); }

/* MENU */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}
.menu-card{
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,215,0,0.16);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.menu-img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.menu-body{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.menu-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.price{ color:#ffd86b; font-weight:800; }
.menu-desc{ color: rgba(255,255,255,0.82); margin:0; }
.menu-actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.qty-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,215,0,0.22);
  background: rgba(255,255,255,0.02);
}
.qty-pill button{
  padding:4px 10px;
}

/* ORDER */
.order-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.order-items{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,215,0,0.16);
}
.order-item-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.order-item-row:last-child{ border-bottom:none; }
.order-total{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  font-size:1.05rem;
}
.tip-card{ margin-top: 14px; }

.order-form{ margin-top:14px; }
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.22);
  background:#0b0b0b;
  color:#f3f3f3;
  outline:none;
}
input:focus{ border-color: rgba(255,215,0,0.6); }
.full{ grid-column:1 / -1; }

/* Footer */
.footer{
  padding: 26px 0;
  background: #000;
  border-top: 1px solid rgba(255, 215, 0, 0.18);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 860px){
  .grid, .menu-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .logo { height: 56px; }
  .search-wrap input { min-width: 100%; width: 100%; }
}