:root{--bg: #0c0e12;--surface: #151820;--surface-2: #1d212b;--border: #2a2f3a;--text: #eceef2;--muted: #9aa1ad;--accent: #ff6b35;--accent-dim: #e0561f;--accent-soft: rgba(255, 107, 53, .14);--ok: #34d399;--ok-soft: rgba(52, 211, 153, .14);--info: #60a5fa;--kafka: #a78bfa;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html{scroll-behavior:smooth}[id]{scroll-margin-top:80px}body{margin:0;background:radial-gradient(1200px 500px at 85% -10%,rgba(255,107,53,.1),transparent 60%),radial-gradient(900px 400px at -10% 10%,rgba(96,165,250,.07),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}main{flex:1}h1,h2,h3{line-height:1.2;letter-spacing:-.02em}.container{max-width:1120px;margin:0 auto;padding:1.5rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem}a{color:var(--accent);text-decoration:none}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--accent);color:#fff;border:1px solid transparent;border-radius:10px;padding:.65rem 1.15rem;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}button:hover,.button:hover{background:var(--accent-dim)}button:active{transform:translateY(1px)}button:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;transform:none}button.ghost,.button.ghost{background:transparent;border-color:var(--border);color:var(--text)}button.ghost:hover,.button.ghost:hover{background:var(--surface-2)}button.small{padding:.4rem .8rem;font-size:.85rem}button.round{width:2.1rem;height:2.1rem;padding:0;border-radius:50%;font-size:1.1rem}input{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.7rem .85rem;font:inherit;width:100%;transition:border-color .15s}input:focus{outline:none;border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:.85rem}.error{color:#f87171;margin:.5rem 0}.accent{color:var(--accent)}.row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .4rem;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}.eyebrow .dot,.dot.live{background:var(--ok);animation:pulse 1.8s ease-in-out infinite}.chip{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:#0c0e12b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:.75rem;font-weight:600}.badge{padding:.12rem .5rem;border-radius:999px;background:#f8717126;color:#f87171;font-size:.72rem;font-weight:700}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-head h2{margin:0}.section-title{margin:0 0 .25rem;font-size:1.05rem}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);background:#0c0e12cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-inner{padding-top:.85rem;padding-bottom:.85rem}.brand{display:flex;align-items:center;gap:.45rem;color:var(--text);font-weight:800;font-size:1.15rem}.brand-mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:var(--accent-soft)}.nav{display:flex;align-items:center;gap:1.1rem}.nav>a{color:var(--muted);font-weight:500}.nav>a:hover,.nav>a.active{color:var(--text)}.user-chip{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem}.site-footer{border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;margin-top:3rem}.hero{border-bottom:1px solid var(--border)}.hero-inner{padding-top:4rem;padding-bottom:3.25rem;max-width:880px;text-align:center}.hero-title{font-size:clamp(2rem,5vw,3.3rem);margin:.6rem 0 1rem;font-weight:800}.hero-lead{color:var(--muted);font-size:1.12rem;max-width:660px;margin:0 auto 1.8rem}.hero-cta{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}.hero-cta button,.hero-cta .button{padding:.8rem 1.4rem;font-size:1rem;box-shadow:0 8px 24px #ff6b3540}.hero-cta .button.ghost{box-shadow:none}.stack-chips{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;padding:0;margin:2rem 0 0}.stack-chips li{padding:.3rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.82rem;font-weight:500}.restaurant-card{display:block;padding:.7rem;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}.restaurant-card:hover{transform:translateY(-4px);border-color:#3b4150;box-shadow:var(--shadow)}.restaurant-card h3{margin:.8rem .3rem .1rem;font-size:1.08rem}.restaurant-card p{margin:0 .3rem .3rem;font-size:.88rem}.restaurant-img{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:16 / 10;background:var(--surface-2)}.restaurant-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;display:block}.restaurant-card:hover .restaurant-img img{transform:scale(1.06)}.restaurant-img .chip{position:absolute;left:.6rem;top:.6rem}.skeleton,.skeleton-card .skeleton{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.skeleton-card .img{aspect-ratio:16 / 10;border-radius:10px}.skeleton-card .line{height:.9rem;border-radius:6px;margin:.9rem .3rem 0}.skeleton-card .line.short{width:45%;margin-top:.5rem}.restaurant-banner{position:relative;min-height:260px;background-size:cover;background-position:center;display:flex;align-items:flex-end}.restaurant-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c0e1233,#0c0e12f2)}.banner-inner{position:relative;width:100%;padding-bottom:1.6rem}.banner-inner h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:.6rem 0 .2rem}.banner-inner p{margin:0;color:#cfd3da}.back-link{display:inline-block;margin-bottom:.8rem;font-size:.9rem;color:var(--muted)}.back-link.light{color:#d9dde3;display:block}.back-link:hover{color:var(--text)}.menu-page{padding-bottom:6rem}.menu-list{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}.menu-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:border-color .2s,background .2s}.menu-item.in-cart{border-color:#ff6b358c;background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--surface)}.menu-item.sold-out{opacity:.55}.menu-item-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.menu-item-text p{margin:.2rem 0 .4rem}.price{font-weight:700}.stepper{display:flex;align-items:center;gap:.5rem}.qty{min-width:1.4rem;text-align:center;font-weight:700}.price-note{margin-top:1.2rem;max-width:640px}.order-bar{position:fixed;left:0;right:0;bottom:0;z-index:15;border-top:1px solid var(--border);background:#151820eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:slide-up .25s ease-out}.order-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}.tracking-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.tracking-title{margin:0;font-size:clamp(1.6rem,3.5vw,2.3rem);display:flex;align-items:center;gap:.6rem}.tracking-icon{display:inline-block;animation:pop .4s ease-out}.tracking-head p{margin:.3rem 0 0}.live-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:.82rem;font-weight:600;white-space:nowrap}.live-pill .dot{background:var(--muted)}.live-pill.on{color:var(--ok);border-color:#34d39959;background:var(--ok-soft)}.live-pill.on .dot{background:var(--ok);animation:pulse 1.8s ease-in-out infinite}.tracking-layout{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"flow flow" "status log";align-items:start}.flow-card{grid-area:flow;min-width:0}.status-card{grid-area:status;position:relative;overflow:hidden}.log-card{grid-area:log;min-width:0}.flow-card-head{margin-bottom:.4rem}.flow-card-head p{margin:.2rem 0 0;max-width:760px}.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:1.1rem}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#ffb347);transition:width .8s cubic-bezier(.22,1,.36,1)}.replay-hint{margin:0 0 .6rem}.steps{list-style:none;padding:0;margin:0;display:grid;gap:.2rem}.step{width:100%;display:flex;gap:.8rem;align-items:center;text-align:left;padding:.6rem .55rem;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);font-weight:400;opacity:.45;transition:opacity .3s,background .2s,border-color .2s,box-shadow .2s}.step:hover,.step:disabled{background:transparent;color:var(--text)}.step:disabled{cursor:default}.step.done{opacity:1;cursor:pointer}.step.done:hover{background:var(--surface-2);border-color:var(--border)}.step.current,.step.current:hover{background:var(--accent-soft)}.step.replaying{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.step-text{display:grid;flex:1;min-width:0}.step-replay{color:var(--muted);font-size:1.15rem;opacity:0;transition:opacity .2s,color .2s}.step.done:hover .step-replay,.step.done:focus-visible .step-replay,.step.replaying .step-replay{opacity:1;color:var(--accent)}@media(hover:none){.step.done .step-replay{opacity:.75}}.step-icon{display:grid;place-items:center;flex-shrink:0;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--surface-2);font-size:1.1rem}.step.done .step-icon{background:var(--ok-soft)}.step.current .step-icon{background:var(--accent);animation:pulse-ring 1.8s ease-out infinite}.next-update{margin:1rem 0 .2rem}.delivered-banner{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;background:var(--ok-soft);color:var(--ok);font-weight:700;animation:pop .4s ease-out}.status-card .back-link{margin:1rem 0 0}.confetti{position:absolute;left:50%;top:45%;pointer-events:none}.confetti span{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0;animation:confetti 1.6s cubic-bezier(.2,.7,.3,1) forwards}app-system-flow{display:block}.flow{width:100%;height:auto;display:block;overflow:visible}.flow.narrow{max-width:440px;margin:0 auto}.flow-node rect{fill:var(--surface-2);stroke:var(--border);stroke-width:1.5;transition:fill .25s,stroke .25s,filter .25s}.flow-node.lit rect{fill:#2a1d18;stroke:var(--accent);filter:drop-shadow(0 0 8px rgba(255,107,53,.6))}.flow-node-name{fill:var(--text);font-weight:700;text-anchor:middle}.flow-node-sub{fill:var(--muted);text-anchor:middle}.flow-edge{fill:none;stroke:#3a404d;stroke-width:2.2;transition:stroke .25s}.flow-edge.lit{stroke:var(--accent);stroke-dasharray:6 5;animation:dash .6s linear infinite}.flow-arrow{fill:#3a404d}.flow-arrow.lit{fill:var(--accent)}.flow-edge-label{fill:var(--muted);font-weight:600;text-anchor:middle;transition:fill .25s}.flow-edge-label.lit{fill:var(--accent)}.event-log{list-style:none;margin:.7rem 0 0;padding:.8rem;border-radius:10px;background:#0f1116;border:1px solid var(--border);font-size:.84rem;max-height:440px;overflow-y:auto}.event-log li{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:baseline;padding:.35rem 0;animation:fade-in .35s ease-out}.log-text{flex:1 1 14rem;min-width:0;overflow-wrap:anywhere}.event-log li+li{border-top:1px dashed #232833}.event-log time{color:var(--muted);font-family:ui-monospace,Cascadia Code,Consolas,monospace;flex-shrink:0}.tag{flex-shrink:0;min-width:3.4rem;text-align:center;padding:.05rem .4rem;border-radius:6px;font-size:.7rem;font-weight:800;letter-spacing:.04em}.tag[data-tag=REST]{background:#60a5fa26;color:var(--info)}.tag[data-tag=gRPC]{background:var(--accent-soft);color:var(--accent)}.tag[data-tag=KAFKA]{background:#a78bfa29;color:var(--kafka)}.tag[data-tag=WS]{background:var(--ok-soft);color:var(--ok)}.order-list{display:grid;gap:.7rem}.order-row{display:flex;align-items:center;gap:.9rem;color:inherit;transition:border-color .2s,transform .2s}.order-row:hover{border-color:#3b4150;transform:translate(3px)}.order-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--surface-2);font-size:1.25rem;flex-shrink:0}.order-row-text{flex:1;min-width:0}.status-chip{padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--accent-soft);color:var(--accent);white-space:nowrap}.status-chip[data-status=DELIVERED]{background:var(--ok-soft);color:var(--ok)}.status-chip[data-status=CANCELLED]{background:#f8717126;color:#f87171}.empty-state{text-align:center;padding:2.5rem 1rem}.empty-icon{font-size:2.5rem;margin:0}.auth-page{max-width:440px;padding-top:3rem}.auth-card{padding:1.8rem}.auth-card h2{margin:0 0 .2rem}.demo-button{width:100%;margin-top:1rem;padding:.8rem}.divider{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-form{display:grid;gap:.75rem}.auth-form button{margin-top:.3rem}.link-button{width:100%;margin-top:.8rem;background:none;color:var(--muted);font-weight:500}.link-button:hover{background:none;color:var(--text)}.toast-stack{position:fixed;right:1rem;bottom:1rem;z-index:50;display:grid;gap:.6rem;width:min(360px,calc(100vw - 2rem))}.order-bar~.toast-stack,body:has(.order-bar) .toast-stack{bottom:5.5rem}.toast{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem .9rem;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);animation:toast-in .3s cubic-bezier(.22,1,.36,1)}.toast-icon{font-size:1.3rem;line-height:1.2}.toast-body{flex:1;min-width:0}.toast-body strong{font-size:.92rem}.toast-body p{margin:.15rem 0 .3rem;color:var(--muted);font-size:.85rem}.toast-body a{font-size:.85rem;font-weight:600}.toast-close{background:none;color:var(--muted);padding:0 .2rem;font-size:1.2rem;line-height:1}.toast-close:hover{background:none;color:var(--text)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes pulse-ring{0%{box-shadow:0 0 #ff6b358c}to{box-shadow:0 0 0 12px #ff6b3500}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes dash{to{stroke-dashoffset:-22}}@keyframes fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:none}}@keyframes toast-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes confetti{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:860px){.tracking-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "flow" "log"}.menu-list{grid-template-columns:minmax(0,1fr)}.hero-inner{padding-top:3rem;padding-bottom:2.6rem}}@media(max-width:600px){.container{padding:1rem}.card{padding:.9rem}.header-inner{padding-top:.7rem;padding-bottom:.7rem}.brand{font-size:1.05rem}.nav{gap:.75rem}.nav .nav-home,.user-chip{display:none}.hero-inner{padding-top:2.2rem;padding-bottom:2rem}.hero-lead{font-size:1rem}.hero-cta{flex-direction:column;align-items:stretch}.stack-chips{margin-top:1.4rem}.section-head{flex-direction:column;align-items:flex-start;gap:.15rem}.restaurant-banner{min-height:200px}.menu-item{padding:.85rem;gap:.75rem}.tracking-head{flex-direction:column;margin-bottom:1rem}.order-bar-inner{flex-direction:column;align-items:stretch;gap:.6rem;padding-top:.75rem;padding-bottom:.75rem}.order-row{gap:.7rem}.status-chip{font-size:.72rem;padding:.2rem .55rem}.auth-page{padding-top:1.5rem}.auth-card{padding:1.3rem}.toast-stack{left:.75rem;right:.75rem;bottom:.75rem;width:auto}body:has(.order-bar) .toast-stack{bottom:7.5rem}}@media(max-width:360px){.nav{gap:.55rem}.nav>a{font-size:.9rem}button.small{padding:.35rem .6rem}}