:root {
  --blue: #0071e3;
  --blue-bright: #0a84ff;
  --ink: #101114;
  --muted: #6e7580;
  --line: #e4e7ec;
  --surface: #f5f7fa;
  --surface-2: #eef2f7;
  --white: #ffffff;
  --green: #2bc866;
  --orange: #ff9f0a;
  --red: #ff3b30;
  --purple: #af52de;
  --teal: #00a7a5;
  --navy: #0755a5;
  --radius-sm: 18px;
  --radius: 28px;
  --radius-lg: 40px;
  --shadow: 0 24px 80px rgba(20, 31, 52, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 200;
  padding: 12px 18px; border-radius: 12px; background: #111; color: #fff;
}
.skip-link:focus { top: 16px; }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 128px 0; }

.site-header {
  position: fixed; z-index: 100; left: 0; right: 0; top: 0;
  height: 72px; display: flex; align-items: center;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 0 rgba(16,17,20,.08);
}
.nav-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 780; letter-spacing: -.055em; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.desktop-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; margin-right: 32px; }
.desktop-nav a { color: #4d535c; font-size: 14px; font-weight: 590; transition: color .2s ease; }
.desktop-nav a:hover { color: var(--ink); }
.nav-cta { border: 0; border-radius: 980px; padding: 11px 19px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.nav-cta:hover { transform: translateY(-1px); background: var(--blue); }
.menu-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; position: relative; cursor: pointer; }
.menu-toggle span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); transition: transform .25s ease, top .25s ease; }
.menu-toggle span:first-child { top: 15px; }
.menu-toggle span:last-child { top: 23px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }
.mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 18px 24px 26px; background: rgba(255,255,255,.98); box-shadow: 0 20px 40px rgba(0,0,0,.08); border-top: 1px solid var(--line); }
.mobile-nav a, .mobile-nav button { padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-weight: 650; cursor: pointer; }
.mobile-nav button { color: var(--blue); border-bottom: 0; }
.mobile-nav.open { display: grid; }

.hero { min-height: 900px; position: relative; display: flex; align-items: center; padding: 132px 0 88px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f9fbff 100%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { width: 620px; height: 620px; right: -210px; top: -220px; background: radial-gradient(circle at 35% 65%, rgba(10,132,255,.16), rgba(10,132,255,.04) 52%, transparent 70%); }
.ambient-two { width: 460px; height: 460px; left: -310px; bottom: -130px; background: radial-gradient(circle, rgba(175,82,222,.1), transparent 68%); }
.hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 78px; position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); text-transform: uppercase; letter-spacing: .09em; font-size: 12px; font-weight: 750; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero h1 { margin: 24px 0 26px; max-width: 650px; font-size: clamp(58px, 6vw, 88px); line-height: .95; letter-spacing: -.065em; font-weight: 710; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-lead { margin: 0; max-width: 590px; color: var(--muted); font-size: 20px; line-height: 1.52; letter-spacing: -.015em; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 23px; border: 0; border-radius: 980px; font-size: 15px; font-weight: 720; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.button svg { width: 18px; height: 18px; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(0,113,227,.22); }
.button-primary:hover { background: #0077ed; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,113,227,.28); }
.button-secondary { background: rgba(16,17,20,.06); color: var(--ink); }
.button-secondary:hover { background: rgba(16,17,20,.1); transform: translateY(-2px); }
.button-light { background: #fff; color: var(--blue); }
.button-light:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 34px; color: #525963; font-size: 13px; font-weight: 620; }
.hero-proof span { display: flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--blue); stroke-width: 2.5; }

.hero-visual { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; }
.device-glow { position: absolute; width: 520px; height: 520px; background: radial-gradient(circle, rgba(0,113,227,.16), transparent 65%); filter: blur(14px); }
.dashboard-window { position: relative; z-index: 2; width: 690px; max-width: 100%; border-radius: 28px; background: #fff; border: 1px solid rgba(27,39,61,.11); box-shadow: 0 38px 100px rgba(25,39,65,.22), 0 6px 24px rgba(25,39,65,.08); overflow: hidden; transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.window-bar { height: 45px; display: flex; align-items: center; padding: 0 15px; background: rgba(250,251,253,.95); border-bottom: 1px solid #eceff3; color: #8b929c; font-size: 10px; }
.window-bar > span { margin: auto; transform: translateX(25px); }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d3d7dd; }
.online { display: flex; align-items: center; gap: 5px; color: #5f6874; font-weight: 700; }
.online i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(43,200,102,.11); }
.dashboard-body { display: grid; grid-template-columns: 58px 1fr 176px; min-height: 430px; background: #f5f7fa; }
.dash-sidebar { background: #11141a; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.mini-brand { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.04em; margin-bottom: 13px; display: flex; gap: 3px; align-items: center; }
.mini-brand i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-bright); }
.dash-sidebar button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #69717d; }
.dash-sidebar button.active { color: #fff; background: var(--blue); }
.dash-sidebar svg { width: 17px; height: 17px; }
.dash-content { padding: 23px 20px; min-width: 0; }
.dash-head { display: flex; align-items: center; justify-content: space-between; }
.dash-head small { display: block; color: #8b929c; font-size: 9px; }
.dash-head h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.04em; }
.dash-head button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; font-size: 20px; }
.status-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 19px 0 15px; }
.status-strip > div { position: relative; padding: 11px 8px 10px 25px; border-radius: 11px; background: #fff; box-shadow: 0 1px 4px rgba(18,29,48,.05); }
.status-strip strong { font-size: 14px; }
.status-strip small { display: block; margin-top: 1px; color: #8b929c; font-size: 8px; }
.status-dot { position: absolute; left: 10px; top: 13px; width: 7px; height: 7px; border-radius: 50%; }
.green { background: var(--green); }.orange { background: var(--orange); }.red { background: var(--red); }
.floor-plan { position: relative; height: 270px; border: 1px dashed #d7dce4; border-radius: 16px; background: linear-gradient(90deg, rgba(220,225,232,.25) 1px, transparent 1px), linear-gradient(rgba(220,225,232,.25) 1px, transparent 1px), #fff; background-size: 22px 22px; overflow: hidden; }
.table { position: absolute; left: var(--x); top: var(--y); width: 88px; height: 56px; border-radius: 14px; border: 1px solid #e3e7ed; background: #f6f7f9; color: #30353c; box-shadow: 0 3px 8px rgba(0,0,0,.04); text-align: left; padding: 10px 12px; transition: transform .2s ease, box-shadow .2s ease; }
.table:hover, .table.active { transform: translateY(-3px); box-shadow: 0 9px 18px rgba(0,0,0,.09); }
.table::after { content: ""; position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; }
.table span { display: block; font-weight: 750; font-size: 11px; }
.table small { color: #8a919b; font-size: 8px; }
.table-free::after { background: var(--green); }.table-busy::after { background: var(--orange); }.table-order::after { background: var(--red); }
.table-round { width: 65px; height: 65px; border-radius: 50%; text-align: center; padding: 15px 6px; }
.floor-wall { position: absolute; background: #d5dbe3; border-radius: 20px; }
.wall-one { width: 130px; height: 5px; left: 43%; top: 45%; transform: rotate(90deg); }.wall-two { width: 90px; height: 5px; right: 0; top: 44%; }
.live-panel { margin: 12px 12px 12px 0; padding: 18px 13px; background: #fff; border-radius: 17px; box-shadow: 0 4px 20px rgba(18,29,48,.06); }
.live-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.live-title strong { font-size: 13px; }.live-title span { font-size: 8px; color: var(--blue); background: rgba(0,113,227,.08); padding: 4px 6px; border-radius: 999px; }
.live-panel article { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.live-panel article:last-child { border-bottom: 0; }
.order-dot { width: 7px; height: 7px; border-radius: 50%; }
.order-dot.red { background: var(--red); }.order-dot.orange { background: var(--orange); }.order-dot.blue { background: var(--blue); }
.live-panel strong { display: block; font-size: 10px; }.live-panel small { display: block; margin-top: 2px; color: #8c939e; font-size: 7px; }.live-panel time { color: #a0a6af; font-size: 7px; }
.phone-card { position: absolute; z-index: 4; left: -2%; bottom: 20px; width: 138px; height: 280px; padding: 23px 14px 14px; border: 8px solid #171a20; border-radius: 28px; background: #fff; box-shadow: 0 24px 50px rgba(18,30,52,.24); transform: rotate(-2deg); text-align: center; }
.phone-speaker { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; border-radius: 10px; transform: translateX(-50%); background: #2f3339; }
.phone-card strong { display: block; text-align: left; font-size: 12px; }
.qr-code { width: 91px; height: 91px; margin: 26px auto 8px; background: repeating-linear-gradient(90deg,#111 0 5px,transparent 5px 10px), repeating-linear-gradient(0deg,#111 0 5px,transparent 5px 10px); border: 5px solid #fff; outline: 2px solid #111; position: relative; }
.qr { position: absolute; background: #fff; border: 5px solid #111; width: 25px; height: 25px; }.qr::after { content:""; position:absolute; inset:4px; background:#111; }
.qr.a { left:0; top:0; }.qr.b { right:0; top:0; }.qr.c { left:0; bottom:0; }.qr.d { right:26px; bottom:7px; width:14px; height:14px; border-width:3px; }.qr.e,.qr.f,.qr.g,.qr.h,.qr.i { display:none; }
.phone-card small { color: #8a919a; font-size: 7px; }.phone-button { margin-top: 13px; padding: 8px 5px; border-radius: 10px; color: #fff; background: var(--blue); font-size: 7px; font-weight: 750; }
.floating-note { position: absolute; z-index: 5; right: -14px; top: 35px; display: flex; align-items: center; gap: 11px; padding: 13px 16px 13px 12px; border: 1px solid rgba(22,35,57,.08); border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(18,29,48,.15); animation: floatNote 4s ease-in-out infinite; }
.floating-note > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; }
.floating-note strong { display: block; font-size: 10px; }.floating-note small { display: block; margin-top: 2px; color: #8b929b; font-size: 8px; }
@keyframes floatNote { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.logo-strip { border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; background: #fff; }
.logo-items { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 24px; color: #7b828c; font-size: 14px; font-weight: 640; }
.logo-items i { width: 4px; height: 4px; border-radius: 50%; background: #c9cdd3; }

.section-heading { max-width: 770px; margin-bottom: 64px; }
.section-heading.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading.center .eyebrow { justify-content: center; }
.section-heading h2, .showcase-copy h2, .benefits-copy h2, .cta-card h2 { margin: 18px 0 20px; font-size: clamp(40px, 5vw, 64px); line-height: 1.03; letter-spacing: -.055em; font-weight: 690; }
.section-heading p, .showcase-copy > p, .benefits-copy > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; letter-spacing: -.01em; }

.workflow { background: #fff; }
.workflow-grid { display: grid; grid-template-columns: repeat(7, auto); align-items: center; }
.workflow-card { width: 245px; min-height: 280px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #fff, #fbfcfd); box-shadow: 0 12px 36px rgba(20,31,52,.045); position: relative; }
.step-number { position: absolute; top: 25px; right: 25px; color: #a2a8b1; font-size: 11px; font-weight: 750; }
.step-icon, .feature-icon, .security-icon { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 16px; color: #fff; }
.step-icon svg, .feature-icon svg, .security-icon svg { width: 27px; height: 27px; stroke-width: 1.9; }
.blue-bg { background: var(--blue); }.green-bg { background: var(--green); }.orange-bg { background: var(--orange); }.red-bg { background: var(--red); }.purple-bg { background: var(--purple); }.teal-bg { background: var(--teal); }.navy-bg { background: var(--navy); }.dark-bg { background: #15171c; }
.workflow-card h3 { margin: 31px 0 12px; font-size: 20px; letter-spacing: -.025em; }
.workflow-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.flow-arrow { width: 55px; display: flex; justify-content: center; }
.flow-arrow span { width: 31px; height: 1px; background: #cfd4db; position: relative; }
.flow-arrow span::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid #b7bdc6; border-top:1px solid #b7bdc6; transform:rotate(45deg); }

.features { background: #f7f8fa; }
.bento-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.feature-card { position: relative; min-height: 330px; padding: 34px; border: 1px solid #e3e6eb; border-radius: var(--radius); background: rgba(255,255,255,.86); overflow: hidden; box-shadow: 0 7px 22px rgba(20,31,52,.035); }
.feature-card::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.9), transparent 45%); pointer-events:none; }
.feature-card > * { position: relative; z-index: 1; }
.feature-large { min-height: 620px; grid-row: span 2; }
.feature-wide { grid-column: span 2; min-height: 390px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 30px; }
.feature-top { display: flex; align-items: flex-start; justify-content: space-between; }
.feature-top > span { color: #9aa1ab; font-size: 12px; font-weight: 800; }
.feature-card h3 { margin: 25px 0 13px; font-size: 25px; line-height: 1.12; letter-spacing: -.035em; }
.feature-card p { max-width: 560px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.mini-list { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.mini-list li { padding: 8px 11px; border-radius: 999px; background: #f0f3f7; color: #626a74; font-size: 11px; font-weight: 650; }
.guest-preview { position: absolute; right: 35px; bottom: -42px; width: 290px; height: 330px; border-radius: 37px 37px 0 0; background: linear-gradient(145deg,#e8f2ff,#f6f9fd); transform: rotate(4deg); }
.menu-phone { position: absolute; left: 48px; top: 25px; width: 190px; min-height: 340px; padding: 22px 16px; border: 7px solid #15181d; border-radius: 28px; background: #fff; box-shadow: 0 25px 50px rgba(18,29,48,.18); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.menu-head strong { font-size: 12px; }.menu-head span { color: #9198a2; }
.menu-phone > small { color: #8c929c; font-size: 8px; }.menu-phone h4 { margin: 4px 0 14px; font-size: 16px; letter-spacing: -.04em; }
.menu-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.menu-tabs > * { font-size: 7px; padding: 6px 8px; border-radius: 999px; color: #8b929c; background: #f2f4f7; }.menu-tabs b { color:#fff; background: var(--blue); }
.menu-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 7px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf0f3; }
.menu-item i { width: 34px; height: 34px; border-radius: 10px; background: radial-gradient(circle at 55% 40%, #ffe778 0 20%, #e0a431 22% 62%, #be7820 64%); }.menu-item i.drink-two { background: radial-gradient(circle at 55% 40%, #ff8bb2 0 18%, #b62d61 20% 62%, #692240 64%); }
.menu-item strong { display:block; font-size: 8px; }.menu-item small { display:block; margin-top:2px; color:#9aa1aa; font-size:6px; }.menu-item > b { font-size: 7px; }
.micro-floor { position: absolute; right: 30px; bottom: 28px; width: 160px; height: 80px; border: 1px dashed #d7dce4; border-radius: 15px; background: #f8f9fb; }
.micro-floor i { position: absolute; width: 31px; height: 22px; border-radius: 7px; background:#fff; border:1px solid #e2e6ec; }.micro-floor i::after { content:""; position:absolute; right:4px; top:4px; width:5px; height:5px; border-radius:50%; }
.micro-floor i:nth-child(1){left:12px;top:12px}.micro-floor i:nth-child(2){left:64px;top:10px}.micro-floor i:nth-child(3){right:12px;top:16px}.micro-floor i:nth-child(4){left:35px;bottom:10px}.micro-floor i:nth-child(5){right:35px;bottom:9px}
.micro-floor i.free::after{background:var(--green)}.micro-floor i.busy::after{background:var(--orange)}.micro-floor i.order::after{background:var(--red)}
.happy-hour { position: absolute; right: 25px; bottom: 25px; width: 190px; padding: 18px; border-radius: 18px; color:#fff; background: linear-gradient(135deg,#a84ddd,#703cc4); box-shadow: 0 12px 25px rgba(118,60,195,.22); }.happy-hour span{display:block;font-size:9px;font-weight:800;letter-spacing:.1em}.happy-hour strong{display:block;margin-top:8px;font-size:22px}.happy-hour i{display:block;margin-top:5px;font-size:8px;font-style:normal;opacity:.78}
.kds-preview { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 20px; border-radius: 22px; background:#171a20; }
.kds-preview article { min-height: 235px; padding: 17px; border-radius: 16px; background:#fff; }
.kds-preview article > div { display:flex;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid #e8ebef; }.kds-preview b{font-size:11px}.kds-preview time{color:var(--red);font-size:10px;font-weight:800}.kds-preview p{margin:14px 0!important;color:#3f454d!important;font-size:11px!important}.kds-preview button{width:100%;margin-top:10px;padding:9px;border:0;border-radius:9px;color:#fff;background:var(--orange);font-size:8px;font-weight:800}.kds-preview button.ready{background:var(--green)}
.spark-bars { position:absolute;right:28px;bottom:28px;width:170px;height:75px;display:flex;align-items:flex-end;gap:7px;padding:12px;border-radius:15px;background:#eff5fc; }.spark-bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--blue);opacity:.75}.spark-bars i:nth-child(1){height:20%}.spark-bars i:nth-child(2){height:38%}.spark-bars i:nth-child(3){height:31%}.spark-bars i:nth-child(4){height:60%}.spark-bars i:nth-child(5){height:48%}.spark-bars i:nth-child(6){height:82%}.spark-bars i:nth-child(7){height:100%}
.stock-row { display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:9px;margin-top:24px;font-size:10px;color:#6f7781}.stock-row+ .stock-row{margin-top:11px}.stock-row div{height:6px;border-radius:999px;background:#edf0f3;overflow:hidden}.stock-row div i{display:block;width:var(--stock);height:100%;background:var(--green);border-radius:inherit}.stock-row b{font-size:9px}.stock-row.warning div i{background:var(--red)}.stock-row.warning b{color:var(--red)}
.notification { position:absolute;right:25px;bottom:25px;display:flex;align-items:center;gap:10px;padding:13px 15px;width:220px;border:1px solid #e3e7ed;border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(20,31,52,.1)}.notification > i{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(0,113,227,.1)}.notification strong{display:block;font-size:10px}.notification small{display:block;margin-top:3px;color:#8c939c;font-size:7px}

.dark-showcase { background:#101216; color:#fff; overflow:hidden; }
.showcase-grid { display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:90px; }
.eyebrow-dark { color:#55a8ff; }
.showcase-copy h2 { max-width: 520px; }
.showcase-copy > p { max-width: 520px; color:#aeb5bf; }
.showcase-points { display:grid;gap:21px;margin-top:38px; }
.showcase-points > div { display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start; }.showcase-points > div > span { display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#1d222a;color:#6bb4ff;font-size:9px;font-weight:800}.showcase-points p{margin:0}.showcase-points strong{display:block;font-size:15px}.showcase-points small{display:block;margin-top:5px;color:#8e96a1;font-size:12px;line-height:1.45}
.analytics-card { position:relative;padding:28px;border:1px solid rgba(255,255,255,.09);border-radius:32px;background:linear-gradient(145deg,#191d24,#111419);box-shadow:0 35px 80px rgba(0,0,0,.35); }
.analytics-card::before { content:"";position:absolute;right:-130px;top:-130px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.28),transparent 70%);filter:blur(10px) }
.analytics-card > *{position:relative;z-index:1}
.analytics-head{display:flex;justify-content:space-between;align-items:start}.analytics-head small{color:#7f8996;font-size:10px}.analytics-head h3{margin:4px 0 0;font-size:25px;letter-spacing:-.04em}.analytics-head > span{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(43,200,102,.09);color:#73dfa0;font-size:9px;font-weight:750}.analytics-head > span i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.metric-grid article{padding:17px;border:1px solid rgba(255,255,255,.065);border-radius:17px;background:rgba(255,255,255,.03)}.metric-grid small{display:block;color:#7f8996;font-size:9px}.metric-grid strong{display:block;margin-top:8px;font-size:21px;letter-spacing:-.04em}.metric-grid span{display:block;margin-top:6px;color:#70dda0;font-size:8px}
.chart-wrap{margin-top:12px;padding:18px 18px 12px;border:1px solid rgba(255,255,255,.065);border-radius:19px;background:rgba(255,255,255,.025)}.chart-label{display:flex;justify-content:space-between;color:#89929e;font-size:9px}.chart-label b{color:#c9ced5;font-weight:600}.line-chart{width:100%;height:185px;margin-top:10px}.line-chart .gridline{stroke:rgba(255,255,255,.065);stroke-width:1}.line-chart .area{fill:url(#area);stroke:none}.line-chart .line{stroke:#0a84ff;stroke-width:3;filter:drop-shadow(0 0 8px rgba(10,132,255,.6))}.chart-times{display:flex;justify-content:space-between;color:#68717e;font-size:7px}
.top-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.top-items > div{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:9px;padding:13px;border:1px solid rgba(255,255,255,.065);border-radius:15px;background:rgba(255,255,255,.025)}.top-items > div > span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(10,132,255,.13);color:#69b1ff;font-size:8px;font-weight:800}.top-items p{margin:0}.top-items strong{display:block;font-size:9px}.top-items small{display:block;margin-top:3px;color:#7d8793;font-size:7px}.top-items b{font-size:9px}

.security { background:#fff; }
.security-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.security-card { min-height:280px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff; }
.security-card h3 { margin:25px 0 12px;font-size:19px;line-height:1.15;letter-spacing:-.025em; }
.security-card p { margin:0;color:var(--muted);font-size:13px;line-height:1.5; }
.white-label-banner { margin-top:18px;padding:30px 34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;border-radius:28px;background:#111318;color:#fff;overflow:hidden; }
.white-label-icon { display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--blue); }.white-label-icon svg{width:31px;height:31px;stroke-width:2}.white-label-banner h3{margin:0;font-size:25px;letter-spacing:-.04em}.white-label-banner p{margin:7px 0 0;max-width:700px;color:#aeb5bf;font-size:14px;line-height:1.5}.theme-palette{display:flex;gap:8px}.theme-palette i{width:23px;height:23px;border:3px solid rgba(255,255,255,.18);border-radius:50%;background:var(--blue)}.theme-palette i:nth-child(2){background:#8e44ad}.theme-palette i:nth-child(3){background:#1eaa69}.theme-palette i:nth-child(4){background:#e67e22}

.benefits { background:#f7f8fa; }
.benefits-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:90px;align-items:start; }
.benefits-copy { position:sticky;top:120px; }
.benefits-copy .button { margin-top:32px; }
.benefit-list { border-top:1px solid #dfe3e8; }
.benefit-list article { display:grid;grid-template-columns:45px 1fr 24px;align-items:center;gap:18px;min-height:130px;border-bottom:1px solid #dfe3e8;transition:padding .22s ease; }
.benefit-list article:hover{padding-left:12px}.benefit-list article > span{color:var(--blue);font-size:11px;font-weight:800}.benefit-list h3{margin:0;font-size:22px;letter-spacing:-.03em}.benefit-list p{margin:7px 0 0;color:var(--muted);font-size:14px}.benefit-list svg{width:20px;height:20px;color:#a1a8b1;transition:transform .2s ease,color .2s ease}.benefit-list article:hover svg{transform:translateX(4px);color:var(--blue)}

.faq-section { background:#fff; }
.faq-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:90px;align-items:start; }
.faq-grid .section-heading{position:sticky;top:120px;margin-bottom:0}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{width:100%;padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;background:none;text-align:left;font-size:18px;font-weight:680;cursor:pointer}.faq-item button i{position:relative;width:22px;height:22px;flex:0 0 auto}.faq-item button i::before,.faq-item button i::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:1.5px;background:var(--ink);transition:transform .22s ease}.faq-item button i::after{transform:rotate(90deg)}.faq-item button[aria-expanded="true"] i::after{transform:rotate(0)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.faq-answer p{overflow:hidden;margin:0;color:var(--muted);font-size:15px;line-height:1.6}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer p{padding-bottom:28px}

.cta-section { padding:0 0 110px;background:#fff; }
.cta-card { position:relative;min-height:300px;padding:55px 62px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;border-radius:38px;background:linear-gradient(135deg,#0071e3,#0a84ff 62%,#32a0ff);color:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(0,113,227,.25) }
.cta-card > *{position:relative;z-index:1}.cta-orb{position:absolute;z-index:0;right:-80px;top:-130px;width:400px;height:400px;border-radius:50%;border:70px solid rgba(255,255,255,.08)}.cta-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.82}.cta-card h2{margin:11px 0 10px;font-size:54px}.cta-card p{margin:0;max-width:650px;font-size:16px;line-height:1.5;opacity:.82}

.site-footer { padding:70px 0 28px;background:#f5f6f8; }
.footer-grid { display:grid;grid-template-columns:1.8fr .7fr 1fr;gap:80px;padding-bottom:60px; }
.footer-brand{font-size:24px}.footer-grid > div:first-child p{max-width:360px;color:var(--muted);font-size:14px;line-height:1.55}.footer-grid > div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:13px}.footer-grid strong{margin-bottom:5px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.footer-grid a,.footer-grid button{border:0;padding:0;background:none;color:#626a74;font-size:13px;cursor:pointer}.footer-grid a:hover,.footer-grid button:hover{color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:23px;border-top:1px solid #dde1e6;color:#8a919a;font-size:11px}

.demo-dialog { width:min(720px,calc(100% - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:30px;background:#fff;box-shadow:0 45px 120px rgba(12,22,40,.35);overflow:auto; }
.demo-dialog::backdrop{background:rgba(8,13,22,.54);backdrop-filter:blur(10px)}.dialog-shell{position:relative;padding:45px}.dialog-close{position:absolute;right:20px;top:20px;width:38px;height:38px;border:0;border-radius:50%;background:#f0f2f5;color:#4a515a;font-size:24px;cursor:pointer}.dialog-copy h2{margin:16px 0 12px;font-size:42px;letter-spacing:-.055em}.dialog-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}.demo-form{display:grid;gap:16px;margin-top:30px}.demo-form label{display:grid;gap:7px}.demo-form label > span{font-size:12px;font-weight:700}.demo-form input,.demo-form textarea{width:100%;border:1px solid #dfe3e8;border-radius:14px;background:#fafbfc;padding:14px 15px;color:var(--ink);outline:none;transition:border .2s ease,box-shadow .2s ease}.demo-form input:focus,.demo-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.11)}.demo-form textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-error{min-height:18px;margin:0;color:var(--red);font-size:12px}.form-submit{width:100%}.demo-form > small{display:block;text-align:center;color:#8b929c;font-size:10px}.demo-form code{padding:2px 4px;border-radius:4px;background:#f0f2f5}.toast{position:fixed;z-index:220;left:50%;bottom:25px;transform:translate(-50%,120px);padding:13px 18px;border-radius:999px;background:#111318;color:#fff;box-shadow:0 15px 40px rgba(0,0,0,.25);font-size:13px;font-weight:650;opacity:0;transition:transform .3s ease,opacity .3s ease}.toast.show{transform:translate(-50%,0);opacity:1}

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1150px) {
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
  .hero h1 { font-size: 66px; }
  .phone-card { left: -12px; transform: scale(.88) rotate(-2deg); }
  .workflow-grid { grid-template-columns: repeat(4,1fr); gap:16px; }
  .workflow-card { width:auto; }.flow-arrow{display:none}
  .showcase-grid,.benefits-grid,.faq-grid{gap:55px}
}

@media (max-width: 960px) {
  .section { padding: 100px 0; }
  .desktop-nav,.nav-cta { display:none; }.menu-toggle{display:block}
  .hero { min-height:auto;padding-top:140px; }
  .hero-grid { grid-template-columns:1fr;gap:70px; }
  .hero-copy { text-align:center; }.hero-copy .eyebrow,.hero-actions,.hero-proof{justify-content:center}.hero-lead{margin:auto}
  .hero-visual{min-height:570px;max-width:750px;width:100%;margin:auto}.dashboard-window{width:650px;transform:none}
  .workflow-grid{grid-template-columns:repeat(2,1fr)}
  .feature-wide{grid-template-columns:1fr}.kds-preview{margin-top:10px}
  .showcase-grid{grid-template-columns:1fr}.showcase-copy{text-align:center}.showcase-copy .eyebrow{justify-content:center}.showcase-copy h2,.showcase-copy>p{margin-left:auto;margin-right:auto}.showcase-points{max-width:600px;margin-left:auto;margin-right:auto;text-align:left}.analytics-card{max-width:720px;margin:auto;width:100%}
  .security-grid{grid-template-columns:repeat(2,1fr)}
  .benefits-grid,.faq-grid{grid-template-columns:1fr}.benefits-copy,.faq-grid .section-heading{position:static}.benefits-copy{text-align:center}.benefits-copy .eyebrow{justify-content:center}
  .cta-card{grid-template-columns:1fr;text-align:center}.cta-card .button{justify-self:center}
}

@media (max-width: 720px) {
  .container,.nav-shell { width:min(100% - 32px,1180px); }
  .site-header { height:64px }.mobile-nav{top:64px}
  .hero{padding:112px 0 70px}.hero h1{font-size:52px}.hero-lead{font-size:17px}.hero-actions{display:grid}.button{width:100%}.hero-proof{gap:13px 18px}
  .hero-visual{min-height:430px}.dashboard-window{width:100%;border-radius:20px}.dashboard-body{grid-template-columns:45px 1fr}.dash-sidebar{padding:13px 6px}.dash-sidebar button{width:32px;height:32px}.live-panel{display:none}.dash-content{padding:18px 13px}.floor-plan{height:215px}.table{transform:scale(.82);transform-origin:top left}.table:hover,.table.active{transform:scale(.82) translateY(-3px)}.phone-card{left:-10px;bottom:-35px;transform:scale(.64) rotate(-2deg);transform-origin:bottom left}.floating-note{right:4px;top:-22px;transform:scale(.85);animation:none}
  .logo-items{overflow:auto;justify-content:flex-start;padding:0 4px;white-space:nowrap}.logo-items::-webkit-scrollbar{display:none}
  .section-heading{margin-bottom:42px}.section-heading h2,.showcase-copy h2,.benefits-copy h2{font-size:40px}.section-heading p,.showcase-copy>p,.benefits-copy>p{font-size:16px}
  .workflow-grid{grid-template-columns:1fr}.workflow-card{min-height:240px}
  .bento-grid{grid-template-columns:1fr}.feature-large,.feature-wide{grid-column:auto;grid-row:auto}.feature-card{min-height:320px;padding:27px}.feature-large{min-height:600px}.feature-wide{min-height:auto}.guest-preview{right:10px}.kds-preview{grid-template-columns:1fr}.kds-preview article{min-height:auto}.happy-hour,.notification,.spark-bars{position:relative;right:auto;bottom:auto;margin-top:24px;width:100%}.micro-floor{opacity:.75}.feature-card h3{font-size:23px}
  .metric-grid{grid-template-columns:1fr}.top-items{grid-template-columns:1fr}.analytics-card{padding:20px}.line-chart{height:150px}
  .security-grid{grid-template-columns:1fr}.security-card{min-height:240px}.white-label-banner{grid-template-columns:1fr;text-align:center}.white-label-icon,.theme-palette{justify-self:center}
  .benefit-list article{grid-template-columns:35px 1fr 20px;min-height:125px}.benefit-list h3{font-size:19px}
  .faq-item button{font-size:16px}
  .cta-section{padding-bottom:70px}.cta-card{padding:42px 25px;min-height:360px;border-radius:28px}.cta-card h2{font-size:42px}.cta-card .button{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:35px}.footer-bottom{flex-direction:column}.site-footer{padding-top:55px}
  .dialog-shell{padding:36px 20px 25px}.dialog-copy h2{font-size:36px}.form-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}