/* Home page (/): what the product is, for restaurant owners. Loaded only by index.html.
   Motion here is decoration: everything is readable without it, and all of it stops for
   visitors who ask for reduced motion (bottom of the file). */
body:has(.hero-landing) { --page: 64rem; overflow-x: clip; } /* header and content share it */
main:has(.hero-landing) { position: relative; }

/* --- drifting colour blobs behind the hero -------------------------------------------------- */
.blobs { position: absolute; inset: -4rem -10rem auto; height: 40rem; z-index: -1; pointer-events: none; }
.blobs span {
  position: absolute; width: 26rem; height: 26rem; border-radius: 50%;
  filter: blur(60px); opacity: 0.45; animation: drift 18s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { background: #f2b59f; top: 0; left: 5%; }
.blobs span:nth-child(2) { background: #f6d58e; top: 6rem; right: 8%; animation-duration: 23s; animation-delay: -6s; }
.blobs span:nth-child(3) { background: #e9c2d6; top: 16rem; left: 38%; width: 18rem; height: 18rem; animation-duration: 27s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4rem, 2rem) scale(1.15); }
  100% { transform: translate(-3rem, 3rem) scale(0.9); }
}

/* --- hero ----------------------------------------------------------------------------------- */
.hero-landing {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center;
  padding: 2rem 0 3rem;
}
.eyebrow {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  animation: rise 0.6s ease-out both;
}
.hero-landing h1 {
  font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 1.1rem;
}
.words span { display: inline-block; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.words span:nth-child(1) { animation-delay: 0.10s; }
.words span:nth-child(2) { animation-delay: 0.16s; }
.words span:nth-child(3) { animation-delay: 0.22s; }
.words span:nth-child(4) { animation-delay: 0.28s; }
.words span:nth-child(5) { animation-delay: 0.34s; }
.words span:nth-child(6) { animation-delay: 0.40s; }
.words span:nth-child(7) { animation-delay: 0.46s; }
.words span:nth-child(8) { animation-delay: 0.52s; }
.words span:nth-child(9) { animation-delay: 0.58s; }
.words span:nth-child(n+10) { animation-delay: 0.64s; }
/* The last words ("the diner's language") get the brand colour, underlined by a brush stroke. */
.words span:nth-last-child(-n+2) {
  color: var(--accent);
  background: linear-gradient(transparent 72%, #f6d58e 72%, #f6d58e 92%, transparent 92%) no-repeat;
  background-size: 0% 100%;
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, brush 0.6s 1.1s ease-out forwards;
}
@keyframes brush { to { background-size: 100% 100%; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.6em) rotate(2deg); } to { opacity: 1; transform: none; } }

.lead { font-size: 1.12rem; color: var(--muted); margin: 0 0 1.6rem; }
.hero-copy .lead { animation: rise 0.7s 0.7s ease-out both; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; animation: rise 0.7s 0.85s ease-out both; }
.cta .button { padding: 0.8rem 1.3rem; font-size: 1rem; transition: transform 0.15s, box-shadow 0.15s; }
.cta .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.cta .button.primary { position: relative; overflow: hidden; }
.cta .button.primary::after { /* a glint that sweeps across the main button now and then */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
  animation: glint 4.5s 2s ease-in-out infinite;
}
@keyframes glint { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }

/* --- the phone drawing and its QR code ------------------------------------------------------- */
.stage { position: relative; justify-self: center; perspective: 900px; animation: float-in 0.9s 0.2s ease-out both; }
.phone {
  width: 17rem; padding: 0.6rem; border-radius: 2.3rem; background: #221c16;
  box-shadow: 0 30px 60px rgb(34 28 22 / 25%), 0 10px 20px rgb(34 28 22 / 12%);
  transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg));
  transition: transform 0.3s ease-out;
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes float-in { from { opacity: 0; transform: translateY(2rem) rotate(4deg); } to { opacity: 1; transform: none; } }
.phone-screen {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: 1.8rem; background: #fffdfa; font-size: 0.78rem;
}
/* The language layers share one grid cell and take turns: 3.5 s each, 14 s for all four. */
.ph-layer { grid-area: 1 / 1; padding-bottom: 0.9rem; background: #fffdfa; }
.ph-layer:nth-child(n+2) { opacity: 0; }
.ph-layer { animation: turn 14s infinite; }
.ph-layer:nth-child(2) { animation-delay: -10.5s; }
.ph-layer:nth-child(3) { animation-delay: -7s; }
.ph-layer:nth-child(4) { animation-delay: -3.5s; }
@keyframes turn {
  0% { opacity: 1; transform: none; }
  22% { opacity: 1; transform: none; }
  25% { opacity: 0; transform: rotateX(-70deg) translateY(-10%); }
  97% { opacity: 0; transform: rotateX(70deg) translateY(10%); }
  100% { opacity: 1; transform: none; }
}
.ph-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 1.4rem 0.9rem 0.8rem;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem;
}
.ph-logo { width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.ph-lang { margin-left: auto; padding: 0.1rem 0.4rem; border: 1px solid #fff; border-radius: 0.3rem; font-size: 0.7rem; }
.ph-cats { display: flex; overflow: hidden; gap: 0.35rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.ph-cats span { padding: 0.15rem 0.55rem; border: 1px solid var(--accent); border-radius: 999px; white-space: nowrap; }
.ph-cats span:nth-child(2) { background: var(--accent); color: #fff; }
.ph-h2 { margin: 0.7rem 0.9rem 0.2rem; padding-bottom: 0.2rem; border-bottom: 2px solid var(--accent); font-weight: 700; font-size: 0.9rem; }
.ph-item {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem;
  margin: 0 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.ph-item small { grid-column: 1 / -1; color: var(--muted); }
.ph-al { font-size: 0.68rem; }
.ph-icon { width: 0.85em; height: 0.85em; margin-right: 0.2em; vertical-align: -0.1em; }
/* "Sold out" lands on the second dish like a rubber stamp, once per language. */
.ph-stamp {
  position: absolute; right: 0.2rem; top: 50%; padding: 0.1rem 0.45rem;
  border: 2px solid #c0392b; border-radius: 0.3rem; color: #c0392b; background: rgb(255 253 250 / 85%);
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.2);
  animation: stamp 3.5s 1.2s infinite;
}
@keyframes stamp {
  0% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.2); }
  10% { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(0.92); }
  14%, 55% { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1); }
  62%, 100% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(1); }
}

.qr-card {
  position: absolute; left: -3.4rem; bottom: -1.2rem; width: 5.5rem; padding: 0.55rem;
  border-radius: 0.8rem; background: #fff; color: #221c16; box-shadow: var(--shadow-pop);
  overflow: hidden; transform: rotate(-8deg); animation: wobble 7s ease-in-out infinite;
}
.qr { display: block; width: 100%; height: auto; }
.scan-line {
  position: absolute; left: 0.3rem; right: 0.3rem; top: 0.5rem; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px 2px rgb(181 69 43 / 60%);
  animation: scan 2.2s ease-in-out infinite alternate;
}
@keyframes scan { to { transform: translateY(4.3rem); } }
@keyframes wobble { 50% { transform: rotate(-3deg) translateY(-6px); } }

/* --- dish names in four languages, scrolling past ------------------------------------------ */
.ticker {
  margin: 0 calc(50% - 50vw) 2.5rem; padding: 0.8rem 0; overflow: hidden;
  background: #221c16; color: #fffdfa; transform: rotate(-1.5deg);
}
.ticker-track { display: flex; width: max-content; animation: slide 45s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.4rem; font-weight: 600; white-space: nowrap; }
.ticker em {
  font-style: normal; font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 0.25rem;
  background: var(--accent); color: #fff;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --- features ------------------------------------------------------------------------------- */
.features h2, .steps h2, .demo h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -0.015em; }
.features h2, .steps h2 { margin: 1rem 0 1.4rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.feature {
  position: relative; padding: 1.3rem 1.3rem 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.feature:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-pop); border-color: var(--accent); }
.feature:nth-child(even):hover { transform: translateY(-4px) rotate(0.4deg); }
.f-icon {
  width: 2.6rem; height: 2.6rem; padding: 0.5rem; margin-bottom: 0.6rem; border-radius: 0.8rem;
  background: var(--accent-soft); color: var(--accent); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.feature:hover .f-icon { transform: rotate(-10deg) scale(1.12); }
.feature h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); }

/* --- steps ---------------------------------------------------------------------------------- */
.steps { margin-top: 3.5rem; }
.steps ol {
  counter-reset: step; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-size: 1rem;
}
.steps li {
  counter-increment: step; position: relative; padding: 3.6rem 1.2rem 1.2rem;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
}
.steps li strong { display: block; color: var(--fg); font-size: 1.05rem; margin-bottom: 0.2rem; }
.steps li::before {
  content: counter(step); position: absolute; top: 1rem; left: 1.2rem;
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800;
}
.steps li:not(:last-child)::after { /* a dotted path leading to the next step */
  content: ""; position: absolute; top: 2.05rem; left: 3.6rem; right: -1rem;
  border-top: 2px dashed var(--accent); opacity: 0.35;
}

/* --- "Ask for a demo": a centred card ------------------------------------------------------- */
.demo {
  max-width: 34rem; margin: 4rem auto 0; padding: 2rem 1.75rem; text-align: center;
  border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgb(181 69 43 / 12%); scroll-margin-top: 5rem;
  position: relative; overflow: hidden;
}
.demo::before { /* a warm band along the top */
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--accent), #f6d58e, var(--accent));
  background-size: 200% 100%; animation: band 6s linear infinite;
}
@keyframes band { to { background-position: -200% 0; } }
.demo h2 { margin: 0.5rem 0 0.5rem; }
.demo .lead { font-size: 1rem; }
.demo-form { text-align: left; }
.demo-form button { width: 100%; padding: 0.85rem; font-size: 1.05rem; }
.demo-form .hint { text-align: center; }
.demo .notice { animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.landing-footer {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 3.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem;
}

/* --- appear while scrolling, where the browser can tie animation to scroll ------------------ */
@supports (animation-timeline: view()) {
  /* translate, not transform, so a card's hover lift still works once it is in place */
  @keyframes appear { from { opacity: 0; translate: 0 2.5rem; scale: 0.97; } to { opacity: 1; translate: none; scale: none; } }
  .reveal { animation: appear linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .steps li.reveal:nth-child(2) { animation-range: entry 10% entry 70%; }
  .steps li.reveal:nth-child(3) { animation-range: entry 20% entry 80%; }
}

@media (max-width: 48rem) {
  .hero-landing { grid-template-columns: 1fr; gap: 2.5rem; }
  .qr-card { left: -1.5rem; }
  .steps ol { grid-template-columns: 1fr; }
  .steps li:not(:last-child)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ph-layer:nth-child(n+2) { display: none; }
  .phone { transform: none; }
  .words span:nth-last-child(-n+2) { background-size: 100% 100%; }
}