:root{
  --bg-0:#0c0c0f;
  --bg-1:#111116;
  --bg-2:#17171f;
  --txt:#f3f4f6;
  --muted:#a8acb3;
  --brand:#ffb020;
  --brand2:#ff5c2a;
  --stroke:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.06);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 1.25rem;
}

html,body{height:100%;}
body{
  font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,176,32,.18), transparent 55%),
    radial-gradient(900px 600px at 95% 10%, rgba(255,92,42,.14), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-0));
  color: var(--txt);
}

.ff-serif{font-family:"Playfair Display", serif;}
.text-muted-2{color: var(--muted) !important;}

.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display:inline-block;
  box-shadow: 0 0 0 6px rgba(255,176,32,.12);
}

.nav-glass{
  background: rgba(12,12,15,.25);
  transition: all .2s ease;
}
.nav-glass.scrolled{
  background: rgba(12,12,15,.75) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}

.rounded-2xl{border-radius: var(--radius);}
.bg-glass{background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--stroke);}
.shadow-soft{box-shadow: var(--shadow);}

.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 0;
  color: #120d06;
  font-weight: 700;
  border-radius: 999px;
  padding: .85rem 1.05rem;
  box-shadow: 0 18px 35px rgba(255,176,32,.18);
}
.btn-brand:hover{filter: brightness(1.05);}

.btn-outline-soft{
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--txt);
  padding: .85rem 1.05rem;
}
.btn-outline-soft:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: var(--txt);
}

.section{padding: 3rem 0;}
.section-title{
  display:flex; align-items:end; justify-content:space-between; gap:1rem;
  margin-bottom: 1.5rem;
}
.section-title h2{margin:0; letter-spacing:-.02em;}

.card-surface{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  overflow:hidden;
}
.card-surface:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}

.img-cover{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
  background: rgba(255,255,255,.06);
}

.badge-soft{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: rgba(243,244,246,.92);
  font-weight: 600;
}

/* HERO */
.hero{position:relative; padding: 6.5rem 0 3rem; overflow:hidden;}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 500px at 55% 20%, rgba(255,176,32,.18), transparent 60%),
    radial-gradient(900px 500px at 70% 60%, rgba(255,92,42,.16), transparent 60%);
  pointer-events:none;
}
.hero-card{
  position:relative;
  border-radius: calc(var(--radius) + .25rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url('../img/hero-bbq.jpg') center/cover no-repeat;
  border: 1px solid var(--stroke);
  min-height: 420px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,12,15,.92) 0%, rgba(12,12,15,.55) 48%, rgba(12,12,15,.08) 100%),
    linear-gradient(180deg, rgba(12,12,15,.30), rgba(12,12,15,.85));
}
.hero-content{position:relative; z-index:1; padding: 3rem; max-width: 680px;}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  padding:.4rem .75rem;
  border-radius: 999px;
  font-size:.92rem;
  color: rgba(243,244,246,.92);
}
.pill i{color: var(--brand);}
.grad-text{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.feature-strip{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,176,32,.10), rgba(255,92,42,.08));
  padding: 1.1rem 1.25rem;
}

.site-footer{
  border-top: 1px solid var(--stroke);
  background: rgba(12,12,15,.35);
}

@media (max-width: 991.98px){
  .hero{padding-top: 5.25rem;}
  .hero-content{padding: 2rem;}
  .hero-card{min-height: 520px;}
}
@media (max-width: 575.98px){
  .hero-content{padding: 1.25rem;}
  .hero-card{min-height: 560px;}
}
/* =========================================================
   NAVBAR FIX (Readable text + clean bg + mobile alignment)
   ========================================================= */

/* Navbar glass background */
.nav-glass{
  background: rgba(10, 10, 14, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Fix brand text readability */
.navbar .navbar-brand{
  color: rgba(255,255,255,.96) !important;
  letter-spacing: .2px;
}
.navbar .navbar-brand:hover{
  color: rgba(255,255,255,.98) !important;
}

/* Nav links: visible + clean */
.navbar .nav-link{
  color: rgba(243,244,246,.86) !important;
  font-weight: 650;
  padding: .65rem .85rem !important;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.navbar .nav-link:hover{
  color: rgba(255,255,255,.96) !important;
  background: rgba(255,255,255,.06);
}
.navbar .nav-link.active{
  color: rgba(255,255,255,.98) !important;
  background: linear-gradient(135deg, rgba(255,176,32,.20), rgba(255,92,42,.14));
  border: 1px solid rgba(255,176,32,.18);
}

/* Fix toggler visibility */
.navbar .navbar-toggler{
  box-shadow: none !important;
}
.navbar-dark .navbar-toggler-icon{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
  opacity: .95;
}

/* Make collapse area readable on mobile (panel background) */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 16px;
    background: rgba(10,10,14,.88);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
  }

  /* Stack items nicely */
  .navbar .navbar-nav{
    align-items: stretch !important;
    gap: .45rem !important;
  }

  /* Links full-width */
  .navbar .nav-link{
    width: 100%;
    text-align: left;
    padding: .75rem .95rem !important;
  }

  /* Buttons full width and aligned */
  .navbar .nav-item .btn{
    width: 100%;
    justify-content: center;
  }

  /* Remove desktop margin helpers on mobile */
  .navbar .nav-item.ms-lg-2{
    margin-left: 0 !important;
  }
}

/* Fix your custom buttons inside navbar so text never disappears */
.navbar .btn-outline-soft{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.navbar .btn-outline-soft:hover{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.98) !important;
}

/* Brand button in navbar */
.navbar .btn-brand{
  color: #160e08 !important;
  border: 0 !important;
}

/* Cart badge: keep readable */
.navbar .badge.text-bg-light{
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  font-weight: 800;
}

/* Brand dot fix (if it looks faint) */
.brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb020, #ff5c2a);
  box-shadow: 0 0 0 6px rgba(255,176,32,.12);
  display:inline-block;
}