/* Layout: night sky. One black canvas with a slow star field behind every page, a warm orange glow orb in the hero, centered section heads with small boxed labels, near-black glass cards with an orange under-glow. Orange variant for comparison: warm, food and appetite. Deliberately dark-only. */
:root {
  --bg: #000000;
  --surface: #0B0B0D;
  --surface-2: #121216;
  --ink: #F5F5F7;
  --muted: #A3A3AD;
  --dim: #6E6E78;
  --line: rgb(255 255 255 / 0.09);
  --line-2: rgb(255 255 255 / 0.16);
  --brand: #FFB45C;
  --brand-soft: rgb(255 122 26 / 0.16);
  --accent: #FF7A1A;
  --accent-2: #E8620A;
  --accent-ink: #160A00;
  --glow: rgb(255 122 26 / 0.34);
  --glow-soft: rgb(255 122 26 / 0.16);
  --paper: #FFFDF6;
  --paper-ink: #1E1D19;
  --paper-line: #D9D3C0;
  --ok: #34D399;
  --ph-bg: #4A3A00;
  --ph-ink: #FFE7A3;
  --font-display: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.6vw, 5rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 1.22rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
strong { font-weight: 600; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Star field (canvas added by script) */
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }

.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (max-width: 420px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
.band { padding-block: clamp(64px, 10vw, 128px); position: relative; }
.band + .band { padding-top: clamp(24px, 5vw, 64px); }
.band.dark { isolation: isolate; overflow: clip; }
.band.dark::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1.6; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow-soft), transparent 75%); z-index: -1; pointer-events: none; }
.band.dark p, .band.dark li { color: var(--muted); }
.eyebrow { justify-self: start; display: inline-flex; align-items: center; font: 500 0.86rem/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 8px 12px; border-radius: 7px; letter-spacing: 0; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 60ch; line-height: 1.6; }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.wrap:not(.faq-wrap):not(.split):not(.grid-3) > .section-head { margin-inline: auto; text-align: center; justify-items: center; }
.wrap:not(.faq-wrap):not(.split):not(.grid-3) > .section-head .eyebrow { justify-self: center; }

.preview-bar { background: var(--accent); color: var(--accent-ink); font: 500 0.82rem/1.4 var(--font-body); text-align: center; padding-block: 8px; position: relative; z-index: 21; }
.preview-bar .wrap { display: block; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgb(0 0 0 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background .3s; }
.site-header.scrolled { background: rgb(0 0 0 / 0.86); }
.site-header .wrap { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.logo { font: 700 1.3rem/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 9px; }
/* the Conveasy logo mark (an inline SVG, the same drawing as on the Framer site) */
.logo-mark { flex: none; width: 28px; height: 28px; fill: #fff; transition: transform .5s var(--ease); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav summary { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; list-style: none; transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: 7px; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); opacity: .6; }
.dd[open] summary::after { transform: translateY(1px) rotate(225deg); }
.nav > a:hover, .nav summary:hover, .dd[open] summary { background: rgb(255 255 255 / 0.07); }
.nav a[aria-current="page"] { color: var(--brand); }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 260px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0); display: grid; animation: dd-in .28s var(--ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }
.dd-menu a { padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; display: grid; transition: background .2s; }
.dd-menu a small { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
.dd-menu a:hover { background: rgb(255 255 255 / 0.06); }
.lang { display: flex; gap: 0; font: 500 0.74rem/1 var(--font-body); padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.lang a { color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; transition: color .2s, background .2s; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { color: var(--accent-ink); background: var(--accent); }
.mobile-menu { display: none; margin-left: auto; }
.mobile-menu summary { list-style: none; cursor: pointer; font-weight: 500; font-size: .94rem; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); background: var(--surface); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: #000; border-bottom: 1px solid var(--line); padding: 12px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 2px; max-height: 78vh; overflow-y: auto; animation: dd-in .3s var(--ease); }
.mobile-panel a { color: var(--ink); text-decoration: none; padding: 11px 4px; border-bottom: 1px solid var(--line); font-weight: 500; }
.mobile-panel .group-label { font-size: 0.78rem; color: var(--brand); margin-top: 16px; padding-bottom: 4px; font-weight: 500; }
@media (max-width: 1000px) {
  .nav, .site-header .btn-head, .site-header .wrap > .lang { display: none; }
  .mobile-menu { display: block; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 0.98rem/1.25 var(--font-body); padding: 12px 18px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; cursor: pointer; position: relative; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s; }
.btn:active { transform: scale(.98); }
.btn .arr { display: inline-block; font-size: .9em; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translate(2px, -2px) rotate(-45deg); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 8px 24px -10px var(--accent); }
.btn-primary:hover { background: #FF9440; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 12px 34px -8px var(--accent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: rgb(255 255 255 / .32); background: var(--surface-2); }
.btn-head { padding: 9px 14px; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.roll { display: inline-flex; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.roll-in { display: block; transition: transform .45s var(--ease); }
.roll-in::after { content: attr(data-t); content: attr(data-t) / ""; display: block; }
.btn:hover .roll-in { transform: translateY(-1.25em); }

/* Hero */
.hero { position: relative; padding-block: clamp(56px, 9vw, 120px) clamp(64px, 10vw, 120px); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg::before { content: ""; position: absolute; left: 62%; top: 42%; width: min(62vw, 560px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent 0 20%, rgb(255 122 26 / .55) 35%, rgb(255 190 92 / .35) 50%, transparent 65%, rgb(255 122 26 / .3) 85%, transparent); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 72%, transparent 82%); mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 72%, transparent 82%); filter: blur(28px); opacity: .9; animation: orb 18s linear infinite; }
.hero-bg::after { content: ""; position: absolute; left: 62%; top: 42%; width: min(48vw, 420px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow-soft), transparent 70%); }
@keyframes orb { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero .wrap[style] { grid-template-columns: minmax(0, 1fr) !important; }
.hero-copy { display: grid; gap: 22px; align-content: start; min-width: 0; }
.hero-copy h1 em { font-style: normal; color: var(--brand); }
.hero .wrap[style] h1 { max-width: 18ch; }
.badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 500 0.88rem/1.2 var(--font-body); color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid var(--line-2); padding: 4px 12px 4px 4px; border-radius: 999px; }
.badge i { font-style: normal; display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); padding: 4px 9px; border-radius: 999px; font-size: .8rem; }
.badge i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); margin-right: 0; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.stats { grid-column: 1 / -1; list-style: none; margin: clamp(16px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: rgb(11 11 13 / .7); backdrop-filter: blur(6px); }
.stats li { display: grid; place-items: center; padding: 22px 12px; text-align: center; }
.stats li + li { border-left: 1px solid var(--line); }
.stats b { font: 600 clamp(1.2rem, 2.2vw, 1.6rem)/1.15 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats li:nth-child(3) { border-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid var(--line); } }
.crumbs { color: var(--muted); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-bg::before, .hero-bg::after { left: 50%; } }

/* Home hero: centered like the current site, product screens below */
.hero-home { padding-top: clamp(40px, 5.6vw, 76px); }  /* less air above the headline, so the three scenes start higher on the first screen */
.hero-home .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(28px, 3.4vw, 44px); }
.hero-home .hero-copy { justify-items: center; max-width: 900px; }
.hero-home .badge { justify-self: center; }
.hero-home .lead { margin-inline: auto; }
.hero-home .btn-row { justify-content: center; }
.hero-home .hero-bg::before, .hero-home .hero-bg::after { left: 50%; top: 26%; }
.hero-home .stage { width: 100%; max-width: 1060px; }

/* Stage: app screens */
.stage { position: relative; min-width: 0; display: grid; justify-items: center; }
.stage > div { width: 100%; display: grid; justify-items: center; }
.stage::before { content: ""; position: absolute; inset: 8% 4%; background: radial-gradient(closest-side, var(--glow-soft), transparent); filter: blur(10px); z-index: -1; }
.stage .ticket, .stage .chat, .stage .panel, .stage .phone { animation: rise 1s .15s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
/* Home page, top visual: three scenes in a row (phone AI, WhatsApp AI, webshop), each with its name as a link;
   the paper ticket is a small accent behind the right-hand corner. Under 860px the row becomes a strip to swipe. */
.stage-home { position: relative; width: 100%; }
.hs-row { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .78fr); gap: clamp(14px, 2.4vw, 28px); align-items: end; }
.hs-item { margin: 0; min-width: 0; display: grid; gap: 14px; justify-items: center; animation: rise 1s var(--ease) both; }
.hs-item > :first-child { width: 100%; max-width: none; }
.hs-phone { animation-delay: .3s; } .hs-chat { animation-delay: .5s; } .hs-web { animation-delay: .7s; }
.hs-item figcaption a { display: inline-flex; align-items: center; gap: 7px; font: 600 .95rem/1.2 var(--font-display); color: var(--ink); text-decoration: none; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(18 18 22 / .7); transition: border-color .25s, gap .25s var(--ease); }
.hs-item figcaption a:hover { border-color: var(--accent); gap: 11px; }
.hs-item figcaption span { color: var(--brand); }
.stage-home .layer { position: absolute; }
.l-ticket { top: -34px; right: -44px; width: 250px; z-index: 0; transform: scale(.62); transform-origin: 100% 0; opacity: .92; }
.l-ticket .ticket { max-width: none; animation: print 1.4s 1.1s var(--ease) both; transform: rotate(5deg); }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px) rotate(5deg); } to { clip-path: inset(0 0 0 0); transform: rotate(5deg); } }
@keyframes ring { to { transform: scale(1.7); opacity: 0; } }
.wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; height: 100%; background: var(--brand); border-radius: 3px; animation: wave 1.1s ease-in-out infinite; transform-origin: center; }
.wave i:nth-child(2) { animation-delay: -.9s; } .wave i:nth-child(3) { animation-delay: -.6s; } .wave i:nth-child(4) { animation-delay: -.3s; } .wave i:nth-child(5) { animation-delay: -.75s; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (max-width: 1180px) { .l-ticket { display: none; } }
@media (max-width: 860px) {
  .hs-row { display: flex; align-items: center; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .hs-row::-webkit-scrollbar { display: none; }
  .hs-item { flex: 0 0 84%; scroll-snap-align: center; }
  .hs-web { flex-basis: 70%; }
}
.mock-label { font: 400 0.78rem/1 var(--font-body); color: var(--dim); margin-top: 18px; text-align: center; }

/* Scroll-driven parallax where supported */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .stage { animation: px-up linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .shot:nth-child(even) .shot-frame { animation: px-up2 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes px-up { to { translate: 0 var(--px-up, -50px); } }
/* Text above, visual below (phones, and the home page at every width): a short travel, so the visual never rides up against the buttons. */
.hero-home .stage { --px-up: -12px; }
@media (max-width: 900px) { .hero .stage { --px-up: -12px; } }
@keyframes px-up2 { from { translate: 0 30px; } to { translate: 0 -30px; } }

/* Language strip */
.marquee { overflow: hidden; padding-block: 22px; border-block: 1px solid var(--line); position: relative; z-index: 1; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 42s linear infinite; }
.mq-track > div { display: flex; flex: none; }
.mq-track span { font: 500 clamp(1.05rem, 2vw, 1.35rem)/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; padding-inline: 22px; display: inline-flex; align-items: center; color: var(--dim); }
.mq-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 44px; }
.mq-track span.hl { color: var(--ink); }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Mockups: kitchen ticket */
.ticket { background: var(--paper); color: var(--paper-ink); font: 500 0.86rem/1.5 var(--font-mono); width: 100%; max-width: 340px; padding: 22px 22px 30px; border-radius: 6px 6px 0 0; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8); position: relative; text-align: left; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--paper) 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 6px, var(--paper) 0) 0 0 / 14px 10px repeat-x; }
.ticket .t-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; letter-spacing: .1em; padding-bottom: 10px; border-bottom: 2px dashed var(--paper-line); }
.ticket .t-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .76rem; padding: 10px 0; color: color-mix(in srgb, var(--paper-ink) 70%, transparent); border-bottom: 2px dashed var(--paper-line); }
.ticket ul { list-style: none; margin: 0; padding: 12px 0; display: grid; gap: 6px; }
.ticket li { display: grid; grid-template-columns: 34px 1fr; }
.ticket li span { font-weight: 700; }
.ticket li.sub { display: block; padding-left: 34px; font-size: .78rem; color: color-mix(in srgb, var(--paper-ink) 65%, transparent); }
.ticket .t-foot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 2px dashed var(--paper-line); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }

/* Chat */
.chat { background: var(--surface); color: var(--ink); width: 100%; max-width: 360px; border-radius: 20px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8); border: 1px solid var(--line-2); text-align: left; }
.chat .c-top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.chat .c-top i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #FFCB8A, var(--accent)); flex: none; }
.chat .c-top span { display: grid; line-height: 1.25; }
.chat .c-top small { font-weight: 400; color: var(--ok); font-size: .76rem; }
.bubble { padding: 10px 13px; border-radius: 16px; font-size: .88rem; line-height: 1.45; max-width: 86%; }
.bubble.in { background: var(--surface-2); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 5px; }
.bubble.ai { background: linear-gradient(135deg, #FF8A2A, #FFB24D); color: var(--accent-ink); justify-self: end; border-bottom-right-radius: 5px; }
.chat-btns { display: flex; gap: 8px; justify-content: flex-end; }
.chat-btns span { font-size: .8rem; font-weight: 500; padding: 7px 13px; border-radius: 8px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
.stage .bubble, .stage .chat-btns { animation: pop .5s var(--ease) both; }
.stage .bubble.in { animation-delay: .7s; } .stage .bubble.ai { animation-delay: 1.5s; } .stage .chat-btns { animation-delay: 2.1s; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px); } }

/* Panels (dashboard, kiosk, marketing, reservations) */
.panel { background: var(--surface); color: var(--ink); width: 100%; max-width: 440px; border-radius: 16px; padding: 16px; display: grid; gap: 8px; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .8); text-align: left; }
.panel .p-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 600 1rem/1.2 var(--font-display); padding: 2px 4px 10px; }
.panel .p-title span { font: 400 .76rem/1 var(--font-body); color: var(--muted); }
.panel .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.panel .row b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel .row small { color: var(--muted); font-size: .76rem; }
.stage .panel .row { animation: pop .5s var(--ease) both; }
.stage .panel .row:nth-child(2) { animation-delay: .5s; } .stage .panel .row:nth-child(3) { animation-delay: .65s; } .stage .panel .row:nth-child(4) { animation-delay: .8s; } .stage .panel .row:nth-child(5) { animation-delay: .95s; } .stage .panel .row:nth-child(6) { animation-delay: 1.1s; }
.chip { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding-inline: 8px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font: 600 .74rem/1 var(--font-body); }
.chip.y { background: var(--accent); color: var(--accent-ink); }
.channels { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.channels li { border: 1px solid var(--line-2); background: var(--surface); padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: .9rem; }

/* Kitchen screen */
.kds { background: #08080A; color: #EDEDF1; width: 100%; border-radius: 16px; padding: 14px; border: 1px solid var(--line-2); display: grid; gap: 12px; text-align: left; }
.kds .p-title { display: flex; justify-content: space-between; font: 600 1rem/1.2 var(--font-display); padding: 2px 4px; }
.kds .p-title span { font: 500 .76rem/1 var(--font-mono); color: var(--muted); }
.k-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.k-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.k-h { display: flex; justify-content: space-between; align-items: center; font: 600 .74rem/1 var(--font-body); padding: 8px 10px; border-radius: 8px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); }
.k-0 .k-h { color: #FFCB8A; } .k-1 .k-h { color: #7CC8FF; } .k-2 .k-h { color: #5EE0A8; }
.k-h span { background: rgb(255 255 255 / .08); border-radius: 6px; padding: 3px 6px; color: #EDEDF1; }
.k-card { background: #111115; border-radius: 10px; padding: 10px; display: grid; gap: 6px; font-size: .78rem; border: 1px solid var(--line); min-width: 0; }
.k-0 .k-card { border-left: 2px solid #FF7A1A; } .k-1 .k-card { border-left: 2px solid #7CC8FF; }
.k-top { display: flex; justify-content: space-between; align-items: baseline; }
.k-top b { font: 600 .92rem/1 var(--font-display); }
.k-top small { color: var(--muted); font: 500 .7rem/1 var(--font-mono); }
.k-ch { font-size: .7rem; color: var(--muted); }
.k-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; color: #C9C9D1; }
.k-2 .k-card { opacity: .5; }
@media (max-width: 420px) { .k-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-2 { display: none; } }

/* Reservations */
.resv .r-time { font: 600 .82rem/1 var(--font-mono); color: var(--brand); min-width: 44px; }
.resv .row b small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.resv .row.new { background: var(--brand-soft); border: 1px dashed rgb(255 122 26 / .6); }

/* Phone (webshop) */
.phone { width: 100%; max-width: 280px; background: #000; border-radius: 40px; padding: 9px; box-shadow: 0 40px 80px -24px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 60px -20px var(--glow); position: relative; text-align: left; }
.phone::before { content: ""; position: absolute; top: 17px; left: 50%; width: 76px; height: 20px; background: #000; border-radius: 999px; transform: translateX(-50%); z-index: 2; }
.ph-screen { background: #0D0D10; color: var(--ink); border-radius: 32px; padding: 44px 14px 14px; display: grid; gap: 10px; }

/* Grids and cards */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-3 > [style*="span 2"] { grid-column: auto !important; } }
.card { position: relative; display: grid; gap: 12px; align-content: start; background: rgb(10 10 12 / .85); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; color: var(--ink); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.card::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -60px; height: 120px; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .55; z-index: -1; transition: opacity .4s, transform .6s var(--ease); pointer-events: none; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(255 122 26 / .14), transparent 60%); }
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: .9; transform: translateY(-14px); }
.card p { color: var(--muted); }
a.card { text-decoration: none; }
a.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); }
.card h3 { font-size: 1.32rem; letter-spacing: -.02em; }
.card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .94rem; color: var(--brand); text-decoration: none; margin-top: auto; padding-top: 8px; transition: gap .3s var(--ease); }
a.card:hover .more, .card .more:hover { gap: 12px; }
.card .tag { justify-self: start; font: 500 .78rem/1 var(--font-body); background: var(--accent); color: var(--accent-ink); padding: 6px 9px; border-radius: 6px; }

/* Bento (home products) */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; }
.bento > .card { grid-column: span 2; min-height: 230px; }
.bento > .card:first-child { grid-column: span 4; grid-row: span 2; padding: clamp(30px, 4vw, 48px); border-color: rgb(255 122 26 / .35); background: radial-gradient(120% 90% at 85% 100%, rgb(255 122 26 / .3), transparent 60%), rgb(10 10 12 / .9); }
.bento > .card:first-child h3 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.035em; max-width: 14ch; font-weight: 600; }
.bento > .card:first-child p { font-size: 1.06rem; max-width: 40ch; }
.bento > .card:nth-child(6), .bento > .card:nth-child(7) { grid-column: span 3; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > .card, .bento > .card:nth-child(6), .bento > .card:nth-child(7) { grid-column: span 1; } .bento > .card:first-child { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento > .card, .bento > .card:first-child { grid-column: auto; min-height: 0; } }

/* Features */
.feature { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; background: rgb(10 10 12 / .85); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; isolation: isolate; transition: border-color .3s, transform .45s var(--ease); }
.feature::before { content: ""; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB45C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6l1-7z'/%3E%3C/svg%3E") center / 18px no-repeat; border: 1px solid rgb(255 122 26 / .3); margin-bottom: 6px; }
.feature::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -60px; height: 110px; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .45; z-index: -1; transition: opacity .4s; }
.feature:hover { border-color: var(--line-2); transform: translateY(-3px); }
.feature:hover::after { opacity: .85; }
.feature p { color: var(--muted); }
/* The list under the feature tiles ("En verder"): title and one line per row, two columns when there is room. */
.also { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 0 44px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.also li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 20px 0; border-top: 1px solid var(--line); }
.also li::before { content: ""; grid-row: span 2; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB45C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.also b { font: 600 1.04rem/1.3 var(--font-display); color: var(--ink); }
.also span { grid-column: 2; color: var(--muted); font-size: .97rem; line-height: 1.5; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 12px; align-content: start; padding: 28px; background: rgb(10 10 12 / .85); border: 1px solid var(--line); border-radius: var(--r); }
.step-n { justify-self: start; font: 500 .8rem/1 var(--font-body); color: var(--ink); border: 1px solid var(--line-2); padding: 6px 9px; border-radius: 6px; }
.steps .note { color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Order flow story (home) */
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.flow-stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); height: min(560px, 72vh); display: grid; place-items: center; }
.flow-stage::before { content: ""; position: absolute; inset: 10%; background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; filter: blur(20px); }
.fs { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(24px) scale(.97); filter: blur(8px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); pointer-events: none; }
.fs > * { max-width: 440px; }
/* The animated chat grows taller as it grows wider (its text scales with it), so its width follows the stage's height. */
.fs > .wchat { max-width: min(400px, calc(min(560px, 72vh) / 1.26)); }
.flow-stage[data-step="0"] .fs[data-s="0"], .flow-stage[data-step="1"] .fs[data-s="1"], .flow-stage[data-step="2"] .fs[data-s="2"], .flow-stage[data-step="3"] .fs[data-s="3"] { opacity: 1; transform: none; filter: none; }
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-steps li { min-height: 62vh; display: grid; align-content: center; gap: 14px; opacity: .28; transition: opacity .5s var(--ease); }
.flow-steps li.on { opacity: 1; }
.flow-steps li:first-child { min-height: 50vh; align-content: start; padding-top: 10vh; }
.flow-steps li:last-child { min-height: 50vh; }
.flow-steps h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.08; font-weight: 600; }
.flow-steps p { font-size: 1.06rem; max-width: 44ch; }
.fs-n { justify-self: start; font: 500 .8rem/1 var(--font-body); color: var(--ink); border: 1px solid var(--line-2); padding: 6px 9px; border-radius: 6px; background: var(--surface); }
.fs-inline { display: none; }
@media (max-width: 900px) {
  .flow-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-stage { display: none; }
  .flow-steps { display: grid; gap: 56px; }
  .flow-steps li, .flow-steps li:first-child, .flow-steps li:last-child { min-height: 0; opacity: 1; padding: 0; }
  .fs-inline { display: grid; justify-items: center; margin-top: 12px; }
}

/* App screens */
.shots { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.shot { margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.shot-frame { position: relative; background: rgb(10 10 12 / .85); border-radius: 16px; padding: clamp(20px, 3vw, 32px); display: grid; place-items: center; min-height: 340px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; }
.shot-frame::before { content: ""; position: absolute; inset: auto -10% -45% -10%; height: 80%; background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; transition: transform .7s var(--ease); }
.shot:hover .shot-frame { transform: translateY(-4px); border-color: var(--line-2); }
.shot:hover .shot-frame::before { transform: translateY(-12%); }
.shot-frame > * { width: 100%; }
.shot-frame > .phone { max-width: 250px; }
.shot-frame > .chat, .shot-frame > .panel { max-width: 420px; }
.shot-frame img { width: 100%; height: auto; border-radius: 12px; }
.shot-frame .ticket { max-width: 320px; }
.shot figcaption { font-size: 1rem; font-weight: 500; color: var(--ink); display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding-inline: 4px; }
.shot figcaption span { font-size: .78rem; font-weight: 400; color: var(--dim); flex: none; }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink); }
.ticks li::before, .price li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* Pricing */
.price-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
.price { position: relative; display: grid; gap: 14px; align-content: start; background: rgb(10 10 12 / .9); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), border-color .3s; }
.price::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; background: radial-gradient(closest-side, var(--glow-soft), transparent); z-index: -1; pointer-events: none; }
.price::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(255 122 26 / .14), transparent 60%); }
.price:hover { transform: translateY(-4px); border-color: var(--line-2); }
.price:hover::before { opacity: 1; }
.price.pop { border-color: rgb(255 122 26 / .5); background: radial-gradient(100% 60% at 50% 0%, rgb(255 122 26 / .28), transparent 70%), rgb(10 10 12 / .95); box-shadow: 0 0 60px -20px var(--glow); }
.price h3 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.25rem; font-weight: 500; color: var(--muted); }
.price h3 .chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); font-weight: 500; }
.price .amount { font: 600 clamp(2.3rem, 4vw, 2.9rem)/1 var(--font-display); letter-spacing: -.04em; }
.price .amount small { font: 400 1rem/1 var(--font-body); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price .sub { color: var(--muted); font-size: .94rem; }
.price ul { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; font-size: .95rem; }
.price li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.price-group { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 80px); }
.price-group > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.note { color: var(--muted); font-size: .92rem; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-wrap .section-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); margin-bottom: 0; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq-wrap .section-head { position: static; } }
.faq { display: grid; gap: 10px; }
.faq details { background: rgb(10 10 12 / .85); border: 1px solid var(--line); border-radius: var(--r); padding-inline: 22px; transition: border-color .3s; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 0; font: 500 1.06rem/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 400 1.15rem/1 var(--font-body); color: var(--ink); transition: transform .4s var(--ease), background .3s, border-color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); }
.faq details p { padding: 0 44px 22px 0; color: var(--muted); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* CTA */
.cta .wrap { display: grid; gap: 22px; justify-items: center; text-align: center; padding-block: clamp(48px, 7vw, 88px); border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(80% 90% at 50% 120%, rgb(255 122 26 / .4), transparent 70%), rgb(8 8 10 / .85); max-width: 1160px; }
.cta h2 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.04; max-width: 18ch; }
.cta p { max-width: 54ch; font-size: 1.1rem; }
.cta .btn-row { justify-content: center; }
.band.dark.cta::before { display: none; }
@media (max-width: 1200px) { .cta .wrap { margin-inline: max(16px, env(safe-area-inset-left, 0px)); } }

/* Contact */
.hero + .band[style] { padding-top: clamp(32px, 5vw, 64px) !important; }
.contact-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.wa-box { border-color: rgb(255 122 26 / .35); }
.wa-number { font: 600 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--font-mono); letter-spacing: -.01em; color: var(--ink); user-select: all; }
form.lead-form { display: grid; gap: 16px; background: rgb(10 10 12 / .9); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); position: relative; z-index: 1; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, fieldset legend { font-weight: 500; font-size: .92rem; }
.field input, .field textarea, .field select { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(255 122 26 / .2); }
.two { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .two { grid-template-columns: minmax(0, 1fr); } }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 8px; font-size: .9rem; cursor: pointer; transition: border-color .2s, background .2s; }
.checks label:hover { border-color: rgb(255 255 255 / .32); }
.checks label:has(input:checked) { background: var(--brand-soft); border-color: var(--accent); }
.checks input { accent-color: var(--accent); }
.form-msg { background: var(--brand-soft); color: var(--brand); padding: 12px 14px; border-radius: 8px; font-weight: 500; }

/* Misc */
.ph { background: var(--ph-bg); color: var(--ph-ink); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.prose { max-width: 760px; display: grid; gap: 18px; }
.prose h2 { font-size: 1.5rem; margin-top: 16px; }
.prose p, .prose li { color: var(--muted); }
.crumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: linear-gradient(transparent, rgb(255 122 26 / .07)); color: var(--muted); padding-block: clamp(56px, 8vw, 96px) max(28px, env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.site-footer .wrap { display: grid; gap: 40px; position: relative; z-index: 1; }
.foot-cols { display: grid; gap: 32px; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-cols > :first-child { grid-column: 1 / -1; } }
.foot-cols h4 { margin: 0 0 14px; font: 500 .92rem/1 var(--font-body); color: var(--ink); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--ink); }
.site-footer .logo { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); font-size: .86rem; }
.foot-mark { font: 700 clamp(4.5rem, 19vw, 16rem)/.8 var(--font-display); letter-spacing: -.06em; background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; text-align: center; margin-bottom: -.1em; user-select: none; pointer-events: none; }

/* Headline words blur in, one by one */
.w { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* a word wider than the screen (German compounds on a small phone) breaks instead of widening the page */
.split-ready .w { opacity: 0; filter: blur(10px); transform: translateY(12px); }
.split-ready.in .w { animation: word .9s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes word { to { opacity: 1; filter: none; transform: none; } }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
  .rv-js .rv.below { opacity: 0; translate: 0 36px; filter: blur(8px); }
  .rv-js .rv { transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s), transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
}
@keyframes rv-in { from { opacity: 0; translate: 0 40px; filter: blur(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv.below, .split-ready .w { opacity: 1 !important; translate: none !important; filter: none !important; transform: none !important; }
  .mq-track { transform: none; }
  .marquee { overflow-x: auto; }
}

/* Voice demo ("Probeer onze AI") */
.demo { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; padding: clamp(28px, 5vw, 56px); border: 1px solid rgb(255 122 26 / .32); border-radius: 20px; background: radial-gradient(70% 90% at 85% 50%, rgb(255 122 26 / .22), transparent 70%), rgb(8 8 10 / .88); box-shadow: 0 0 80px -30px var(--glow); }
.demo-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.demo-copy h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; text-wrap: balance; }
.demo-copy p { color: var(--muted); max-width: 52ch; margin: 0; }
.demo-copy .demo-note { font-size: .88rem; color: var(--dim); }
.demo-ctl { display: grid; gap: 18px; justify-items: center; text-align: center; min-width: 0; }
.demo-orb { --v: 0; position: relative; width: 132px; aspect-ratio: 1; display: grid; place-items: center; }
.demo-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(255 122 26 / .35); }
.demo-orb i:nth-child(1) { background: radial-gradient(circle at 35% 30%, #FFCB8A, var(--accent) 55%, #9A3A00); inset: 26%; border: 0; box-shadow: 0 0 40px -6px var(--accent); transform: scale(calc(1 + var(--v) * .35)); transition: transform .12s linear; }
.demo-orb i:nth-child(2) { inset: 12%; }
.demo-orb i:nth-child(3) { inset: 0; opacity: .5; }
.demo-state { min-height: 1.4em; margin: 0; font-size: .92rem; color: var(--ink); }
.demo-btn { font-size: 1.02rem; padding: 14px 22px; gap: 10px; cursor: pointer; border: 0; font-family: inherit; font-weight: 600; }
.demo-btn .mic { width: 12px; height: 18px; border-radius: 6px; border: 2px solid currentColor; position: relative; }
.demo-btn .mic::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 5px; background: currentColor; transform: translateX(-50%); }
.demo-btn[data-state="connecting"] { opacity: .8; cursor: progress; }
.demo-btn[data-state="live"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.demo-btn[data-state="live"] .mic { border-color: #FF5A4E; }
.demo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.demo.is-live .demo-orb i:nth-child(2) { animation: ring 1.8s var(--ease) infinite; }
.demo.is-live .demo-orb i:nth-child(3) { animation: ring 1.8s .6s var(--ease) infinite; }
.demo.is-connecting .demo-orb i:nth-child(1) { animation: blink 1.2s infinite; }
@keyframes ring { from { transform: scale(.75); opacity: .8; } to { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo.is-live .demo-orb i, .demo.is-connecting .demo-orb i { animation: none; } .demo-orb i:nth-child(1) { transition: none; transform: none; } }

/* WhatsApp-style chat demo (dark WhatsApp palette) */
.wa-demo { border-color: rgb(37 211 102 / .28); background: radial-gradient(70% 90% at 85% 50%, rgb(37 211 102 / .14), transparent 70%), rgb(8 8 10 / .88); }
.wa { --wa-bg: #0B141A; --wa-bar: #1F2C34; --wa-in: #202C33; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-dim: #8696A0; --wa-green: #25D366; --wa-send: #00A884;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; width: 100%; max-width: 400px; height: 520px; justify-self: center; border-radius: 22px; overflow: hidden; background: var(--wa-bg); color: var(--wa-ink); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8), 0 0 60px -30px rgb(37 211 102 / .5); min-width: 0; font-size: .95rem; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--wa-bar); }
.wa-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFCB8A, var(--accent) 60%, #9A3A00); color: var(--accent-ink); font-weight: 700; flex: none; }
.wa-who { display: grid; line-height: 1.2; min-width: 0; }
.wa-who b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wa-who small { color: var(--wa-dim); font-size: .78rem; }
.wa-check { width: 15px; height: 15px; border-radius: 50%; background: var(--wa-green); position: relative; flex: none; }
.wa-check::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px; border: solid #0B141A; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wa-log { overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain;
  background-color: var(--wa-bg); background-image: radial-gradient(rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 18px 18px; }
.wa-msg { max-width: 82%; padding: 7px 10px 6px; border-radius: 10px; display: grid; gap: 2px; animation: wa-in .25s var(--ease) both; }
.wa-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--wa-ink); }
.wa-msg time { justify-self: end; font-size: .68rem; color: var(--wa-dim); }
.wa-msg.in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 2px; }
.wa-msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 2px; }
.wa-msg.out time { color: #9FD2C5; }
.wa-msg.sys p { color: #C9D2D7; font-style: italic; }
.wa-typing { display: flex; gap: 4px; padding: 12px 14px; }
.wa-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-dim); animation: wa-dot 1.2s infinite; }
.wa-typing span:nth-child(2) { animation-delay: .15s; } .wa-typing span:nth-child(3) { animation-delay: .3s; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--wa-bg); }
.wa-chip { font: inherit; font-size: .82rem; color: var(--wa-green); background: transparent; border: 1px solid rgb(37 211 102 / .45); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.wa-chip:hover { background: rgb(37 211 102 / .1); }
.wa-input { display: flex; gap: 8px; padding: 10px; background: var(--wa-bar); align-items: center; }
.wa-input input { flex: 1; min-width: 0; font: inherit; color: var(--wa-ink); background: #2A3942; border: 0; border-radius: 999px; padding: 11px 16px; }
.wa-input input::placeholder { color: var(--wa-dim); }
.wa-input input:focus-visible, .wa-chip:focus-visible, .wa-send:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 2px; }
.wa-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--wa-send); color: #0B141A; cursor: pointer; }
.wa-input.is-busy .wa-send { opacity: .6; cursor: progress; }
@keyframes wa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wa-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 480px) { .wa { height: 480px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .wa-msg, .wa-typing span { animation: none; } }

/* Payment methods on the webshop page */
.pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pay-list li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .95rem/1.2 var(--font-body); }

/* Kiosk scene: a figure orders at the kiosk. Pure CSS, one 14 s loop; without motion it rests on the menu screen. */
.kscene { --t: 14s; position: relative; width: min(100%, 400px); aspect-ratio: 10 / 9; margin-inline: auto; container-type: inline-size; font-size: 12px; text-align: left; }
.kscene *, .kscene *::before, .kscene *::after { box-sizing: border-box; }
.ks-floor { position: absolute; left: 2%; right: 2%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); }
.ks-kiosk { position: absolute; left: 6%; bottom: 0; width: 40%; height: 97%; }
.ks-frame { position: absolute; inset: 0 0 auto 0; height: 70%; padding: 5%; border-radius: 9% / 6%; background: linear-gradient(160deg, #1B1B21, var(--surface)); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9); z-index: 2; }
.ks-screen { position: relative; height: 100%; border-radius: 6% / 4%; background: #050506; overflow: hidden; font-size: 3.1cqi; line-height: 1.25; color: var(--ink); }
.ks-view { position: absolute; inset: 0; padding: 9% 8%; display: grid; gap: 5%; align-content: start; opacity: 0; animation: var(--t) linear infinite; }
.ks-lang { align-content: center; justify-items: center; gap: 12%; animation-name: ks-v-lang; }
.ks-menu { opacity: 1; animation-name: ks-v-menu; }
.ks-pay { align-content: center; justify-items: center; gap: 10%; animation-name: ks-v-pay; }
.ks-hello, .ks-roll { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.ks-hello { font: 700 1.5em/1.25 var(--font-display); text-align: center; }
.ks-hello > span, .ks-roll > span { display: block; animation: ks-words var(--t) var(--ease) infinite; }
.ks-hello > span { animation-name: ks-hello; }
.ks-hello em, .ks-roll em { display: block; height: 1.25em; font-style: normal; white-space: nowrap; }
.ks-chips { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4%; width: 100%; }
.ks-chips i { font: 700 .72em/1 var(--font-mono); font-style: normal; text-align: center; padding: .6em 0; border-radius: .5em; border: 1px solid var(--line-2); color: var(--ink); }
.ks-chips::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16.8%; border-radius: .5em; background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--accent); animation: ks-chip var(--t) var(--ease) infinite; }
.ks-top { display: flex; justify-content: space-between; align-items: center; font: 700 1.05em/1.25 var(--font-display); }
.ks-cart { display: block; width: 1.9em; height: 1.9em; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--accent-ink); font: 700 .8em/1 var(--font-mono); }
.ks-cart > span { display: block; transform: translateY(-66.666%); animation: ks-cart var(--t) var(--ease) infinite; }
.ks-cart em { display: block; height: 1.9em; line-height: 1.9em; text-align: center; font-style: normal; }
.ks-item { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) 1.5em; align-items: center; gap: .45em; padding: .4em .5em; border-radius: .7em; border: 1px solid var(--line); background: var(--surface); }
.ks-n { display: grid; min-width: 0; gap: .1em; }
.ks-item svg { width: 1.7em; height: 1.7em; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ks-item b { font-weight: 600; min-width: 0; line-height: 1.25; }
.ks-item small { font: 500 .76em/1 var(--font-mono); color: var(--muted); }
.ks-item u { text-decoration: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid var(--line-2); font-weight: 700; line-height: 1; }
.ks-burger { animation: ks-tap1 var(--t) linear infinite; } .ks-burger u { animation: ks-plus1 var(--t) linear infinite; }
.ks-fries { animation: ks-tap2 var(--t) linear infinite; } .ks-fries u { animation: ks-plus2 var(--t) linear infinite; }
.ks-go { text-align: center; padding: .55em; border-radius: .7em; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ks-pay b { font: 700 1.6em/1 var(--font-display); }
.ks-card { position: relative; width: 46%; aspect-ratio: 1.58; border-radius: .5em; background: linear-gradient(135deg, var(--brand), var(--accent-2)); opacity: 0; animation: ks-card var(--t) var(--ease) infinite; }
.ks-card::after { content: ""; position: absolute; left: 12%; top: 30%; width: 22%; height: 26%; border-radius: .2em; background: rgb(0 0 0 / .28); }
.ks-ok { position: absolute; left: 50%; top: 60%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%; background: var(--ok); transform: scale(0); animation: ks-ok var(--t) var(--ease) infinite; }
.ks-ok::after { content: ""; position: absolute; left: 36%; top: 20%; width: 30%; height: 52%; border: solid #04130C; border-width: 0 .32em .32em 0; transform: rotate(45deg); }
.ks-slot { position: absolute; left: 30%; right: 30%; top: 70%; height: 11%; overflow: hidden; z-index: 3; }
.ks-ticket { position: absolute; inset: 0 6% 16% 6%; display: grid; place-items: center; background: var(--paper); color: var(--paper-ink); font: 700 2.6cqi/1 var(--font-mono); border-radius: 0 0 .25em .25em; transform: translateY(-110%); animation: ks-ticket var(--t) var(--ease) infinite; }
.ks-stand { position: absolute; left: 39%; right: 39%; top: 69%; bottom: 3%; background: linear-gradient(90deg, #15151A, #26262E, #15151A); }
.ks-base { position: absolute; left: 14%; right: 14%; bottom: 0; height: 3.4%; border-radius: 40% 40% 0 0 / 100% 100% 0 0; background: #26262E; border: 1px solid var(--line-2); border-bottom: 0; }
.ks-man { position: absolute; left: 36%; bottom: 0; width: 48%; height: 96%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; z-index: 4; }
.ks-man > circle { fill: var(--bg); }
.ks-arm { transform-box: view-box; transform-origin: 52px 52px; transform: rotate(86deg); animation: ks-arm var(--t) ease-in-out infinite; }
.ks-arm circle { fill: var(--accent); stroke: none; }
@keyframes ks-v-lang { 0%, 27% { opacity: 1; } 31%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ks-v-menu { 0%, 29% { opacity: 0; } 33%, 67% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes ks-v-pay { 0%, 69% { opacity: 0; } 73%, 91% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes ks-hello { 0%, 4% { transform: translateY(0); } 6%, 10% { transform: translateY(-20%); } 12%, 16% { transform: translateY(-40%); } 18%, 22% { transform: translateY(-60%); } 24%, 34% { transform: translateY(-80%); } 36%, 100% { transform: translateY(0); } }
@keyframes ks-chip { 0%, 4% { transform: translateX(0); } 6%, 10% { transform: translateX(123.81%); } 12%, 16% { transform: translateX(247.62%); } 18%, 22% { transform: translateX(371.43%); } 24%, 34% { transform: translateX(495.24%); } 36%, 100% { transform: translateX(0); } }
@keyframes ks-words { 0%, 37% { transform: translateY(0); } 39%, 44% { transform: translateY(-20%); } 46%, 51% { transform: translateY(-40%); } 53%, 58% { transform: translateY(-60%); } 60%, 74% { transform: translateY(-80%); } 76%, 100% { transform: translateY(0); } }
@keyframes ks-cart { 0%, 41% { transform: translateY(0); } 42.5%, 53% { transform: translateY(-33.333%); } 54.5%, 74% { transform: translateY(-66.666%); } 76%, 100% { transform: translateY(0); } }
@keyframes ks-tap1 { 0%, 40.5%, 46%, 100% { border-color: var(--line); background: var(--surface); } 41.5%, 44% { border-color: var(--accent); background: var(--brand-soft); } }
@keyframes ks-plus1 { 0%, 40.5%, 46%, 100% { background: transparent; color: var(--ink); } 41.5%, 44% { background: var(--accent); color: var(--accent-ink); } }
@keyframes ks-tap2 { 0%, 52%, 57.5%, 100% { border-color: var(--line); background: var(--surface); } 53%, 55.5% { border-color: var(--accent); background: var(--brand-soft); } }
@keyframes ks-plus2 { 0%, 52%, 57.5%, 100% { background: transparent; color: var(--ink); } 53%, 55.5% { background: var(--accent); color: var(--accent-ink); } }
@keyframes ks-card { 0%, 72% { opacity: 0; transform: translateY(40%); } 76%, 79% { opacity: 1; transform: translateY(0); } 81.5%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes ks-ok { 0%, 80% { transform: scale(0); } 83%, 93% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes ks-ticket { 0%, 83% { transform: translateY(-110%); opacity: 1; } 89%, 95% { transform: translateY(0); opacity: 1; } 98%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes ks-arm {
  0%, 6% { transform: rotate(14deg); }
  11%, 25% { transform: rotate(59deg); } 26.2% { transform: translate(-4px, 0) rotate(59deg); } 27.4%, 31% { transform: rotate(59deg); }
  36%, 40% { transform: rotate(109deg); } 41.2% { transform: translate(-4px, 0) rotate(109deg); } 42.4%, 47% { transform: rotate(109deg); }
  50%, 51.6% { transform: rotate(86deg); } 52.8% { transform: translate(-4px, 0) rotate(86deg); } 54%, 66% { transform: rotate(86deg); }
  72%, 75% { transform: rotate(70deg); } 76.2% { transform: translate(-4px, 0) rotate(70deg); } 77.4%, 82% { transform: rotate(70deg); }
  88%, 94% { transform: rotate(35deg); } 100% { transform: rotate(14deg); }
}
.stage .kscene { animation: rise 1s .15s var(--ease) both; }
.shot-frame > .kscene { max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .kscene *, .kscene *::before { animation: none !important; } .ks-roll > span { transform: translateY(calc(var(--ks-i, 0) * -20%)); } }

/* Marketing scene: the restaurant reaches its customers' phones on WhatsApp, by e-mail and in the wallet, and orders come back.
   Pure CSS, one 12 s loop; without motion it shows the three messages and the orders. Sizes are in cqi, so it scales with its box.
   The lines are an SVG drawn on a 400 x 360 grid: phone 1, 2 and 3 stand at x = 68, 200 and 332. */
.mscene { --t: 12s; position: relative; width: min(100%, 460px); aspect-ratio: 10 / 9; margin-inline: auto; container-type: inline-size; font-size: 12px; text-align: left; }
.mscene *, .mscene *::before, .mscene *::after { box-sizing: border-box; }
.ms-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.ms-wire { stroke: var(--line-2); stroke-width: 1.25; }
.ms-go, .ms-back { stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 9 200; animation: var(--t) cubic-bezier(.45, 0, .55, 1) infinite; }
.ms-go { stroke: var(--accent); stroke-dashoffset: -104; filter: drop-shadow(0 0 3px var(--accent)); }
.ms-back { stroke: var(--ok); stroke-dashoffset: 14; filter: drop-shadow(0 0 3px var(--ok)); }
.ms-g1 { animation-name: ms-go1; } .ms-g2 { animation-name: ms-go2; } .ms-g3 { animation-name: ms-go3; }
.ms-b1 { animation-name: ms-back1; } .ms-b2 { animation-name: ms-back2; } .ms-b3 { animation-name: ms-back3; }
.ms-name { position: absolute; left: 0; top: 2%; width: 37.5%; height: 21.1%; display: grid; align-content: center; justify-items: end; gap: .3em; text-align: right; font: 700 3.1cqi/1.15 var(--font-display); color: var(--ink); }
.ms-name small { display: inline-flex; align-items: center; gap: .5em; font: 500 2.5cqi/1.2 var(--font-body); color: var(--muted); }
.ms-name small::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25em var(--brand-soft); }
.ms-shop { position: absolute; left: 40.5%; top: 2%; width: 19%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; background: linear-gradient(160deg, #1B1B21, var(--surface)); border: 1px solid var(--line-2); box-shadow: 0 14px 34px -12px var(--glow); z-index: 2; animation: ms-recv var(--t) linear infinite; }
.ms-shop svg { width: 62%; height: 62%; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ms-shop .ms-awn { stroke: var(--accent); fill: var(--brand-soft); }
.ms-shop::before, .ms-shop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--accent); opacity: 0; animation: ms-ping var(--t) ease-out infinite; }
.ms-shop::after { animation-name: ms-ping2; }
.ms-pill { position: absolute; left: 62.5%; top: 2%; height: 21.1%; display: flex; align-items: center; z-index: 2; }
.ms-pill > span { display: inline-flex; align-items: center; gap: .45em; padding: .55em .85em; border-radius: 999px; background: rgb(52 211 153 / .12); border: 1px solid rgb(52 211 153 / .45); color: var(--ok); font: 700 2.7cqi/1 var(--font-body); white-space: nowrap; animation: ms-pill var(--t) var(--ease) infinite; }
.ms-count { display: inline-block; height: 1em; overflow: hidden; }
.ms-count > span { display: block; transform: translateY(-66.666%); animation: ms-count var(--t) var(--ease) infinite; }
.ms-count em { display: block; height: 1em; font-style: normal; }
.ms-phones { position: absolute; inset: 0; z-index: 2; -webkit-mask-image: linear-gradient(#000 86%, transparent 100%); mask-image: linear-gradient(#000 86%, transparent 100%); }
.ms-phone { position: absolute; top: 62.2%; width: 20%; height: 44%; padding: 1.1cqi; border-radius: 3.4cqi; background: linear-gradient(160deg, #1B1B21, var(--surface)); border: 1px solid var(--line-2); transform-origin: 50% 100%; animation: var(--t) linear infinite; }
.ms-p1 { left: 7%; animation-name: ms-buzz1; } .ms-p2 { left: 40%; animation-name: ms-buzz2; } .ms-p3 { left: 73%; animation-name: ms-buzz3; }
.ms-scr { position: relative; height: 100%; padding-top: 32%; border-radius: 2.4cqi; background: #050506; overflow: hidden; text-align: center; }
.ms-scr::before { content: ""; position: absolute; top: 5%; left: 36%; right: 36%; height: 3.4%; border-radius: 99px; background: #1F1F26; z-index: 1; }
.ms-scr::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 75% at 50% 0%, var(--glow), transparent 72%); animation: var(--t) linear infinite; }
.ms-p1 .ms-scr::after { animation-name: ms-glow1; } .ms-p2 .ms-scr::after { animation-name: ms-glow2; } .ms-p3 .ms-scr::after { animation-name: ms-glow3; }
.ms-scr b { position: relative; z-index: 1; font: 600 4.1cqi/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.ms-note { position: absolute; bottom: 40.6%; width: 31%; padding: 1.7cqi 1.9cqi 1.9cqi; display: grid; gap: 1cqi; border-radius: 2.6cqi; background: #17171C; border: 1px solid var(--line-2); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .95); transform-origin: 50% 100%; z-index: 3; }
.ms-note::after { content: ""; position: absolute; left: 50%; bottom: -1.05cqi; width: 2cqi; height: 2cqi; margin-left: -1cqi; background: #17171C; border: 0 solid; border-color: inherit; border-width: 0 1px 1px 0; border-bottom-right-radius: .5cqi; transform: rotate(45deg); }
.ms-n1 { left: 1.5%; animation: ms-note1 var(--t) var(--ease) infinite, ms-tap1 var(--t) linear infinite; }
.ms-n2 { left: 34.5%; animation: ms-note2 var(--t) var(--ease) infinite, ms-tap2 var(--t) linear infinite; }
.ms-n3 { left: 67.5%; animation: ms-note3 var(--t) var(--ease) infinite, ms-tap3 var(--t) linear infinite; }
.ms-ch { display: flex; align-items: center; gap: 1.3cqi; min-width: 0; font: 700 2.95cqi/1 var(--font-display); color: var(--ink); }
.ms-ch svg { flex: none; width: 5cqi; height: 5cqi; padding: .95cqi; border-radius: 1.4cqi; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ms-wa svg { stroke: #25D366; background: rgb(37 211 102 / .14); }
.ms-mail svg { stroke: var(--brand); background: var(--brand-soft); }
.ms-wal svg { stroke: var(--ink); background: rgb(255 255 255 / .1); }
.ms-note p { margin: 0; min-height: 2.6em; font: 500 2.75cqi/1.3 var(--font-body); color: var(--muted); text-wrap: balance; } /* always room for two lines, so the three notes are equally tall */
/* The loop: send (3-17%), a message lands on phone 1, 2, 3 (15-27%), time to read, then each customer orders (56-77%). */
@keyframes ms-ping { 0%, 3% { transform: scale(1); opacity: 0; } 4% { transform: scale(1.03); opacity: .8; } 13%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes ms-ping2 { 0%, 7% { transform: scale(1); opacity: 0; } 8% { transform: scale(1.03); opacity: .6; } 17%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes ms-go1 { 0%, 6% { stroke-dashoffset: 14; } 15%, 100% { stroke-dashoffset: -104; } }
@keyframes ms-go2 { 0%, 10% { stroke-dashoffset: 14; } 19%, 100% { stroke-dashoffset: -104; } }
@keyframes ms-go3 { 0%, 14% { stroke-dashoffset: 14; } 23%, 100% { stroke-dashoffset: -104; } }
@keyframes ms-back1 { 0%, 58% { stroke-dashoffset: -104; } 67%, 100% { stroke-dashoffset: 14; } }
@keyframes ms-back2 { 0%, 62% { stroke-dashoffset: -104; } 71%, 100% { stroke-dashoffset: 14; } }
@keyframes ms-back3 { 0%, 66% { stroke-dashoffset: -104; } 75%, 100% { stroke-dashoffset: 14; } }
@keyframes ms-buzz1 { 0%, 15%, 18.2%, 100% { transform: rotate(0); } 15.8% { transform: rotate(-5deg); } 16.6% { transform: rotate(4deg); } 17.4% { transform: rotate(-2.5deg); } }
@keyframes ms-buzz2 { 0%, 19%, 22.2%, 100% { transform: rotate(0); } 19.8% { transform: rotate(-5deg); } 20.6% { transform: rotate(4deg); } 21.4% { transform: rotate(-2.5deg); } }
@keyframes ms-buzz3 { 0%, 23%, 26.2%, 100% { transform: rotate(0); } 23.8% { transform: rotate(-5deg); } 24.6% { transform: rotate(4deg); } 25.4% { transform: rotate(-2.5deg); } }
@keyframes ms-glow1 { 0%, 15% { opacity: 0; } 16.5%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ms-glow2 { 0%, 19% { opacity: 0; } 20.5%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ms-glow3 { 0%, 23% { opacity: 0; } 24.5%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ms-note1 { 0%, 15.5% { opacity: 0; transform: translateY(22%) scale(.7); } 18.5%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8%); } }
@keyframes ms-note2 { 0%, 19.5% { opacity: 0; transform: translateY(22%) scale(.7); } 22.5%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8%); } }
@keyframes ms-note3 { 0%, 23.5% { opacity: 0; transform: translateY(22%) scale(.7); } 26.5%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8%); } }
@keyframes ms-tap1 { 0%, 55.5%, 59.5%, 100% { border-color: var(--line-2); } 56.5%, 58.5% { border-color: var(--ok); } }
@keyframes ms-tap2 { 0%, 59.5%, 63.5%, 100% { border-color: var(--line-2); } 60.5%, 62.5% { border-color: var(--ok); } }
@keyframes ms-tap3 { 0%, 63.5%, 67.5%, 100% { border-color: var(--line-2); } 64.5%, 66.5% { border-color: var(--ok); } }
@keyframes ms-recv { 0%, 66.4%, 69%, 70.4%, 73%, 74.4%, 77%, 100% { border-color: var(--line-2); } 67.2%, 71.2%, 75.2% { border-color: var(--ok); } }
@keyframes ms-pill { 0%, 66% { opacity: 0; transform: translateX(-10%) scale(.9); } 68.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ms-count { 0%, 70.6% { transform: translateY(0); } 71.6%, 74.6% { transform: translateY(-33.333%); } 75.6%, 100% { transform: translateY(-66.666%); } }
.stage .mscene { animation: rise 1s .15s var(--ease) both; }
.shot-frame > .mscene { max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .mscene *, .mscene *::before, .mscene *::after { animation: none !important; } }

/* Webshop scene: a customer orders on the phone. Menu (three products go in the basket) -> checkout (address, delivery cost,
   way to pay) -> order page (thank you, the minutes counting down, the steps up to delivered), worded like the real webshop.
   Pure CSS, one 16 s loop; without motion it rests on the menu with a filled basket. Sizes are in cqi of the phone's screen.
   Timing: most parts share one small animation and get their moment from --d (the part of the loop at which they start). */
.wscene .ws { --t: 16s; position: relative; display: block; padding: 0; aspect-ratio: 100 / 156; overflow: hidden; container-type: inline-size; }
.ws-view { position: absolute; inset: 0; padding: 16.8cqi 5.4cqi 5.4cqi; display: flex; flex-direction: column; gap: 3.6cqi; animation: var(--t) var(--ease) infinite; }
.ws-view > * { flex: none; }
.ws-view > .ws-map { flex: 1 1 0; }
.ws-menu { animation-name: ws-va; }
.ws-check { opacity: 0; animation-name: ws-vb; }
.ws-done { opacity: 0; animation-name: ws-vc; }
.ws-roll { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.ws-roll > span { display: block; animation: var(--t) var(--ease) infinite; }
.ws-roll em { display: block; height: 1.15em; line-height: 1.15; font-style: normal; }
.ws-tap { position: absolute; left: 50%; top: 50%; width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; animation: ws-tap var(--t) ease-out calc(var(--t) * var(--d)) infinite backwards; }
.ws-btn { position: relative; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 5.3cqi; line-height: 1.15; text-align: center; padding: 4.4cqi 3cqi; border-radius: 4.6cqi; white-space: nowrap; }
/* 1. menu */
.ws-head { display: grid; gap: .8cqi; }
.ws-head b { font: 700 7cqi/1.1 var(--font-display); letter-spacing: -.02em; }
.ws-head small { color: var(--muted); font-size: 4.6cqi; line-height: 1.2; }
.ws-cats { display: flex; gap: 2.3cqi; overflow: hidden; }
.ws-cats span { flex: none; font-size: 4.4cqi; line-height: 1.2; font-weight: 500; padding: 2.2cqi 3.8cqi; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.ws-cats span.on { background: #fff; border-color: #fff; color: #000; }
.ws-item { display: grid; grid-template-columns: 16cqi minmax(0, 1fr) auto; gap: 3.8cqi; align-items: center; padding: 3cqi; border: 1px solid var(--line); background: var(--surface-2); border-radius: 4.6cqi; }
.ws-item > i { width: 16cqi; height: 16cqi; border-radius: 3.8cqi; background: linear-gradient(135deg, #F7C26B, #E5743A); display: grid; place-items: center; }
.ws-i2 > i { background: linear-gradient(135deg, #FF8A7A, #C2341F); }
.ws-item > i svg { width: 60%; height: 60%; fill: none; stroke: rgb(22 10 0 / .78); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ws-item b { display: grid; gap: .6cqi; min-width: 0; font-size: 5.2cqi; line-height: 1.2; font-weight: 500; }
.ws-item b small { font-weight: 400; color: var(--muted); font-size: 4.6cqi; }
.ws-i1 { --d: .055; } .ws-i2 { --d: .105; } .ws-i3 { --d: .155; }
.ws-add { position: relative; width: 10.7cqi; height: 10.7cqi; border-radius: 50%; background: var(--ok); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 6cqi; line-height: 1; animation: ws-added var(--t) var(--ease) calc(var(--t) * var(--d)) infinite backwards; }
.ws-add em, .ws-add svg { grid-area: 1 / 1; }
.ws-add em { font-style: normal; opacity: 0; animation: ws-off var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-add svg { width: 52%; height: 52%; fill: none; stroke: #04130C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: ws-on var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-i1 .ws-tap { --d: .045; } .ws-i2 .ws-tap { --d: .095; } .ws-i3 .ws-tap { --d: .145; }
.ws-order { --d: .055; margin-top: auto; animation: ws-wake var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-order .ws-tap { --d: .21; }
.ws-tot > span { transform: translateY(-75%); animation-name: ws-tot; }
/* 2. checkout */
.ws-title { font: 700 6.4cqi/1.1 var(--font-display); letter-spacing: -.02em; }
.ws-seg { display: grid; grid-template-columns: 1fr 1fr; padding: .9cqi; border-radius: 4cqi; background: var(--surface-2); border: 1px solid var(--line); }
.ws-seg span { text-align: center; font-size: 4.5cqi; line-height: 1.2; font-weight: 500; padding: 2.2cqi 1cqi; border-radius: 3.2cqi; color: var(--muted); }
.ws-seg span.on { background: #fff; color: #000; }
.ws-lab { font-size: 4.1cqi; line-height: 1.2; color: var(--muted); margin-bottom: -1.9cqi; }
.ws-field { --d: .28; display: flex; align-items: center; height: 12.4cqi; padding: 0 3.6cqi; border-radius: 3.8cqi; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 4.9cqi; line-height: 1.2; white-space: nowrap; overflow: hidden; animation: ws-focus var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-type i { font-style: normal; white-space: pre; animation: ws-on var(--t) linear calc(var(--t) * .29 + var(--i) * 60ms) infinite backwards; }
.ws-fee { --d: .4; display: flex; align-items: center; gap: 1.6cqi; margin-top: -1.4cqi; font-size: 4.3cqi; line-height: 1.2; font-weight: 500; color: var(--ok); animation: ws-on var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-fee svg { flex: none; width: 4.4cqi; height: 4.4cqi; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ws-chips { display: flex; gap: 2cqi; }
.ws-chip { position: relative; font-size: 4.3cqi; line-height: 1.2; font-weight: 500; padding: 2.4cqi 3.4cqi; border-radius: 3.4cqi; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.ws-sel { --d: .45; border-color: var(--accent); background: var(--brand-soft); color: var(--ink); animation: ws-picked var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-sel .ws-tap { --d: .44; }
.ws-sums { margin-top: auto; display: grid; gap: 1.5cqi; font-size: 4.3cqi; line-height: 1.2; color: var(--muted); }
.ws-sums > div { display: flex; justify-content: space-between; align-items: baseline; }
.ws-sums .ws-sum { margin-top: .9cqi; padding-top: 2.4cqi; border-top: 1px solid var(--line); font-size: 4.8cqi; }
.ws-sum b { color: var(--ink); font-size: 5.6cqi; font-weight: 700; }
.ws-sums .ws-roll em { text-align: right; }
.ws-tot2 > span { transform: translateY(-50%); animation: ws-up var(--t) var(--ease) calc(var(--t) * .4) infinite backwards; }
.ws-place .ws-tap { --d: .51; }
/* 3. order page */
.ws-okc { align-self: center; width: 13cqi; height: 13cqi; border-radius: 50%; background: rgb(52 211 153 / .16); display: grid; place-items: center; animation: ws-pop var(--t) var(--ease) calc(var(--t) * .565) infinite backwards; }
.ws-okc svg { width: 56%; height: 56%; fill: none; stroke: var(--ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-thx { display: grid; gap: .8cqi; text-align: center; margin-top: -1cqi; }
.ws-thx b { font: 700 7cqi/1.1 var(--font-display); letter-spacing: -.02em; }
.ws-thx small { font-size: 4.6cqi; line-height: 1.25; color: var(--muted); }
.ws-eta { display: grid; gap: 1.5cqi; padding: 4.2cqi 4.6cqi 4.4cqi; border-radius: 5.4cqi; background: var(--surface-2); border: 1px solid var(--line); }
.ws-eta > small { font-size: 3.5cqi; line-height: 1.2; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ws-big { display: grid; }
.ws-big > b { grid-area: 1 / 1; font: 700 7.4cqi/1.15 var(--font-display); letter-spacing: -.03em; white-space: nowrap; }
.ws-count { animation: ws-off var(--t) linear calc(var(--t) * .87) infinite backwards; }
.ws-enjoy { opacity: 0; animation: ws-on var(--t) linear calc(var(--t) * .87) infinite backwards; }
.ws-min > span { animation-name: ws-min; }
.ws-subs { display: grid; font-size: 4.4cqi; line-height: 1.25; color: var(--muted); }
.ws-subs > span { grid-area: 1 / 1; }
.ws-drv { justify-self: start; display: inline-flex; align-items: center; gap: 1.6cqi; margin-top: .6cqi; padding: 1.5cqi 3cqi; border-radius: 999px; background: rgb(255 255 255 / .09); font-size: 4.2cqi; line-height: 1.2; font-weight: 600; opacity: 0; animation: ws-driver var(--t) var(--ease) calc(var(--t) * .76) infinite backwards; }
.ws-drv svg { flex: none; width: 5cqi; height: 5cqi; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ws-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 1.4cqi; display: grid; gap: 2.7cqi; }
.ws-steps::before, .ws-steps::after { content: ""; position: absolute; left: 2.7cqi; top: 2.8cqi; bottom: 2.8cqi; width: 1px; margin-left: -.5px; background: var(--line-2); }
.ws-steps::after { background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); animation: ws-rail var(--t) var(--ease) infinite; }
.ws-steps li { display: flex; align-items: center; gap: 3cqi; font-size: 4.6cqi; line-height: 1.2; font-weight: 500; color: var(--muted); animation: ws-reach var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-steps li i { position: relative; z-index: 1; flex: none; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: #34343C; box-shadow: 0 0 0 .9cqi #0D0D10; animation: ws-dot var(--t) linear calc(var(--t) * var(--d)) infinite backwards; }
.ws-steps .ws-s1 { color: var(--ink); animation: none; }
.ws-steps .ws-s1 i { background: var(--accent); animation: none; }
.ws-steps .ws-s2 { --d: .66; } .ws-steps .ws-s3 { --d: .76; } .ws-steps .ws-s4 { --d: .87; }
.ws-map { min-height: 12cqi; border-radius: 4.6cqi; overflow: hidden; background: #101014; border: 1px solid var(--line); }
.ws-map svg { display: block; width: 100%; height: 100%; fill: none; }
.ws-road { stroke: rgb(255 255 255 / .06); stroke-width: 2.6; }
.ws-route { stroke: rgb(255 255 255 / .3); stroke-width: 1; stroke-dasharray: 1.6 2; stroke-linecap: round; }
.ws-ride { stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: ws-ride var(--t) linear infinite; }
.ws-from { fill: #101014; stroke: var(--ink); stroke-width: 1.3; }
.ws-to { fill: var(--accent); stroke: rgb(255 122 26 / .35); stroke-width: 2.2; }
/* The three screens: menu until 23%, checkout 26-53%, order page 56-96%, then back to the menu. */
@keyframes ws-va { 0%, 23% { opacity: 1; transform: none; } 26%, 96% { opacity: 0; transform: translateX(-9%); } 96.01% { opacity: 0; transform: translateX(9%); } 100% { opacity: 1; transform: none; } }
@keyframes ws-vb { 0%, 23% { opacity: 0; transform: translateX(9%); } 26%, 53% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; transform: translateX(-9%); } }
@keyframes ws-vc { 0%, 53% { opacity: 0; transform: translateX(9%); } 56%, 96% { opacity: 1; transform: none; } 99.5%, 100% { opacity: 0; transform: none; } }
@keyframes ws-tot { 0%, 5.4% { transform: translateY(0); } 6.2%, 10.4% { transform: translateY(-25%); } 11.2%, 15.4% { transform: translateY(-50%); } 16.2%, 60% { transform: translateY(-75%); } 60.01%, 100% { transform: translateY(0); } }
@keyframes ws-min { 0%, 65.8% { transform: translateY(0); } 66.8%, 75.8% { transform: translateY(-33.333%); } 76.8%, 99.9% { transform: translateY(-66.666%); } 100% { transform: translateY(0); } }
@keyframes ws-ride { 0%, 76.5% { stroke-dashoffset: 100; } 87%, 99.9% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes ws-rail { 0%, 65.8% { transform: scaleY(0); } 66.8%, 75.8% { transform: scaleY(.333); } 76.8%, 86.8% { transform: scaleY(.666); } 87.8%, 99.9% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
/* Shared: each starts at its own --d and stays for 40% of the loop, which always ends while its screen is out of view. */
@keyframes ws-tap { 0% { opacity: 0; transform: scale(.3); } 1% { opacity: .5; transform: scale(.85); } 3.6%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ws-on { 0% { opacity: 0; } .8%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes ws-off { 0% { opacity: 1; } .8%, 40% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes ws-added { 0% { background-color: var(--accent); transform: scale(1); } 1.2% { background-color: var(--ok); transform: scale(1.22); } 2.6%, 40% { background-color: var(--ok); transform: scale(1); } 41%, 100% { background-color: var(--accent); transform: scale(1); } }
@keyframes ws-wake { 0% { opacity: .45; } .8%, 40% { opacity: 1; } 41%, 100% { opacity: .45; } }
@keyframes ws-focus { 0% { border-color: var(--line-2); } .8%, 12% { border-color: var(--accent); } 13%, 100% { border-color: var(--line-2); } }
@keyframes ws-picked { 0% { border-color: var(--line-2); background-color: transparent; color: var(--muted); } .8%, 40% { border-color: var(--accent); background-color: var(--brand-soft); color: var(--ink); } 41%, 100% { border-color: var(--line-2); background-color: transparent; color: var(--muted); } }
@keyframes ws-up { 0% { transform: translateY(0); } 1.5%, 40% { transform: translateY(-50%); } 41%, 100% { transform: translateY(0); } }
@keyframes ws-pop { 0% { transform: scale(0); } 1.8% { transform: scale(1.18); } 3%, 100% { transform: scale(1); } }
@keyframes ws-driver { 0% { opacity: 0; transform: translateY(30%); } 1.2%, 10% { opacity: 1; transform: none; } 11%, 100% { opacity: 0; transform: none; } }
@keyframes ws-reach { 0% { color: var(--muted); } .8%, 40% { color: var(--ink); } 41%, 100% { color: var(--muted); } }
@keyframes ws-dot { 0% { background-color: #34343C; } .8%, 40% { background-color: var(--accent); } 41%, 100% { background-color: #34343C; } }
@media (prefers-reduced-motion: reduce) { .wscene *, .wscene *::before, .wscene *::after { animation: none !important; } }

/* WhatsApp scene: the chat plays an order. The customer (left) is typing, sends the order; the AI (right) is typing, answers with
   the order and two buttons; the customer taps the confirm button; the AI confirms. Pure CSS, one 15 s loop; without motion every
   message is shown. Sizes are in cqi of the chat, so it scales (hero, home page, shots). */
.wchat { --t: 15s; padding: 0; display: block; container-type: inline-size; }
.wc { display: grid; gap: 2.8cqi; padding: 3.9cqi; }
.wchat .c-top { gap: 2.8cqi; padding: 1.1cqi 1.1cqi 3.3cqi; font-size: 4.1cqi; }
.wchat .c-top i { width: 9.4cqi; height: 9.4cqi; }
.wchat .c-top small { font-size: 3.4cqi; }
.wc-row { position: relative; display: grid; }
.wchat .wc-row .bubble { padding: 2.8cqi 3.6cqi; border-radius: 4.4cqi; font-size: 3.9cqi; animation: var(--t) var(--ease) 0s infinite both; }
.wchat .wc-row .bubble.in { border-bottom-left-radius: 1.4cqi; transform-origin: 0 100%; }
.wchat .wc-row .bubble.ai { border-bottom-right-radius: 1.4cqi; transform-origin: 100% 100%; }
.wchat .chat-btns { gap: 2.2cqi; animation: wc-bt var(--t) var(--ease) 0s infinite both; }
.wchat .chat-btns span { position: relative; font-size: 3.55cqi; padding: 1.95cqi 3.6cqi; border-radius: 2.2cqi; }
.wchat .wc-r1 .bubble { animation-name: wc-m1; } .wchat .wc-r2 .bubble { animation-name: wc-m2; } .wchat .wc-r3 .bubble { animation-name: wc-m3; } .wchat .wc-r4 .bubble { animation-name: wc-m4; }
.wc-dots { position: absolute; top: 0; display: inline-flex; align-items: center; gap: 1.1cqi; padding: 3.5cqi 3.6cqi; border-radius: 4.4cqi; opacity: 0; animation: var(--t) linear infinite; }
.wc-r1 .wc-dots { left: 0; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-bottom-left-radius: 1.4cqi; animation-name: wc-t1; }
.wc-r2 .wc-dots, .wc-r4 .wc-dots { right: 0; background: linear-gradient(135deg, #FF8A2A, #FFB24D); color: var(--accent-ink); border-bottom-right-radius: 1.4cqi; }
.wc-r2 .wc-dots { animation-name: wc-t2; } .wc-r4 .wc-dots { animation-name: wc-t4; }
.wc-dots i { width: 1.7cqi; height: 1.7cqi; border-radius: 50%; background: currentColor; animation: wc-bounce 1s ease-in-out infinite; }
.wc-dots i:nth-child(2) { animation-delay: -.82s; } .wc-dots i:nth-child(3) { animation-delay: -.64s; }
/* at rest (no motion) the confirm button is the pressed one, like at the end of the loop */
.wchat .chat-btns .wc-yes { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: wc-press var(--t) linear infinite; }
.wc-tap { position: absolute; left: 50%; top: 50%; width: 11cqi; height: 11cqi; margin: -5.5cqi 0 0 -5.5cqi; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; animation: wc-tap var(--t) ease-out infinite; }
@keyframes wc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-45%); opacity: 1; } }
@keyframes wc-t1 { 0%, 2.5% { opacity: 0; } 3.5%, 10.5% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes wc-m1 { 0%, 11% { opacity: 0; transform: translateY(18%) scale(.94); } 13%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes wc-t2 { 0%, 15% { opacity: 0; } 16%, 25.5% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes wc-m2 { 0%, 26% { opacity: 0; transform: translateY(12%) scale(.94); } 28%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes wc-bt { 0%, 30% { opacity: 0; transform: translateY(40%); } 32%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes wc-tap { 0%, 42.5% { opacity: 0; transform: scale(.3); } 43.5% { opacity: .5; transform: scale(.85); } 46%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wc-press { 0%, 43.5% { background-color: var(--surface-2); color: var(--ink); border-color: var(--line-2); } 44.5%, 94% { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); } 97%, 100% { background-color: var(--surface-2); color: var(--ink); border-color: var(--line-2); } }
@keyframes wc-m3 { 0%, 46% { opacity: 0; transform: translateY(30%) scale(.94); } 48%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes wc-t4 { 0%, 50% { opacity: 0; } 51%, 57.5% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes wc-m4 { 0%, 58% { opacity: 0; transform: translateY(18%) scale(.94); } 60%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wchat *, .wchat *::before, .wchat *::after { animation: none !important; } }

/* Phone AI scene (Sammy, 11 Nov 2026, evening: no stick figures). Three parts in one 17 s loop:
   1) the restaurant counter: the desk phone rings, the handset clicks up and the view zooms into the call (SVG, 400 x 360 grid);
   2) the call: the AI's voice orb, what the caller says, the AI's answer, "order confirmed";
   3) the result: a notification and the new order on the dashboard (a laptop), the ticket comes out of the printer.
   The pill on top names the stage. The HTML parts are sized in cqi of the scene. Without motion it rests on part 2, all shown. */
.pscene { --t: 17s; position: relative; width: min(100%, 460px); aspect-ratio: 10 / 9; margin-inline: auto; container-type: inline-size; text-align: left; color: var(--ink); }
.pscene *, .pscene *::before, .pscene *::after { box-sizing: border-box; }
.ps-act { position: absolute; inset: 0; }
.pscene svg:not(.ps-art) { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the pill on top: incoming call, AI answering, in the kitchen */
.ps-pill { position: absolute; left: 50%; top: 3.5cqi; transform: translateX(-50%); display: grid; z-index: 3; }
.ps-p { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; gap: 1.9cqi; white-space: nowrap; font: 600 3.3cqi/1.2 var(--font-body); padding: 1.5cqi 3.2cqi 1.5cqi 1.5cqi; border-radius: 999px; background: rgb(18 18 22 / .92); border: 1px solid var(--line-2); box-shadow: 0 2cqi 6cqi -2cqi rgb(0 0 0 / .7); opacity: 0; animation: var(--t) var(--ease) infinite both; }
.ps-p1 { animation-name: ps-p1; }
.ps-p2 { opacity: 1; animation-name: ps-p2; }
.ps-p3 { animation-name: ps-p3; }
.ps-dot { position: relative; flex: none; width: 5.6cqi; height: 5.6cqi; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.ps-p1 .ps-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.4s infinite; }
.ps-p1 .ps-dot::after { content: ""; width: 2.1cqi; height: 2.1cqi; border-radius: .5cqi .5cqi 1.1cqi 1.1cqi; background: #fff; transform: rotate(-30deg); }
.ps-ai::after { content: ""; width: 2cqi; height: 2cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2cqi #fff; }
.ps-go { width: 2.6cqi; height: 2.6cqi; margin-left: 1.3cqi; background: var(--ok); box-shadow: 0 0 0 1cqi rgb(52 211 153 / .18); }
.ps-pill .wave { height: 3.8cqi; gap: .55cqi; margin-left: .3cqi; }
.ps-pill .wave i { width: .55cqi; }

/* 1: the counter; the ringing phone is a second, shaking copy of the handset that is only shown while it rings */
/* the zoom into the phone moves the drawing inside the part, which clips it, so nothing reaches past the scene */
.ps-a1 { overflow: hidden; opacity: 0; animation: ps-a1 var(--t) var(--ease) infinite both; }
.ps-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke: none; transform-origin: 50% 54%; animation: ps-zoom var(--t) var(--ease) infinite both; }
.ps-hs-s { transform-box: fill-box; transform-origin: 50% 50%; animation: ps-hs var(--t) var(--ease) infinite both; }
.ps-ringing { opacity: 0; animation: ps-ring var(--t) linear infinite both; }
.ps-hs-r { transform-box: fill-box; transform-origin: 50% 100%; animation: ps-shake .16s linear infinite; }
.ps-arc { animation: ps-blink .7s ease-in-out infinite; }
.ps-arc2 { animation-delay: -.35s; }
.ps-ripple { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: ps-ripple var(--t) ease-out infinite both; }
.ps-burst { opacity: 0; transform-box: view-box; transform-origin: 200px 150px; animation: ps-burst var(--t) ease-out infinite both; }

/* 2: the call */
.ps-a2 { display: grid; align-content: start; gap: 2cqi; padding: 15cqi 3cqi 0; animation: ps-a2 var(--t) var(--ease) infinite both; }
.ps-a2 p { margin: 0; }
.ps-orb { position: relative; justify-self: center; width: 17cqi; height: 17cqi; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #FFE0B8 0%, #FFA24A 34%, #FF7A1A 62%, #B9480A 100%); box-shadow: 0 0 8cqi rgb(255 122 26 / .45), inset 0 -1.6cqi 3cqi rgb(0 0 0 / .22); }
.ps-orb::before, .ps-orb::after { content: ""; position: absolute; inset: -1.2cqi; border-radius: 50%; border: .45cqi solid rgb(255 160 80 / .6); animation: ps-orb 2.4s ease-out infinite; }
.ps-orb::after { animation-delay: -1.2s; }
.ps-wv { display: flex; align-items: center; gap: .85cqi; height: 8cqi; animation: ps-amp var(--t) var(--ease) infinite both; }
.ps-wv i { width: 1.1cqi; height: 100%; border-radius: 1cqi; background: #fff; animation: wave 1.1s ease-in-out infinite; }
.ps-wv i:nth-child(2) { animation-delay: -.85s; } .ps-wv i:nth-child(3) { animation-delay: -.5s; } .ps-wv i:nth-child(4) { animation-delay: -.2s; }
.ps-wv i:nth-child(5) { animation-delay: -.7s; } .ps-wv i:nth-child(6) { animation-delay: -.35s; } .ps-wv i:nth-child(7) { animation-delay: -.95s; }
/* without motion the bars stand at different heights, like a still of a voice */
.ps-wv i:nth-child(1), .ps-pill .wave i:nth-child(1) { transform: scaleY(.4); } .ps-wv i:nth-child(2), .ps-pill .wave i:nth-child(2) { transform: scaleY(.75); }
.ps-wv i:nth-child(3), .ps-pill .wave i:nth-child(3) { transform: scaleY(.5); } .ps-wv i:nth-child(4), .ps-pill .wave i:nth-child(4) { transform: scaleY(1); }
.ps-wv i:nth-child(5), .ps-pill .wave i:nth-child(5) { transform: scaleY(.6); } .ps-wv i:nth-child(6) { transform: scaleY(.85); } .ps-wv i:nth-child(7) { transform: scaleY(.45); }
.ps-who { justify-self: center; display: flex; align-items: center; gap: 1.2cqi; margin-top: -.4cqi !important; font: 500 3cqi/1.2 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-time { display: inline-block; height: 1.2em; overflow: hidden; color: var(--ink); }
.ps-time > span { display: grid; transform: translateY(-80%); animation: ps-time var(--t) linear infinite both; }
.ps-time em { font-style: normal; height: 1.2em; }
.ps-say { max-width: 80%; padding: 2.2cqi 3.2cqi; border-radius: 3.6cqi; font: 400 3.6cqi/1.42 var(--font-body); animation: var(--t) var(--ease) infinite both; }
.ps-s1 { justify-self: start; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-top-left-radius: 1cqi; transform-origin: 0 0; animation-name: ps-s1; }
.ps-s2 { justify-self: end; color: var(--accent-ink); background: linear-gradient(135deg, #FF8A2A, #FFB24D); font-weight: 500; border-top-right-radius: 1cqi; transform-origin: 100% 0; animation-name: ps-s2; }
.ps-ok { justify-self: center; display: inline-flex; align-items: center; gap: 1.2cqi; margin-top: .6cqi !important; padding: 1.3cqi 2.8cqi 1.3cqi 2cqi; border-radius: 999px; font: 600 3cqi/1.2 var(--font-body); color: var(--ok); background: rgb(52 211 153 / .1); border: 1px solid rgb(52 211 153 / .3); animation: ps-ok var(--t) var(--ease) infinite both; }
.ps-ok svg { width: 3.4cqi; height: 3.4cqi; }

/* 3: the laptop with the dashboard, and the printer */
.ps-a3 { opacity: 0; animation: ps-a3 var(--t) var(--ease) infinite both; }
.ps-scr { position: absolute; left: 2cqi; top: 19cqi; width: 64cqi; height: 43cqi; border: .9cqi solid #2B2B33; border-bottom-width: 1.4cqi; border-radius: 2.4cqi 2.4cqi .6cqi .6cqi; background: #08080A; overflow: hidden; box-shadow: 0 3cqi 8cqi -3cqi rgb(0 0 0 / .8); }
.ps-base { position: absolute; left: 0; top: 62cqi; width: 68cqi; height: 2.6cqi; border-radius: .4cqi .4cqi 2cqi 2cqi; background: linear-gradient(#3A3A44, #1D1D23); }
.ps-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 11cqi; height: .9cqi; transform: translateX(-50%); border-radius: 0 0 .9cqi .9cqi; background: #1A1A20; }
.ps-bar { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; height: 6.2cqi; padding: 0 2.2cqi; border-bottom: 1px solid var(--line); font: 600 2.6cqi/1 var(--font-body); white-space: nowrap; }
.ps-bar b { display: inline-flex; align-items: center; gap: 1.2cqi; }
.ps-bar b::before { content: ""; width: 1.5cqi; height: 1.5cqi; border-radius: 50%; background: var(--ok); }
.ps-bar span { font-weight: 400; font-size: 2.3cqi; color: var(--muted); }
.ps-list { position: absolute; left: 0; right: 0; top: 6.2cqi; bottom: 0; overflow: hidden; padding: 1.6cqi 1.8cqi; }
.ps-rows { display: grid; gap: 1.4cqi; animation: ps-rows var(--t) var(--ease) infinite both; }
.ps-row { height: 9.6cqi; display: grid; align-content: center; gap: .8cqi; padding: 0 2cqi; border-radius: 1.4cqi; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.ps-row div { display: flex; align-items: center; gap: 1.4cqi; font: 600 2.5cqi/1 var(--font-body); }
.ps-row span { font: 500 2cqi/1 var(--font-body); padding: .5cqi 1.2cqi; border-radius: 999px; background: rgb(255 255 255 / .07); color: var(--muted); }
.ps-row small { margin-left: auto; font: 400 2.2cqi/1 var(--font-body); color: var(--muted); }
.ps-row p { margin: 0; font: 400 2.2cqi/1.2 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-new { border-color: rgb(255 122 26 / .55); background: rgb(255 122 26 / .1); animation: ps-new var(--t) var(--ease) infinite both; }
.ps-new span { background: var(--accent); color: var(--accent-ink); }
.ps-new p { color: var(--ink); }
.ps-toast { position: absolute; right: 1.8cqi; top: 7.6cqi; width: 37cqi; display: flex; align-items: center; gap: 1.6cqi; padding: 1.6cqi 2cqi; border-radius: 1.8cqi; background: rgb(32 32 38 / .97); border: 1px solid var(--line-2); box-shadow: 0 2cqi 5cqi rgb(0 0 0 / .65); opacity: 0; transform: translateX(calc(100% + 4cqi)); animation: ps-toast var(--t) var(--ease) infinite both; }
.ps-toast i { flex: none; width: 5.2cqi; height: 5.2cqi; border-radius: 1.4cqi; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.pscene .ps-toast svg { width: 3.4cqi; height: 3.4cqi; stroke-width: 2.2; }
.ps-toast span { display: grid; gap: .6cqi; min-width: 0; }
.ps-toast b { font: 600 2.5cqi/1.1 var(--font-body); white-space: nowrap; }
.ps-toast small { font: 400 2.1cqi/1.1 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-box { position: absolute; left: 71cqi; top: 49cqi; width: 27cqi; height: 15.6cqi; border-radius: 2.2cqi 2.2cqi 1.4cqi 1.4cqi; background: linear-gradient(#2A2A32, #18181D); border: 1px solid var(--line-2); box-shadow: 0 3cqi 6cqi -3cqi rgb(0 0 0 / .8); }
.ps-box::before { content: ""; position: absolute; left: 2.5cqi; right: 2.5cqi; top: 2.4cqi; height: 1cqi; border-radius: .5cqi; background: #000; }
.ps-led { position: absolute; right: 2.6cqi; bottom: 2.6cqi; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: var(--ok); box-shadow: 0 0 1.4cqi var(--ok); animation: ps-led var(--t) linear infinite both; }
.ps-paper { position: absolute; left: 73.5cqi; top: 22cqi; width: 22cqi; height: 29.9cqi; overflow: hidden; display: flex; align-items: flex-end; }
.ps-tk { width: 100%; display: grid; gap: .25cqi; padding: 1.7cqi 1.5cqi 1.6cqi; background: var(--paper); color: var(--paper-ink); font: 500 1.9cqi/1.45 var(--font-mono); white-space: nowrap; animation: ps-print var(--t) linear infinite both; }
.ps-tk > * { overflow: hidden; }
.ps-tk b { display: flex; justify-content: space-between; gap: 1cqi; font-weight: 700; letter-spacing: .05em; padding-bottom: .7cqi; margin-bottom: .3cqi; border-bottom: 1px dashed var(--paper-line); }
.ps-tk small { font-size: 1.65cqi; color: color-mix(in srgb, var(--paper-ink) 68%, transparent); }
.ps-tk .ps-tf { margin-top: .4cqi; padding-top: .6cqi; border-top: 1px dashed var(--paper-line); }
.ps-checks { position: absolute; left: 0; right: 0; top: 71cqi; display: flex; justify-content: center; flex-wrap: wrap; gap: 2cqi; }
.ps-checks span { display: inline-flex; align-items: center; gap: 1.1cqi; padding: 1.3cqi 2.6cqi 1.3cqi 1.9cqi; border-radius: 999px; font: 600 3cqi/1.2 var(--font-body); color: var(--ink); background: rgb(52 211 153 / .1); border: 1px solid rgb(52 211 153 / .3); white-space: nowrap; animation: var(--t) var(--ease) infinite both; }
.ps-checks svg { width: 3.2cqi; height: 3.2cqi; color: var(--ok); }
.ps-checks .ps-c1 { animation-name: ps-c1; }
.ps-checks .ps-c2 { animation-name: ps-c2; }

@keyframes ps-p1 { 0% { opacity: 0; transform: translateY(-1.5cqi); } 3%, 20% { opacity: 1; transform: none; } 21.5%, 100% { opacity: 0; transform: none; } }
@keyframes ps-p2 { 0%, 21.5% { opacity: 0; transform: translateY(-1.5cqi); } 23%, 59.5% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: none; } }
@keyframes ps-p3 { 0%, 61% { opacity: 0; transform: translateY(-1.5cqi); } 62.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes ps-a1 { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes ps-zoom { 0%, 22% { transform: none; } 27%, 100% { transform: scale(1.35); } }
@keyframes ps-ring { 0%, 3% { opacity: 0; } 3.5%, 19.5% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes ps-hs { 0%, 3% { opacity: 1; transform: none; } 3.5%, 19.5% { opacity: 0; transform: none; } 20% { opacity: 1; transform: none; } 21.5%, 100% { opacity: 1; transform: translateY(-16px) rotate(-9deg); } }
@keyframes ps-shake { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ps-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ps-ripple { 0%, 20% { opacity: 0; transform: scale(.5); } 20.6% { opacity: .9; transform: scale(.7); } 24.5%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ps-burst { 0%, 20% { opacity: 0; transform: scale(.6); } 20.8% { opacity: 1; transform: scale(.9); } 23.5%, 100% { opacity: 0; transform: scale(1.15); } }
@keyframes ps-a2 { 0%, 23% { opacity: 0; transform: scale(.92); } 27%, 58.5% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translateY(-6cqi); } }
@keyframes ps-orb { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ps-amp { 0%, 39% { transform: scaleY(.45); } 40.5%, 49% { transform: scaleY(1); } 51%, 100% { transform: scaleY(.45); } }
@keyframes ps-time { 0%, 31% { transform: translateY(0); } 31.01%, 36% { transform: translateY(-20%); } 36.01%, 42% { transform: translateY(-40%); } 42.01%, 48% { transform: translateY(-60%); } 48.01%, 100% { transform: translateY(-80%); } }
@keyframes ps-s1 { 0%, 29% { opacity: 0; transform: translateY(2.5cqi) scale(.96); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes ps-s2 { 0%, 39% { opacity: 0; transform: translateY(2.5cqi) scale(.96); } 41%, 100% { opacity: 1; transform: none; } }
@keyframes ps-ok { 0%, 50% { opacity: 0; transform: translateY(2cqi) scale(.9); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes ps-a3 { 0%, 60.5% { opacity: 0; transform: translateY(6cqi); } 64.5%, 95% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; transform: none; } }
@keyframes ps-toast { 0%, 66% { opacity: 0; transform: translateX(calc(100% + 4cqi)); } 68%, 83.5% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateX(calc(100% + 4cqi)); } }
@keyframes ps-rows { 0%, 68% { transform: translateY(-11cqi); } 70.5%, 100% { transform: none; } }
@keyframes ps-new { 0%, 68.3% { opacity: 0; background-color: rgb(255 122 26 / .32); } 70.5% { opacity: 1; background-color: rgb(255 122 26 / .32); } 77%, 100% { opacity: 1; background-color: rgb(255 122 26 / .1); } }
@keyframes ps-print { 0% { transform: translateY(105%); } 71% { transform: translateY(105%); animation-timing-function: steps(10, end); } 82%, 100% { transform: none; } }
@keyframes ps-led { 0%, 70.8% { background-color: #3A3A44; box-shadow: none; } 71.2%, 82% { background-color: var(--accent); box-shadow: 0 0 1.6cqi var(--accent); } 82.4%, 100% { background-color: var(--ok); box-shadow: 0 0 1.4cqi var(--ok); } }
@keyframes ps-c1 { 0%, 70% { opacity: 0; transform: translateY(1.5cqi); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes ps-c2 { 0%, 82.5% { opacity: 0; transform: translateY(1.5cqi); } 84.5%, 100% { opacity: 1; transform: none; } }
.stage .pscene { animation: rise 1s .15s var(--ease) both; }
.shot-frame > .pscene { max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .pscene *, .pscene *::before, .pscene *::after { animation: none !important; } }

/* "All restaurants" page: the kinds of restaurants as chips that pop in one after the other; "your restaurant" last, in orange */
.types { max-width: 460px; }
.ty-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 6px; }
.ty-chips span { font: 500 .86rem/1 var(--font-body); padding: 9px 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
.ty-chips .ty-you { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.stage .ty-chips span { animation: pop .5s var(--ease) both; animation-delay: calc(.35s + var(--i) * 45ms); }
.stage .ty-chips .ty-you { animation: pop .5s var(--ease) both, ty-glow 2.4s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * 45ms), 2s; }
@keyframes ty-glow { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 122 26 / 0); } 50% { box-shadow: 0 0 0 6px rgb(255 122 26 / .2); } }
@media (prefers-reduced-motion: reduce) { .ty-chips span { animation: none !important; } }

/* Contact page: the line for businesses that are not restaurants */
.other-note { max-width: 62ch; margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--muted); font-size: .98rem; line-height: 1.55; }