/* Animated product mock-ups (features page). Pure HTML/CSS; they play only while on screen. */

/* ---------- Section layout ---------- */
.ft { position: relative; padding: clamp(56px, 8vw, 104px) 0; scroll-margin-top: calc(var(--header-h) + 70px); }
.ft:nth-of-type(even) { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.ft-grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 72px); grid-template-columns: 0.9fr 1.1fr; }
.ft.flip .ft-grid { grid-template-columns: 1.1fr 0.9fr; }
.ft.flip .ft-copy { order: 2; }
.ft-copy .h2 { margin-top: 14px; font-size: clamp(28px, 3.4vw, 42px); }
.ft-copy .lead { margin-top: 14px; }
.ft-num { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--brand); text-transform: uppercase; }
.ft-num i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--brand-soft); font-style: normal; }
.ft-points { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.ft-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.8); font-size: 15px; color: var(--ink-2); transition: transform 0.3s var(--ease), border-color 0.3s; }
.ft-points li:hover { border-color: #d8ceff; transform: translateX(4px); }
.ft-points li b { color: var(--ink); }
.ft-points svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand); }

.ft-stage {
  position: relative;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(108, 76, 245, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(143, 115, 255, 0.22), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(255, 138, 61, 0.14), transparent 70%),
    linear-gradient(180deg, #fff, #f7f4ff);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ft-stage::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(108, 76, 245, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 76, 245, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%);
  content: '';
  pointer-events: none;
}
.ft-stage.dark-stage { border-color: rgba(255, 255, 255, 0.08); background: radial-gradient(70% 60% at 85% 0%, rgba(143, 115, 255, 0.35), transparent 70%), #120d26; }

/* Feature index under the hero */
.ft-index { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; margin: 34px auto 0; }
.ft-index a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
.ft-index a:hover { border-color: #cfc4ff; box-shadow: var(--shadow); transform: translateY(-4px); }
.ft-index span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.ft-index svg { width: 21px; height: 21px; }

/* ---------- Mock atoms ---------- */
.mk { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(108, 76, 245, 0.16); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); font-size: 12px; color: var(--ink); }
.mk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #faf9ff; }
.mk-bar i { width: 9px; height: 9px; border-radius: 99px; background: #e4e0f3; }
.mk-bar i:nth-child(1) { background: #ff6b6b; }
.mk-bar i:nth-child(2) { background: #ffc94d; }
.mk-bar i:nth-child(3) { background: #3fd48a; }
.mk-bar b { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
.mk-body { padding: 14px; }
.mk-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.mk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.mk-pill.mint { background: var(--mint-soft); color: var(--mint); }
.mk-pill.amber { background: var(--amber-soft); color: #d2621b; }
.mk-pill.violet { background: var(--brand-soft); color: var(--brand-deep); }
.mk-pill.rose { background: #ffe9ee; color: var(--rose); }
.veg-dot { display: inline-block; width: 10px; height: 10px; flex: none; border: 1.5px solid var(--mint); border-radius: 2px; position: relative; }
.veg-dot::after { position: absolute; inset: 2px; border-radius: 99px; background: var(--mint); content: ''; }
.veg-dot.nv { border-color: var(--rose); }
.veg-dot.nv::after { background: var(--rose); }

/* Toast that slides up now and then */
.mk-toast {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  color: #fff;
  animation: toast 7s var(--ease) infinite;
}
.mk-toast b { color: #fff; }
.mk-toast span { color: #b9b4d6; }
.mk-toast .tico { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 9px; background: var(--mint); }
.mk-toast .tico svg { width: 16px; height: 16px; }
@keyframes toast { 0%, 8% { opacity: 0; transform: translateY(24px); } 14%, 52% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(24px); } }

/* Play only while on screen */
.mk, .mk * { animation-play-state: paused !important; }
.mk.is-live, .mk.is-live * { animation-play-state: running !important; }

/* ---------- Tables ---------- */
.tb-grid { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb { position: relative; height: 78px; padding: 9px; border: 2px solid rgba(22, 169, 116, 0.35); border-radius: 13px; background: #f3fcf8; }
.tb b { font-size: 15px; font-weight: 800; }
.tb .st { position: absolute; left: 9px; bottom: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tb .st span { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; }
.tb .st .s1 { color: var(--mint); opacity: 1; }
.tb .seat { position: absolute; top: 10px; right: 9px; font-size: 10px; color: var(--muted-2); }
.tb.cycle { animation: tbCycle 9s linear infinite; }
.tb.cycle .st .s1 { animation: tbS1 9s linear infinite; }
.tb.cycle .st .s2 { color: var(--sky); animation: tbS2 9s linear infinite; }
.tb.cycle .st .s3 { color: #d2621b; animation: tbS3 9s linear infinite; }
.tb.c2, .tb.c2 .st span { animation-delay: -3s !important; }
.tb.c3, .tb.c3 .st span { animation-delay: -6s !important; }
.tb.c4, .tb.c4 .st span { animation-delay: -1.5s !important; }
.tb.c5, .tb.c5 .st span { animation-delay: -4.5s !important; }
@keyframes tbCycle {
  0%, 30% { border-color: rgba(22, 169, 116, 0.35); background: #f3fcf8; }
  34%, 63% { border-color: rgba(47, 140, 255, 0.5); background: #eef5ff; }
  67%, 96% { border-color: rgba(255, 138, 61, 0.6); background: #fff6ee; }
  100% { border-color: rgba(22, 169, 116, 0.35); background: #f3fcf8; }
}
@keyframes tbS1 { 0%, 30% { opacity: 1; } 33%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tbS2 { 0%, 32% { opacity: 0; } 35%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tbS3 { 0%, 65% { opacity: 0; } 68%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.tb-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- Kitchen ---------- */
.kd { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; background: #120d26; }
.kd h6 { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.08em; color: #a49ec4; text-transform: uppercase; }
.kd-tk { margin-bottom: 8px; padding: 9px; border: 2px solid rgba(47, 211, 160, 0.6); border-radius: 12px; background: #1b1534; color: #fff; animation: kdAge 12s linear infinite; }
.kd-tk b { font-size: 17px; font-weight: 800; }
.kd-tk small { display: block; font-size: 9px; color: #a49ec4; text-transform: uppercase; letter-spacing: 0.05em; }
.kd-tk ul { margin: 5px 0 0; padding: 0; list-style: none; font-size: 11px; color: #e5e0ff; }
.kd-tk li { display: flex; justify-content: space-between; padding: 2px 0; }
.kd-tk .ready { display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 6px; background: #16a974; font-size: 9px; font-weight: 800; animation: readyBlink 12s linear infinite; }
.kd-tk.d2 { animation-delay: -4s; }
.kd-tk.d3 { animation-delay: -8s; }
.kd-tk.d4 { animation-delay: -2s; }
.kd-tk.d5 { animation-delay: -10s; }
.kd-tk.new { animation: kdIn 6s var(--ease) infinite, kdAge 12s linear infinite; }
@keyframes kdAge {
  0%, 40% { border-color: rgba(47, 211, 160, 0.6); background: #1b1534; }
  50%, 75% { border-color: #fbbf24; background: #2a1f12; }
  85%, 100% { border-color: #f87171; background: #2b1220; }
}
@keyframes kdIn { 0% { opacity: 0; transform: translateY(-14px) scale(0.96); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes readyBlink { 0%, 60% { opacity: 0.25; } 70%, 100% { opacity: 1; } }

/* ---------- AI menu ---------- */
.ai { display: grid; gap: 12px; grid-template-columns: 0.8fr 1.2fr; }
.ai-photos { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.ai-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff8ec; }
.ai-photo i { display: block; height: 4px; margin-bottom: 6px; border-radius: 3px; background: #d9c6ad; }
.ai-photo i:first-child { width: 70%; height: 7px; background: #3b2412; }
.ai-photo i:nth-child(odd) { width: 85%; }
.ai-photo::after { position: absolute; right: 0; left: 0; top: -30%; height: 30%; background: linear-gradient(180deg, transparent, rgba(108, 76, 245, 0.35), transparent); content: ''; animation: scan 2.4s linear infinite; }
.ai-photo:nth-child(2)::after { animation-delay: -0.6s; }
.ai-photo:nth-child(3)::after { animation-delay: -1.2s; }
.ai-photo:nth-child(4)::after { animation-delay: -1.8s; }
.ai-photo .done { position: absolute; right: 5px; bottom: 5px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 99px; background: var(--mint); color: #fff; opacity: 0; animation: popOn 8s infinite; }
.ai-photo .done svg { width: 12px; height: 12px; }
.ai-photo:nth-child(2) .done { animation-delay: 0.6s; }
.ai-photo:nth-child(3) .done { animation-delay: 1.2s; }
.ai-photo:nth-child(4) .done { animation-delay: 1.8s; }
.ai-photo .cover { position: absolute; top: 5px; left: 5px; padding: 2px 6px; border-radius: 6px; background: var(--brand); font-size: 8.5px; font-weight: 800; color: #fff; }
@keyframes scan { to { top: 100%; } }
@keyframes popOn { 0%, 30% { opacity: 0; transform: scale(0.4); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ai-place { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e3deff; border-radius: 12px; background: linear-gradient(135deg, #fff, #f6f4ff); animation: fadeLoop 8s infinite; }
.ai-place .pic { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 10px; background: var(--brand); color: #fff; }
.ai-place .pic svg { width: 18px; height: 18px; }
.ai-place b { display: block; font-size: 13px; }
.ai-place small { color: var(--muted); }
.ai-bar { height: 7px; margin: 12px 0 6px; overflow: hidden; border-radius: 99px; background: #ece9fb; }
.ai-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b7bff, #6e56f5); animation: fill 8s var(--ease) infinite; }
.ai-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-2); }
.ai-items { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.ai-items span { padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 700; opacity: 0; animation: chipIn 8s infinite; }
.ai-items span em { display: block; font-style: normal; font-weight: 700; color: var(--brand); }
.ai-items span:nth-child(2) { animation-delay: 0.25s; }
.ai-items span:nth-child(3) { animation-delay: 0.5s; }
.ai-items span:nth-child(4) { animation-delay: 0.75s; }
.ai-items span:nth-child(5) { animation-delay: 1s; }
.ai-items span:nth-child(6) { animation-delay: 1.25s; }
@keyframes fadeLoop { 0%, 8% { opacity: 0; transform: translateY(6px); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fill { 0% { width: 4%; } 55%, 92% { width: 100%; } 100% { width: 100%; opacity: 0.4; } }
@keyframes chipIn { 0%, 12% { opacity: 0; transform: scale(0.85); } 18%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Menu ---------- */
.mn-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.mn-row .nm { flex: 1; min-width: 0; font-weight: 700; }
.mn-row .nm small { display: block; font-weight: 600; color: var(--muted-2); }
.sz { display: inline-flex; gap: 4px; }
.sz span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.sz span.on { animation: szOn 6s infinite; }
.sz span.on2 { animation: szOn 6s -3s infinite; }
@keyframes szOn { 0%, 45% { border-color: var(--brand); background: var(--brand); color: #fff; } 50%, 100% { border-color: var(--line); background: #fff; color: var(--muted); } }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--bg-2); }
.opts b { width: 100%; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.opts span { padding: 5px 9px; border-radius: 99px; background: #fff; font-weight: 700; box-shadow: var(--shadow-sm); }
.opts span.pick { animation: pick 6s infinite; }
.opts span.pick.p2 { animation-delay: -2s; }
.opts span.pick.p3 { animation-delay: -4s; }
@keyframes pick { 0%, 30% { background: var(--brand); color: #fff; } 34%, 100% { background: #fff; color: var(--ink); } }
.toggle { position: relative; width: 34px; height: 20px; flex: none; border-radius: 99px; background: var(--mint); animation: tgBg 8s infinite; }
.toggle::after { position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 99px; background: #fff; content: ''; animation: tgKnob 8s infinite; }
@keyframes tgBg { 0%, 55% { background: var(--mint); } 60%, 95% { background: #d4d0e4; } 100% { background: var(--mint); } }
@keyframes tgKnob { 0%, 55% { left: 17px; } 60%, 95% { left: 3px; } 100% { left: 17px; } }
.oos { font-size: 10px; font-weight: 800; color: var(--rose); animation: oos 8s infinite; }
@keyframes oos { 0%, 57% { opacity: 0; } 62%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Inventory ---------- */
.iv-sale { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; animation: salePulse 4s infinite; }
.iv-sale b { flex: 1; }
@keyframes salePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 76, 245, 0.4); } 15% { box-shadow: 0 0 0 8px rgba(108, 76, 245, 0); } }
.iv-row { position: relative; display: grid; align-items: center; gap: 10px; grid-template-columns: 1.3fr 1fr auto; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.iv-row .nm { font-weight: 700; }
.iv-row .nm small { display: block; font-weight: 600; color: var(--muted-2); }
.iv-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #eceaf5; }
.iv-bar span { display: block; height: 100%; border-radius: inherit; background: var(--mint); animation: drain 4s steps(1) infinite; }
.iv-row.low .iv-bar span { background: var(--rose); animation-name: drainLow; }
@keyframes drain { 0% { width: 78%; } 25% { width: 74%; } 50% { width: 70%; } 75% { width: 66%; } 100% { width: 78%; } }
@keyframes drainLow { 0% { width: 26%; } 25% { width: 22%; } 50% { width: 18%; } 75% { width: 14%; } 100% { width: 26%; } }
.iv-minus { position: absolute; right: 64px; top: 4px; font-size: 11px; font-weight: 800; color: var(--rose); opacity: 0; animation: floatUp 4s infinite; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; } 35% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 0; } }

/* ---------- Loyalty ---------- */
.lc { padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #6c4cf5, #b14cf5 60%, #ff8a3d); color: #fff; box-shadow: 0 20px 40px rgba(108, 76, 245, 0.35); }
.lc small { opacity: 0.85; }
.lc .nm { margin-top: 2px; font-size: 18px; font-weight: 800; }
.stamps { display: flex; gap: 10px; margin-top: 16px; }
.stamps span { display: grid; width: 40px; height: 40px; place-items: center; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 99px; }
.stamps span::after { width: 100%; height: 100%; border-radius: 99px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4cf5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/svg%3E") center / 20px no-repeat; content: ''; transform: scale(0); animation: stamp 8s infinite; }
.stamps span:nth-child(2)::after { animation-delay: 0.7s; }
.stamps span:nth-child(3)::after { animation-delay: 1.4s; }
.stamps span:nth-child(4)::after { animation-delay: 2.1s; }
@keyframes stamp { 0%, 8% { transform: scale(0); } 14% { transform: scale(1.2); } 18%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.reward { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; opacity: 0; animation: rewardIn 8s infinite; }
.reward b { flex: 1; }
@keyframes rewardIn { 0%, 40% { opacity: 0; transform: translateY(10px) scale(0.96); } 46%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pts { display: flex; justify-content: space-between; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-weight: 700; }
.pts em { position: relative; font-style: normal; color: var(--brand-deep); }
.pts em::after { position: absolute; top: -2px; right: -38px; font-size: 11px; color: var(--mint); content: '+12'; opacity: 0; animation: floatUp 4s 0.5s infinite; }

/* ---------- Coupon ---------- */
.cp { display: flex; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #fff1e6, #ffe2cc); box-shadow: var(--shadow); }
.cp .l { display: grid; width: 92px; flex: none; place-items: center; border-right: 2px dashed rgba(224, 106, 31, 0.4); font-size: 26px; font-weight: 800; color: #e06a1f; }
.cp .r { padding: 12px 14px; }
.cp .r b { font-size: 15px; }
.cp .r small { display: block; color: #a0582a; }
.bill { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.bill .row { display: flex; justify-content: space-between; padding: 3px 0; }
.bill .off { color: var(--mint); font-weight: 700; animation: offIn 6s infinite; }
.bill .tot { position: relative; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 15px; font-weight: 800; }
.bill .old { position: absolute; right: 0; top: 8px; color: var(--muted-2); text-decoration: line-through; animation: oldOut 6s infinite; }
.bill .new { animation: newIn 6s infinite; }
@keyframes offIn { 0%, 25% { opacity: 0; transform: translateX(-10px); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oldOut { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes newIn { 0%, 34% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
.cp-stamp { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 6px 10px; border: 2px solid var(--mint); border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--mint); transform: rotate(8deg); animation: stampIn 6s infinite; background: #fff; }
@keyframes stampIn { 0%, 30% { opacity: 0; transform: rotate(8deg) scale(1.6); } 36%, 92% { opacity: 1; transform: rotate(8deg) scale(1); } 100% { opacity: 0; } }

/* ---------- Team roster ---------- */
.rs { display: grid; gap: 4px; grid-template-columns: 74px repeat(5, minmax(0, 1fr)); font-size: 10.5px; }
.rs .d { padding: 4px 0; font-weight: 800; color: var(--muted-2); text-align: center; }
.rs .p { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.rs .p i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 99px; background: var(--brand-soft); font-size: 9px; font-style: normal; font-weight: 800; color: var(--brand-deep); }
.rs .c { height: 26px; border-radius: 7px; background: #f4f2fb; }
.rs .c.on { position: relative; background: transparent; }
.rs .c.on::after { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(135deg, #8f73ff, #6c4cf5); content: ''; transform-origin: left; animation: shift 8s infinite; }
.rs .c.ev::after { background: linear-gradient(135deg, #ffb27a, #ff8a3d); }
.rs .c:nth-child(3n)::after { animation-delay: 0.3s; }
.rs .c:nth-child(3n + 1)::after { animation-delay: 0.6s; }
@keyframes shift { 0%, 6% { transform: scaleX(0); } 16%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ---------- Reports ---------- */
.kp { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.kp div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; }
.kp small { display: block; color: var(--muted-2); }
.kp b { font-size: 15px; }
.kp em { display: block; font-size: 10px; font-style: normal; font-weight: 700; color: var(--mint); }
.chart { position: relative; height: 150px; padding: 8px 6px 0; border-radius: 12px; background: linear-gradient(180deg, #fbfaff, #fff); }
.bars { position: absolute; inset: 8px 10px 18px; display: flex; align-items: flex-end; gap: 9%; }
.bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ffc27a, #ff9a52); transform-origin: bottom; animation: grow 7s var(--ease) infinite; }
.bars span:nth-child(2) { animation-delay: 0.1s; }
.bars span:nth-child(3) { animation-delay: 0.2s; }
.bars span:nth-child(4) { animation-delay: 0.3s; }
.bars span:nth-child(5) { animation-delay: 0.4s; }
.bars span:nth-child(6) { animation-delay: 0.5s; }
.bars span:nth-child(7) { animation-delay: 0.6s; }
@keyframes grow { 0% { transform: scaleY(0); } 18%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.chart svg { position: absolute; inset: 8px 10px 18px; width: calc(100% - 20px); height: calc(100% - 26px); overflow: visible; }
.chart path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 7s var(--ease) infinite; vector-effect: non-scaling-stroke; }
@keyframes draw { 0%, 10% { stroke-dashoffset: 600; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 600; } }
.days { position: absolute; right: 10px; bottom: 2px; left: 10px; display: flex; justify-content: space-between; font-size: 9px; color: var(--muted-2); }

/* ---------- Integrations hub ---------- */
.hub { position: relative; height: 340px; }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub line { stroke: rgba(108, 76, 245, 0.22); stroke-width: 2; stroke-dasharray: 5 6; }
.hub .core { position: absolute; top: 50%; left: 50%; display: grid; width: 92px; height: 92px; place-items: center; border-radius: 28px; background: linear-gradient(135deg, #8f73ff, #4a2fd1); box-shadow: 0 0 0 10px rgba(108, 76, 245, 0.1), 0 20px 40px rgba(74, 47, 209, 0.4); color: #fff; font-size: 11px; font-weight: 800; transform: translate(-50%, -50%); animation: corePulse 3s infinite; }
.hub .core svg { position: static; width: 40px; height: 40px; }
@keyframes corePulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(108, 76, 245, 0.1), 0 20px 40px rgba(74, 47, 209, 0.4); } 50% { box-shadow: 0 0 0 20px rgba(108, 76, 245, 0.05), 0 20px 40px rgba(74, 47, 209, 0.4); } }
.hub .node { position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); font-weight: 800; white-space: nowrap; translate: -50% -50%; animation: bob 6s ease-in-out infinite; }
.hub .node i { width: 10px; height: 10px; border-radius: 99px; }
.hub .node:nth-of-type(2n) { animation-delay: -2s; }
.hub .node:nth-of-type(3n) { animation-delay: -4s; }

/* ---------- Security ---------- */
.sc { display: grid; gap: 12px; grid-template-columns: 1fr 1.2fr; }
.otp { display: flex; gap: 5px; margin-top: 8px; }
.otp span { display: grid; width: 100%; aspect-ratio: 4 / 5; place-items: center; border: 1.5px solid var(--line); border-radius: 8px; font-size: 15px; font-weight: 800; color: transparent; animation: digit 8s infinite; }
.otp span:nth-child(2) { animation-delay: 0.25s; }
.otp span:nth-child(3) { animation-delay: 0.5s; }
.otp span:nth-child(4) { animation-delay: 0.75s; }
.otp span:nth-child(5) { animation-delay: 1s; }
.otp span:nth-child(6) { animation-delay: 1.25s; }
@keyframes digit { 0%, 10% { border-color: var(--line); color: transparent; } 14%, 90% { border-color: var(--brand); color: var(--ink); } 100% { border-color: var(--line); color: transparent; } }
.shield { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: 11px; background: var(--mint-soft); font-weight: 800; color: #0b7a52; opacity: 0; animation: chipIn 8s 0.6s infinite; }
.shield svg { width: 18px; height: 18px; }
.log { margin: 0; padding: 0; list-style: none; }
.log li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); opacity: 0; animation: logIn 8s infinite; }
.log li:nth-child(2) { animation-delay: 0.6s; }
.log li:nth-child(3) { animation-delay: 1.2s; }
.log li:nth-child(4) { animation-delay: 1.8s; }
.log li b { flex: 1; font-weight: 700; }
.log li small { color: var(--muted-2); }
.log .dot { width: 8px; height: 8px; flex: none; border-radius: 99px; background: var(--brand); }
.log .dot.m { background: var(--mint); }
.log .dot.a { background: var(--amber); }
@keyframes logIn { 0%, 6% { opacity: 0; transform: translateX(10px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Floating cards around a mock */
.ft-float { position: absolute; z-index: 3; padding: 10px 12px; border: 1px solid rgba(108, 76, 245, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-lg); font-size: 12px; animation: bob 6s ease-in-out infinite; }
.ft-float b { display: block; font-size: 13.5px; }

/* ---------- Responsive ---------- */
/* Big screens: the mock-ups read at a glance. */
@media (min-width: 1180px) {
  .ft-stage .mk { zoom: 1.12; }
}
@media (max-width: 1023px) {
  .ft-grid, .ft.flip .ft-grid { grid-template-columns: 1fr; }
  .ft.flip .ft-copy { order: 0; }
  .ft-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ft-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-index a { padding: 10px 4px; font-size: 12px; }
  .ft-stage { border-radius: 22px; }
  .ft-float { display: none; }
  .tb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-grid .tb:nth-child(n + 10) { display: none; }
  .kd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd > div:nth-child(3) { display: none; }
  .ai { grid-template-columns: 1fr; }
  .ai-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc { grid-template-columns: 1fr; }
  .rs { grid-template-columns: 64px repeat(3, minmax(0, 1fr)); }
  .rs .hide-s { display: none; }
  .hub { height: 300px; }
  .hub .node { padding: 6px 8px; font-size: 11px; }
  .iv-row { grid-template-columns: 1.2fr 1fr; }
  .iv-row .mk-pill { display: none; }
}

/* ---------- Features page: list on the left, the chosen feature on the right ---------- */
.fx-wrap { padding: 0 0 clamp(64px, 8vw, 110px); }
.fx { display: grid; align-items: start; gap: 32px; grid-template-columns: 300px minmax(0, 1fr); }
.fx-nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.fx-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s, color 0.25s, transform 0.3s var(--ease);
}
.fx-tab:hover { background: var(--bg-2); transform: translateX(3px); }
.fx-tab.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; box-shadow: 0 12px 24px rgba(108, 76, 245, 0.32); transform: none; }
.fx-ico { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); transition: background 0.25s, color 0.25s, transform 0.4s var(--ease); }
.fx-ico svg { width: 20px; height: 20px; }
.fx-tab.is-active .fx-ico { background: rgba(255, 255, 255, 0.18); color: #fff; transform: rotate(-8deg) scale(1.05); }
.fx-txt { min-width: 0; }
.fx-txt b { display: block; font-size: 14.5px; font-weight: 750; }
.fx-txt small { display: block; overflow: hidden; font-size: 12px; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; }
.fx-tab.is-active .fx-txt small { color: rgba(255, 255, 255, 0.78); }
.fx-bar { position: absolute; right: 12px; bottom: 5px; left: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); transform: scaleX(0); transform-origin: left; }
.fx.autoplay .fx-tab.is-active .fx-bar { animation: fxBar 10s linear forwards; }
@keyframes fxBar { to { transform: scaleX(1); } }

.fx-stage-area { min-width: 0; }
.fx-panel { scroll-margin-top: calc(var(--header-h) + 16px); }
.fx-panel[hidden] { display: none; }
.fx-panel.is-active .fx-head > * { animation: fxUp 0.6s var(--ease) both; }
.fx-panel.is-active .fx-head > :nth-child(2) { animation-delay: 0.06s; }
.fx-panel.is-active .fx-head > :nth-child(3) { animation-delay: 0.12s; }
.fx-panel.is-active .ft-stage { animation: fxStage 0.7s 0.1s var(--ease) both; }
.fx-panel.is-active .fx-points li { animation: fxUp 0.5s var(--ease) backwards; }
.fx-panel.is-active .fx-points li:nth-child(1) { animation-delay: 0.25s; }
.fx-panel.is-active .fx-points li:nth-child(2) { animation-delay: 0.32s; }
.fx-panel.is-active .fx-points li:nth-child(3) { animation-delay: 0.39s; }
@keyframes fxUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fxStage { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
.fx-head .h2 { margin-top: 12px; font-size: clamp(28px, 3.2vw, 40px); }
.fx-head .lead { max-width: 760px; margin-top: 10px; }
.fx-panel .ft-stage { margin-top: 26px; }
.fx-panel .ft-stage > .mk:not(.hub) { max-width: 760px; margin-left: auto; margin-right: auto; }
.fx-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-panel .hero-actions { margin-top: 20px; }

@media (max-width: 1023px) {
  .fx { grid-template-columns: 1fr; gap: 20px; }
  /* The list becomes a row of chips under the header. */
  .fx-nav {
    z-index: 20;
    top: calc(var(--header-h) + 6px);
    flex-direction: row;
    margin: 0 calc(var(--gutter) * -1);
    padding: 8px var(--gutter);
    overflow-x: auto;
    border-radius: 0;
    border-inline: 0;
    scrollbar-width: none;
  }
  .fx-nav::-webkit-scrollbar { display: none; }
  .fx-tab { flex: none; padding: 8px 12px 8px 8px; }
  .fx-tab:hover { transform: none; }
  .fx-ico { width: 30px; height: 30px; border-radius: 9px; }
  .fx-ico svg { width: 17px; height: 17px; }
  .fx-txt small { display: none; }
  .fx-txt b { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .fx-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fx.autoplay .fx-tab.is-active .fx-bar { animation: none; }
}

/* ---------- Page animations (billing, about, pricing, lists) ---------- */
/* Tick lists come in one line at a time. */
.reveal.is-in .ticks li, .reveal.is-in.ticks li { animation: tickIn 0.5s var(--ease) both; }
.reveal.is-in .ticks li:nth-child(2) { animation-delay: 0.08s; }
.reveal.is-in .ticks li:nth-child(3) { animation-delay: 0.16s; }
.reveal.is-in .ticks li:nth-child(4) { animation-delay: 0.24s; }
.reveal.is-in .ticks li:nth-child(5) { animation-delay: 0.32s; }
@keyframes tickIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Billing: the receipt prints line by line, again every few seconds. */
.receipt > * { opacity: 0; }
.is-in .receipt > *, .receipt.is-printing > * { animation: printLine 9s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 0.12s); }
@keyframes printLine { 0% { opacity: 0; transform: translateY(-6px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.is-in .receipt .row.total { animation-name: printTotal; }
@keyframes printTotal { 0% { opacity: 0; transform: scale(0.9); } 8% { opacity: 1; transform: scale(1.06); } 12%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Billing: each step of the bill lights up in turn. */
.pipeline .pipe-dot { animation: pipeGlow 8.4s infinite; }
.pipeline .pipe-step:nth-child(2) .pipe-dot { animation-delay: 1.2s; }
.pipeline .pipe-step:nth-child(3) .pipe-dot { animation-delay: 2.4s; }
.pipeline .pipe-step:nth-child(4) .pipe-dot { animation-delay: 3.6s; }
.pipeline .pipe-step:nth-child(5) .pipe-dot { animation-delay: 4.8s; }
.pipeline .pipe-step:nth-child(6) .pipe-dot { animation-delay: 6s; }
.pipeline .pipe-step:nth-child(7) .pipe-dot { animation-delay: 7.2s; }
@keyframes pipeGlow {
  0% { background: #fff; color: var(--brand); transform: none; }
  4%, 12% { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(108, 76, 245, 0.12), var(--shadow); }
  16%, 100% { background: #fff; color: var(--brand); transform: none; }
}
.pipe-step::after { position: absolute; top: 64px; left: 31px; width: 2px; height: 0; background: var(--brand); content: ''; animation: pipeFlow 8.4s infinite; }
.pipe-step:last-child::after { display: none; }
.pipe-step:nth-child(2)::after { animation-delay: 1.2s; }
.pipe-step:nth-child(3)::after { animation-delay: 2.4s; }
.pipe-step:nth-child(4)::after { animation-delay: 3.6s; }
.pipe-step:nth-child(5)::after { animation-delay: 4.8s; }
.pipe-step:nth-child(6)::after { animation-delay: 6s; }
@keyframes pipeFlow { 0%, 6% { height: 0; opacity: 1; } 14% { height: calc(100% - 64px); opacity: 1; } 20%, 100% { height: calc(100% - 64px); opacity: 0; } }

/* About: an order travelling through the restaurant. */
.signal { position: relative; padding: 26px 18px 18px; border: 1px solid rgba(108, 76, 245, 0.14); border-radius: 26px; background: linear-gradient(180deg, #fff, #f7f4ff); box-shadow: var(--shadow); }
.signal svg { display: block; width: 100%; height: 90px; overflow: visible; }
.signal path.track { fill: none; stroke: #e4defe; stroke-width: 4; stroke-linecap: round; }
.signal path.live { fill: none; stroke: url(#sig-g); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: sigDraw 6s var(--ease) infinite; }
@keyframes sigDraw { 0% { stroke-dashoffset: 1000; } 70%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.signal-nodes { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; text-align: center; }
.signal-nodes div { padding: 12px 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); animation: sigNode 6s infinite; }
.signal-nodes div:nth-child(2) { animation-delay: 1.4s; }
.signal-nodes div:nth-child(3) { animation-delay: 2.8s; }
.signal-nodes div:nth-child(4) { animation-delay: 4.2s; }
.signal-nodes span { display: grid; width: 44px; height: 44px; margin: 0 auto 8px; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.signal-nodes svg { width: 22px; height: 22px; }
.signal-nodes b { display: block; font-size: 14px; }
.signal-nodes small { font-size: 12px; color: var(--muted); }
@keyframes sigNode { 0%, 100% { transform: none; box-shadow: var(--shadow-sm); } 8%, 22% { transform: translateY(-6px); box-shadow: 0 0 0 3px rgba(108, 76, 245, 0.25), var(--shadow); } }

/* Pricing: the best plan breathes; its ribbon shines. */
.plan.best { animation: bestGlow 4s ease-in-out infinite; }
@keyframes bestGlow { 0%, 100% { box-shadow: var(--shadow-lg); } 50% { box-shadow: 0 30px 80px rgba(108, 76, 245, 0.32), 0 0 0 6px rgba(108, 76, 245, 0.08); } }
.plan .ribbon { overflow: hidden; }
.plan .ribbon::after { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); content: ''; animation: shine 3s infinite; }
@keyframes shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
.compare tbody tr { transition: background 0.2s; }
.reveal.is-in .compare tbody tr { animation: tickIn 0.45s var(--ease) both; }
.reveal.is-in .compare tbody tr:nth-child(n + 2) { animation-delay: 0.04s; }
.reveal.is-in .compare tbody tr:nth-child(n + 4) { animation-delay: 0.1s; }
.reveal.is-in .compare tbody tr:nth-child(n + 7) { animation-delay: 0.16s; }
.reveal.is-in .compare tbody tr:nth-child(n + 10) { animation-delay: 0.22s; }

/* Card icons wave once when their card scrolls in. */
.card.reveal.is-in .ico { animation: icoWave 0.9s 0.2s var(--ease) backwards; }
@keyframes icoWave { 0% { transform: scale(0.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; } }

@media (max-width: 640px) {
  .signal-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt > * { opacity: 1; }
}