:root {
  --black: #030303;
  --gold: #c99a2e;
  --gold2: #f3cf74;
  --white: #f7f7f7;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Arial, sans-serif;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 5vw;
  border-bottom: 1px solid rgba(201,154,46,.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gold2);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.brand img {
  width: 78px;
  height: auto;
}

.main-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
}

.main-nav a,
.nav-btn,
.gold-btn {
  color: var(--gold2);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
}

.nav-btn,
.gold-btn {
  border: 1px solid var(--gold);
  padding: 14px 24px;
}

.hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding: 60px 5vw;
}

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
}

h1 {
  font-size: clamp(58px, 8vw, 120px);
  line-height: .9;
  text-transform: uppercase;
}

h1 span {
  display: block;
  color: var(--gold);
}

.recipe-bowl {
  position: relative;
  height: 560px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(243,207,116,.35), rgba(80,44,10,.7) 42%, #050505 70%);
  border: 4px solid rgba(243,207,116,.5);
  box-shadow: inset 0 0 80px #000, 0 0 90px rgba(201,154,46,.18);
  overflow: hidden;
}

.soup {
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #5a3511, #1d1307 70%);
  animation: simmer 4s infinite linear;
}

.steam {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  filter: blur(22px);
  animation: steam 6s infinite ease-in-out;
}

.spoon {
  position: absolute;
  font-size: 110px;
  right: 18%;
  top: 5%;
  color: var(--gold2);
  transform-origin: bottom center;
  animation: spoonMix 10s infinite ease-in-out;
  z-index: 4;
}

.ingredient {
  position: absolute;
  z-index: 5;
  padding: 13px 18px;
  border: 1px solid var(--gold);
  background: rgba(0,0,0,.82);
  color: var(--gold2);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all .8s ease;
}

.item-1 { left: 20%; top: 62%; }
.item-2 { left: 18%; top: 35%; }
.item-3 { left: 48%; top: 30%; }
.item-4 { left: 55%; top: 68%; }
.item-5 { right: 10%; top: 52%; }

.process {
  padding: 40px 5vw 80px;
  border-top: 1px solid rgba(201,154,46,.35);
}

.process h2 {
  color: var(--gold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.process article {
  border: 1px solid rgba(201,154,46,.35);
  padding: 24px;
  background: rgba(255,255,255,.03);
}

.process strong {
  color: var(--gold2);
  display: block;
}

.process span {
  font-size: 14px;
  opacity: .8;
}

.site-footer {
  padding: 28px 5vw;
  border-top: 1px solid rgba(201,154,46,.35);
  color: var(--gold);
}

@keyframes spoonMix {
  0%, 80%, 100% { transform: rotate(-18deg) translate(0,0); }
  84% { transform: rotate(30deg) translate(-80px,80px); }
  88% { transform: rotate(-40deg) translate(-170px,150px); }
  92% { transform: rotate(24deg) translate(-80px,220px); }
  96% { transform: rotate(-18deg) translate(0,0); }
}

@keyframes simmer {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.03); }
}

@keyframes steam {
  0%,100% { opacity: .25; transform: translateY(20px); }
  50% { opacity: .6; transform: translateY(-30px); }
}

.recipe-bowl.mixing .soup {
  animation: simmer .8s linear infinite;
  filter: brightness(1.35);
}

.ingredient-pop {
  transform: scale(1.12);
  box-shadow: 0 0 22px rgba(243,207,116,.45);
}

.spoon-hover {
  transform: rotate(20deg) translate(-90px, 90px) !important;
}

.ingredient:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 24px rgba(243,207,116,.45);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .main-nav {
    display: none;
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .recipe-bowl {
    height: 430px;
  }
}