{"id":42,"date":"2026-06-06T16:56:09","date_gmt":"2026-06-06T16:56:09","guid":{"rendered":"https:\/\/bulkramen.com\/?page_id=42"},"modified":"2026-06-06T17:07:37","modified_gmt":"2026-06-06T17:07:37","slug":"home","status":"publish","type":"page","link":"https:\/\/bulkramen.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =====================================================\n   BULK RAMEN \u2014 Vanilla CSS\n   Converted from Tailwind v4 + shadcn\/ui\n   ===================================================== *\/\n\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nimg, svg { display: block; }\na { text-decoration: none; color: inherit; }\nbutton { cursor: pointer; font-family: inherit; background: none; border: none; }\nul, ol { list-style: none; }\n\n\/* ===== DESIGN TOKENS ===== *\/\n:root {\n  --radius: 0.5rem;\n\n  \/* Autumn Harvest dark palette (oklch) *\/\n  --background:          oklch(0.16 0.02 40);\n  --foreground:          oklch(0.96 0.02 80);\n  --card:                oklch(0.21 0.03 40);\n  --card-foreground:     oklch(0.96 0.02 80);\n  --primary:             oklch(0.72 0.16 60);\n  --primary-foreground:  oklch(0.16 0.02 40);\n  --secondary:           oklch(0.28 0.05 40);\n  --muted:               oklch(0.24 0.03 40);\n  --muted-foreground:    oklch(0.72 0.04 70);\n  --accent:              oklch(0.82 0.16 85);\n  --destructive:         oklch(0.55 0.22 25);\n  --border:              oklch(1 0 0 \/ 10%);\n  --input:               oklch(1 0 0 \/ 12%);\n  --ember:               oklch(0.36 0.10 30);\n  --gold:                oklch(0.82 0.16 85);\n\n  \/* Semantic alpha variants (pre-computed for reuse) *\/\n  --background-80:       oklch(0.16 0.02 40 \/ 0.80);\n  --background-70:       oklch(0.16 0.02 40 \/ 0.70);\n  --background-60:       oklch(0.16 0.02 40 \/ 0.60);\n  --background-40:       oklch(0.16 0.02 40 \/ 0.40);\n  --background-30:       oklch(0.16 0.02 40 \/ 0.30);\n  --background-90:       oklch(0.16 0.02 40 \/ 0.90);\n  --primary-30:          oklch(0.72 0.16 60 \/ 0.30);\n  --primary-20:          oklch(0.72 0.16 60 \/ 0.20);\n  --primary-10:          oklch(0.72 0.16 60 \/ 0.10);\n  --primary-50:          oklch(0.72 0.16 60 \/ 0.50);\n  --card-40:             oklch(0.21 0.03 40 \/ 0.40);\n  --section-dark:        oklch(0.13 0.02 40);\n\n  --font-display: \"Bebas Neue\", system-ui, sans-serif;\n  --font-sans:    \"Barlow\", system-ui, sans-serif;\n}\n\n\/* ===== BASE ===== *\/\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: var(--background);\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  -webkit-font-smoothing: antialiased;\n  min-height: 100vh;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-display);\n  letter-spacing: 0.01em;\n  font-weight: 400;\n}\n\n\/* ===== LAYOUT UTILITIES ===== *\/\n.container-page {\n  max-width: 1200px;\n  margin-inline: auto;\n  padding-inline: 1.25rem;\n}\n\n.text-center  { text-align: center; }\n.mx-auto      { margin-inline: auto; }\n.max-w-2xl    { max-width: 42rem; }\n.max-w-3xl    { max-width: 48rem; }\n.mt-16        { margin-top: 4rem; }\n.hidden       { display: none !important; }\n\n\/* ===== COLOR UTILITY ===== *\/\n.text-primary { color: var(--primary); }\n\n\/* ===== REVEAL ANIMATION ===== *\/\n.reveal {\n  opacity: 0;\n  transform: translateY(24px);\n  transition: opacity 700ms ease, transform 700ms ease;\n}\n.reveal.in-view {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* ===== SECTION HELPERS ===== *\/\n.py-section {\n  padding-top: 6rem;\n  padding-bottom: 6rem;\n}\n.section-dark {\n  background-color: var(--section-dark);\n}\n\n\/* ===== EYEBROW TEXT ===== *\/\n.eyebrow {\n  font-family: var(--font-sans);\n  font-size: 0.75rem;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: var(--primary);\n  margin-bottom: 0.75rem;\n}\n\n\/* ===== SECTION TITLE ===== *\/\n.section-title {\n  font-family: var(--font-display);\n  font-size: clamp(2.25rem, 5vw, 3.75rem);\n  line-height: 1;\n}\n\n\/* ===== BUTTONS ===== *\/\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius);\n  font-family: var(--font-display);\n  letter-spacing: 0.1em;\n  font-weight: 400;\n  cursor: pointer;\n  transition: background-color 0.2s ease, color 0.2s ease;\n  text-decoration: none;\n  border: none;\n}\n.btn-primary {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n}\n.btn-primary:hover {\n  background-color: oklch(0.65 0.16 60);\n}\n.btn-sm {\n  height: 2.25rem;\n  padding: 0 1.25rem;\n  font-size: 1rem;\n}\n.btn-lg {\n  height: 3.5rem;\n  padding: 0 2rem;\n  font-size: 1.125rem;\n  letter-spacing: 0.15em;\n}\n.btn-form {\n  height: 3rem;\n  padding: 0 1.5rem;\n  font-size: 1rem;\n  letter-spacing: 0.08em;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n\/* ===== GRID SYSTEMS ===== *\/\n.grid-2 {\n  display: grid;\n  gap: 1.5rem;\n}\n.grid-3 {\n  display: grid;\n  gap: 1.5rem;\n}\n.grid-4 {\n  display: grid;\n  gap: 1rem;\n}\n\n\n\/* =====================================================\n   NAV\n   ===================================================== *\/\n#site-nav {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  border-bottom: 1px solid transparent;\n  transition: background-color 0.3s ease, backdrop-filter 0.3s ease,\n              -webkit-backdrop-filter 0.3s ease, border-color 0.3s ease;\n}\n#site-nav.scrolled {\n  background-color: var(--background-80);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border-bottom-color: var(--border);\n}\n\n.nav-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 4rem;\n}\n\n.nav-logo {\n  font-family: var(--font-display);\n  font-size: 1.5rem;\n  letter-spacing: 0.1em;\n  color: var(--foreground);\n}\n\n\n\/* =====================================================\n   HERO\n   ===================================================== *\/\n.hero {\n  position: relative;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.hero-img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* gradient: bottom \u2192 top *\/\n.hero-overlay-tb {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to top,\n    var(--background)    0%,\n    var(--background-70) 50%,\n    var(--background-30) 100%\n  );\n}\n\n\/* gradient: left \u2192 right *\/\n.hero-overlay-lr {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to right,\n    var(--background-90) 0%,\n    var(--background-40) 50%,\n    transparent          100%\n  );\n}\n\n.hero-content {\n  position: relative;\n  z-index: 10;\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.hero-title {\n  font-size: clamp(3.5rem, 10vw, 9rem);\n  line-height: 0.9;\n  color: var(--foreground);\n  max-width: 48rem;\n}\n\n.hero-sub {\n  margin-top: 1.5rem;\n  font-size: 1rem;\n  color: var(--muted-foreground);\n  max-width: 36rem;\n}\n\n.hero-cta {\n  margin-top: 2.5rem;\n}\n\n\n\/* =====================================================\n   PROBLEM\n   ===================================================== *\/\n.card-problem {\n  height: 100%;\n  padding: 2rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background-color: var(--card);\n  position: relative;\n  overflow: hidden;\n}\n\n.card-number {\n  font-family: var(--font-display);\n  font-size: 4.5rem;\n  line-height: 1;\n  color: var(--primary-20);\n  position: absolute;\n  top: -0.5rem;\n  right: 1rem;\n  pointer-events: none;\n  user-select: none;\n}\n\n.card-title {\n  font-family: var(--font-display);\n  font-size: 1.5rem;\n  margin-bottom: 0.75rem;\n  position: relative;\n}\n\n.card-body {\n  color: var(--muted-foreground);\n  position: relative;\n  line-height: 1.6;\n}\n\n\n\/* =====================================================\n   PRODUCT\n   ===================================================== *\/\n.product-grid {\n  display: grid;\n  gap: 3rem;\n  align-items: center;\n}\n\n\/* Mobile: image on top (order 1), text below (order 2) *\/\n.product-image { order: 1; }\n.product-text  { order: 2; }\n\n.product-text .section-title {\n  line-height: 0.95;\n}\n\n.product-desc {\n  margin-top: 1.5rem;\n  font-size: 1.125rem;\n  color: var(--muted-foreground);\n  line-height: 1.7;\n}\n\n.product-quote {\n  margin-top: 2rem;\n  border-left: 2px solid var(--primary);\n  padding-left: 1.25rem;\n  padding-block: 0.5rem;\n}\n\n.product-quote p {\n  font-family: var(--font-display);\n  font-size: 1.5rem;\n  color: var(--foreground);\n}\n\n.product-desc2 {\n  margin-top: 1.5rem;\n  color: var(--muted-foreground);\n  line-height: 1.7;\n}\n\n.chip-list {\n  margin-top: 2rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.chip {\n  padding: 0.375rem 1rem;\n  border-radius: 9999px;\n  font-size: 0.875rem;\n  border: 1px solid var(--primary-30);\n  background-color: var(--primary-10);\n  color: var(--primary);\n}\n\n.product-img-wrap {\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  aspect-ratio: 1 \/ 1;\n  background-color: var(--ember);\n}\n\n.product-img-wrap img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.product-img-ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 1rem;\n  box-shadow: inset 0 0 0 1px oklch(1 0 0 \/ 0.1);\n  pointer-events: none;\n}\n\n\n\/* =====================================================\n   HOW IT WORKS\n   ===================================================== *\/\n.how-grid {\n  position: relative;\n}\n\n\/* Dashed connector line between step icons (desktop only) *\/\n.dashed-line {\n  display: none;\n  position: absolute;\n  top: 3rem;\n  left: 16%;\n  right: 16%;\n  border-top: 1px dashed var(--primary-30);\n  pointer-events: none;\n}\n\n.card-step {\n  background-color: var(--card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 2rem;\n  text-align: center;\n  height: 100%;\n  position: relative;\n}\n\n.step-icon {\n  width: 5rem;\n  height: 5rem;\n  margin: 0 auto 1.25rem;\n  border-radius: 50%;\n  background-color: var(--primary-10);\n  border: 1px solid var(--primary-30);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--primary);\n}\n\n.step-label {\n  font-family: var(--font-display);\n  font-size: 0.875rem;\n  color: var(--primary);\n  letter-spacing: 0.2em;\n}\n\n.step-title {\n  font-family: var(--font-display);\n  font-size: 1.875rem;\n  margin-top: 0.25rem;\n}\n\n.step-body {\n  margin-top: 0.75rem;\n  color: var(--muted-foreground);\n  line-height: 1.6;\n}\n\n\n\/* =====================================================\n   FLAVORS\n   ===================================================== *\/\n.flavor-card {\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid var(--border);\n  background-color: var(--card);\n}\n\n.flavor-img-wrap {\n  aspect-ratio: 4 \/ 3;\n  overflow: hidden;\n  background-color: var(--ember);\n}\n\n.flavor-img-wrap img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 700ms ease;\n}\n\n.flavor-card:hover .flavor-img-wrap img {\n  transform: scale(1.05);\n}\n\n.flavor-info {\n  padding: 1.5rem;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n}\n\n.flavor-eyebrow {\n  font-size: 0.75rem;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: var(--primary);\n  margin-bottom: 0.25rem;\n}\n\n.flavor-name {\n  font-family: var(--font-display);\n  font-size: 2.25rem;\n}\n\n.flavor-desc {\n  color: var(--muted-foreground);\n  margin-top: 0.25rem;\n  font-size: 0.9375rem;\n}\n\n.flavor-card-coming {\n  border-radius: 1rem;\n  border: 1px dashed var(--border);\n  background-color: var(--card-40);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 2.5rem;\n  min-height: 20rem;\n}\n\n.coming-icon {\n  width: 4rem;\n  height: 4rem;\n  border-radius: 50%;\n  background-color: var(--primary-10);\n  border: 1px solid var(--primary-30);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--primary);\n  margin-bottom: 1.25rem;\n}\n\n.coming-eyebrow {\n  font-size: 0.75rem;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: var(--primary);\n  margin-bottom: 0.5rem;\n}\n\n.coming-title {\n  font-family: var(--font-display);\n  font-size: 2.25rem;\n}\n\n.coming-desc {\n  color: var(--muted-foreground);\n  margin-top: 0.5rem;\n  max-width: 18rem;\n  line-height: 1.6;\n}\n\n\n\/* =====================================================\n   WHO FOR\n   ===================================================== *\/\n.card-who {\n  height: 100%;\n  padding: 1.5rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background-color: var(--card);\n}\n\n.who-icon {\n  color: var(--primary);\n  margin-bottom: 1rem;\n}\n\n.who-title {\n  font-family: var(--font-display);\n  font-size: 1.5rem;\n}\n\n.who-body {\n  color: var(--muted-foreground);\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.6;\n}\n\n\n\/* =====================================================\n   WAITLIST\n   ===================================================== *\/\n.waitlist-section {\n  position: relative;\n  overflow: hidden;\n}\n\n.waitlist-bg {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, var(--ember) 0%, var(--background) 55%, var(--background) 100%);\n}\n\n.waitlist-glow {\n  position: absolute;\n  top: -8rem;\n  right: -8rem;\n  width: 24rem;\n  height: 24rem;\n  border-radius: 50%;\n  background-color: var(--primary-20);\n  filter: blur(80px);\n  pointer-events: none;\n}\n\n.waitlist-inner {\n  position: relative;\n  z-index: 1;\n}\n\n.waitlist-header {\n  margin-bottom: 3rem;\n}\n\n.waitlist-title {\n  font-family: var(--font-display);\n  font-size: clamp(3rem, 7vw, 4.5rem);\n  line-height: 1;\n}\n\n.waitlist-sub {\n  margin-top: 1rem;\n  color: var(--muted-foreground);\n}\n\n.waitlist-card {\n  max-width: 36rem;\n  margin-inline: auto;\n  background-color: var(--card);\n  border: 1px solid var(--border);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  box-shadow: 0 25px 50px oklch(0 0 0 \/ 0.4);\n}\n\n\/* Success state *\/\n.waitlist-success {\n  text-align: center;\n  padding: 2rem 0;\n}\n\n.success-icon {\n  width: 3.5rem;\n  height: 3.5rem;\n  color: var(--primary);\n  margin: 0 auto 1rem;\n}\n\n.success-title {\n  font-family: var(--font-display);\n  font-size: 1.875rem;\n}\n\n.success-desc {\n  color: var(--muted-foreground);\n  margin-top: 0.5rem;\n}\n\n\/* Form *\/\n#waitlist-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.email-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.email-input {\n  flex: 1;\n  height: 3rem;\n  padding: 0 1rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--input);\n  background-color: var(--background-60);\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  font-size: 1rem;\n  outline: none;\n  width: 100%;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.email-input::placeholder {\n  color: var(--muted-foreground);\n}\n\n.email-input:focus {\n  border-color: var(--primary);\n  box-shadow: 0 0 0 2px var(--primary-20);\n}\n\n.form-extras {\n  padding-top: 1rem;\n  border-top: 1px solid var(--border);\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}\n\n.chip-label {\n  font-size: 0.875rem;\n  color: var(--muted-foreground);\n  margin-bottom: 0.75rem;\n}\n\n.chip-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.chip-btn {\n  padding: 0.5rem 1rem;\n  border-radius: 9999px;\n  border: 1px solid var(--border);\n  background-color: var(--background-40);\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;\n}\n\n.chip-btn:hover {\n  border-color: var(--primary-50);\n}\n\n.chip-btn.selected {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n  border-color: var(--primary);\n}\n\n.form-disclaimer {\n  font-size: 0.75rem;\n  text-align: center;\n  color: var(--muted-foreground);\n}\n\n\n\/* =====================================================\n   FAQ\n   ===================================================== *\/\n.faq-container {\n  max-width: 48rem;\n  margin-inline: auto;\n  padding-inline: 1.25rem;\n}\n\n.faq-title {\n  margin-bottom: 2.5rem;\n}\n\n.accordion {\n  width: 100%;\n}\n\n.accordion-item {\n  border-bottom: 1px solid var(--border);\n}\n\n.accordion-trigger {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 1.25rem 0;\n  background: none;\n  border: none;\n  color: var(--foreground);\n  font-family: var(--font-display);\n  font-size: 1.25rem;\n  text-align: left;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.accordion-trigger:hover {\n  color: var(--primary);\n}\n\n.accordion-chevron {\n  flex-shrink: 0;\n  color: var(--muted-foreground);\n  transition: transform 0.3s ease;\n}\n\n.accordion-trigger[aria-expanded=\"true\"] .accordion-chevron {\n  transform: rotate(180deg);\n}\n\n.accordion-content {\n  overflow: hidden;\n  max-height: 0;\n  transition: max-height 0.35s ease;\n}\n\n.accordion-content.open {\n  max-height: 600px;\n}\n\n.accordion-content p {\n  color: var(--muted-foreground);\n  font-size: 1rem;\n  padding-bottom: 1.25rem;\n  line-height: 1.7;\n}\n\n\n\/* =====================================================\n   FOOTER\n   ===================================================== *\/\n.site-footer {\n  border-top: 1px solid var(--border);\n  background-color: var(--background);\n}\n\n.footer-inner {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.footer-grid {\n  display: grid;\n  gap: 2.5rem;\n}\n\n.footer-logo {\n  font-family: var(--font-display);\n  font-size: 1.875rem;\n  letter-spacing: 0.1em;\n  color: var(--foreground);\n}\n\n.footer-tagline {\n  color: var(--muted-foreground);\n  margin-top: 0.75rem;\n  max-width: 18rem;\n  line-height: 1.6;\n}\n\n.footer-heading {\n  font-family: var(--font-display);\n  font-size: 0.875rem;\n  letter-spacing: 0.3em;\n  color: var(--primary);\n  margin-bottom: 0.75rem;\n}\n\n.social-links {\n  display: flex;\n  gap: 0.75rem;\n}\n\n.social-btn {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  border: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  transition: border-color 0.2s ease, color 0.2s ease;\n}\n\n.social-btn:hover {\n  border-color: var(--primary);\n  color: var(--primary);\n}\n\n.footer-email {\n  color: var(--foreground);\n  transition: color 0.2s ease;\n}\n\n.footer-email:hover {\n  color: var(--primary);\n}\n\n.footer-bottom {\n  margin-top: 3rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--border);\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--muted-foreground);\n}\n\n\n\/* =====================================================\n   TOAST NOTIFICATIONS\n   ===================================================== *\/\n#toast-container {\n  position: fixed;\n  bottom: 1.5rem;\n  right: 1.5rem;\n  z-index: 200;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  pointer-events: none;\n}\n\n.toast {\n  padding: 0.75rem 1.25rem;\n  border-radius: var(--radius);\n  font-family: var(--font-sans);\n  font-size: 0.875rem;\n  color: var(--foreground);\n  box-shadow: 0 4px 16px oklch(0 0 0 \/ 0.5);\n  max-width: 22rem;\n  animation: toast-in 0.3s ease forwards;\n  pointer-events: auto;\n  line-height: 1.5;\n}\n\n.toast-success {\n  background-color: var(--card);\n  border: 1px solid var(--primary-30);\n}\n\n.toast-error {\n  background-color: var(--card);\n  border: 1px solid oklch(0.55 0.22 25 \/ 0.6);\n}\n\n.toast-fade-out {\n  animation: toast-out 0.3s ease forwards;\n}\n\n@keyframes toast-in {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toast-out {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(8px); }\n}\n\n\n\/* =====================================================\n   RESPONSIVE BREAKPOINTS\n   ===================================================== *\/\n\n\/* \u2500\u2500 640px (sm) \u2500\u2500 *\/\n@media (min-width: 640px) {\n  .grid-4 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .email-row {\n    flex-direction: row;\n  }\n\n  .email-input {\n    width: auto;\n  }\n\n  .accordion-trigger {\n    font-size: 1.5rem;\n  }\n\n  .card-title {\n    font-size: 1.875rem;\n  }\n\n  .product-quote p {\n    font-size: 1.875rem;\n  }\n}\n\n\/* \u2500\u2500 768px (md) \u2500\u2500 *\/\n@media (min-width: 768px) {\n  .py-section {\n    padding-top: 8rem;\n    padding-bottom: 8rem;\n  }\n\n  .grid-2 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .grid-3 {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .hero-content {\n    padding-top: 10rem;\n    padding-bottom: 10rem;\n  }\n\n  .hero-sub {\n    font-size: 1.125rem;\n  }\n\n  .hero-content .eyebrow {\n    font-size: 0.875rem;\n  }\n\n  .dashed-line {\n    display: block;\n  }\n\n  .waitlist-card {\n    padding: 2rem;\n  }\n\n  .footer-grid {\n    grid-template-columns: repeat(3, 1fr);\n    align-items: start;\n  }\n\n  .footer-bottom {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n\/* \u2500\u2500 1024px (lg) \u2500\u2500 *\/\n@media (min-width: 1024px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 4rem;\n  }\n\n  \/* Swap order: text left, image right on desktop *\/\n  .product-text  { order: 1; }\n  .product-image { order: 2; }\n\n  .grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* =====================================================\n   BULK RAMEN \u2014 Vanilla JS\n   Replaces: React state, hooks, shadcn components,\n             Sonner toasts, lucide-react icons\n   ===================================================== *\/\n\n'use strict';\n\n\/* =====================================================\n   REVEAL ANIMATION\n   Mirrors: useInView hook + <Reveal> component\n   Uses IntersectionObserver to add .in-view when\n   the element crosses the viewport threshold. The\n   data-reveal-delay attribute replicates the `delay`\n   prop that was set as CSS transitionDelay in React.\n   ===================================================== *\/\nfunction initReveal() {\n  const elements = document.querySelectorAll('.reveal');\n  if (!elements.length) return;\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (!entry.isIntersecting) return;\n\n        const el = entry.target;\n        const delay = parseInt(el.dataset.revealDelay || '0', 10);\n\n        setTimeout(() => el.classList.add('in-view'), delay);\n\n        \/\/ Once revealed, stop watching (mirrors obs.disconnect() in useInView)\n        observer.unobserve(el);\n      });\n    },\n    { threshold: 0.15, rootMargin: '0px 0px -10% 0px' }\n  );\n\n  elements.forEach((el) => observer.observe(el));\n}\n\n\n\/* =====================================================\n   NAV SCROLL EFFECT\n   Mirrors: Nav component useState(scrolled) +\n            scroll event listener in useEffect\n   Toggles .scrolled class \u2192 CSS applies blur\/border\n   ===================================================== *\/\nfunction initNav() {\n  const nav = document.getElementById('site-nav');\n  if (!nav) return;\n\n  function onScroll() {\n    nav.classList.toggle('scrolled', window.scrollY > 20);\n  }\n\n  \/\/ Run immediately in case page loads already scrolled\n  onScroll();\n  window.addEventListener('scroll', onScroll, { passive: true });\n}\n\n\n\/* =====================================================\n   FAQ ACCORDION\n   Mirrors: shadcn <Accordion type=\"single\" collapsible>\n   Only one item open at a time; clicking an open item\n   closes it (collapsible behaviour).\n   ===================================================== *\/\nfunction initAccordion() {\n  const triggers = document.querySelectorAll('.accordion-trigger');\n  if (!triggers.length) return;\n\n  triggers.forEach((trigger) => {\n    trigger.addEventListener('click', () => {\n      const isCurrentlyOpen = trigger.getAttribute('aria-expanded') === 'true';\n\n      \/\/ Close all panels first\n      triggers.forEach((t) => {\n        t.setAttribute('aria-expanded', 'false');\n        const panel = t.nextElementSibling;\n        if (panel) panel.classList.remove('open');\n      });\n\n      \/\/ If the clicked item was closed, open it\n      if (!isCurrentlyOpen) {\n        trigger.setAttribute('aria-expanded', 'true');\n        const panel = trigger.nextElementSibling;\n        if (panel) panel.classList.add('open');\n      }\n    });\n  });\n}\n\n\n\/* =====================================================\n   CHIP TOGGLE GROUPS\n   Mirrors: <ChipGroup> component in Waitlist.tsx\n   Each data-group acts as a radio group \u2014 only one\n   selection per group at a time.\n   ===================================================== *\/\nfunction initChips() {\n  const chipBtns = document.querySelectorAll('.chip-btn');\n  if (!chipBtns.length) return;\n\n  chipBtns.forEach((btn) => {\n    btn.addEventListener('click', () => {\n      const group = btn.dataset.group;\n\n      \/\/ Deselect all siblings in the same group\n      document.querySelectorAll(`.chip-btn[data-group=\"${group}\"]`).forEach((b) => {\n        b.classList.remove('selected');\n      });\n\n      \/\/ Select the clicked button\n      btn.classList.add('selected');\n    });\n  });\n}\n\n\n\/* =====================================================\n   TOAST NOTIFICATIONS\n   Mirrors: sonner toast() calls in Waitlist.tsx\n   ===================================================== *\/\nfunction showToast(message, type = 'success') {\n  const container = document.getElementById('toast-container');\n  if (!container) return;\n\n  const toast = document.createElement('div');\n  toast.className = `toast toast-${type}`;\n  toast.textContent = message;\n  container.appendChild(toast);\n\n  \/\/ Auto-dismiss after 4 s with a fade-out animation\n  const DISPLAY_MS = 4000;\n  const FADE_MS    = 300;\n\n  setTimeout(() => {\n    toast.classList.add('toast-fade-out');\n    setTimeout(() => toast.remove(), FADE_MS);\n  }, DISPLAY_MS - FADE_MS);\n}\n\n\n\/* =====================================================\n   WAITLIST FORM\n   Mirrors: Waitlist component state (email, done) +\n            handleSubmit function\n   Swaps the form out for the success message on valid\n   submission \u2014 no server call needed for the prototype.\n   ===================================================== *\/\nfunction initWaitlistForm() {\n  const form    = document.getElementById('waitlist-form');\n  const success = document.getElementById('waitlist-success');\n  const input   = document.getElementById('email-input');\n  if (!form || !success || !input) return;\n\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n\n    const email = input.value.trim();\n\n    \/\/ Mirrors: if (!email.includes('@')) { toast.error(...) }\n    if (!email.includes('@')) {\n      showToast('Add a valid email to join.', 'error');\n      input.focus();\n      return;\n    }\n\n    \/\/ Mirrors: setDone(true) + toast.success(...)\n    form.classList.add('hidden');\n    success.classList.remove('hidden');\n    showToast(\"You're on the list. Welcome to the bulk.\", 'success');\n  });\n}\n\n\n\/* =====================================================\n   BOOT\n   ===================================================== *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n  initReveal();\n  initNav();\n  initAccordion();\n  initChips();\n  initWaitlistForm();\n});\n<\/script>\n\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Bulk Ramen \u2014 High-Protein Instant Ramen for People Who Train<\/title>\n  <meta name=\"description\" content=\"Bulk Ramen is instant ramen engineered for high protein. The protein isn't an add-on \u2014 it's the broth. Join the waitlist.\">\n  <meta property=\"og:title\" content=\"Bulk Ramen \u2014 Real ramen. Real protein.\">\n  <meta property=\"og:description\" content=\"Instant ramen built for lifters. Macro-friendly. Ready in minutes. Join the waitlist.\">\n  <meta property=\"og:type\" content=\"website\">\n  <meta name=\"twitter:card\" content=\"summary_large_image\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&amp;family=Barlow:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n  <link rel=\"stylesheet\" href=\"styles.css\">\n\n\n\n  <!-- ===== NAV ===== -->\n  <header id=\"site-nav\">\n    <div class=\"container-page nav-inner\">\n      <a href=\"#top\" class=\"nav-logo\">BULK<span class=\"text-primary\">.<\/span>RAMEN<\/a>\n      <a href=\"#waitlist\" class=\"btn btn-primary btn-sm\">Join Waitlist<\/a>\n    <\/div>\n  <\/header>\n\n  <main>\n\n    <!-- ===== HERO ===== -->\n    <section id=\"top\" class=\"hero\">\n      <img fetchpriority=\"high\" decoding=\"async\" src=\"\/assets\/hero-ramen.jpg\" alt=\"Steaming bowl of high-protein beef ramen\" class=\"hero-img\" width=\"1920\" height=\"1080\">\n      <div class=\"hero-overlay-tb\" aria-hidden=\"true\"><\/div>\n      <div class=\"hero-overlay-lr\" aria-hidden=\"true\"><\/div>\n      <div class=\"container-page hero-content\">\n        <p class=\"eyebrow\">Launching soon \u00b7 Made for lifters<\/p>\n        <h1 class=\"hero-title\">\n          Real ramen.<br>\n          <span class=\"text-primary\">Real protein.<\/span><br>\n          Built for the bulk.\n        <\/h1>\n        <p class=\"hero-sub\">\n          Instant ramen engineered for people who train. The protein isn&#8217;t an\n          add-on \u2014 it&#8217;s the broth.\n        <\/p>\n        <div class=\"hero-cta\">\n          <a href=\"#waitlist\" class=\"btn btn-primary btn-lg\">Join the Waitlist<\/a>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== PROBLEM ===== -->\n    <section class=\"section-dark py-section\">\n      <div class=\"container-page\">\n        <div class=\"reveal\">\n          <p class=\"eyebrow\">The Problem<\/p>\n          <h2 class=\"section-title max-w-3xl\">\n            You shouldn&#8217;t have to choose between\n            <span class=\"text-primary\"> food <\/span>and your\n            <span class=\"text-primary\"> macros<\/span>.\n          <\/h2>\n        <\/div>\n\n        <div class=\"grid-3 mt-16\">\n          <div class=\"reveal card-problem\">\n            <span class=\"card-number\" aria-hidden=\"true\">01<\/span>\n            <h3 class=\"card-title\">Instant ramen is empty calories.<\/h3>\n            <p class=\"card-body\">High carb, low protein. Built for convenience \u2014 not for people who train.<\/p>\n          <\/div>\n          <div class=\"reveal card-problem\" data-reveal-delay=\"100\">\n            <span class=\"card-number\" aria-hidden=\"true\">02<\/span>\n            <h3 class=\"card-title\">Protein supplements are joyless.<\/h3>\n            <p class=\"card-body\">Functional. Powdery. Something you choke down between meals.<\/p>\n          <\/div>\n          <div class=\"reveal card-problem\" data-reveal-delay=\"200\">\n            <span class=\"card-number\" aria-hidden=\"true\">03<\/span>\n            <h3 class=\"card-title\">Nothing sits in between.<\/h3>\n            <p class=\"card-body\">No real meal that tastes good and actually fits your macros. Until now.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== PRODUCT ===== -->\n    <section class=\"py-section\">\n      <div class=\"container-page product-grid\">\n\n        <div class=\"reveal product-text\">\n          <p class=\"eyebrow\">The Product<\/p>\n          <h2 class=\"section-title\">\n            The thing that didn&#8217;t exist<span class=\"text-primary\"> until now<\/span>.\n          <\/h2>\n          <p class=\"product-desc\">\n            Bulk Ramen is instant ramen engineered for high protein. Open the\n            cup. Pour boiling water. Eat. No shaker bottle. No powder. No bar\n            on the side.\n          <\/p>\n          <blockquote class=\"product-quote\">\n            <p>The protein isn&#8217;t an add-on. It&#8217;s the broth.<\/p>\n          <\/blockquote>\n          <p class=\"product-desc2\">\n            We build the protein directly into the broth using hydrolyzed beef\n            protein isolate \u2014 so every sip delivers. No mixing. No chalky\n            aftertaste. Just rich, savory ramen that fits your day.\n          <\/p>\n          <div class=\"chip-list\">\n            <span class=\"chip\">High protein<\/span>\n            <span class=\"chip\">Macro-friendly<\/span>\n            <span class=\"chip\">Built for your bulk<\/span>\n            <span class=\"chip\">Ready in minutes<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"reveal product-image\" data-reveal-delay=\"150\">\n          <div class=\"product-img-wrap\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"\/assets\/hero-ramen.jpg\" alt=\"Bulk Ramen cup\" width=\"1024\" height=\"1024\" loading=\"lazy\">\n            <div class=\"product-img-ring\" aria-hidden=\"true\"><\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/section>\n\n    <!-- ===== HOW IT WORKS ===== -->\n    <section class=\"section-dark py-section\">\n      <div class=\"container-page\">\n        <div class=\"reveal text-center mx-auto max-w-2xl\">\n          <p class=\"eyebrow\">How It Works<\/p>\n          <h2 class=\"section-title\">\n            No prep. No shaker. <span class=\"text-primary\">No compromise.<\/span>\n          <\/h2>\n        <\/div>\n\n        <div class=\"grid-3 mt-16 how-grid\">\n          <div class=\"dashed-line\" aria-hidden=\"true\"><\/div>\n\n          <div class=\"reveal card-step\">\n            <div class=\"step-icon\">\n              <!-- Package icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"m7.5 4.27 9 5.15\"><\/path><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"><\/path><path d=\"m3.3 7 8.7 5 8.7-5\"><\/path><path d=\"M12 22V12\"><\/path>\n              <\/svg>\n            <\/div>\n            <p class=\"step-label\">STEP 01<\/p>\n            <h3 class=\"step-title\">Open<\/h3>\n            <p class=\"step-body\">Peel the lid. That&#8217;s the prep.<\/p>\n          <\/div>\n\n          <div class=\"reveal card-step\" data-reveal-delay=\"120\">\n            <div class=\"step-icon\">\n              <!-- Droplets icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\"><\/path><path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\"><\/path>\n              <\/svg>\n            <\/div>\n            <p class=\"step-label\">STEP 02<\/p>\n            <h3 class=\"step-title\">Pour<\/h3>\n            <p class=\"step-body\">Boiling water to the line. Wait.<\/p>\n          <\/div>\n\n          <div class=\"reveal card-step\" data-reveal-delay=\"240\">\n            <div class=\"step-icon\">\n              <!-- Utensils icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"><\/path><path d=\"M7 2v20\"><\/path><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"><\/path>\n              <\/svg>\n            <\/div>\n            <p class=\"step-label\">STEP 03<\/p>\n            <h3 class=\"step-title\">Eat<\/h3>\n            <p class=\"step-body\">Real ramen. Real protein. Done.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== FLAVORS ===== -->\n    <section class=\"py-section\">\n      <div class=\"container-page\">\n        <div class=\"reveal max-w-2xl\">\n          <p class=\"eyebrow\">Flavors<\/p>\n          <h2 class=\"section-title\">\n            Launching with <span class=\"text-primary\">Beef<\/span>.<br>More coming soon.\n          <\/h2>\n        <\/div>\n\n        <div class=\"grid-2 mt-16\">\n          <div class=\"reveal flavor-card\">\n            <div class=\"flavor-img-wrap\">\n              <img loading=\"lazy\" decoding=\"async\" src=\"\/assets\/flavor-beef.jpg\" alt=\"Beef flavor Bulk Ramen\" width=\"1024\" height=\"768\" loading=\"lazy\">\n            <\/div>\n            <div class=\"flavor-info\">\n              <div>\n                <p class=\"flavor-eyebrow\">Launching with<\/p>\n                <h3 class=\"flavor-name\">Beef<\/h3>\n                <p class=\"flavor-desc\">Slow-built savory broth. Deep, rich, unmistakable.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"reveal flavor-card-coming\" data-reveal-delay=\"120\">\n            <div class=\"coming-icon\">\n              <!-- Lock icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n              <\/svg>\n            <\/div>\n            <p class=\"coming-eyebrow\">Coming Soon<\/p>\n            <h3 class=\"coming-title\">More flavors<\/h3>\n            <p class=\"coming-desc\">Tell us what to make next \u2014 vote in the waitlist form below.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== WHO FOR ===== -->\n    <section class=\"section-dark py-section\">\n      <div class=\"container-page\">\n        <div class=\"reveal max-w-2xl\">\n          <p class=\"eyebrow\">Who It&#8217;s For<\/p>\n          <h2 class=\"section-title\">\n            Built for people who <span class=\"text-primary\">actually train<\/span>.\n          <\/h2>\n        <\/div>\n\n        <div class=\"grid-4 mt-16\">\n          <div class=\"reveal card-who\">\n            <!-- Dumbbell icon (lucide) -->\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"who-icon\" aria-hidden=\"true\">\n              <path d=\"m6.5 6.5 11 11\"><\/path><path d=\"m21 21-1-1\"><\/path><path d=\"m3 3 1 1\"><\/path><path d=\"m18 22 4-4\"><\/path><path d=\"m2 6 4-4\"><\/path><path d=\"m3 10 7-7\"><\/path><path d=\"m14 21 7-7\"><\/path>\n            <\/svg>\n            <h3 class=\"who-title\">Bulking season<\/h3>\n            <p class=\"who-body\">Hit your protein without forcing another shake.<\/p>\n          <\/div>\n\n          <div class=\"reveal card-who\" data-reveal-delay=\"80\">\n            <!-- Salad icon (lucide) -->\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"who-icon\" aria-hidden=\"true\">\n              <path d=\"M7 21h10\"><\/path><path d=\"M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z\"><\/path><path d=\"M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-3.19 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1\"><\/path><path d=\"m13 12 4-4\"><\/path><path d=\"M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2\"><\/path>\n            <\/svg>\n            <h3 class=\"who-title\">High-protein dieters<\/h3>\n            <p class=\"who-body\">A hot meal that earns its place in your day.<\/p>\n          <\/div>\n\n          <div class=\"reveal card-who\" data-reveal-delay=\"160\">\n            <!-- Flame icon (lucide) -->\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"who-icon\" aria-hidden=\"true\">\n              <path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z\"><\/path>\n            <\/svg>\n            <h3 class=\"who-title\">Ramen lovers who train<\/h3>\n            <p class=\"who-body\">The flavor you crave, the macros you want.<\/p>\n          <\/div>\n\n          <div class=\"reveal card-who\" data-reveal-delay=\"240\">\n            <!-- Timer icon (lucide) -->\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"who-icon\" aria-hidden=\"true\">\n              <line x1=\"10\" x2=\"14\" y1=\"2\" y2=\"2\"><\/line><line x1=\"12\" x2=\"15\" y1=\"14\" y2=\"11\"><\/line><circle cx=\"12\" cy=\"14\" r=\"8\"><\/circle>\n            <\/svg>\n            <h3 class=\"who-title\">Meal preppers<\/h3>\n            <p class=\"who-body\">Stash a cup. Win the 4pm crash.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== WAITLIST ===== -->\n    <section id=\"waitlist\" class=\"waitlist-section py-section\">\n      <div class=\"waitlist-bg\" aria-hidden=\"true\"><\/div>\n      <div class=\"waitlist-glow\" aria-hidden=\"true\"><\/div>\n\n      <div class=\"container-page waitlist-inner\">\n        <div class=\"reveal text-center mx-auto max-w-2xl waitlist-header\">\n          <p class=\"eyebrow\">Be First In<\/p>\n          <h2 class=\"waitlist-title\">Join the <span class=\"text-primary\">Waitlist<\/span><\/h2>\n          <p class=\"waitlist-sub\">First batches are small. First in line eats first.<\/p>\n        <\/div>\n\n        <div class=\"reveal\">\n          <div class=\"waitlist-card\">\n\n            <!-- Success state (hidden by default) -->\n            <div id=\"waitlist-success\" class=\"waitlist-success hidden\">\n              <!-- CheckCircle2 icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"success-icon\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"m9 12 2 2 4-4\"><\/path>\n              <\/svg>\n              <h3 class=\"success-title\">You&#8217;re on the list.<\/h3>\n              <p class=\"success-desc\">We&#8217;ll email you the moment Bulk Ramen ships.<\/p>\n            <\/div>\n\n            <!-- Form -->\n            <form id=\"waitlist-form\" novalidate=\"\">\n              <div class=\"email-row\">\n                <input type=\"email\" id=\"email-input\" placeholder=\"your@email.com\" class=\"email-input\" autocomplete=\"email\">\n                <button type=\"submit\" class=\"btn btn-primary btn-form\">Join the Waitlist<\/button>\n              <\/div>\n\n              <div class=\"form-extras\">\n                <div class=\"chip-group\">\n                  <p class=\"chip-label\">What&#8217;s your go-to flavor?<\/p>\n                  <div class=\"chip-options\" role=\"group\" aria-label=\"Flavor preference\">\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"flavor\" data-value=\"Beef\">Beef<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"flavor\" data-value=\"Chicken\">Chicken<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"flavor\" data-value=\"Spicy\">Spicy<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"flavor\" data-value=\"Other\">Other<\/button>\n                  <\/div>\n                <\/div>\n\n                <div class=\"chip-group\">\n                  <p class=\"chip-label\">What would you pay for a 5-pack?<\/p>\n                  <div class=\"chip-options\" role=\"group\" aria-label=\"Price preference\">\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"price\" data-value=\"$12\">$12<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"price\" data-value=\"$15\">$15<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"price\" data-value=\"$18\">$18<\/button>\n                    <button type=\"button\" class=\"chip-btn\" data-group=\"price\" data-value=\"$20+\">$20+<\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <p class=\"form-disclaimer\">No purchase required. Be first to know when we launch.<\/p>\n            <\/form>\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===== FAQ ===== -->\n    <section id=\"faq\" class=\"section-dark py-section\">\n      <div class=\"faq-container\">\n        <div class=\"reveal\">\n          <p class=\"eyebrow\">FAQ<\/p>\n          <h2 class=\"section-title faq-title\">Questions, <span class=\"text-primary\">answered<\/span>.<\/h2>\n        <\/div>\n\n        <div class=\"reveal\">\n          <div class=\"accordion\" id=\"faq-accordion\" role=\"list\">\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-0\">\n                What makes Bulk Ramen high protein?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-0\" role=\"region\">\n                <p>We build hydrolyzed beef protein isolate directly into the broth, so every sip delivers protein \u2014 not just the noodles or a topping. No mixing, no shaker bottle, no powdery aftertaste.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-1\">\n                When does it launch and how do I stay updated?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-1\" role=\"region\">\n                <p>We&#8217;re targeting our first batch shortly. Join the waitlist above and we&#8217;ll email you the second carts open \u2014 waitlist members get first access and early-bird pricing.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-2\">\n                What formats will it come in?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-2\" role=\"region\">\n                <p>Launching as a single-serve cup \u2014 ready in minutes with just boiling water. Bulk packs and additional formats are on the roadmap based on what the waitlist asks for.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-3\">\n                Is it suitable for my diet?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-3\" role=\"region\">\n                <p>Bulk Ramen is designed to be macro-friendly and protein-forward for active eaters. Final dietary callouts (gluten, dairy, certifications) will be confirmed on packaging at launch. If you have specific dietary needs, reach out and we&#8217;ll let you know directly.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-4\">\n                Where do you ship?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-4\" role=\"region\">\n                <p>We&#8217;re launching in Canada first, with U.S. shipping rolling out shortly after. International? Hop on the waitlist so we can size demand by region.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"accordion-item\" role=\"listitem\">\n              <button class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"faq-5\">\n                How does the waitlist work?\n                <svg class=\"accordion-chevron\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n              <\/button>\n              <div class=\"accordion-content\" id=\"faq-5\" role=\"region\">\n                <p>Drop your email and answer two quick questions \u2014 it helps us nail flavors and pricing. You&#8217;ll get a launch heads-up before anyone else, and a private link to order before we open to the public.<\/p>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n  <\/main>\n\n  <!-- ===== FOOTER ===== -->\n  <footer class=\"site-footer\">\n    <div class=\"container-page footer-inner\">\n      <div class=\"footer-grid\">\n\n        <div>\n          <a href=\"#top\" class=\"footer-logo\">BULK<span class=\"text-primary\">.<\/span>RAMEN<\/a>\n          <p class=\"footer-tagline\">Real ramen. Real protein. Built for the bulk.<\/p>\n        <\/div>\n\n        <div>\n          <p class=\"footer-heading\">FOLLOW<\/p>\n          <div class=\"social-links\">\n            <a href=\"#\" aria-label=\"Instagram\" class=\"social-btn\">\n              <!-- Instagram icon (lucide) -->\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <rect width=\"20\" height=\"20\" x=\"2\" y=\"2\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" x2=\"17.51\" y1=\"6.5\" y2=\"6.5\"><\/line>\n              <\/svg>\n            <\/a>\n            <a href=\"#\" aria-label=\"TikTok\" class=\"social-btn\">\n              <!-- TikTok icon (custom fill) -->\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                <path d=\"M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.78a8.16 8.16 0 0 0 4.77 1.52V6.88a4.85 4.85 0 0 1-1.84-.19Z\"><\/path>\n              <\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div>\n          <p class=\"footer-heading\">CONTACT<\/p>\n          <a href=\"mailto:hello@bulkramen.com\" class=\"footer-email\">hello@bulkramen.com<\/a>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"footer-bottom\">\n        <p>\u00a9 2025 Bulk Ramen. All rights reserved.<\/p>\n        <p>Made for people who lift heavy and eat well.<\/p>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- Toast container (aria-live so screen readers announce toasts) -->\n  <div id=\"toast-container\" aria-live=\"polite\" aria-atomic=\"false\"><\/div>\n\n  <script src=\"script.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Bulk Ramen \u2014 High-Protein Instant Ramen for People Who Train BULK.RAMEN Join Waitlist Launching soon \u00b7 Made for lifters Real ramen. Real protein. Built for the bulk. Instant ramen engineered for people who train. The protein isn&#8217;t an add-on \u2014 it&#8217;s the broth. Join the Waitlist The Problem You shouldn&#8217;t have to choose between food [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bulkramen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42"}],"version-history":[{"count":3,"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/bulkramen.com\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/bulkramen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}