/* ============================================================
   Munchi Landing — styles
   ============================================================ */

body { margin: 0; background: #F6F2E9; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #4C5D3E; color: #F6F2E9; }

.page {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: #F6F2E9;
  color: #21241C;
  overflow-x: hidden;
}

@keyframes munchiPulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }
@keyframes munchiEq    { 0%, 100% { height: 7px; } 50% { height: 20px; } }
@keyframes munchiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- Sticky header ---- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 16px 0;
  background: rgba(246, 242, 233, 0);
  border-bottom: 1px solid rgba(33, 36, 28, 0);
  box-shadow: none;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
#site-header.scrolled {
  background: rgba(246, 242, 233, 0.82);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid rgba(33, 36, 28, 0.07);
  box-shadow: 0 10px 30px -22px rgba(33, 36, 28, 0.5);
}

/* ---- Hover states (ported from style-hover) ---- */
.navlink { transition: color .2s ease; }
.navlink:hover { color: #4C5D3E; }

.btn-nav { transition: transform .25s ease, box-shadow .25s ease; }
.btn-nav:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(76, 93, 62, 0.85); }

.btn-primary-lg { transition: transform .25s ease, box-shadow .25s ease; }
.btn-primary-lg:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -16px rgba(76, 93, 62, 0.9); }

.btn-ghost { transition: transform .25s ease, background .25s ease; }
.btn-ghost:hover { transform: translateY(-3px); background: #ffffff; }

.lift-card { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
.lift-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(33, 36, 28, 0.55); }

.btn-cta { transition: transform .25s ease; }
.btn-cta:hover { transform: translateY(-2px); }

.footlink { transition: color .2s ease; }
.footlink:hover { color: #4C5D3E; }

.social { transition: background .2s ease; }
.social:hover { background: #ddd6c6; }

/* ---- Reveal on scroll ---- */
[data-reveal] { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
[data-reveal].reveal-armed { opacity: 0; transform: translateY(30px); }
[data-reveal].shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .phone-float { animation: none !important; }
}

/* ---- FAQ accordion ---- */
.faq-answer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s ease, opacity .35s ease; }
.faq-item.open .faq-answer { max-height: 240px; opacity: 1; }
.faq-icon { transition: transform .35s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- Recipe Radio recommendation entrance ---- */
.rec { opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.rec.rec-on { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Float animation for hero phone ---- */
.phone-float { animation: munchiFloat 7s ease-in-out infinite; }

/* ---- "A closer look" showcase shots ---- */
.showcase-shot {
  display: block;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 40px 70px -44px rgba(33, 36, 28, 0.55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.showcase-shot:hover {
  transform: translateY(-8px);
  box-shadow: 0 50px 80px -40px rgba(33, 36, 28, 0.6);
}

/* ---- Honeypot (spam trap, visually hidden) ---- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ---- Contact form fields ---- */
.field {
  width: 100%;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  color: #21241C;
  background: #F6F2E9;
  border: 1px solid #e2dccd;
  border-radius: 13px;
  padding: 13px 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #a8a596; }
.field:focus {
  border-color: #4C5D3E;
  box-shadow: 0 0 0 3px rgba(76, 93, 62, 0.14);
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .grid-2 { grid-template-columns: 1fr !important; gap: 44px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-art { order: -1; }
  .steps-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  .stats-grid > div { border-left: none !important; }
  .steps-grid, .audience-grid { grid-template-columns: 1fr !important; }
  .audience-grid > div { grid-column: auto !important; height: 230px !important; }
  .showcase-row { flex-wrap: wrap; gap: 16px; }
  h1.hero-title { font-size: 56px !important; }
  .section-title { font-size: 40px !important; }
}

@media (max-width: 720px) {
  nav.main-nav .navlink { display: none; }
  /* tighten horizontal gutters and vertical rhythm */
  section, .pad { padding-left: 22px !important; padding-right: 22px !important; }
  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  #top { padding-top: 116px !important; }          /* clear the fixed header */
  #radio { margin-top: 0 !important; }
  .showcase-shot { width: 46% !important; max-width: 200px; margin-top: 0 !important; }
  /* CTA card: don't waste 40px of side margin on a phone */
  #cta { margin: 0 16px !important; padding: 64px 24px !important; border-radius: 28px !important; }
}

@media (max-width: 560px) {
  h1.hero-title { font-size: 46px !important; }
  .section-title { font-size: 32px !important; }
  /* stack the waitlist form so nothing clips */
  form[data-endpoint="api/waitlist.php"] { flex-direction: column; gap: 8px !important; }
  form[data-endpoint="api/waitlist.php"] input[name="email"] { width: 100%; padding: 14px 16px !important; text-align: center; }
  form[data-endpoint] button[type="submit"] { width: 100%; }
  .contact-row { flex-direction: column; gap: 16px !important; }
}

@media (max-width: 380px) {
  h1.hero-title { font-size: 40px !important; }
  .showcase-shot { width: 60% !important; }
}