/* ============================================================
   hAIngry landing - "midnight munchies"
   Dark cinematic base, neon purple + hot ember appetite glow.
   ============================================================ */

:root {
  --ink:        #0A0A0F;
  --ink-2:      #101019;
  --ink-3:      #16161f;
  --card:       rgba(255,255,255,0.035);
  --card-line:  rgba(255,255,255,0.09);

  --purple:     #7B52E8;
  --purple-2:   #9B7FF0;
  /* brand = purple + yellow (MUNCH's colors). no orange, no green. */
  --gold:       #FDC22E;
  --gold-2:     #FFD24A;
  --ember:      #FDC22E;   /* legacy alias -> gold, so all accents read yellow */
  --ember-2:    #FFD24A;
  --acid:       #FDC22E;
  --err:        #FF6B6B;   /* form error only (functional, not brand) */

  --cream:      #FCF6EC;
  --text:       #ECEAF6;
  --muted:      #9A98B4;
  --faint:      #6A6882;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* , *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ember); color: #fff; }

img { display:block; max-width:100%; }
.wrap { width:100%; max-width: var(--maxw); margin:0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- atmosphere ---------- */
.grain {
  position: fixed; inset:0; z-index: 9000; pointer-events:none; opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient { position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter: blur(110px); opacity:.5; }
.orb-purple { width:46vw; height:46vw; left:-12vw; top:-10vw; background: radial-gradient(circle, var(--purple), transparent 68%); }
.orb-ember  { width:40vw; height:40vw; right:-14vw; bottom:-6vw; background: radial-gradient(circle, var(--ember), transparent 66%); opacity:.4; }

/* ---------- nav ---------- */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--pad);
  transition: background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background: rgba(10,10,15,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid var(--card-line);
  padding-top:11px; padding-bottom:11px;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand-mark { height:34px; width:34px; object-fit:contain; }
.brand-word { font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em; color: var(--purple-2); }
.brand-word em, em.ai { font-style:normal; color: var(--gold); }
.brand-word.small { font-size:18px; }
.nav-right { display:flex; align-items:center; gap: 28px; }
.nav-link { color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; transition:color .25s; }
.nav-link:hover { color:var(--text); }
.nav-cta {
  font-family:var(--font-body); font-weight:800; font-size:15px; color:var(--ink); text-decoration:none;
  padding:11px 22px; border-radius:100px; background: var(--gold);
  box-shadow: 0 0 0 2px var(--purple), 0 8px 24px rgba(123,82,232,.28);
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.nav-cta:hover { transform: translateY(-2px); background: var(--gold-2); box-shadow:0 0 0 2px var(--purple), 0 12px 32px rgba(253,194,46,.45); }
@media (max-width:720px){ .nav-link{ display:none; } }

/* ============================================================
   HERO - scroll-driven craving reel
   ============================================================ */
.hero { position: relative; height: 100vh; z-index:1; }   /* single screen; reel auto-plays, scroll flows past with no drag */
.hero-pin {
  position: relative; height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.reel-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.reel-vignette {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,15,.92) 0%, rgba(10,10,15,.55) 38%, rgba(10,10,15,.25) 62%, rgba(10,10,15,.7) 100%),
    linear-gradient(0deg, var(--ink) 2%, transparent 30%, transparent 72%, rgba(10,10,15,.6) 100%),
    radial-gradient(120% 90% at 22% 60%, transparent 40%, rgba(10,10,15,.5) 100%);
}
.reel-loader {
  position:absolute; left:var(--pad); bottom: 7vh; z-index:5; display:flex; align-items:center; gap:14px;
  transition: opacity .6s ease; font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.reel-loader.done { opacity:0; pointer-events:none; }
.loader-bar { width:120px; height:3px; border-radius:3px; background: rgba(255,255,255,.12); overflow:hidden; }
.loader-bar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--purple),var(--ember)); transition:width .25s; }

.hero-inner { position:relative; z-index:4; padding: 0 var(--pad); max-width: 760px; will-change: transform, opacity; }
@media (min-width:721px){ .hero-pin{ align-items:center; } .hero-inner{ margin-top:18px; } }
.kicker {
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--cream); padding:8px 14px; border:1px solid var(--card-line);
  border-radius:100px; background: rgba(255,255,255,.04); backdrop-filter: blur(6px);
}
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.hero-h1 {
  font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:.92;
  font-size: clamp(40px, 7vw, 92px); margin: 18px 0 0;
}
.hero-h1 .line { display:block; }
.hero-h1 .period { color: var(--text); }
.hero-h1 .food {
  color: var(--gold);
  filter: drop-shadow(0 6px 26px rgba(253,194,46,.4));
}
.hero-h1 .rightnow {
  color: var(--purple-2);
  filter: drop-shadow(0 6px 26px rgba(123,82,232,.55));
}
.hero-sub { margin-top:18px; font-size: clamp(15px,1.7vw,19px); color: var(--text); max-width:520px; opacity:.92; }
.hero-sub strong { color: var(--purple-2); font-weight:800; }   /* MUNCH = purple (he's a purple bear) */
.hero-sub .hl-food { color: var(--gold); font-weight:700; }     /* food = yellow */

/* forms */
.hero-form { margin-top:22px; }
.hero-form, .cta-form { display:flex; flex-wrap:wrap; gap:10px; position:relative; max-width:520px; }
.cta-form { margin-top:30px; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
[data-waitlist] input[type=email]{
  flex:1 1 220px; min-width:0; font-family:var(--font-body); font-size:16px; color:var(--text);
  padding:16px 20px; border-radius:100px; border:1px solid var(--card-line);
  background: rgba(255,255,255,.05); outline:none; transition:border-color .25s, background .25s;
}
[data-waitlist] input[type=email]::placeholder{ color:var(--faint); }
[data-waitlist] input[type=email]:focus{ border-color: var(--purple-2); background: rgba(123,82,232,.1); }
[data-waitlist] button{
  font-family:var(--font-body); font-weight:800; font-size:16px; color:var(--ink); cursor:pointer; white-space:nowrap;
  padding:16px 26px; border:none; border-radius:100px; background: var(--gold);
  box-shadow:0 0 0 2px var(--purple), 0 10px 28px rgba(123,82,232,.3); transition: transform .22s var(--ease), box-shadow .22s, background .22s;
}
[data-waitlist] button:hover{ transform: translateY(-2px); background: var(--gold-2); box-shadow:0 0 0 2px var(--purple), 0 16px 40px rgba(253,194,46,.45); }
[data-waitlist] button:active{ transform: translateY(0); }
[data-waitlist] button:disabled{ opacity:.6; cursor:wait; transform:none; }
.form-msg{ flex-basis:100%; font-size:14px; font-weight:600; min-height:18px; padding-left:6px; }
.form-msg.ok{ color: var(--acid); }
.form-msg.err{ color: var(--err); }
.form-fine{ flex-basis:100%; font-family:var(--font-mono); font-size:11.5px; color:var(--faint); letter-spacing:.02em; padding-left:6px; }
.fine-link{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.fine-link:hover{ color:var(--gold); }
.cta-fine .fine-link{ color:var(--muted); }

.hero-chips{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--cream);
  padding:8px 13px; border-radius:100px; border:1px solid var(--card-line); background:rgba(255,255,255,.04);
  display:inline-flex; align-items:center; gap:8px;
}
.chip .live{ width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 9px var(--acid); }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--ember), transparent); animation: cue 1.9s var(--ease) infinite; }
@media (max-height:760px){ .scroll-cue{ display:none; } }
@keyframes cue { 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top;} 55%{ transform:scaleY(1); transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* hero load reveal */
.reveal{ opacity:0; transform: translateY(26px); filter: blur(6px); }
.loaded .reveal{ opacity:1; transform:none; filter:none; transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.loaded .reveal[data-d="1"]{ transition-delay:.05s; } .loaded .reveal[data-d="2"]{ transition-delay:.16s; }
.loaded .reveal[data-d="3"]{ transition-delay:.26s; } .loaded .reveal[data-d="4"]{ transition-delay:.36s; }
.loaded .reveal[data-d="5"]{ transition-delay:.48s; } .loaded .reveal[data-d="6"]{ transition-delay:.62s; }
.loaded .reveal[data-d="7"]{ transition-delay:.74s; } .loaded .reveal[data-d="8"]{ transition-delay:.86s; }

/* ---------- scroll reveal (sections) ---------- */
.reveal-up{ opacity:0; transform: translateY(34px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal-up.in{ opacity:1; transform:none; }

/* shared bits */
.eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-2); margin-bottom:18px; }
.eyebrow.center{ text-align:center; }
.muted{ color:var(--muted); }
.ember{ color: var(--ember); }
section { position:relative; z-index:1; }

/* ============================================================
   THE SPIRAL
   ============================================================ */
.spiral{ padding: clamp(90px,14vh,160px) 0; background:
  radial-gradient(90% 60% at 50% 0%, rgba(123,82,232,.10), transparent 60%), var(--ink); }
.spiral-h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.02;
  font-size: clamp(34px,6vw,76px); max-width:14ch; }
.spiral-h2 .muted em{ font-style:italic; color:var(--ember-2); }
.spiral-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:60px 0 44px; }
.spiral-card{ padding:30px 28px; border-radius:22px; background:var(--card); border:1px solid var(--card-line); }
.spiral-card .big{ font-family:var(--font-display); font-weight:800; font-size: clamp(40px,5vw,60px); color:var(--cream); display:block; line-height:1; }
.spiral-card .big small{ font-family:var(--font-mono); font-size:14px; color:var(--faint); margin-left:8px; font-weight:500; letter-spacing:.04em; }
.spiral-card p{ margin-top:14px; color:var(--muted); font-size:15.5px; }
.spiral-card p em{ color:var(--text); font-style:normal; font-weight:600; }
.spiral-kicker{ font-family:var(--font-display); font-weight:700; font-size: clamp(24px,3.4vw,40px); letter-spacing:-.02em; }
@media (max-width:820px){ .spiral-grid{ grid-template-columns:1fr; } }

/* ============================================================
   MEET MUNCH
   ============================================================ */
.munch{ padding: clamp(90px,14vh,170px) 0; background: var(--ink-2); border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line); }
.munch-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap:60px; align-items:center; }
.munch-portrait{ position:relative; display:flex; align-items:center; justify-content:center; }
.munch-portrait img{ width:min(360px,80%); position:relative; z-index:2; }
.munch-ring{ display:none; }   /* clean image, no added glow */
.munch-h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:.98; font-size: clamp(34px,5.2vw,68px); }
.munch-lead{ margin:24px 0 30px; color:var(--muted); font-size:17px; max-width:46ch; }

.chat{ display:flex; flex-direction:column; gap:12px; max-width:560px; }
.bubble{ padding:14px 18px; border-radius:20px; font-size:15.5px; line-height:1.5; max-width:88%; }
.bubble.user{ align-self:flex-end; background: linear-gradient(135deg,var(--purple),#6840d8); color:#fff; border-bottom-right-radius:6px; }
.bubble.munch{ align-self:flex-start; background:var(--card); border:1px solid var(--card-line); border-bottom-left-radius:6px;
  display:flex; gap:12px; align-items:flex-start; }
.bubble.munch strong{ color:var(--ember-2); }
.bubble-avatar{ width:30px; height:30px; flex:0 0 30px; object-fit:contain; margin-top:1px; }
@media (max-width:860px){ .munch-wrap{ grid-template-columns:1fr; gap:40px; } .munch-left{ order:-1; } .chat{ margin:0 auto; } }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{ padding: clamp(90px,14vh,170px) 0; }
.center{ text-align:center; }
.how-h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.04; font-size: clamp(30px,5vw,60px); margin-bottom:64px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ padding:34px 30px 30px; border-radius:24px; background:var(--card); border:1px solid var(--card-line); transition: transform .4s var(--ease), border-color .4s; }
.step:hover{ transform: translateY(-8px); border-color: rgba(255,94,58,.4); }
.step-no{ font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--ember); letter-spacing:.1em; }
.step h3{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:14px 0 10px; }
.step p{ color:var(--muted); font-size:15.5px; }
.step-tiles{ display:flex; gap:8px; margin-top:22px; }
.step-tiles img{ width:33%; aspect-ratio:1; object-fit:cover; border-radius:13px; filter:saturate(1.1) contrast(1.04); transition: transform .4s var(--ease); }
.step:hover .step-tiles img:nth-child(1){ transform: translateY(-4px) rotate(-2deg); }
.step:hover .step-tiles img:nth-child(2){ transform: translateY(-7px); }
.step:hover .step-tiles img:nth-child(3){ transform: translateY(-4px) rotate(2deg); }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   BUSINESS / VC
   ============================================================ */
.biz{ padding: clamp(90px,14vh,170px) 0; background:
  radial-gradient(80% 60% at 80% 0%, rgba(255,94,58,.10), transparent 55%), var(--ink-2);
  border-top:1px solid var(--card-line); }
.biz-h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1.0; font-size: clamp(30px,5.2vw,64px); margin-bottom:54px; max-width:18ch; }
.biz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.biz-card{ padding:32px 28px; border-radius:22px; background:var(--card); border:1px solid var(--card-line);
  position:relative; overflow:hidden; }
.biz-card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--purple),var(--ember)); opacity:.7; }
.biz-card h3{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; margin-bottom:12px; }
.biz-card p{ color:var(--muted); font-size:15.5px; }
.biz-card p em{ color:var(--ember-2); font-style:normal; font-weight:600; }
@media (max-width:860px){ .biz-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{ padding: clamp(100px,16vh,190px) 0; text-align:center; position:relative; overflow:hidden;
  background: radial-gradient(70% 90% at 50% 30%, rgba(123,82,232,.22), transparent 60%), var(--ink); }
.cta-wrap{ display:flex; flex-direction:column; align-items:center; }
.cta-mark{ width:150px; height:auto; object-fit:contain; margin-bottom:18px; }
.cta-h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:.98; font-size: clamp(38px,7vw,90px); }
/* MUNCH wordmark everywhere: purple fill + yellow outline (he's a purple bear).
   em-based stroke stays proportional from 12px chips to 90px headlines. */
.munch-word{ color: var(--purple-2); -webkit-text-stroke: 0.06em var(--gold); paint-order: stroke fill; font-weight:800; }
.cta-sub{ margin:24px 0 8px; color:var(--muted); font-size:18px; max-width:48ch; }
.cta-form{ justify-content:center; margin:30px auto 0; }
.cta-fine{ margin-top:18px; font-family:var(--font-mono); font-size:12px; color:var(--faint); letter-spacing:.03em; }

/* ---------- footer ---------- */
.foot{ padding:40px 0; border-top:1px solid var(--card-line); }
.foot-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-tag{ font-family:var(--font-mono); font-size:12.5px; color:var(--faint); letter-spacing:.03em; }
.foot-link{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(253,194,46,.35); transition:color .25s, border-color .25s; }
.foot-link:hover{ color:#fff; border-color:#fff; }
.foot-copy{ font-family:var(--font-mono); font-size:12.5px; color:var(--faint); }
.wm{ color: var(--purple-2); }   /* hAIngry wordmark: purple letters (AI stays gold via em.ai) */

/* ---------- large screens / TVs: scale up so it feels grand, not lost ---------- */
@media (min-width:1900px){
  :root{ --maxw: 1440px; }
  .hero-inner{ max-width: 1000px; }
  .hero-h1{ font-size: clamp(92px, 6vw, 150px); }
  .hero-sub{ font-size: 22px; max-width: 620px; }
  .spiral-h2{ font-size: clamp(76px, 5.4vw, 104px); }
  .munch-h2, .biz-h2{ font-size: clamp(68px, 4.6vw, 92px); }
  .how-h2{ font-size: clamp(60px, 4.4vw, 84px); }
  .cta-h2{ font-size: clamp(90px, 6vw, 132px); }
  .spiral-card .big{ font-size: clamp(60px, 4vw, 76px); }
  body{ font-size: 19px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition-duration:.01ms !important; }
  .reveal, .reveal-up{ opacity:1 !important; transform:none !important; filter:none !important; }
  html{ scroll-behavior:auto; }
}