:root{
  --red:#c1121f;
  --red2:#ff2635;
  --gold:#d4a017;
  --gold2:#ffcc52;
  --cream:#f6e7c8;
  --ink:#050505;
  --panel:#101010;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#050505;
  color:white;
  font-family:'Oswald',sans-serif;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}

.script{font-family:'Permanent Marker',cursive}
.gold{color:var(--gold)}
.red{color:var(--red2)}
.cream{color:var(--cream)}

.page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%,rgba(193,18,31,.28),transparent 22%),
    radial-gradient(circle at 78% 18%,rgba(212,160,23,.14),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.42),rgba(0,0,0,.78)),
    url('../images/hero-meat3.jpg');
  background-size:90%;
  background-position:center 42%;
}

.smoke{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%,rgba(255,255,255,.13),transparent 18%),
    radial-gradient(circle at 40% 60%,rgba(255,255,255,.08),transparent 20%),
    radial-gradient(circle at 75% 35%,rgba(255,255,255,.10),transparent 17%),
    radial-gradient(circle at 60% 80%,rgba(255,255,255,.06),transparent 20%);
  filter:blur(22px);
  opacity:.65;
  animation:smokeMove 18s ease-in-out infinite alternate;
}

@keyframes smokeMove{
  from{transform:translate3d(-2%,2%,0) scale(1)}
  to{transform:translate3d(3%,-4%,0) scale(1.12)}
}

.ember{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,110,0,.85) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(255,210,80,.7) 0 1px,transparent 2px);
  background-size:90px 90px,140px 140px;
  opacity:.22;
  animation:embers 12s linear infinite;
}

@keyframes embers{
  from{background-position:0 0,0 0}
  to{background-position:0 -500px,0 -700px}
}

.fire-line{
  height:5px;
  background:linear-gradient(90deg,#5c0000,#ff3c00,#ffd15c,#ff3c00,#5c0000);
  box-shadow:0 0 25px rgba(255,70,0,.7);
}

.btn-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--red),#7a050c);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 28px rgba(193,18,31,.4);
  transition:.25s;
}

.btn-main:hover{
  transform:translateY(-3px);
  box-shadow:0 0 42px rgba(193,18,31,.65);
}

.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f3c24b,#9b6500);
  color:#120900;
  transition:.25s;
}

.btn-gold:hover{transform:translateY(-3px)}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(212,160,23,.8);
  color:var(--gold2);
  background:rgba(0,0,0,.25);
  transition:.25s;
}

.btn-ghost:hover{
  transform:translateY(-3px);
  background:rgba(212,160,23,.12);
}

.panel{
  background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(7,7,7,.98));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.gold-panel{
  background:
    linear-gradient(180deg,rgba(212,160,23,.13),rgba(0,0,0,.92)),
    #0d0d0d;
  border:1px solid rgba(212,160,23,.35);
}

.red-panel{
  background:
    radial-gradient(circle at top right,rgba(193,18,31,.28),transparent 35%),
    linear-gradient(180deg,#141414,#080808);
  border:1px solid rgba(193,18,31,.32);
}

.live-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:#00ff66;
  box-shadow:0 0 20px #00ff66;
  animation:pulse 1.3s infinite;
}

@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.45);opacity:.55}
}

.hero-title{
  font-size:clamp(4.1rem,9vw,9.5rem);
  line-height:.86;
  text-shadow:0 8px 0 rgba(0,0,0,.45),0 0 35px rgba(193,18,31,.4);
}

.page-title{
  font-size:clamp(4rem,8vw,8.5rem);
  line-height:.88;
  text-shadow:0 8px 0 rgba(0,0,0,.45),0 0 35px rgba(193,18,31,.4);
}

.section-title{
  font-size:clamp(3rem,6vw,6.5rem);
  line-height:.92;
}

.ticker{
  white-space:nowrap;
  overflow:hidden;
  background:#090909;
  border-block:1px solid rgba(255,255,255,.08);
}

.ticker-track{
  display:inline-block;
  animation:ticker 22s linear infinite;
}

@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.food-img{transition:.45s ease}

.food-card:hover .food-img{transform:scale(1.08)}

.map-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
}

.phone-shell{
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 25px 80px rgba(0,0,0,.65),0 0 50px rgba(193,18,31,.18);
}

.chat-bubble{
  border-radius:24px;
  padding:16px 18px;
  max-width:88%;
  line-height:1.25;
}

.bot{background:#161616;border:1px solid rgba(255,255,255,.08)}
.chef{background:linear-gradient(135deg,#b40e19,#610006);margin-left:auto}

.logo-mark{
  width:48px;
  height:48px;
  border-radius:999px;
  border:2px solid white;
  background:black;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Permanent Marker',cursive;
  font-size:20px;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.sticky-mobile{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:50;
  display:none;
}

@media(max-width:760px){
  .sticky-mobile{display:grid}
  .hero-title{font-size:4.4rem}
  .page-title{font-size:4.2rem}
}

@media (max-width: 767px){
  body{
    padding-bottom:140px;
  }

  .sticky-mobile{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:9998 !important;
  }

  button[data-open-cart].fixed,
  button[data-menu-open-cart].fixed{
    position:fixed !important;
    right:14px !important;
    bottom:calc(92px + env(safe-area-inset-bottom)) !important;
    z-index:9999 !important;
  }
}