.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 50px; padding-block: 18px 88px; }
.hero h1 { margin: 24px 0; }
.hero h1 > span { color: var(--color-primary); }
.hero-copy > p { max-width: 455px; font-size: 16px; line-height: 1.8; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--color-muted); }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.hero-product { position: relative; background: var(--color-mint); padding: 24px 54px 32px; border-radius: var(--radius-lg); min-width: 0; }
.product-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; font-weight: 700; letter-spacing: .1em; margin-bottom: 25px; }
.hero-device { border: 6px solid var(--color-surface); border-radius: 17px; background: var(--color-surface); box-shadow: var(--shadow-md); transform: rotate(-3deg); overflow: hidden; }
.device-bar { display: flex; justify-content: space-between; padding: 12px 12px 15px; font-size: 8px; font-weight: 650; }
.device-bar span:last-child { color: var(--color-muted); }
.hero-food { position: relative; height: 180px; background: var(--color-peach); overflow: hidden; border-radius: 8px; }
.plate { position: absolute; width: 220px; height: 220px; right: -15px; top: -18px; border: 16px solid var(--color-surface); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-md); transform: rotate(20deg); }
.plate > .pizza-art { width: 100%; height: 100%; border-radius: 50%; }
.food-label { position: absolute; left: 18px; top: 22px; font: italic 19px/1.1 Georgia, serif; color: var(--color-primary-dark); }
.device-content { padding: 20px 14px 8px; }
.device-content .eyebrow { font-size: 7px; margin-bottom: 8px; }
.device-content h2 { font-size: 31px; margin-bottom: 17px; }
.device-categories { display: flex; gap: 16px; font-size: 9px; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; }
.device-categories span:first-child { color: var(--color-primary); font-weight: 750; }
.mini-dish { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.mini-art { flex: 0 0 58px; height: 58px; border-radius: 8px; }
.mini-dish strong, .mini-dish small, .mini-dish b { display: block; }
.mini-dish strong { font-size: 11px; }
.mini-dish small { font-size: 8px; color: var(--color-muted); }
.mini-dish b { font-size: 11px; margin-top: 5px; }
.mini-dish a { margin-left: auto; background: var(--color-soft); border-radius: 5px; width: 32px; min-height: 32px; display: grid; place-items: center; text-decoration: none; }
.device-bottom { display: flex; justify-content: space-between; background: var(--color-primary); color: var(--color-surface); padding: 12px; font-size: 10px; border-radius: 7px; text-decoration: none; }
.device-bottom:hover { color: var(--color-surface); background: var(--color-primary-dark); }
.floating-ticket { position: absolute; bottom: 45px; right: -18px; display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-md); transform: rotate(3deg); }
.ticket-check { background: var(--color-mint); color: var(--color-primary); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
.floating-ticket strong { display: block; font-size: 11px; }
.floating-ticket small { display: block; font-size: 8px; color: var(--color-muted); }
.hero-side-note { position: absolute; writing-mode: vertical-rl; right: 14px; top: 160px; font-size: 7px; letter-spacing: .22em; color: var(--color-primary); }
.hero-product-overview { padding: 22px; background: linear-gradient(145deg, var(--color-mint), #dce9d5); box-shadow: inset 0 0 0 1px rgb(36 92 69 / 5%); }
.hero-product-overview .product-caption { margin-bottom: 14px; color: var(--color-primary-dark); }
.hero-product-overview .product-caption > span { display: flex; align-items: center; gap: 8px; }
.hero-product-overview .product-caption i { flex: 0 0 auto; }
.hero-product-overview .product-caption strong { font-size: 9px; font-variant-numeric: tabular-nums; }
.overview-stage { position: relative; min-height: 452px; overflow: hidden; border: 1px solid rgb(36 92 69 / 11%); border-radius: 16px; background: #f5f7f2; box-shadow: 0 28px 55px rgb(23 45 37 / 13%); isolation: isolate; }
.overview-stage::before { content: ''; position: absolute; width: 240px; height: 240px; top: -110px; right: -70px; border-radius: 50%; background: rgb(207 101 61 / 9%); filter: blur(1px); }
.overview-panel { position: absolute; inset: 0; padding: 24px; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.75,.2,1); pointer-events: none; }
.overview-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.overview-panel[hidden] { display: block; visibility: hidden; }
.overview-browser { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: 0 18px 45px rgb(23 45 37 / 10%); }
.overview-browser-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--color-border); font-size: 8px; letter-spacing: .08em; }
.overview-browser-bar small { color: var(--color-muted); }
.overview-customer-menu { width: 88%; margin-inline: auto; transform: rotate(-1.5deg); transform-origin: bottom center; }
.customer-menu-hero { padding: 24px 20px 15px; background: linear-gradient(130deg, var(--color-peach), #fff8f1); }
.customer-menu-hero small, .customer-menu-hero strong { display: block; }
.customer-menu-hero small { margin-bottom: 7px; color: var(--color-primary); font-size: 7px; letter-spacing: .08em; }
.customer-menu-hero strong { font: 600 22px/1.1 Georgia, serif; color: var(--color-primary-dark); }
.overview-search { margin-top: 17px; padding: 10px 12px; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 7px; font-size: 9px; }
.overview-chips { display: flex; gap: 7px; padding: 13px 20px 8px; }
.overview-chips span { padding: 5px 9px; border: 1px solid var(--color-border); border-radius: 20px; color: var(--color-muted); font-size: 7px; }
.overview-chips .active { border-color: var(--color-primary); color: white; background: var(--color-primary); }
.overview-menu-row { display: flex; align-items: center; gap: 10px; margin-inline: 20px; padding: 11px 0; border-top: 1px solid var(--color-border); }
.overview-menu-row > div { display: grid; flex: 1; }
.overview-menu-row strong { font-size: 9px; }
.overview-menu-row small { margin-top: 2px; color: var(--color-muted); font-size: 7px; }
.overview-menu-row b { font-size: 9px; }
.dish-dot { width: 38px; height: 38px; flex: 0 0 auto; border: 6px solid #fff7ed; border-radius: 9px; background: radial-gradient(circle at 35% 35%, #f3d794 0 16%, transparent 17%), radial-gradient(circle at 65% 60%, #486b3a 0 12%, transparent 13%), #b94e31; box-shadow: inset 0 0 0 2px #dca65a; }
.dish-thali { background: radial-gradient(circle at 30% 42%, #d9984b 0 18%, transparent 19%), radial-gradient(circle at 70% 38%, #486b3a 0 15%, transparent 16%), #f3d794; }
.overview-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); box-shadow: var(--shadow-md); animation: hero-overview-float 3.8s ease-in-out infinite; }
.overview-float strong, .overview-float small { display: block; }
.overview-float strong { font-size: 9px; }
.overview-float small { margin-top: 2px; color: var(--color-muted); font-size: 7px; }
.overview-qr { right: 9px; bottom: 15px; }
.mini-qr { position: relative; width: 34px; height: 34px; flex: 0 0 auto; background: repeating-conic-gradient(#173e2e 0 25%, white 0 50%) 50% / 8px 8px; border: 3px solid white; outline: 1px solid var(--color-border); }
.mini-qr i { position: absolute; width: 9px; height: 9px; border: 2px solid var(--color-primary-dark); background: white; }
.mini-qr i:nth-child(1) { top: 1px; left: 1px; }.mini-qr i:nth-child(2) { top: 1px; right: 1px; }.mini-qr i:nth-child(3) { bottom: 1px; left: 1px; }.mini-qr i:nth-child(4) { right: 4px; bottom: 4px; width: 5px; height: 5px; border: 0; background: var(--color-primary-dark); }
.overview-portal { display: grid; grid-template-columns: 46px 1fr; }
.portal-side { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 12px 7px; color: #688075; background: #f7f9f6; border-right: 1px solid var(--color-border); }
.portal-side b { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 8px; color: white; background: var(--color-primary); border-radius: 8px; font-size: 8px; }
.portal-side span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; font-size: 12px; }
.portal-side span.active { color: var(--color-primary); background: var(--color-mint); }
.portal-main { min-width: 0; padding: 17px; }
.portal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.portal-head small, .portal-head strong { display: block; }
.portal-head small { margin-bottom: 3px; color: var(--color-muted); font-size: 6px; letter-spacing: .1em; }
.portal-head strong { font-size: 15px; }
.portal-head em { padding: 5px 8px; color: var(--color-primary); background: var(--color-mint); border-radius: 14px; font-size: 7px; font-style: normal; font-weight: 700; }
.pos-layout { display: grid; grid-template-columns: 1fr .82fr; gap: 12px; }
.pos-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.pos-items span { display: grid; min-height: 70px; padding: 11px; border: 1px solid var(--color-border); border-radius: 9px; background: #fafbf9; font-size: 8px; font-weight: 700; }
.pos-items b { align-self: end; color: var(--color-primary); font-size: 8px; }
.pos-bill { padding: 12px; border: 1px solid var(--color-border); border-radius: 9px; box-shadow: var(--shadow-sm); }
.pos-bill > small { display: block; margin-bottom: 12px; color: var(--color-muted); font-size: 7px; }
.pos-bill p { display: flex; justify-content: space-between; gap: 6px; margin: 8px 0; font-size: 7px; }
.pos-bill hr { margin-block: 11px; border: 0; border-top: 1px dashed var(--color-border); }
.pos-bill .total { font-size: 10px; }
.pos-bill button, .kot-columns button, .session-alert button, .overview-phone button { width: 100%; padding: 9px 6px; border: 0; border-radius: 6px; color: white; background: var(--color-primary); font: inherit; font-size: 7px; font-weight: 700; }
.overview-success { right: 11px; bottom: 13px; }
.overview-success > i { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--color-primary); border-radius: 50%; font-style: normal; }
.overview-live-kot { width: 88%; }
.kot-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kot-columns article { padding: 11px; border: 1px solid var(--color-border); border-top: 3px solid #3f7ff5; border-radius: 8px; }
.kot-columns article:nth-child(2) { border-top-color: #f49a00; }
.kot-columns header, .kot-columns footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.kot-columns header b { font-size: 9px; }
.kot-columns header span { padding: 4px 6px; border-radius: 10px; color: #27643c; background: #e6f5eb; font-size: 6px; }
.kot-columns header .new { color: #8a5700; background: #fff0cf; }
.kot-columns article > small { display: block; margin-top: 9px; color: var(--color-muted); font-size: 7px; }
.kot-columns article > p { display: flex; justify-content: space-between; margin: 13px 0; padding-block: 10px; border-block: 1px solid var(--color-border); font-size: 8px; }
.kot-columns button { width: auto; padding-inline: 8px; }
.kot-columns footer button:first-child { color: var(--color-text); background: white; border: 1px solid var(--color-border); }
.overview-phone { position: absolute; z-index: 3; right: 8px; bottom: 14px; width: 125px; padding: 15px 12px 12px; border: 4px solid white; border-radius: 17px; background: var(--color-primary-dark); color: white; box-shadow: 0 18px 40px rgb(23 45 37 / 25%); transform: rotate(4deg); }
.phone-speaker { width: 28px; height: 3px; margin: -6px auto 12px; border-radius: 5px; background: rgb(255 255 255 / 35%); }
.overview-phone small { display: block; color: #b9d3c5; font-size: 6px; letter-spacing: .08em; }
.overview-phone strong { display: block; margin-top: 4px; font-size: 14px; }
.overview-phone p { margin: 11px 0 8px; font-size: 7px; }
.phone-status { display: flex; gap: 5px; margin-bottom: 11px; }
.phone-status i { width: 17px; height: 3px; border-radius: 4px; background: var(--color-accent); }
.phone-status i:nth-child(n+3) { background: rgb(255 255 255 / 22%); }
.overview-phone button { color: var(--color-primary-dark); background: white; }
.overview-route { position: absolute; right: 111px; bottom: 72px; display: flex; gap: 9px; }
.overview-route i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); animation: hero-route 1.6s infinite; }
.overview-route i:nth-child(2) { animation-delay: .2s; }.overview-route i:nth-child(3) { animation-delay: .4s; }
.table-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.table-grid article { display: grid; gap: 5px; min-height: 85px; padding: 12px; border: 1px solid #b9d7c2; border-top: 3px solid #3eb75b; border-radius: 9px; background: #f4fbf5; }
.table-grid article.occupied { border-color: #ffc1bd; border-top-color: #ee4d42; background: #fff5f4; }
.table-grid article.billing { border-color: #dfc3ee; border-top-color: #922bb2; background: #fbf6fd; }
.table-grid b { font-size: 10px; }.table-grid small { color: var(--color-muted); font-size: 7px; }.table-grid span { align-self: end; font-size: 7px; font-weight: 700; }
.overview-waiter { right: 12px; bottom: 14px; }
.overview-waiter > i { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--color-accent); border-radius: 8px; font-style: normal; }
.overview-smart { width: 91%; }
.smart-session { padding: 13px; border-radius: 10px; background: #f8faf7; }
.session-title { display: flex; justify-content: space-between; padding-bottom: 11px; font-size: 8px; }
.session-title b { color: var(--color-primary); }
.session-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.session-flow article { flex: 1; display: grid; place-items: center; min-height: 95px; padding: 9px 4px; border: 1px solid var(--color-border); border-radius: 8px; background: white; text-align: center; }
.session-flow article i { display: grid; place-items: center; width: 25px; height: 25px; color: white; background: var(--color-primary); border-radius: 50%; font-size: 8px; font-style: normal; }
.session-flow strong { font-size: 8px; }.session-flow small { color: var(--color-muted); font-size: 6px; }.session-flow > span { color: var(--color-accent); }
.session-alert { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px; border: 1px solid #ead3c9; border-radius: 8px; background: #fff7f3; }
.session-alert > i { color: var(--color-accent); font-style: normal; }.session-alert > span { display: grid; flex: 1; }.session-alert strong { font-size: 7px; }.session-alert small { color: var(--color-muted); font-size: 6px; }.session-alert button { width: auto; padding-inline: 10px; background: var(--color-accent); }
.smart-phone { right: 5px; bottom: 18px; background: #273b75; transform: rotate(3deg); }
.smart-success { right: 111px; bottom: 12px; }
.smart-orbit { position: absolute; inset: 30px; border: 1px dashed rgb(36 92 69 / 18%); border-radius: 50%; animation: product-orbit 18s linear infinite; }
.smart-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.smart-orbit span:nth-child(1) { top: -4px; left: 45%; }.smart-orbit span:nth-child(2) { right: -4px; top: 52%; }.smart-orbit span:nth-child(3) { bottom: 10%; left: 4%; }
.overview-nav { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid rgb(36 92 69 / 10%); border-radius: 11px; background: rgb(255 255 255 / 52%); }
.overview-nav button { min-width: 0; padding: 9px 4px; border: 0; border-radius: 7px; color: #52675d; background: transparent; font: inherit; font-size: 7px; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.overview-nav button span { display: block; margin-bottom: 3px; font-size: 6px; font-weight: 500; opacity: .7; }
.overview-nav button:hover { color: var(--color-primary); transform: translateY(-1px); }
.overview-nav button.is-active { color: white; background: var(--color-primary); box-shadow: 0 5px 14px rgb(36 92 69 / 16%); }
.overview-progress { height: 2px; margin: 9px 4px 0; overflow: hidden; border-radius: 4px; background: rgb(36 92 69 / 10%); }
.overview-progress i { display: block; width: 100%; height: 100%; background: var(--color-primary); transform-origin: left; animation: hero-progress 5.2s linear; }
.hero-product-overview.is-paused .overview-progress i { animation-play-state: paused; }
.overview-link { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--color-primary-dark); font-size: 9px; font-weight: 750; text-decoration: none; }
.overview-link:hover { color: var(--color-accent); }
@keyframes hero-overview-float { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-7px) rotate(-1deg); } }
@keyframes hero-route { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trust-strip { overflow: hidden; border-block: 1px solid var(--color-border); padding-block: 25px 18px; background: linear-gradient(180deg, #fff 0%, #f8faf6 100%); }
.trust-journey { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 28px; }
.trust-intro { align-self: start; padding-top: 13px; }
.trust-intro span, .trust-intro strong { display: block; }
.trust-intro span { margin-bottom: 8px; color: var(--color-primary); font-size: 7px; font-weight: 800; letter-spacing: .15em; }
.trust-intro strong { font-size: 13px; line-height: 1.45; }
.trust-journey-list { position: relative; min-width: 0; padding-bottom: 58px; }
.trust-journey-list ol { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.trust-journey-list li { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-width: 0; padding: 9px 7px; border: 1px solid transparent; border-radius: 10px; color: var(--color-muted); animation: journey-highlight 12.5s ease-in-out infinite; }
.trust-journey-list li:nth-child(2) { animation-delay: 2.5s; }.trust-journey-list li:nth-child(3) { animation-delay: 5s; }.trust-journey-list li:nth-child(4) { animation-delay: 7.5s; }.trust-journey-list li:nth-child(5) { animation-delay: 10s; }
.trust-journey-list li::after { content: ''; position: absolute; inset: -4px; z-index: -1; border-radius: 13px; background: radial-gradient(circle, rgb(36 92 69 / 15%), transparent 68%); opacity: 0; transform: scale(.7); animation: journey-glow 12.5s ease-in-out infinite; }
.trust-journey-list li:nth-child(2)::after { animation-delay: 2.5s; }.trust-journey-list li:nth-child(3)::after { animation-delay: 5s; }.trust-journey-list li:nth-child(4)::after { animation-delay: 7.5s; }.trust-journey-list li:nth-child(5)::after { animation-delay: 10s; }
.trust-journey-list li > span { align-self: end; overflow: hidden; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.trust-journey-list li > small { align-self: start; color: #88958d; font-size: 7px; letter-spacing: .04em; }
.journey-icon { position: relative; grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 9px; background: white; box-shadow: 0 4px 14px rgb(23 45 37 / 5%); }
.journey-icon::before, .journey-icon::after, .journey-icon b { content: ''; position: absolute; display: block; }
.journey-menu::before { width: 14px; height: 18px; border: 2px solid var(--color-primary); border-radius: 3px; }
.journey-menu::after { width: 7px; height: 1px; background: var(--color-primary); box-shadow: 0 4px 0 var(--color-primary); }
.journey-table::before { width: 17px; height: 8px; border: 2px solid var(--color-primary); border-radius: 50%; }
.journey-table::after { width: 2px; height: 9px; top: 17px; background: var(--color-primary); box-shadow: -6px 5px 0 -0.5px var(--color-primary), 6px 5px 0 -0.5px var(--color-primary); }
.journey-kot::before { width: 14px; height: 18px; border: 2px solid var(--color-primary); border-radius: 2px; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(36 92 69 / 25%) 3px 4px); }
.journey-kot::after { top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.journey-manage::before { width: 17px; height: 13px; border: 2px solid var(--color-primary); border-radius: 3px; }
.journey-manage::after { width: 9px; height: 2px; background: var(--color-primary); box-shadow: 0 -4px 0 rgb(36 92 69 / 45%), 0 4px 0 rgb(36 92 69 / 45%); }
.journey-insight::before { bottom: 6px; left: 7px; width: 3px; height: 7px; background: var(--color-primary); box-shadow: 5px -4px 0 var(--color-primary), 10px -9px 0 var(--color-accent), 15px -13px 0 var(--color-primary); border-radius: 2px 2px 0 0; }
.journey-insight::after { right: 5px; bottom: 5px; width: 18px; height: 15px; border-bottom: 1px solid rgb(36 92 69 / 25%); border-left: 1px solid rgb(36 92 69 / 25%); }
.journey-track { position: absolute; right: 0; bottom: 20px; left: 0; height: 2px; background: linear-gradient(90deg, transparent, #b9cbbf 7%, #b9cbbf 93%, transparent); }
.journey-track::before { content: ''; position: absolute; inset: -1px auto auto 0; width: 20%; height: 4px; border-radius: 4px; background: var(--color-primary); filter: drop-shadow(0 0 5px rgb(36 92 69 / 35%)); animation: journey-progress 12.5s linear infinite; }
.journey-track > i { position: absolute; top: 50%; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: #9db4a5; box-shadow: 0 0 0 1px #9db4a5; transform: translate(-50%,-50%); animation: journey-dot 12.5s ease-in-out infinite; }
.journey-track > i:nth-child(1) { left: 10%; }.journey-track > i:nth-child(2) { left: 30%; animation-delay: 2.5s; }.journey-track > i:nth-child(3) { left: 50%; animation-delay: 5s; }.journey-track > i:nth-child(4) { left: 70%; animation-delay: 7.5s; }.journey-track > i:nth-child(5) { left: 90%; animation-delay: 10s; }
.journey-waiter { position: absolute; z-index: 4; bottom: 12px; left: calc(10% - 17px); width: 34px; height: 50px; color: var(--color-primary-dark); animation: waiter-journey 12.5s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 6px 4px rgb(23 45 37 / 16%)); }
.waiter-head { position: absolute; top: 2px; left: 11px; width: 14px; height: 14px; border: 1px solid #d79a6d; border-radius: 50%; background: #eeb58a; }
.waiter-head::before { content: ''; position: absolute; top: -3px; left: -1px; width: 14px; height: 7px; border-radius: 8px 8px 3px 3px; background: var(--color-primary-dark); }
.waiter-head::after { content: ''; position: absolute; top: 6px; right: 2px; width: 2px; height: 2px; border-radius: 50%; background: var(--color-primary-dark); }
.waiter-head i { position: absolute; top: -7px; left: 2px; width: 10px; height: 5px; border-radius: 50% 50% 2px 2px; background: white; border: 1px solid var(--color-border); }
.waiter-body { position: absolute; top: 15px; left: 8px; width: 20px; height: 23px; border-radius: 7px 7px 4px 4px; background: var(--color-primary); }
.waiter-body::before { content: ''; position: absolute; top: 0; left: 5px; width: 0; height: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 6px solid white; }
.waiter-body i { position: absolute; top: 9px; left: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); }
.waiter-arm { position: absolute; top: 20px; left: 25px; width: 12px; height: 4px; border-radius: 4px; background: #eeb58a; transform: rotate(-18deg); transform-origin: left; animation: waiter-tap 2.5s ease-in-out infinite; }
.waiter-arm::after { content: ''; position: absolute; top: -1px; right: -2px; width: 5px; height: 5px; border-radius: 50%; background: #eeb58a; }
.waiter-tray { position: absolute; top: 22px; left: -7px; width: 15px; height: 2px; border-radius: 50%; background: var(--color-primary-dark); }
.waiter-tray::before { content: ''; position: absolute; top: -4px; left: 5px; width: 6px; height: 4px; border-radius: 5px 5px 0 0; background: var(--color-accent); }
.waiter-tray i { position: absolute; top: 2px; left: 7px; width: 2px; height: 8px; background: #eeb58a; transform: rotate(18deg); transform-origin: top; }
.waiter-leg { position: absolute; top: 36px; left: 12px; width: 4px; height: 12px; border-radius: 0 0 4px 4px; background: var(--color-primary-dark); transform-origin: top; animation: waiter-step .45s ease-in-out infinite alternate; }
.waiter-leg.right { left: 21px; animation-direction: alternate-reverse; }
.journey-waiter em { position: absolute; top: -5px; left: 31px; padding: 2px 4px; border-radius: 5px; color: var(--color-accent); background: white; font-size: 5px; font-style: normal; font-weight: 800; opacity: 0; animation: waiter-tap-label 2.5s ease-in-out infinite; }
@keyframes journey-highlight { 0%,12% { color: var(--color-primary-dark); border-color: #c7d9cb; background: white; box-shadow: 0 10px 24px rgb(23 45 37 / 9%); transform: translateY(-5px) scale(1.025); } 16%,100% { color: var(--color-muted); border-color: transparent; background: transparent; box-shadow: none; transform: none; } }
@keyframes journey-glow { 0%,12% { opacity: 1; transform: scale(1.08); } 16%,100% { opacity: 0; transform: scale(.75); } }
@keyframes journey-dot { 0%,12% { background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 0 0 5px rgb(207 101 61 / 12%); transform: translate(-50%,-50%) scale(1.2); } 16%,100% { background: #9db4a5; box-shadow: 0 0 0 1px #9db4a5; transform: translate(-50%,-50%); } }
@keyframes journey-progress { 0% { width: 10%; } 20% { width: 30%; } 40% { width: 50%; } 60% { width: 70%; } 80%,94% { width: 90%; } 100% { width: 10%; opacity: .15; } }
@keyframes waiter-journey { 0%,12% { left: calc(10% - 17px); } 18%,32% { left: calc(30% - 17px); } 38%,52% { left: calc(50% - 17px); } 58%,72% { left: calc(70% - 17px); } 78%,94% { left: calc(90% - 17px); } 100% { left: calc(10% - 17px); } }
@keyframes waiter-tap { 0%,38%,80%,100% { transform: rotate(-18deg) scaleX(.85); } 52%,68% { transform: rotate(-52deg) scaleX(1.35); } }
@keyframes waiter-tap-label { 0%,45%,75%,100% { opacity: 0; transform: translateY(3px); } 55%,66% { opacity: 1; transform: translateY(0); } }
@keyframes waiter-step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
.service-benefits { background: linear-gradient(180deg, #f5f7f2, #fafbf8); padding-block: 76px; }
.service-benefits-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
.service-benefits-heading h2 { margin: 0; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.12; }
.service-benefits-heading h2 span { color: var(--color-primary); }
.service-benefits-heading .eyebrow { margin-bottom: 16px; }
.service-benefits-heading > p { max-width: 340px; margin: 0 0 4px; font-size: 15px; }
.service-benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-card { min-width: 0; padding: 10px; background: var(--color-surface); border: 1px solid #dfe6dc; border-radius: 22px; box-shadow: 0 5px 15px rgb(32 59 43 / 3%); transition: box-shadow .25s, border-color .25s; }
.service-card:focus-within { border-color: var(--color-primary); box-shadow: 0 14px 32px rgb(32 59 43 / 9%); }
.service-card-copy { padding: 24px 16px 14px; }
.service-card-kicker { display: block; color: var(--color-primary); font-size: 9px; font-weight: 750; letter-spacing: .12em; margin-bottom: 14px; }
.service-card h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin-bottom: 14px; }
.service-card p { font-size: 14px; line-height: 1.75; margin-bottom: 20px; }
.service-card-copy a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-top: 1px solid var(--color-border); padding-top: 14px; font-size: 13px; font-weight: 650; text-decoration: none; color: var(--color-primary); }
.service-card-copy a > span { font-size: 20px; transition: transform .25s; }
.service-art { height: 222px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; border-radius: 14px; padding: 20px 22px 38px; }
.service-art-menu { background: #e7efe2; }
.service-art-orders { background: #faeee3; }
.service-art-insights { background: #e9eef5; }
.service-mini-window, .service-mini-ticket, .service-mini-report { width: 100%; max-width: 260px; background: #fff; border: 1px solid rgb(32 59 43 / 10%); border-radius: 10px; box-shadow: 0 12px 24px rgb(32 59 43 / 8%); }
.service-mini-window { transform: rotate(-3deg); padding: 12px; transition: transform .35s; }
.service-window-top { display: flex; align-items: center; gap: 3px; }
.service-window-top > span { width: 4px; height: 4px; background: #bdc9bc; border-radius: 50%; }
.service-window-top small { font-size: 7px; letter-spacing: .09em; margin-left: auto; color: #536655; }
.service-dish { display: flex; align-items: center; gap: 10px; padding-block: 14px; }
.service-dish > i { width: 36px; height: 36px; border: 5px solid #fbefdb; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #426c35 0 10%, transparent 12%), radial-gradient(circle at 65% 65%, #426c35 0 10%, transparent 12%), #db9952; }
.service-dish strong, .service-dish small { display: block; font-size: 10px; }
.service-dish small { font-size: 8px; color: #687467; }
.service-edit-row { display: flex; justify-content: space-between; font-size: 9px; padding-top: 10px; border-top: 1px solid #e9ede6; }
.service-edit-row b { color: #245c45; display: flex; gap: 7px; align-items: center; }
.service-edit-row i { width: 20px; height: 11px; border-radius: 10px; background: radial-gradient(circle at 73% 50%, white 0 3px, transparent 3.5px), #245c45; }
.service-save { margin-top: 12px; background: #edf5e8; color: #245c45; text-align: center; border-radius: 5px; padding: 5px; font-size: 9px; font-weight: 650; }
.service-art-label { position: absolute; bottom: 12px; font-size: 10px; color: #526152; }
.service-order-route { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 240px; font-size: 9px; font-weight: 650; margin-bottom: 12px; }
.service-order-route > i { flex: 1; height: 1px; position: relative; background: #c9aa8d; }
.service-order-route > i::after { content: ''; position: absolute; width: 7px; height: 7px; right: 0; top: -3px; border-radius: 50%; background: #9a6135; }
.service-mini-ticket { padding: 14px; transform: rotate(2deg); transition: transform .35s; }
.service-mini-ticket > div { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px dashed #d8dace; }
.service-mini-ticket b { color: #245c45; }
.service-mini-ticket > span { display: block; font-size: 9px; margin-bottom: 3px; }
.service-mini-ticket > small { display: flex; align-items: center; gap: 5px; color: #77542a; font-size: 8px; margin-top: 10px; }
.service-mini-ticket small i { width: 5px; height: 5px; border-radius: 50%; background: #a87527; }
.service-mini-report { padding: 16px; }
.service-mini-report strong, .service-mini-report small { display: block; font-size: 10px; }
.service-mini-report small { color: #667286; font-size: 6px; letter-spacing: .1em; margin-top: 4px; }
.service-chart { display: flex; align-items: end; gap: 9px; height: 72px; padding-top: 12px; border-bottom: 1px solid #dae1eb; background: repeating-linear-gradient(to top, transparent 0 23px, #f0f3f7 23px 24px); }
.service-chart i { flex: 1; height: 40%; background: #9aafc4; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.service-chart i:nth-child(2) { height: 65%; }.service-chart i:nth-child(3) { height: 52%; }.service-chart i:nth-child(4) { height: 85%; }.service-chart i:nth-child(5) { height: 63%; }.service-chart i:nth-child(6) { height: 100%; background: #245c45; }.service-chart i:nth-child(7) { height: 78%; }
.service-report-footer { display: flex; justify-content: space-between; font-size: 8px; color: #667286; padding-top: 8px; }
.service-benefits-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; font-size: 13px; color: var(--color-muted); }
@media (hover: hover) { .service-card:hover { border-color: #a6bda5; box-shadow: 0 14px 32px rgb(32 59 43 / 9%); }.service-card:hover .service-mini-window, .service-card:hover .service-mini-ticket { transform: rotate(0) translateY(-3px); }.service-card-copy a:hover > span { transform: translate(2px, -2px); } }
@media (prefers-reduced-motion: no-preference) {
  .service-card.is-visible .service-chart i { animation: service-chart-enter .8s .2s both; }
  .service-card.is-visible .service-order-route > i::after { animation: service-order-send 1.4s .3s both; }
  .service-card.is-visible .service-save { animation: service-save-enter .6s .4s both; }
}
@keyframes service-chart-enter { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes service-order-send { from { right: 100%; opacity: 0; } to { right: 0; opacity: 1; } }
@keyframes service-save-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .service-benefits-grid { gap: 12px; }.service-art { padding-inline: 12px; }.service-card-copy { padding-inline: 8px; }.service-card h3 { font-size: 22px; } }
@media (max-width: 700px) {
  .service-benefits-heading { flex-direction: column; align-items: start; gap: 18px; }
  .service-benefits-heading > p { max-width: 480px; }
  .service-benefits-grid { grid-template-columns: 1fr; gap: 20px; }
  .service-card-copy { padding: 22px 14px 12px; }
  .service-card h3 { font-size: 26px; }
  .service-benefits-footer { align-items: start; flex-direction: column; gap: 8px; }
}
.range-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.range-card { --range-accent: #245c45; --range-tint: #e7efe2; grid-column: span 2; min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #dce3d8; border-radius: 20px; background: white; box-shadow: 0 5px 18px rgb(24 49 35 / 3%); }
.range-pos-billing { --range-accent: #92502f; --range-tint: #f8ebe0; }
.range-qr-ordering-pos { --range-accent: #806017; --range-tint: #f6f0db; }
.range-dine-in-pos { --range-accent: #315f73; --range-tint: #e7f0f4; grid-column: span 3; }
.range-smart-dine-in-pos { --range-accent: #624680; --range-tint: #eee7f5; grid-column: span 3; border-color: #c6b6d7; background: linear-gradient(140deg, #fff, #f7f3fb); }
.range-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--range-accent); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.range-card-top > span:last-child { padding: 5px 9px; border-radius: 20px; background: var(--range-tint); }
.range-preview { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 150px; margin-block: 18px 24px; border-radius: 12px; background: var(--range-tint); overflow: hidden; }
.range-preview-window { width: 72%; max-width: 250px; padding: 13px; background: white; border: 1px solid var(--range-accent); border-radius: 8px; box-shadow: 0 8px 16px rgb(25 40 30 / 8%); transform: rotate(-3deg); transition: transform .3s; }
.range-preview-window > small { display: block; font-size: 8px; font-weight: 750; letter-spacing: .1em; color: var(--range-accent); }
.range-preview-lines { display: grid; gap: 6px; margin-block: 10px; }
.range-preview-lines i { width: 85%; height: 5px; border-radius: 3px; background: var(--range-tint); }
.range-preview-lines i:nth-child(2) { width: 65%; }.range-preview-lines i:nth-child(3) { width: 75%; }
.range-preview-window > span { display: block; padding-top: 8px; border-top: 1px solid var(--range-tint); color: var(--range-accent); font-size: 8px; font-weight: 650; }
.range-pos-billing .range-preview-window { max-width: 175px; border-radius: 2px 2px 12px 12px; transform: rotate(3deg); border-style: dashed; }
.range-qr-ordering-pos .range-preview-window { max-width: 190px; border-width: 3px; border-radius: 16px; transform: rotate(2deg); }
.range-dine-in-pos .range-preview-lines { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.range-dine-in-pos .range-preview-lines i { width: 100%; height: 27px; border: 1px solid #b9cfda; border-radius: 7px; }
.range-smart-dine-in-pos .range-preview-window { transform: none; border-width: 2px; }
.range-preview-orbit { position: absolute; z-index: -1; width: 220px; height: 220px; border: 1px dashed var(--range-accent); border-radius: 50%; opacity: .25; }
.range-preview-orbit i { position: absolute; top: 30px; left: 24px; height: 12px; width: 12px; border-radius: 50%; background: var(--range-accent); }
.range-card-body { display: flex; flex: 1; flex-direction: column; }
.range-card h3 { margin-bottom: 8px; font-size: clamp(22px, 2vw, 28px); }
.range-card h3 a { text-decoration: none; }
.range-card .range-tagline { color: var(--range-accent); font-size: 12px; font-weight: 650; margin-bottom: 12px; }
.range-description { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
.range-card ul { list-style: none; padding: 16px 0 0; margin: 0 0 20px; border-top: 1px solid var(--color-border); display: grid; gap: 8px; }
.range-card li { position: relative; padding-left: 19px; font-size: 12px; color: var(--color-muted); }
.range-card li::before { content: '\2713'; position: absolute; left: 0; color: var(--range-accent); font-weight: 750; }
.range-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; min-height: 44px; font-size: 12px; font-weight: 750; color: var(--range-accent); text-decoration: none; }
.range-link > span { font-size: 20px; }
.range-everyday { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 42px; margin-top: 42px; border-top: 1px solid #dce3d8; }
.range-everyday-heading h3 { font-size: 30px; margin-bottom: 14px; }
.range-everyday-heading p { font-size: 12px; max-width: 265px; }
.range-benefit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.range-benefit-list > div { position: relative; padding-left: 35px; }
.range-benefit-list > div > span { position: absolute; left: 0; top: 2px; color: var(--color-primary); font-size: 11px; font-weight: 750; }
.range-benefit-list h4 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.range-benefit-list p { font-size: 13px; margin: 0; }
.product-range .service-benefits-footer { padding-top: 24px; margin-top: 30px; border-top: 1px solid #dce3d8; }
@media (hover: hover) { .range-card:hover .range-preview-window { transform: translateY(-4px) rotate(0); }.range-card:hover, .range-card:focus-within { border-color: var(--range-accent); } }
@media (prefers-reduced-motion: no-preference) { .range-card.is-visible .range-preview-window { animation: range-window-enter .65s both; } }
@keyframes range-window-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 980px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.range-card { grid-column: auto; }.range-smart-dine-in-pos { grid-column: 1 / -1; }.range-everyday { grid-template-columns: 1fr; gap: 20px; }.range-everyday-heading p { max-width: 500px; } }
@media (max-width: 700px) { .range-grid, .range-benefit-list { grid-template-columns: 1fr; }.range-card { grid-column: auto; }.range-everyday { margin-top: 30px; padding-top: 30px; }.product-range .service-benefits-footer { gap: 16px; }.range-card h3 { font-size: 26px; } }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.problem-grid article { padding: 8px 34px; border-left: 1px solid var(--color-border); }
.problem-grid article:first-child { padding-left: 0; border: 0; }
.problem-grid article > span { color: var(--color-muted); letter-spacing: .12em; font-size: 9px; }
.problem-grid h3 { font-size: 25px; margin-block: 22px 15px; }
.problem-grid p { font-size: 14px; }
.surface-section { background: var(--color-soft); }
.dark-section { background: var(--color-dark); color: var(--color-on-dark); }
.dark-section .eyebrow, .dark-section .section-heading p { color: var(--color-dark-muted); }
.workflow { list-style: none; display: flex; padding: 0; margin: 40px 0 50px; }
.workflow li { flex: 1; position: relative; font-size: 11px; padding-right: 10px; }
.workflow li:not(:last-child)::after { content: '→'; position: absolute; right: 18px; top: 5px; color: var(--color-dark-muted); }
.workflow span { display: block; font-size: 25px; letter-spacing: -.06em; margin-bottom: 14px; color: var(--color-dark-muted); }
.workflow.light span { color: var(--color-primary); }
.setup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.setup-grid article > span { display: block; color: var(--color-primary); font-size: 13px; border-top: 1px solid var(--color-border); padding-top: 18px; margin-bottom: 30px; }
.setup-grid h3, .setup-grid h2 { font-size: 22px; }
.setup-grid p { font-size: 14px; }
.editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.editorial-card { border-radius: var(--radius-lg); padding: 44px; overflow: hidden; }
.mint { background: var(--color-mint); }
.peach { background: var(--color-peach); }
.editorial-card p { max-width: 360px; font-size: 14px; }
.big-type { font-size: 76px; line-height: .94; letter-spacing: -.065em; color: var(--color-primary); margin-top: 42px; transform: rotate(-5deg); }
.order-illustration { display: grid; gap: 10px; padding: 28px; background: var(--color-surface); border-radius: var(--radius-md); margin: 45px 0 0; transform: rotate(3deg); box-shadow: var(--shadow-sm); }
.order-illustration > span, .order-illustration small { font-size: 12px; color: var(--color-muted); }
.solution-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; }
.solution-list a { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; font-size: 22px; letter-spacing: -.04em; }
.benefit-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.benefit-section > div > p { max-width: 350px; }
.benefit-list { list-style: none; padding: 0; margin: 0; }
.benefit-list li { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.benefit-list li:first-child { padding-top: 0; }
.benefit-list strong, .benefit-list span { display: block; }
.benefit-list strong { font-size: 19px; margin-bottom: 6px; }
.benefit-list span { color: var(--color-muted); font-size: 14px; }
.benefit-card { border-top: 1px solid var(--color-border); padding: 25px 0; }
.benefit-card > span { color: var(--color-primary); font-size: 30px; }
.final-cta { background: var(--color-mint); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 60px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.final-cta h2 { font-size: clamp(34px, 4vw, 54px); }
.final-cta p { margin-bottom: 0; }
.cta-actions { display: grid; gap: 22px; text-align: center; }
.showcase { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.showcase-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--color-border); font-size: 9px; letter-spacing: .08em; }
.window-dots { color: var(--color-muted); font-size: 8px; white-space: nowrap; }
.sample-label { color: var(--color-primary); background: var(--color-soft); padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.preview-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 12px 22px 0; border-bottom: 1px solid var(--color-border); }
.preview-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; white-space: nowrap; font-size: 12px; padding: 14px 18px; color: var(--color-muted); }
.preview-tabs button[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }
.preview-panel { padding: 32px; min-height: 420px; }
.preview-panel + .preview-panel { border-top: 1px solid var(--color-border); }
.menu-preview-header { display: flex; justify-content: space-between; align-items: start; }
.menu-preview-header .eyebrow { font-size: 8px; margin-bottom: 10px; }
.menu-preview-header h3 { font-size: 30px; margin-bottom: 8px; }
.menu-preview-header p { font-size: 12px; }
.table-label { background: var(--color-soft); border-radius: 5px; padding: 7px 12px; font-size: 10px; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.category-tabs button { font-size: 11px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); min-height: 38px; padding: 7px 16px; }
.category-tabs button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.dish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dish { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.dish-art { height: 120px; display: grid; place-items: center; position: relative; background-color: var(--color-peach); }
.pizza-art { display: grid; place-items: center; background-color: var(--color-peach); }
.pizza-art > span { display: block; width: 74%; aspect-ratio: 1; max-height: 95%; border-radius: 50%; border: 7px solid var(--color-food-crust); background: radial-gradient(ellipse at 32% 26%, var(--color-food-leaf) 0 6%, transparent 7%), radial-gradient(ellipse at 67% 65%, var(--color-food-leaf) 0 7%, transparent 8%), radial-gradient(circle at 66% 30%, var(--color-food-cheese) 0 12%, transparent 13%), radial-gradient(circle at 25% 63%, var(--color-food-cheese) 0 13%, transparent 14%), radial-gradient(circle at 55% 79%, var(--color-food-cheese) 0 13%, transparent 14%), radial-gradient(circle at 47% 47%, var(--color-food-cheese) 0 17%, var(--color-food-tomato) 18%); box-shadow: var(--shadow-sm); }
.dish-art.pizza-art > span { width: 105px; }
.burger-art > span { width: 120px; height: 84px; border-radius: 50% 50% 15% 15%; background: linear-gradient(to bottom, var(--color-food-bun) 0 40%, var(--color-food-leaf) 41% 49%, var(--color-food-cheese) 50% 58%, var(--color-food-patty) 59% 78%, var(--color-food-bun) 79%); box-shadow: var(--shadow-sm); }
.salad-art { background-color: var(--color-mint); }
.salad-art > span { width: 104px; height: 104px; border: 8px solid var(--color-surface); border-radius: 50%; background: radial-gradient(circle at 30% 35%, var(--color-food-tomato) 0 13%, transparent 14%), radial-gradient(circle at 65% 70%, var(--color-food-tomato) 0 13%, transparent 14%), radial-gradient(circle at 63% 24%, var(--color-food-cheese) 0 8%, transparent 9%), var(--color-food-leaf); }
.dish-copy { padding: 16px; }
.dish-tag { color: var(--color-primary); font-size: 7px; letter-spacing: .1em; font-weight: 750; }
.dish-copy h4 { font-size: 16px; margin: 6px 0; }
.dish-copy p { font-size: 10px; }
.dish-copy > div { display: flex; align-items: center; justify-content: space-between; }
.dish-copy strong { font-size: 14px; }
.dish-copy button { background: var(--color-soft); color: var(--color-primary); border: 1px solid var(--color-border); padding: 8px 15px; border-radius: 5px; font-size: 12px; min-height: 36px; }
.sample-cart { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; font-size: 12px; }
.cart-detail { background: var(--color-soft); border-radius: var(--radius-sm); padding: 24px; margin-top: 20px; }
.cart-detail p { font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.metric-grid > div { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 22px; }
.metric-grid span, .metric-grid strong { display: block; }
.metric-grid span { font-size: 12px; color: var(--color-muted); }
.metric-grid strong { font-size: 30px; }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--color-border); padding: 20px 0; font-size: 13px; }
.ticket { max-width: 450px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 25px; margin: 25px auto; box-shadow: var(--shadow-sm); }
.ticket > div { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.ticket p { font-size: 13px; margin-block: 15px; }
.ticket > span { font-size: 12px; }
hr { border: 0; border-top: 1px dashed var(--color-border); margin-block: 20px; }
.bar-chart { max-width: 650px; padding: 30px 0; }
.bar-chart > div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 20px; margin-bottom: 22px; font-size: 14px; }
meter { width: 100%; height: 35px; accent-color: var(--color-primary); }
.page-hero { padding-block: 40px 55px; }
.page-hero h1 { max-width: 900px; font-size: clamp(36px, 4.5vw, 62px); margin-bottom: 25px; }
.page-hero > p { max-width: 740px; font-size: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--color-muted); font-size: 11px; margin-bottom: 48px; }
.table-scroll { overflow-x: auto; margin: 35px 0 60px; }
.comparison { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 13px; }
.comparison caption { text-align: left; color: var(--color-muted); padding-bottom: 15px; }
.comparison td, .comparison th { text-align: left; padding: 18px; border-bottom: 1px solid var(--color-border); }
.comparison thead { background: var(--color-soft); }
.editorial-content { max-width: 800px; }
.editorial-content h2 { font-size: 28px; margin-top: 38px; }
.editorial-content p { line-height: 1.9; }
.article-image { border-radius: var(--radius-md); }

/* Product architecture */
.product-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.product-intro > span { color: var(--color-primary); font-size: clamp(38px, 6vw, 72px); font-weight: 650; letter-spacing: -.08em; line-height: .8; }
.product-intro p { max-width: 520px; margin: 0; font-size: 15px; }
.product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.product-grid .product-card { grid-column: span 2; }
.product-grid .product-card:nth-child(4) { grid-column: 2 / span 2; }
.product-grid .product-card:nth-child(5) { grid-column: 4 / span 2; }
.product-card { --product-accent: var(--color-primary); display: flex; flex-direction: column; min-height: 520px; overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.product-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--product-accent) 45%, var(--color-border)); box-shadow: var(--shadow-md); }
.product-card.product-pos-billing { --product-accent: #a44d2c; }
.product-card.product-qr-ordering-pos { --product-accent: #9b6a22; }
.product-card.product-dine-in-pos { --product-accent: #315f73; }
.product-card.product-smart-dine-in-pos { --product-accent: #604c86; background: linear-gradient(145deg, #fff 0%, #f4f0f8 100%); }
.product-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-number { color: var(--product-accent); font-size: 13px; font-weight: 750; letter-spacing: .08em; }
.product-mode { padding: 5px 8px; color: var(--product-accent); background: color-mix(in srgb, var(--product-accent) 9%, white); border-radius: 999px; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.product-card-visual { position: relative; height: 130px; margin: 24px -8px 26px; overflow: hidden; background: color-mix(in srgb, var(--product-accent) 10%, var(--color-soft)); border: 1px solid color-mix(in srgb, var(--product-accent) 18%, var(--color-border)); border-radius: 12px; }
.product-card-visual::before { content: ''; position: absolute; width: 95px; height: 95px; top: 17px; left: calc(50% - 48px); border: 1px solid color-mix(in srgb, var(--product-accent) 28%, transparent); border-radius: 50%; animation: product-orbit 7s linear infinite; }
.product-card-visual > span { position: absolute; inset: 30px auto auto calc(50% - 31px); width: 62px; height: 70px; background: var(--color-surface); border: 2px solid var(--product-accent); border-radius: 9px; box-shadow: var(--shadow-sm); }
.product-card-visual > span::before, .product-card-visual > span::after { content: ''; position: absolute; right: 10px; left: 10px; height: 5px; background: color-mix(in srgb, var(--product-accent) 30%, white); border-radius: 4px; }
.product-card-visual > span::before { top: 18px; box-shadow: 0 13px 0 color-mix(in srgb, var(--product-accent) 30%, white); }
.product-card-visual > span::after { bottom: 8px; background: var(--product-accent); }
.product-card-visual i, .product-card-visual b { position: absolute; width: 12px; height: 12px; background: var(--product-accent); border: 3px solid var(--color-surface); border-radius: 50%; box-shadow: var(--shadow-sm); }
.product-card-visual i { top: 22px; left: 22px; animation: product-float 3.2s ease-in-out infinite; }
.product-card-visual b { right: 24px; bottom: 20px; animation: product-float 3.2s .8s ease-in-out infinite; }
.product-best-for { margin: 0 0 9px !important; color: var(--product-accent) !important; font-size: 10px !important; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.product-card h3 { font-size: 26px; }
.product-card-features { display: grid; gap: 7px; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.product-card-features li { position: relative; padding-left: 18px; color: var(--color-muted); font-size: 12px; }
.product-card-features li::before { content: '✓'; position: absolute; left: 0; color: var(--product-accent); font-weight: 750; }
.product-card-link { margin-top: auto; color: var(--product-accent); }
.product-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(45px, 8vw, 120px); }
.product-story article { padding-top: 25px; border-top: 1px solid var(--color-border); }
.product-story p { font-size: 17px; max-width: 580px; }
.product-capabilities { padding-bottom: 100px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.capability-grid article { min-height: 170px; padding: 26px; background: var(--color-surface); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.capability-grid span { display: block; margin-bottom: 34px; color: var(--color-primary); font-size: 11px; font-weight: 750; }
.capability-grid h3 { margin: 0; font-size: 19px; }
.product-demo-section { overflow: hidden; }
.product-visual { overflow: hidden; background: #f8f8f4; color: var(--color-text); border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius-lg); box-shadow: 0 35px 90px rgb(0 0 0 / 22%); }
.visual-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 54px; padding: 12px 18px; border-bottom: 1px solid var(--color-border); font-size: 9px; letter-spacing: .1em; }
.visual-toolbar > span { display: flex; gap: 5px; }
.visual-toolbar i { width: 7px; height: 7px; background: var(--color-border); border-radius: 50%; }
.visual-toolbar em { padding: 4px 7px; color: var(--color-primary); background: var(--color-mint); border-radius: 4px; font-style: normal; font-weight: 750; }
.visual-scene { position: relative; min-height: 510px; padding: 46px; background: radial-gradient(circle at 15% 20%, var(--color-mint), transparent 34%), radial-gradient(circle at 86% 75%, var(--color-peach), transparent 30%), #f8f8f4; }
.phone-frame { position: relative; width: 270px; margin: 0 auto; padding: 19px; background: var(--color-surface); border: 6px solid var(--color-dark); border-radius: 32px; box-shadow: var(--shadow-md); animation: product-float 5s ease-in-out infinite; }
.phone-top, .visual-dish, .pos-head, .floor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phone-top { margin-bottom: 22px; font-size: 9px; font-weight: 750; }
.phone-top i { width: 7px; height: 7px; background: #22a35a; border-radius: 50%; }
.phone-frame > small { color: var(--color-accent); font-size: 8px; letter-spacing: .1em; }
.phone-frame h3 { margin: 6px 0 15px; font-size: 22px; }
.menu-chips { display: flex; gap: 5px; margin-bottom: 14px; }
.menu-chips span { padding: 4px 7px; background: var(--color-soft); border-radius: 4px; font-size: 8px; }
.menu-chips span:first-child { color: white; background: var(--color-primary); }
.visual-dish { padding: 11px 0; border-top: 1px solid var(--color-border); }
.visual-dish > i { width: 42px; height: 42px; flex: 0 0 auto; background: var(--color-peach); border-radius: 9px; }
.visual-dish > div { display: grid; flex: 1; }
.visual-dish strong { font-size: 10px; }
.visual-dish small { color: var(--color-muted); font-size: 7px; }
.visual-dish b { font-size: 9px; }
.qr-stand { position: absolute; left: 8%; top: 150px; display: grid; justify-items: center; width: 150px; padding: 18px; background: #fff9ed; border: 1px solid #cdbb91; border-radius: 14px; box-shadow: var(--shadow-md); transform: rotate(-6deg); }
.qr-stand small, .qr-stand strong { font-size: 8px; letter-spacing: .1em; }
.mini-qr { display: grid; grid-template-columns: repeat(2, 22px); gap: 6px; margin: 12px; }
.mini-qr i { height: 22px; border: 5px solid var(--color-dark); }
.visual-callout, .token-pop { position: absolute; right: 7%; bottom: 90px; display: flex; align-items: center; gap: 10px; padding: 14px 17px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md); animation: product-float 4s .6s ease-in-out infinite; }
.visual-callout > i { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--color-primary); border-radius: 50%; font-style: normal; }
.visual-callout strong, .visual-callout small { display: block; font-size: 10px; }
.visual-callout small { color: var(--color-muted); }
.pos-terminal { width: min(800px, 82%); margin: 15px auto; overflow: hidden; background: var(--color-surface); border: 8px solid var(--color-dark); border-radius: 20px; box-shadow: var(--shadow-md); }
.pos-head { padding: 18px; color: white; background: var(--color-dark); }
.pos-head small, .pos-head strong { display: block; }
.pos-head small { font-size: 8px; opacity: .65; }
.pos-head span { font-size: 10px; }
.pos-body { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 320px; }
.pos-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; padding: 22px; background: var(--color-soft); }
.pos-menu span { display: grid; min-height: 86px; padding: 14px; background: white; border: 1px solid var(--color-border); border-radius: 9px; font-size: 11px; }
.pos-menu b { align-self: end; color: var(--color-primary); }
.pos-cart { padding: 22px; }
.pos-cart small { color: var(--color-accent); font-size: 8px; }
.pos-cart p, .pos-cart strong { display: flex; justify-content: space-between; font-size: 11px; }
.pos-cart button, .flow-phone button, .flow-kitchen button, .waiter-device button { width: 100%; padding: 10px; color: white; background: var(--color-primary); border: 0; border-radius: 7px; font-size: 10px; }
.kot-slip { position: absolute; right: 3%; top: 115px; display: grid; gap: 8px; width: 160px; padding: 22px; background: #fffefa; border: 1px dashed #aaa18f; box-shadow: var(--shadow-md); transform: rotate(4deg); animation: ticket-enter 4.5s ease-in-out infinite; }
.kot-slip small, .kot-slip span, .kot-slip b { font-size: 8px; }
.flow-phone, .flow-kitchen, .waiter-device, .token-pop { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.flow-phone { position: absolute; left: 8%; top: 60px; width: 245px; padding: 22px; border: 5px solid var(--color-dark); border-radius: 25px; }
.flow-phone small, .flow-kitchen small, .token-pop small, .waiter-device small { color: var(--color-accent); font-size: 8px; letter-spacing: .1em; }
.flow-phone h3 { margin: 5px 0 18px; }
.flow-phone > span, .flow-phone > strong { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--color-border); font-size: 10px; }
.flow-line { position: absolute; top: 245px; left: 36%; right: 38%; height: 2px; background: var(--color-primary); }
.flow-line i { position: absolute; top: -4px; width: 10px; height: 10px; background: var(--color-primary); border-radius: 50%; animation: flow-dot 2.4s linear infinite; }
.flow-line i:nth-child(2) { animation-delay: .8s; }.flow-line i:nth-child(3) { animation-delay: 1.6s; }
.flow-kitchen { position: absolute; right: 7%; top: 100px; width: 320px; padding: 22px; border-top: 4px solid var(--color-accent); border-radius: 13px; }
.flow-kitchen > div { display: grid; }
.flow-kitchen p { margin: 12px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); font-size: 10px; }
.flow-kitchen button { margin-top: 18px; }
.status-pill { position: absolute; right: 20px; top: 20px; padding: 4px 8px; color: var(--color-primary); background: var(--color-mint); border-radius: 999px; font-size: 8px; }
.token-pop { right: 27%; bottom: 36px; display: grid; gap: 2px; animation: product-float 4s ease-in-out infinite; }
.token-pop strong { color: var(--color-accent); font-size: 18px; }
.token-pop span { font-size: 8px; }
.floor-board { width: min(760px, 76%); margin: 5px auto; padding: 25px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 17px; box-shadow: var(--shadow-md); }
.floor-head span { padding: 5px 8px; color: var(--color-primary); background: var(--color-mint); border-radius: 999px; font-size: 8px; }
.floor-head small { color: var(--color-muted); font-size: 8px; }
.floor-head h3 { margin: 3px 0 0; }
.table-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 25px; }
.table-map i { display: grid; place-items: center; min-height: 100px; background: var(--color-soft); border: 1px solid var(--color-border); border-radius: 50% 50% 14px 14px; font-style: normal; font-size: 12px; font-weight: 750; }
.table-map i small { display: block; font-size: 7px; font-weight: 500; }
.table-map .occupied { background: var(--color-peach); }.table-map .billing { background: #eee7f6; }.table-map .reserved { background: #e6edf0; }
.waiter-device { position: absolute; right: 4%; bottom: 35px; width: 230px; padding: 20px; border: 5px solid var(--color-dark); border-radius: 24px; animation: product-float 4s ease-in-out infinite; }
.waiter-device h3 { margin: 4px 0 12px; font-size: 17px; }
.waiter-device p { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 9px; }
.waiter-device button { margin-top: 12px; }
.visual-smart-scene { min-height: 540px; }
.smart-center { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 180px; height: 180px; padding: 25px; text-align: center; background: var(--color-dark); color: white; border: 12px solid rgb(231 239 223 / 55%); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 25px 70px rgb(23 45 37 / 30%); }
.smart-center span { font-size: 8px; letter-spacing: .1em; }.smart-center strong { font-size: 19px; }.smart-center small { color: var(--color-dark-muted); font-size: 8px; }
.smart-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; width: 190px; padding: 16px; background: white; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md); animation: product-float 4s ease-in-out infinite; }
.smart-node i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--color-primary); background: var(--color-mint); border-radius: 9px; font-size: 9px; font-style: normal; font-weight: 750; }
.smart-node strong, .smart-node small { display: block; font-size: 10px; }.smart-node small { color: var(--color-muted); font-size: 8px; }
.node-guest { left: 7%; top: 55px; }.node-waiter { right: 7%; top: 55px; animation-delay: .6s; }.node-kitchen { left: 7%; bottom: 55px; animation-delay: 1.2s; }.node-billing { right: 7%; bottom: 55px; animation-delay: 1.8s; }
.visual-smart-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }.visual-smart-scene path { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 8 9; animation: route-dash 14s linear infinite; }
.product-benefits .benefit-card { padding-right: 25px; }
.product-comparison-section { padding-top: 70px; }
.product-comparison { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.product-comparison table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12px; }
.product-comparison th, .product-comparison td { padding: 17px 15px; text-align: center; border-bottom: 1px solid var(--color-border); }
.product-comparison th:first-child { position: sticky; left: 0; z-index: 1; min-width: 190px; text-align: left; background: var(--color-surface); }
.product-comparison thead th { background: var(--color-soft); color: var(--color-primary-dark); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.product-comparison thead th:first-child { z-index: 2; background: var(--color-soft); }
.product-comparison .yes { color: var(--color-primary); font-size: 17px; font-weight: 750; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes product-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes product-orbit { to { transform: rotate(360deg); } }
@keyframes ticket-enter { 0%,100% { transform: translateY(5px) rotate(4deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes flow-dot { from { left: 0; opacity: 0; } 15%,85% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
@keyframes route-dash { to { stroke-dashoffset: -200; } }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 70px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 7px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); padding: 12px; font-size: 15px; }
textarea { resize: vertical; }
.full-width { grid-column: 1 / -1; }
.consent { display: flex; align-items: start; gap: 12px; margin: 24px 0; font-size: 12px; font-weight: 400; color: var(--color-muted); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.validation-summary-valid, .field-validation-valid { display: none; }
.validation-summary-errors, .field-validation-error { color: var(--color-error); font-size: 13px; }
.contact-aside { background: var(--color-soft); padding: 35px; border-radius: var(--radius-md); align-self: start; }
.contact-aside h2 { font-size: 32px; }
.contact-aside > a { display: block; margin-block: 12px; overflow-wrap: anywhere; }
.blog-search { display: flex; align-items: end; gap: 20px; margin-bottom: 40px; }
.blog-search > div { flex: 1; }
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.blog-card > div { padding: 28px; }
.blog-card h2 { font-size: 28px; }
.blog-card a { text-decoration: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 35px; font-size: 13px; }