/* =========================================================
   BURGERASAURUS — Stylesheet
   Tokens → Base → Layout → Components → Sections → Responsive
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* color */
  --black:        #0a0a0a;
  --surface:      #141310;
  --surface-2:    #1c1b16;
  --surface-3:    #242219;
  --line:         rgba(244,239,226,0.09);
  --line-strong:  rgba(244,239,226,0.16);

  --green-deep:   #234d1f;
  --green:        #3f7d2f;
  --green-light:  #6fae3c;
  --lime:         #a6dc4f;

  --amber-deep:   #b06a1f;
  --amber:        #e2932e;
  --amber-light:  #f0ad4d;

  --cheese:       #f4b731;
  --ketchup:      #d4452e;

  --bone:         #f5f0e3;
  --bone-dim:     #c8c2b2;
  --bone-faint:   #8e8a7c;

  /* type */
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-alt:     'Lilita One', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* scale */
  --fs-hero:  clamp(2.9rem, 5.6vw + 1rem, 6.4rem);
  --fs-h2:    clamp(2.1rem, 3.4vw + 1rem, 3.6rem);
  --fs-h3:    clamp(1.2rem, 0.6vw + 1rem, 1.45rem);

  --container: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.85,.34,1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }
input, select{ font:inherit; }
svg{ fill: currentColor; }

::selection{ background: var(--amber); color:var(--black); }

:focus-visible{
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  font-family: var(--font-alt);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--amber);
  display:inline-block;
}

.section-title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  font-weight: 400;
  color: var(--bone);
  margin: 0 0 20px;
  letter-spacing: .01em;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Hero entrance (plays immediately on load, not scroll-triggered) ---------- */
.hero-anim{
  opacity: 0;
  animation: heroFadeUp .8s var(--ease) forwards;
}
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-anim{ opacity:1 !important; transform:none !important; animation:none !important; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

}


/* =========================================================
   FULL WIDTH BANNER SLIDER
   ========================================================= */
.banner-slider {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  position: relative;
  background: var(--black);
}

.banner-slider__track {
  display: flex;
  width: 300%; /* 3 slides = 300% */
  height: 100%;
  animation: slideAnimation 24s infinite linear;
}

.banner-slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bone);
}

.banner-slide h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  margin: 0;
}

.banner-slide p {
  font-family: var(--font-alt);
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--amber);
}

@keyframes slideAnimation {
  0%, 30% { transform: translateX(0); }
  33%, 63% { transform: translateX(-33.33%); }
  66%, 96% { transform: translateX(-66.66%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  .banner-slide h1 { font-size: 3rem; }
  .banner-slide p { font-size: 1.5rem; }
}

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-alt);
  letter-spacing: .03em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: .95rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn--lg{ padding: 18px 34px; font-size: 1rem; }
.btn--small{ padding: 11px 20px; font-size: .8rem; }

.btn--primary{
  background: linear-gradient(180deg, var(--amber-light), var(--amber) 60%, var(--amber-deep));
  color: #1a1204;
  box-shadow: 0 10px 24px -8px rgba(226,147,46,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary::after{
  content:"";
  position:absolute;
  top:-2px; right:16px;
  width:16px; height:16px;
  background: var(--black);
  border-radius:50%;
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(226,147,46,.65), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--primary:active{ transform: translateY(-1px); }

.btn--ghost{
  background: transparent;
  color: var(--bone);
  border: 2px solid var(--line-strong);
}
.btn--ghost:hover{ border-color: var(--lime); color: var(--lime); transform: translateY(-3px); }

/* =========================================================
   SCROLL RAIL
   ========================================================= */
.track-rail{
  position: fixed;
  left: 0; top: 0;
  width: 4px;
  height: 100vh;
  background: var(--line);
  z-index: 60;
}
.track-rail__fill{
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--lime), var(--amber));
  transition: height .08s linear;
}
@media (max-width: 768px){ .track-rail{ display:none; } }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-scrolled{
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 0;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.6);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.nav__badge{
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--black);
  border: 2px solid var(--green);
}
.nav__wordmark{
  font-family: var(--font-alt);
  font-size: 1.18rem;
  letter-spacing: .01em;
  color: var(--green-light);
  white-space: nowrap;
}
.nav__wordmark em{ font-style: normal; color: var(--amber); }

.nav__links{
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__link{
  font-family: var(--font-alt);
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--bone-dim);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav__link::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--amber);
  transition: width .25s var(--ease);
}
.nav__link:hover{ color: var(--bone); }
.nav__link:hover::after{ width: 100%; }

.nav__cta{ flex-shrink: 0; }

.nav__burger{
  display:none;
  position: relative;
  z-index: 70;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0;
  margin: 0;
}
.nav__burger span{
  display:block; width: 18px; height: 2px;
  background: var(--bone);
  margin: 0 auto;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 90px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(63,125,47,.22), transparent 70%),
    radial-gradient(40% 30% at 80% 10%, rgba(226,147,46,.10), transparent 70%),
    var(--black);
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__scales{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(244,239,226,.05) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 10%, transparent 75%);
  opacity: .7;
}
.hero__ptero{
  position:absolute;
  width: 130px; height: auto;
  color: var(--green-deep);
  opacity: .35;
}
.hero__ptero--1{ top: 14%; left: 8%; animation: drift1 14s ease-in-out infinite; }
.hero__ptero--2{ top: 22%; right: 10%; width: 90px; color: var(--amber-deep); opacity:.28; animation: drift2 11s ease-in-out infinite; }
@keyframes drift1{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(18px,-14px) rotate(-4deg); }
}
@keyframes drift2{
  0%,100%{ transform: translate(0,0) rotate(0deg) scaleX(-1); }
  50%{ transform: translate(-14px,10px) rotate(3deg) scaleX(-1); }
}

.hero__footprints{
  position:absolute;
  left: 50%; top: 52%;
  width: 1px; height: 1px;
  z-index: 1;
  pointer-events:none;
}
.hero__footprint{
  position:absolute;
  width: 22px; height: 28px;
  color: var(--green);
  opacity: 0;
  animation: stepIn .5s var(--ease) forwards;
}
@keyframes stepIn{
  0%{ opacity:0; transform: translateY(6px) scale(.7); }
  60%{ opacity:.55; }
  100%{ opacity:.4; transform: translateY(0) scale(1); }
}

.hero__content{ position: relative; z-index: 2; max-width: 880px; }

.hero__eyebrow{ justify-content: center; }
.hero__eyebrow::before{ display:none; }

.hero__logo-wrap{
  margin: 6px auto 18px;
  max-width: 620px;
}
.hero__logo{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.65));
  animation: walkIn 1.1s var(--ease) both, bob 5.5s ease-in-out 1.1s infinite;
}
@keyframes walkIn{
  0%{ opacity:0; transform: translateX(-90px) rotate(-6deg) scale(.92); }
  100%{ opacity:1; transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-9px) rotate(.6deg); }
}

.hero__headline{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: .98;
  color: var(--bone);
  margin: 6px 0 22px;
}

.hero__sub{
  max-width: 560px;
  margin: 0 auto 36px;
  color: var(--bone-dim);
  font-size: clamp(1rem, .4vw + 1rem, 1.15rem);
}

.hero__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero__stats{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.hero__stats li{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
  border-left: 1px solid var(--line-strong);
}
.hero__stats li:first-child{ border-left: none; }
.hero__stat-num{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cheese);
}
.hero__stat-label{
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--bone-faint);
  text-transform: uppercase;
  margin-top: 4px;
}

.hero__scroll-cue{
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  background: none; border: none;
  z-index: 2;
  padding: 6px;
}
.hero__scroll-track{
  display:block;
  width: 26px; height: 42px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  position: relative;
}
.hero__scroll-dot{
  position:absolute;
  top: 7px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--lime);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform: translateY(0); opacity:1; }
  70%{ transform: translateY(18px); opacity:0; }
  71%{ transform: translateY(0); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background: linear-gradient(90deg, var(--amber-deep), var(--amber) 50%, var(--amber-deep));
  transform: rotate(-1.4deg);
  margin: -28px 0 -8px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  white-space: nowrap;
  padding: 13px 0;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55);
}
.marquee__track{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  animation: marquee 26s linear infinite;
  padding-left: 100%;
}
.marquee__track span{
  font-family: var(--font-alt);
  font-size: .95rem;
  letter-spacing: .06em;
  color: #1a1204;
}
.marquee__dot{ opacity: .6; font-size: .8rem; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* =========================================================
   STORY
   ========================================================= */
.story{
  background: var(--surface);
  padding: 130px 0 110px;
  position: relative;
}
.story .container{ text-align: center; }
.story .section-title{ margin-bottom: 70px; }

.story__steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  position: relative;
  text-align: left;
}
.story__steps::before{
  content:"";
  position: absolute;
  top: 26px; left: 16%; right: 16%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 18px);
  background-size: 18px 2px;
  z-index: 0;
}
.story__step{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 28px 30px;
  position: relative;
  z-index: 1;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.story__step:hover{ transform: translateY(-6px); border-color: var(--green); }
.story__num{
  display:block;
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  -webkit-text-stroke: 1.5px var(--green-light);
  color: transparent;
  margin-bottom: 14px;
}
.story__title{
  font-family: var(--font-alt);
  font-size: var(--fs-h3);
  color: var(--amber-light);
  margin: 0 0 12px;
  letter-spacing: .01em;
}
.story__text{ color: var(--bone-dim); font-size: .98rem; margin:0; }

/* =========================================================
   MENU
   ========================================================= */
.menu{ padding: 120px 0 70px; position: relative; }
.menu__head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}
.menu__intro{
  max-width: 380px;
  color: var(--bone-dim);
  font-size: 1rem;
  margin: 0 0 6px;
}

.carousel{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 4px 0 30px;
}
.carousel.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.carousel::-webkit-scrollbar{ display:none; }

.carousel__track{
  display: flex;
  gap: 26px;
  padding: 0 max(28px, calc((100vw - var(--container)) / 2 + 28px));
  width: max-content;
}

.menu-card{
  scroll-snap-align: start;
  width: min(340px, 78vw);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 28px 28px 28px 6px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  user-select: none;
  flex-shrink: 0;
}
.menu-card:hover{
  transform: translateY(-10px);
  border-color: var(--green);
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.65);
}
.menu-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-3);
}
.menu-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.menu-card:hover .menu-card__media img{ transform: scale(1.08); }
.menu-card__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,8,.78));
}
.menu-card__veg{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display:flex; align-items:center; gap:6px;
  background: rgba(10,10,8,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(166,220,79,.5);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
}
.menu-card__veg-dot{
  width: 8px; height:8px; border-radius:2px;
  border: 1.5px solid var(--lime);
  position:relative;
}
.menu-card__veg-dot::after{
  content:"";
  position:absolute; inset: 1.5px;
  background: var(--lime);
  border-radius: 1px;
}
.menu-card__claws{
  position: absolute;
  bottom: 12px; left: 14px;
  z-index: 2;
  display:flex; gap:4px;
}
.menu-card__claws svg{ width: 15px; height:15px; color: var(--bone-faint); }
.menu-card__claws svg.is-active{ color: var(--ketchup); }

.menu-card__body{ padding: 22px 22px 24px; }
.menu-card__name{
  font-family: var(--font-alt);
  font-size: 1.25rem;
  color: var(--bone);
  margin: 0 0 8px;
}
.menu-card__desc{
  font-size: .9rem;
  color: var(--bone-dim);
  margin: 0 0 18px;
  min-height: 58px;
}
.menu-card__foot{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.menu-card__price{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--cheese);
}
.menu-card__add{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-alt);
  font-size: .78rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--bone);
  border-radius: 999px;
  padding: 9px 16px;
  transition: background .25s, transform .25s var(--ease);
}
.menu-card:hover .menu-card__add{ background: var(--green-light); transform: scale(1.04); }

.carousel__controls{
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 22px;
}
.carousel__arrow{
  width: 50px; height:50px;
  border-radius:50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--bone-dim);
  transition: background .25s, color .25s, transform .25s var(--ease);
  flex-shrink:0;
}
.carousel__arrow svg{ width: 18px; height: 18px; }
.carousel__arrow--prev svg{ transform: scaleX(-1); }
.carousel__arrow:hover{ background: var(--green); color: var(--black); transform: translateY(-2px); }
.carousel__arrow:disabled{ opacity:.35; pointer-events:none; }

.carousel__dots{ display:flex; align-items:center; gap: 10px; }
.carousel__dot{
  width: 16px; height: 20px;
  background: none; border:none;
  color: var(--line-strong);
  padding:0;
  transition: color .25s, transform .25s var(--ease);
}
.carousel__dot.is-active{ color: var(--amber); transform: scale(1.2) rotate(8deg); }

/* =========================================================
   WHY
   ========================================================= */
.why{ background: var(--surface); padding: 120px 0; }
.why .section-title{ margin-bottom: 60px; }
.why__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why__card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.why__card:hover{ transform: translateY(-6px); border-color: var(--amber); }
.why__card:hover .why__icon{ transform: rotate(-6deg) scale(1.08); }
.why__icon{
  width: 40px; height: 50px;
  color: var(--lime);
  margin-bottom: 20px;
  transition: transform .35s var(--ease);
}
.why__card:nth-child(2) .why__icon{ color: var(--amber); }
.why__card:nth-child(3) .why__icon{ color: var(--ketchup); }
.why__card:nth-child(4) .why__icon{ color: var(--green-light); }
.why__card h3{
  font-family: var(--font-alt);
  font-size: 1.12rem;
  color: var(--bone);
  margin: 0 0 10px;
  line-height: 1.25;
}
.why__card p{ color: var(--bone-dim); font-size: .92rem; margin:0; }

/* =========================================================
   STATS
   ========================================================= */
.stats{
  background: linear-gradient(180deg, var(--green-deep), #16320f);
  padding: 80px 0;
  position: relative;
}
.stats__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats__item{
  text-align:center;
  padding: 0 16px;
  border-left: 1px solid rgba(244,239,226,.14);
}
.stats__item:first-child{ border-left:none; }
.stats__num{
  display:block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw + 1rem, 3rem);
  color: var(--lime);
}
.stats__label{
  display:block;
  margin-top: 8px;
  font-size: .82rem;
  letter-spacing:.03em;
  text-transform: uppercase;
  color: rgba(244,239,226,.75);
}

/* =========================================================
   FANS
   ========================================================= */
.fans{ background: var(--black); padding: 120px 0; }
.fans .section-title{ margin-bottom: 60px; }
.fans__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fans__card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 28px 28px;
  margin:0;
  position: relative;
}
.fans__card::before{
  content: "\201C";
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--amber);
  opacity: .25;
  position: absolute;
  top: 6px; left: 18px;
  line-height: 1;
}
.fans__card p{
  position: relative;
  font-size: 1.02rem;
  color: var(--bone);
  margin: 18px 0 22px;
  font-style: italic;
}
.fans__card footer{
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--lime);
}
.fans__card footer span{ color: var(--bone-faint); font-style:normal; }

/* =========================================================
   FIND US
   ========================================================= */
.find-us{
  position: relative;
  background: radial-gradient(60% 60% at 50% 30%, rgba(63,125,47,.22), transparent 70%), var(--surface);
  padding: 130px 0 140px;
  overflow: hidden;
}
.find-us__inner{ max-width: 640px; text-align:center; position:relative; z-index:1; }
.find-us .section-title, .find-us .eyebrow{ }
.find-us__sub{ color: var(--bone-dim); margin: 0 0 36px; }

.find-us__raptor{
  position:absolute;
  width: 360px; height:auto;
  color: var(--green-deep);
  opacity:.3;
  right: -60px; bottom: -40px;
  z-index:0;
  animation: raptorBob 7s ease-in-out infinite;
}
@keyframes raptorBob{
  0%,100%{ transform: translateY(0) scaleX(-1); }
  50%{ transform: translateY(-10px) scaleX(-1); }
}

.find-us__form{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:center;
  align-items: stretch;
}
.find-us__input, .find-us__select{
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  border-radius: 999px;
  padding: 0 20px;
  height: 54px;
  min-width: 200px;
  flex: 1 1 200px;
}
.find-us__input:focus, .find-us__select:focus{ border-color: var(--lime); }
.find-us__input::placeholder{ color: var(--bone-faint); }
.find-us__form .btn{ flex: 0 0 auto; }

.find-us__success{
  margin: 22px 0 0;
  font-family: var(--font-alt);
  color: var(--lime);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.find-us__success.is-visible{ opacity:1; transform: translateY(0); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: 80px 0 28px;
  position: relative;
  overflow: hidden;
}
.footer__raptor{
  position: absolute;
  bottom: 10px;
  left: -40px;
  width: 200px;
  height: auto;
  color: var(--surface-3);
  opacity: .5;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr .8fr .8fr 1.2fr;
  gap: 40px;
  position:relative;
  z-index: 1;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.footer__brand .nav__brand{ margin-bottom: 14px; }
.footer__tag{ color: var(--bone-faint); font-size: .92rem; max-width: 260px; margin: 0 0 18px; }
.footer__social{ display:flex; gap: 12px; }
.footer__social-link{
  width: 38px; height:38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .25s, transform .25s var(--ease), color .25s;
  color: var(--bone-dim);
}
.footer__social-link svg{ width:16px; height:16px; }
.footer__social-link:hover{ border-color: var(--amber); color: var(--amber); transform: translateY(-3px); }

.footer__col h4{
  font-family: var(--font-alt);
  font-size: .92rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin: 0 0 18px;
}
.footer__col a{
  display:block;
  color: var(--bone-dim);
  font-size: .94rem;
  margin-bottom: 12px;
  transition: color .2s;
  width: fit-content;
}
.footer__col a:hover{ color: var(--lime); }

.footer__newsletter-text{ color: var(--bone-faint); font-size: .88rem; margin: 0 0 16px; max-width: 280px; }
.footer__newsletter{
  display:flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow:hidden;
  max-width: 300px;
}
.footer__newsletter input{
  flex:1;
  background: transparent;
  border: none;
  padding: 13px 18px;
  color: var(--bone);
  min-width: 0;
}
.footer__newsletter input::placeholder{ color: var(--bone-faint); }
.footer__newsletter button{
  background: var(--green);
  border: none;
  color: var(--black);
  width: 48px;
  font-size: 1.1rem;
  flex-shrink:0;
  transition: background .2s;
}
.footer__newsletter button:hover{ background: var(--lime); }

.footer__bottom{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  font-size: .82rem;
  color: var(--bone-faint);
  position:relative; z-index:1;
}
.footer__easter{ font-family: var(--font-mono); font-size: .76rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .why__grid{ grid-template-columns: repeat(2, 1fr); }
  .fans__grid{ grid-template-columns: 1fr 1fr; }
  .fans__card:last-child{ grid-column: span 2; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .story__steps{ grid-template-columns: 1fr; gap: 20px; }
  .story__steps::before{ display:none; }
}

@media (max-width: 860px){
  .nav__links{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: rgba(10,10,8,.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    border-left: 1px solid var(--line);
    z-index: 49;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__link{ font-size: 1.3rem; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  .hero__stats{ gap: 10px 0; }
  .hero__stats li{ padding: 0 16px; }
}

@media (max-width: 768px){
  .stats__grid{ grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .stats__item:nth-child(3){ border-left:none; }
  .stats__item{ border-left: 1px solid rgba(244,239,226,.14); }
  .stats__item:nth-child(odd){ border-left:none; }

  .menu__head{ flex-direction: column; align-items: flex-start; }
  .menu__intro{ max-width: none; }

  .fans__grid{ grid-template-columns: 1fr; }
  .fans__card:last-child{ grid-column: span 1; }

  .footer__grid{ grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__col--wide{ grid-column: span 2; }

  .find-us__form{ flex-direction: column; }
  .find-us__input, .find-us__select, .find-us__form .btn{ width:100%; flex: 1 1 auto; }
}

@media (max-width: 560px){
  .hero{ padding-top: 120px; }
  .hero__cta{ flex-direction: column; width: 100%; }
  .hero__cta .btn{ width: 100%; }
  .why__grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__col--wide{ grid-column: span 1; }
  .nav__wordmark{ font-size: 1rem; }
  .story{ padding: 90px 0 80px; }
  .menu{ padding: 90px 0 60px; }
  .why{ padding: 90px 0; }
  .fans{ padding: 90px 0; }
  .find-us{ padding: 90px 0 100px; }
}