/* ==========================================================================
   NAMI — poké bowl bar
   Style study after "Folio Suite": bright teal, rough poster display type,
   food exploded in mid-air, white pill chrome, playful choreography.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* The teal is sampled from the generated food shots so cut-outs sit on it cleanly. */
  --teal: #06959e;
  --teal-deep: #01727c;
  --teal-lift: #16bcc6;
  --sky: #92e9f1;

  --cream: #fefef0;
  --mango: #f8d68c;
  --coral: #ff7a4d;
  --ink: #06262a;
  --ink-soft: rgba(6, 38, 42, 0.62);

  /* Pastel card tints — each matches the background of its generated shot. */
  --tint-mint: #c2e4d3;
  --tint-pink: #f0c1c9;
  --tint-cream: #f9e9c5;

  --cream-fade: rgba(254, 254, 240, 0.72);
  --cream-dim: rgba(254, 254, 240, 0.46);

  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Poppins", system-ui, -apple-system, sans-serif;

  --r-card: 26px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --maxw: 1280px;
  --gutter: 26px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--teal);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--mango); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--mango);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. DISPLAY TYPE ---------- */
/* Anton is clean; the reference face is torn and speckled. A turbulence displacement
   filter roughens the outline and a masked noise layer speckles the fill, which gets
   the same printed-poster feel without shipping a bitmap font. */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Anton is drawn tight to the cap height, so Czech diacritics (Ř, Á, É) sit above
     the em box and collide with whatever is on the line before. The padding buys them
     headroom; the line-height keeps the block itself tight. */
  /* Two stacked lines both carrying diacritics (POŘÁD under TŘI,) need much more than
     the English reference does — the caron of line two reaches up into the comma of
     line one. Anton has no descenders to speak of, so the extra leading is not felt. */
  line-height: 1.14;
  padding-top: 0.16em;
  letter-spacing: 0.005em;
  color: var(--cream);
  filter: url(#rough);
}

.display em { font-style: normal; color: var(--mango); }

h1.display { font-size: clamp(58px, 11.5vw, 148px); }
h2.display { font-size: clamp(38px, 6.6vw, 82px); }

/* Wrapper only — the speckling itself lives in the #rough SVG filter, where it can
   erode the glyph alpha instead of painting noise on top of it. */
.speckle { display: inline-block; }

.lede {
  font-size: 17px;
  font-weight: 300;
  color: var(--cream-fade);
  max-width: 46ch;
}

.lede b { font-weight: 600; color: var(--cream); }

/* ---------- 4. BUTTONS / PILLS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-back), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), color 0.3s var(--ease);
}

.btn--dark {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 12px 30px rgba(6, 38, 42, 0.3);
}

.btn--dark:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px rgba(6, 38, 42, 0.4); }
.btn--dark:active { transform: scale(0.96); }

.btn--light {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(1, 60, 66, 0.22);
}

.btn--light:hover { transform: translateY(-3px) scale(1.02); }
.btn--light:active { transform: scale(0.96); }

.btn--outline {
  border: 2px solid var(--cream-dim);
  color: var(--cream);
}

.btn--outline:hover { border-color: var(--cream); background: rgba(254, 254, 240, 0.1); }

.icon-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 12px 30px rgba(1, 60, 66, 0.22);
  transition: transform 0.3s var(--ease-back);
}

.icon-btn:hover { transform: translateY(-3px) scale(1.06) rotate(-6deg); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- 5. HEADER ---------- */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 20px 0;
  transition: padding 0.4s var(--ease);
}

.hdr.is-stuck { padding: 12px 0; }

/* The header floats over both teal and cream sections. On cream, cream-on-cream makes
   the wordmark and the light button vanish, so the chrome flips to ink. */
.hdr--on-light .brand { color: var(--ink); }
.hdr--on-light .brand__mark { background: var(--ink); color: var(--cream); }

.hdr--on-light .hdr__side .btn--light,
.hdr--on-light .hdr__side .icon-btn {
  background: var(--ink);
  color: var(--cream);
}

.hdr--on-light .cart-dot::after { border-color: var(--ink); }

.brand, .brand__mark, .hdr__side .btn--light, .hdr__side .icon-btn {
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.3s var(--ease-back), border-color 0.35s var(--ease);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.brand__mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--teal);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand__mark svg { width: 20px; height: 20px; }

/* The white pill nav with a sliding active indicator. */
.navpill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--cream);
  box-shadow: 0 10px 30px rgba(1, 60, 66, 0.18);
}

.navpill__ind {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  border-radius: var(--r-pill);
  background: var(--mango);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.navpill a {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

.navpill a:hover { color: var(--ink); }
.navpill a.is-active { color: var(--ink); font-weight: 600; }

.hdr__side { display: flex; align-items: center; gap: 10px; }

.hdr__side .icon-btn { width: 46px; height: 46px; }
.hdr__side .icon-btn svg { width: 18px; height: 18px; }

.cart-dot {
  position: relative;
}

.cart-dot::after {
  content: "";
  position: absolute;
  top: 8px; right: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--cream);
}

/* ---------- 5b. MOBILE NAV ---------- */
/* Hidden on desktop, where the pill nav does this job. */
.hdr__burger { display: none; }

.hdr__burger .burger-top,
.hdr__burger .burger-bot { transition: transform 0.35s var(--ease-back); transform-origin: center; }

.hdr__burger.is-open .burger-top { transform: translateY(4px) rotate(45deg); }
.hdr__burger.is-open .burger-bot { transform: translateY(-4px) rotate(-45deg); }

.mnav {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(1, 60, 66, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.mnav.is-open { opacity: 1; }

.mnav__panel {
  position: absolute;
  top: 78px; left: 16px; right: 16px;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 12px;
  box-shadow: 0 26px 60px rgba(1, 50, 66, 0.35);
  transform: translateY(-14px) scale(0.97);
  opacity: 0;
  transform-origin: top center;
  transition: transform 0.4s var(--ease-back), opacity 0.3s var(--ease);
}

.mnav.is-open .mnav__panel { transform: none; opacity: 1; }

.mnav__panel a {
  display: block;
  padding: 15px 18px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 600;
  transition: background 0.25s var(--ease);
}

.mnav__panel a:not(.mnav__cta):hover,
.mnav__panel a.is-active { background: var(--mango); }

.mnav__cta { margin-top: 8px; width: 100%; }

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 150px 0 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 105%, var(--teal-lift) 0%, transparent 62%),
    linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 46%, var(--teal-lift) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  width: 100%;
}

/* Parked in the bottom-right corner of the hero — clear of the headline, the bowl and
   the social rail, which sits higher up the same edge. */
.hero__seal {
  position: absolute;
  right: 30px;
  bottom: 40px;
  z-index: 4;
  width: 122px; height: 122px;
  opacity: 0.95;
}

.motion .hero__seal { animation: spin 26s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.hero__seal text { font-size: 9.2px; letter-spacing: 2.2px; font-weight: 600; fill: var(--cream); }
.hero__seal .seal-ring { fill: none; stroke: var(--cream); stroke-width: 1.4; opacity: 0.5; }
.hero__seal .seal-fish { fill: var(--mango); }
.hero__seal .seal-eye { fill: var(--teal-deep); }

/* Headline no longer needs an indent — the badge moved off it. */
.hero__head { position: relative; }

.hero__copy { margin-top: 26px; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* --- floating bowl --- */
.hero__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 78svh;
  justify-self: center;
  width: 100%;
}

.bowl {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(1, 50, 56, 0.42));
  will-change: transform;
}

/* Two nested elements: the wrapper takes mouse/scroll parallax, the image keeps its
   own endless float — combining both on one transform makes them fight. */
.motion .bowl { animation: bob 7s ease-in-out infinite alternate; }

@keyframes bob {
  from { transform: translateY(-1.6%) rotate(-1.6deg) scale(1); }
  to   { transform: translateY(2.4%)  rotate(1.8deg)  scale(1.02); }
}

.bowl-wrap {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

/* --- ingredients drifting around the frame --- */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.floater {
  position: absolute;
  width: var(--w, 110px);
  filter: drop-shadow(0 14px 18px rgba(1, 50, 56, 0.3));
  opacity: 0.96;
  will-change: transform;
}

.motion .floater { animation: drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  to   { transform: translate3d(var(--dx, 14px), var(--dy, -20px), 0) rotate(calc(var(--rot, 0deg) + var(--spin, 12deg))); }
}

/* Parked in the gaps the layout leaves free: above the headline, below the buttons,
   and out at the right edge past the food. The headline now runs the full column
   width, so anything sitting beside it lands on the type. */
.f-1 { top: 10%; left: 0.5%; --w: 92px;  --rot: -12deg; --dx: 18px;  --dy: 24px;  --dur: 11s; }
.f-2 { top: 13%; right: 4.5%; --w: 96px; --rot: 16deg;  --dx: -20px; --dy: 18px;  --dur: 9s;  --delay: .6s; }
.f-3 { bottom: 5%; left: 30%; --w: 74px; --rot: 8deg;   --dx: 16px;  --dy: -20px; --dur: 10s; --delay: 1.2s; }
.f-4 { bottom: 30%; right: 1.5%; --w: 92px; --rot: -18deg; --dx: -14px; --dy: -22px; --dur: 12s; --delay: .3s; }

/* --- social rail --- */
.rail {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}

.rail a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.6px solid var(--cream-dim);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease-back);
}

.rail a:hover { background: var(--cream); color: var(--teal); border-color: var(--cream); transform: scale(1.12); }
.rail svg { width: 17px; height: 17px; }

/* --- scroll cue --- */
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 34px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.6px solid var(--cream-dim);
  display: grid;
  place-items: center;
  z-index: 4;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.scroll-cue:hover { background: var(--cream); color: var(--teal); }
.motion .scroll-cue svg { animation: nudge 1.9s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* ---------- 7. MARQUEE ---------- */
/* Mango, not cream. Against a cream menu section a cream strip read as one continuous
   blank slab; a third colour makes teal → strip → cream three clear bands. */
.marquee {
  background: var(--mango);
  color: var(--ink);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  z-index: 6;
}

.marquee__track { display: flex; width: max-content; }
.motion .marquee__track { animation: slide 34s linear infinite; }

@keyframes slide { to { transform: translateX(-50%); } }

.marquee__track span {
  font-family: var(--f-display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.marquee__track span::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal-deep);
  flex: 0 0 auto;
}

/* ---------- 8. LIGHT SECTIONS ---------- */
.sec { padding: 110px 0; position: relative; scroll-margin-top: 84px; }

.sec--light { background: var(--cream); color: var(--ink); }
.sec--light .lede { color: var(--ink-soft); }
.sec--light .lede b { color: var(--ink); }
.sec--light .display { color: var(--ink); }
.sec--light .display em { color: var(--coral); }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.sec__head .lede { margin-top: 0; }

/* menu grid */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mcard {
  background: #fff;
  border-radius: var(--r-card);
  padding: 14px 14px 24px;
  box-shadow: 0 14px 36px rgba(1, 60, 66, 0.1);
  transition: transform 0.45s var(--ease-back), box-shadow 0.45s var(--ease);
}

.mcard:hover { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(1, 60, 66, 0.18); }

.mcard__img {
  border-radius: 18px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mcard__img img {
  width: 88%; height: 88%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}

.mcard:hover .mcard__img img { transform: scale(1.07) rotate(-2deg); }

.mcard--mint  .mcard__img { background: var(--tint-mint); }
.mcard--pink  .mcard__img { background: var(--tint-pink); }
.mcard--cream .mcard__img { background: var(--tint-cream); }

.mcard__body { padding: 0 8px; }
.mcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.mcard__name { font-family: var(--f-display); font-size: 26px; text-transform: uppercase; letter-spacing: 0.01em; }
.mcard__price { font-weight: 700; color: var(--teal); font-size: 18px; white-space: nowrap; }
.mcard__desc { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }

.mcard__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }

.mcard__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.3s var(--ease-back), background 0.3s var(--ease);
}

.mcard__add svg { width: 18px; height: 18px; }
.mcard__add:hover { transform: translateY(-2px); background: var(--teal-deep); }
.mcard__add:active { transform: scale(0.97); }

/* Confirmation is local and momentary — there is no real basket behind this demo. */
.mcard__add.is-added { background: var(--teal); }

.tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(6, 149, 158, 0.1);
  color: var(--teal-deep);
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.step {
  background: rgba(254, 254, 240, 0.1);
  border: 1.6px solid rgba(254, 254, 240, 0.2);
  border-radius: var(--r-card);
  padding: 30px 28px 34px;
  transition: transform 0.45s var(--ease-back), background 0.45s var(--ease);
}

.step:hover { transform: translateY(-8px); background: rgba(254, 254, 240, 0.16); }

/* Scoped past `.step p` below, which would otherwise win and shrink the number. */
.step .step__no {
  font-family: var(--f-display);
  font-size: 54px;
  color: var(--mango);
  line-height: 1;
  margin: 0;
}

.step h3 { font-size: 20px; font-weight: 700; margin-top: 14px; }
.step p { color: var(--cream-fade); font-size: 15px; margin-top: 8px; font-weight: 300; }

/* ---------- 9. FAQ ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}

/* The heading rides along while the answers scroll past it. */
.faq-intro { position: sticky; top: 116px; }

.faq { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(1, 60, 66, 0.07);
  transition: box-shadow 0.3s var(--ease);
}

.faq details[open] { box-shadow: 0 16px 40px rgba(1, 60, 66, 0.13); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-weight: 600;
  font-size: 17px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mango);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 13px 2.4px, 2.4px 13px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 0.35s var(--ease-back);
}

.faq details[open] summary::after { transform: rotate(135deg); }

.faq p { padding: 0 26px 24px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }

/* ---------- 10. FOOTER ---------- */
.ftr {
  background: var(--teal-deep);
  padding: 80px 0 34px;
  position: relative;
  overflow: hidden;
}

.ftr__big {
  font-family: var(--f-display);
  font-size: clamp(56px, 15vw, 190px);
  line-height: 0.82;
  text-transform: uppercase;
  color: rgba(254, 254, 240, 0.12);
  pointer-events: none;
  user-select: none;
  margin-bottom: -14px;
}

.ftr__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-top: 44px;
}

.ftr__cols b {
  display: block;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--mango);
  margin-bottom: 12px;
}

.ftr__cols p, .ftr__cols a { color: var(--cream-fade); font-size: 15px; display: block; font-weight: 300; }
.ftr__cols a:hover { color: var(--cream); }

.ftr__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(254, 254, 240, 0.16);
  font-size: 13px;
  color: var(--cream-dim);
}

.demo-note {
  border: 1px dashed rgba(248, 214, 140, 0.5);
  color: var(--mango);
  border-radius: var(--r-pill);
  padding: 6px 15px;
  font-size: 12px;
}

/* ---------- 11. STICKY CTA ---------- */
.sticky {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 55;
  transform: translate(-50%, 190%);
  opacity: 0;
  transition: transform 0.5s var(--ease-back), opacity 0.3s var(--ease);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 24px;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 20px 46px rgba(1, 50, 56, 0.3);
  max-width: calc(100vw - 32px);
}

.sticky.show { transform: translate(-50%, 0); opacity: 1; }
.sticky p { font-size: 14.5px; white-space: nowrap; }
.sticky b { font-weight: 700; }
.sticky .btn { height: 46px; padding: 0 22px; font-size: 14.5px; }

/* ---------- 12. MOTION TOGGLE ---------- */
/* Lukáš's Windows reports reduced-motion, so motion is an explicit, remembered choice
   rather than something the OS setting silently switches off for good. */
.mtoggle {
  position: fixed;
  right: 18px; bottom: 22px;
  z-index: 56;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream-fade);
  box-shadow: 0 10px 26px rgba(1, 50, 56, 0.3);
  transition: color 0.3s var(--ease);
}

.mtoggle:hover { color: var(--cream); }

.mtoggle i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(254, 254, 240, 0.35);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.motion .mtoggle i { background: var(--mango); box-shadow: 0 0 10px var(--mango); }

/* ---------- 13. CHOREOGRAPHY ---------- */
/* Everything below only bites while `.motion` is on; with it off every element is in
   its resting state from the first paint. */

/* Headline: each word rises and sharpens. */
.word { display: inline-block; }

.motion .word {
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(12px);
}

.motion .intro-done .word,
.motion .word.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.7s var(--ease);
}

/* Nav pill unrolls from the middle. */
.motion .navpill { transform: scaleX(0.4); opacity: 0; transform-origin: center; }
.motion .navpill.in { transform: none; opacity: 1; transition: transform 0.8s var(--ease-back) 0.1s, opacity 0.5s var(--ease) 0.1s; }

/* The bowl drops in from above the fold. */
.motion .bowl-wrap { opacity: 0; transform: translateY(-70px) scale(0.94); }
.motion .bowl-wrap.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 1.15s var(--ease-back); }

/* Generic scroll reveal. */
.motion .reveal { opacity: 0; transform: translateY(26px); }
.motion .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }

.motion .d1 { transition-delay: 0.07s; }
.motion .d2 { transition-delay: 0.14s; }
.motion .d3 { transition-delay: 0.21s; }
.motion .d4 { transition-delay: 0.28s; }

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 1180px) {
}

@media (max-width: 1000px) {
  /* The hero centres its children with flex on desktop. Once the card rail stops being
     absolutely positioned it becomes a flex sibling of .wrap and squashes it, so the
     hero has to go back to normal block flow here. */
  .hero { display: block; min-height: auto; padding: 128px 0 40px; }
  .hero__grid { grid-template-columns: 1fr; gap: 10px; }
  /* The 96px of headroom here used to clear the badge that sat over the headline;
     the badge moved onto the bowl, so the gap is just dead space now. */
  .hero__head { padding-left: 0; padding-top: 12px; }
  .hero__stage { aspect-ratio: 1; max-height: none; max-width: 560px; margin-top: 12px; }
  .rail { display: none; }
  .menu-grid, .steps { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { position: static; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .sec { padding: 76px 0; }

  /* Pill nav has no room; the burger takes over and the order CTA steps aside so the
     header does not carry two competing buttons. */
  .navpill { display: none; }
  .hdr__burger { display: grid; }
  .hdr__order { display: none; }
  .hdr__side .icon-btn { width: 46px; height: 46px; }
  .hdr__side .icon-btn svg { width: 19px; height: 19px; }
  .menu-grid, .steps { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: 1fr; gap: 30px; }
  /* The same three bowls are a full section a short scroll further down, so repeating
     them inside the hero only makes the first screen longer. */

  /* ---- Everything centred at this width ----
     One narrow column reads better balanced than ragged-left, and it keeps the
     headline, the bowl and the buttons on one shared axis. */
  .hero__head,
  .sec__head,
  .faq-intro,
  .step,
  .mcard__body,
  .ftr__cols > div { text-align: center; }

  /* Blocks with a max-width need auto margins, or centring the text still leaves the
     box hugging the left edge. */
  .lede { margin-left: auto; margin-right: auto; }

  .hero__actions { justify-content: center; }
  .sec__head { justify-content: center; }
  .mcard__tags { justify-content: center; }
  .mnav__panel a { text-align: center; }

  /* Name and price sit on opposite ends on wide screens; centred they read as a pair. */
  .mcard__row { flex-direction: column; align-items: center; gap: 2px; }

  .ftr__big { text-align: center; }
  .ftr__bottom { justify-content: center; text-align: center; }

  /* The FAQ rows keep their left edge — the question and its + button are a control,
     and centring the label away from the button breaks that pairing. */
  .faq summary { text-align: left; }

  /* Badge is desktop-only — at this width there is no gap beside the headline for it
     to sit in, and anywhere else it pushed the type down. */
  .hero__seal { display: none; }

  /* Two garnishes flanking the centred headline, in the margins it leaves either side.
     Their drift is aimed OUTWARD — pointed inward, the avocado wandered onto the "E"
     even though its resting position cleared the text. */
  .f-1, .f-4 { display: none; }
  .f-2 { top: 16%; right: 0%;  bottom: auto; left: auto; --w: 60px; --dx: 10px;  --dy: 14px; }
  .f-3 { top: 20%; left: 1%;   bottom: auto; right: auto; --w: 44px; --dx: -8px; --dy: 16px; }

  /* No cart icon beside the main button — one action is enough here. */
  .hero__actions .icon-btn { display: none; }
  .btn { height: 54px; padding: 0 24px; }
  .icon-btn { width: 54px; height: 54px; }
  .sticky { left: 16px; right: 16px; bottom: 16px; transform: translateY(190%); justify-content: space-between; padding-left: 20px; }
  .sticky.show { transform: translateY(0); }
  .sticky p { white-space: normal; font-size: 13px; }
  .mtoggle { display: none; }
  .marquee__track span { font-size: 20px; }
}