:root {
  --navy: #071942;
  --navy-2: #0b2358;
  --navy-3: #102f70;
  --blue: #1859e8;
  --blue-2: #2e75ff;
  --yellow: #ffd43b;
  --yellow-2: #ffbf20;
  --ink: #101828;
  --muted: #667085;
  --paper: #f6f8fc;
  --soft-blue: #edf3ff;
  --soft-yellow: #fff9df;
  --line: #e4e9f1;
  --white: #fff;
  --green: #12b76a;
  --red: #ef4444;
  --shadow: 0 24px 70px rgba(7, 25, 66, .14);
  --shadow-soft: 0 16px 45px rgba(7, 25, 66, .09);
  --radius: 24px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
img, svg { max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; }
.skip-link { position: fixed; left: 15px; top: -80px; z-index: 9999; padding: 12px 18px; border-radius: 10px; background: var(--yellow); color: var(--navy); font-weight: 900; transition: top .2s; }
.skip-link:focus { top: 15px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.top-strip { position: relative; z-index: 30; color: #dce6ff; background: var(--navy); font-size: 13px; }
.top-strip-inner { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.top-strip span { display: inline-flex; align-items: center; gap: 8px; }
.top-strip i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 212, 59, .12); animation: pulse 1.8s infinite; }
.top-strip a { color: var(--yellow); font-weight: 850; }
.top-strip a b { display: inline-block; transition: transform .2s; }
.top-strip a:hover b { transform: translateX(4px); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 212, 59, 0); } }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(228, 233, 241, .82); background: rgba(255,255,255,.93); backdrop-filter: blur(16px); }
.nav-shell { position: relative; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; height: 58px; width: auto; }
.brand-icon-only { padding: 4px 0; }
.main-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; color: #344054; font-size: 14px; font-weight: 760; }
.main-nav > a { position: relative; padding: 10px 0; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--blue); transition: right .22s; }
.main-nav > a:not(.nav-cta):hover { color: var(--navy); }
.main-nav > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { padding: 12px 20px !important; border-radius: 11px; color: var(--white); background: var(--blue); box-shadow: 0 10px 22px rgba(24,89,232,.2); transition: transform .2s, background .2s; }
.nav-cta:hover { transform: translateY(-2px); background: #114bd0; }
.menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 11px; background: var(--soft-blue); }
.menu-button span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: var(--navy); transition: transform .2s, opacity .2s; }
.menu-button.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button.open span:nth-child(2) { opacity: 0; }
.menu-button.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { position: relative; overflow: hidden; padding: 88px 0 0; background: linear-gradient(180deg, #f8faff 0%, #fff 77%); }
.hero-grid-pattern { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(24,89,232,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(24,89,232,.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000 0%, transparent 80%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(3px); }
.hero-glow-a { width: 630px; height: 630px; right: -210px; top: -170px; background: radial-gradient(circle, rgba(24,89,232,.16), transparent 67%); }
.hero-glow-b { width: 420px; height: 420px; left: -220px; top: 140px; background: radial-gradient(circle, rgba(255,212,59,.22), transparent 69%); }
.hero-layout { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; gap: 58px; align-items: center; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: 1.45px; text-transform: uppercase; }
.eyebrow { margin-bottom: 19px; }
.eyebrow::before, .section-kicker::before { content: ""; width: 26px; height: 3px; border-radius: 4px; background: var(--yellow); }
.hero-copy h1 { margin: 0; color: var(--navy); font-size: clamp(50px, 5vw, 75px); line-height: .98; letter-spacing: -4.2px; }
.hero-copy h1 em { color: var(--blue); font-style: normal; }
.hero-copy > p { max-width: 620px; margin: 26px 0 0; color: #526078; font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 13px 22px; border: 0; border-radius: 12px; font-weight: 900; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--blue); box-shadow: 0 14px 28px rgba(24,89,232,.24); }
.button-primary:hover { background: #104bd0; box-shadow: 0 18px 34px rgba(24,89,232,.28); }
.button-secondary { border: 1px solid #dbe2ed; color: var(--navy); background: white; box-shadow: 0 8px 25px rgba(7,25,66,.06); }
.button-secondary:hover { border-color: #b9c8e0; box-shadow: 0 14px 30px rgba(7,25,66,.1); }
.button-yellow { color: var(--navy); background: var(--yellow); box-shadow: 0 14px 30px rgba(255,191,32,.24); }
.button-yellow:hover { background: #ffc928; }
.button-dark { color: white; background: var(--navy); }
.button-dark:hover { background: var(--navy-2); }
.button-outline-light { border: 1px solid rgba(255,255,255,.24); color: white; background: rgba(255,255,255,.05); }
.button-outline-light:hover { background: rgba(255,255,255,.1); }
.button.full { width: 100%; }
.play-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: 9px; }
.hero-bullets { display: flex; flex-wrap: wrap; gap: 11px 18px; margin: 25px 0 0; padding: 0; list-style: none; color: #55637a; font-size: 13px; font-weight: 700; }
.hero-bullets li { display: inline-flex; align-items: center; gap: 7px; }
.hero-bullets b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--soft-blue); font-size: 11px; }
.hero-mini-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 500px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.hero-mini-proof div { display: flex; flex-direction: column; gap: 4px; }
.hero-mini-proof strong { color: var(--navy); font-size: 18px; }
.hero-mini-proof span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.hero-product { position: relative; min-height: 590px; display: flex; align-items: center; }
.pos-window { position: relative; z-index: 2; width: 100%; overflow: hidden; border: 1px solid rgba(7,25,66,.12); border-radius: 25px; background: #f9fbff; box-shadow: 0 38px 90px rgba(7,25,66,.22); transform: perspective(1500px) rotateY(-3.5deg) rotateX(1.3deg); }
.pos-topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5eaf3; background: white; }
.pos-mini-logo { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 12px; }
.pos-mini-logo span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.9); overflow: hidden; box-shadow: 0 6px 12px rgba(7,25,66,.12); }
.pos-mini-logo span img { width: 100%; height: 100%; object-fit: contain; }
.pos-top-actions { display: flex; align-items: center; gap: 12px; color: #7a8699; font-size: 10px; }
.pos-top-actions i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #e8fbf2; }
.pos-top-actions b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: 9px; }
.pos-body { min-height: 455px; display: grid; grid-template-columns: 60px 1fr; }
.pos-sidebar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 9px; border-right: 1px solid #e3e8f1; background: white; }
.pos-sidebar button { width: 38px; height: 38px; border: 0; border-radius: 10px; color: #8b97aa; background: transparent; font-size: 18px; }
.pos-sidebar button.active { color: var(--blue); background: var(--soft-blue); }
.pos-content { padding: 22px; }
.pos-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.pos-heading div { display: flex; flex-direction: column; gap: 3px; }
.pos-heading small { color: #99a4b5; font-size: 9px; }
.pos-heading strong { color: var(--navy); font-size: 18px; }
.pos-heading > span { padding: 7px 10px; border-radius: 100px; color: #0b8c51; background: #e9faf2; font-size: 8px; font-weight: 900; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.kpi-grid article { padding: 13px 14px; border: 1px solid #e4e9f2; border-radius: 13px; background: white; }
.kpi-grid small, .kpi-grid strong, .kpi-grid em { display: block; }
.kpi-grid small { color: #8c97a9; font-size: 8px; }
.kpi-grid strong { margin-top: 5px; color: var(--navy); font-size: 18px; }
.kpi-grid em { margin-top: 4px; color: #0a9b59; font-size: 8px; font-style: normal; font-weight: 800; }
.pos-lower-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 12px; margin-top: 12px; }
.table-map, .live-orders { padding: 14px; border: 1px solid #e4e9f2; border-radius: 14px; background: white; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title strong { color: var(--navy); font-size: 11px; }
.panel-title span { color: #7d899b; font-size: 7px; }
.table-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.table-cells button { min-height: 48px; border: 1px solid #e3e8f0; border-radius: 9px; color: #647086; background: #f8fafc; font-size: 9px; font-weight: 900; }
.table-cells small { display: block; margin-top: 3px; font-size: 6px; font-weight: 650; }
.table-cells .occupied { border-color: #bfd0ff; color: #1346b9; background: #edf3ff; }
.table-cells .ready { border-color: #bdebd4; color: #087a45; background: #ebfaf3; }
.table-cells .kitchen { border-color: #ffe298; color: #9b6500; background: #fff9e7; }
.live-orders article { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eef1f5; }
.live-orders article > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: var(--yellow); font-size: 8px; font-style: normal; font-weight: 950; }
.live-orders article > div { min-width: 0; flex: 1; }
.live-orders article strong, .live-orders article small { display: block; white-space: nowrap; }
.live-orders article strong { color: var(--navy); font-size: 8px; }
.live-orders article small { margin-top: 2px; color: #8a96a8; font-size: 6px; }
.live-orders article > b { padding: 4px 6px; border-radius: 20px; color: #8b5d00; background: #fff4d0; font-size: 5px; }
.live-orders article > b.new { color: #1745aa; background: #eaf1ff; }
.live-orders article > b.ready-label { color: #057342; background: #e8f9f1; }
.float-chip { position: absolute; z-index: 5; padding: 10px 14px; border: 1px solid rgba(7,25,66,.08); border-radius: 12px; color: #637088; background: rgba(255,255,255,.96); box-shadow: 0 14px 35px rgba(7,25,66,.13); font-size: 10px; font-weight: 750; }
.float-chip span { color: var(--blue); font-size: 14px; font-weight: 950; }
.chip-orders { left: -25px; top: 72px; }
.chip-time { right: 20px; bottom: 43px; }
.phone-order { position: absolute; z-index: 4; right: -18px; bottom: -12px; width: 178px; padding: 7px; border-radius: 28px; background: #0b1327; box-shadow: 0 25px 55px rgba(7,25,66,.28); transform: rotate(5deg); }
.phone-speaker { width: 42px; height: 4px; margin: 3px auto 6px; border-radius: 4px; background: #303b52; }
.phone-screen { min-height: 310px; padding: 10px; border-radius: 21px; background: #f7f9fc; }
.phone-head { display: flex; align-items: center; justify-content: space-between; color: var(--navy); font-size: 7px; }
.phone-head strong { font-size: 9px; }
.phone-head i { font-style: normal; letter-spacing: 1px; }
.food-card { display: grid; grid-template-columns: 42px 1fr 20px; gap: 7px; align-items: center; margin-top: 12px; padding: 8px; border-radius: 11px; background: white; box-shadow: 0 5px 16px rgba(7,25,66,.06); }
.food-card > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: #fff2cf; font-size: 20px; }
.food-card div strong, .food-card div small { display: block; }
.food-card div strong { color: var(--navy); font-size: 7px; line-height: 1.25; }
.food-card div small { margin-top: 4px; color: var(--blue); font-size: 7px; font-weight: 900; }
.food-card button { width: 20px; height: 20px; border: 0; border-radius: 6px; color: white; background: var(--blue); font-size: 11px; }
.cart-bar { position: absolute; left: 17px; right: 17px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; padding: 9px; border-radius: 10px; color: white; background: var(--navy); }
.cart-bar strong, .cart-bar small { display: block; }
.cart-bar strong { font-size: 7px; }
.cart-bar small { margin-top: 2px; color: #afbedc; font-size: 6px; }
.cart-bar button { padding: 7px 9px; border: 0; border-radius: 7px; color: var(--navy); background: var(--yellow); font-size: 7px; font-weight: 900; }
.hero-channel-bar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 82px; margin-top: 62px; padding: 18px 22px; border: 1px solid #e5eaf2; border-bottom: 0; border-radius: 20px 20px 0 0; background: white; box-shadow: 0 -12px 35px rgba(7,25,66,.05); color: #58667c; font-size: 13px; }
.hero-channel-bar > span { color: var(--navy); font-weight: 900; }
.hero-channel-bar div { display: inline-flex; align-items: center; gap: 7px; padding-left: 18px; border-left: 1px solid #e5eaf2; font-weight: 750; }
.hero-channel-bar b { font-size: 17px; }

.section-heading { margin-bottom: 50px; }
.section-heading.centered { max-width: 820px; margin-inline: auto; text-align: center; }
.section-heading.centered .section-kicker { justify-content: center; }
.section-heading.split { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 90px; }
.section-heading h2, .solution-copy h2, .method-intro h2, .reports-copy h2, .roi-copy h2, .faq-intro h2, .implementation-copy h2, .demo-copy h2 { margin: 12px 0 0; color: var(--navy); font-size: clamp(38px, 4vw, 57px); line-height: 1.03; letter-spacing: -2.7px; }
.section-heading h2 em, .solution-copy h2 em, .method-intro h2 em, .reports-copy h2 em, .roi-copy h2 em, .faq-intro h2 em, .implementation-copy h2 em, .demo-copy h2 em { color: var(--blue); font-style: normal; }
.section-heading > p, .section-heading.split > p { margin: 20px auto 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.section-heading.split > p { margin: 0; }

.problem-section { background: var(--paper); }
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.problem-card { position: relative; min-height: 296px; padding: 29px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: white; transition: transform .25s, box-shadow .25s, border-color .25s; }
.problem-card:hover { transform: translateY(-7px); border-color: rgba(24,89,232,.3); box-shadow: var(--shadow-soft); }
.problem-num { position: absolute; right: 18px; top: 11px; color: #eff2f7; font-size: 52px; font-weight: 1000; }
.icon-box { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 42px; border-radius: 16px; color: var(--blue); background: var(--soft-blue); font-size: 22px; font-weight: 950; }
.problem-card h3 { margin: 0 0 11px; color: var(--navy); font-size: 21px; }
.problem-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.problem-card > strong { display: block; margin-top: 18px; color: var(--blue); font-size: 12px; }

.solution-section { position: relative; overflow: hidden; color: white; background: var(--navy); }
.solution-section::before { content: ""; position: absolute; left: -300px; bottom: -430px; width: 850px; height: 850px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; box-shadow: 0 0 0 105px rgba(255,255,255,.018), 0 0 0 210px rgba(255,255,255,.012); }
.solution-layout { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; gap: 90px; align-items: center; }
.section-kicker.light { color: #b8c6e5; }
.solution-copy h2, .method-intro h2, .implementation-copy h2, .demo-copy h2 { color: white; }
.solution-copy h2 em, .method-intro h2 em, .implementation-copy h2 em, .demo-copy h2 em { color: var(--yellow); }
.solution-copy > p, .method-intro > p, .implementation-copy > p, .demo-copy > p { margin: 23px 0; color: #afbdd9; font-size: 16px; line-height: 1.77; }
.solution-points { display: grid; gap: 14px; margin: 32px 0; }
.solution-points article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; }
.solution-points i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: var(--yellow); background: rgba(255,255,255,.05); font-size: 11px; font-style: normal; font-weight: 950; }
.solution-points strong, .solution-points span { display: block; }
.solution-points strong { font-size: 15px; }
.solution-points span { margin-top: 3px; color: #9fadd0; font-size: 12px; line-height: 1.45; }
.flow-visual { position: relative; min-height: 600px; }
.flow-core { position: absolute; left: 50%; top: 50%; z-index: 4; width: 190px; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #153675, #0a1f50 68%); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 0 22px rgba(255,255,255,.025), 0 0 0 45px rgba(255,255,255,.015); transform: translate(-50%, -50%); }
.core-ring { width: 59px; height: 59px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 18px; background: var(--yellow); transform: rotate(-5deg); }
.core-ring span { display:block; width: 44px; height: 44px; transform: rotate(5deg); }
.core-ring span img { width:100%; height:100%; object-fit: contain; }
.flow-core strong { font-size: 18px; }
.flow-core small { margin-top: 5px; color: #9fadd0; font-size: 9px; }
.flow-node { position: absolute; z-index: 3; width: 190px; min-height: 145px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.055); box-shadow: 0 18px 45px rgba(0,0,0,.14); backdrop-filter: blur(8px); }
.flow-node > span { position: absolute; right: 14px; top: 10px; color: rgba(255,255,255,.15); font-size: 27px; font-weight: 950; }
.flow-node i { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 14px; background: rgba(255,212,59,.13); font-size: 22px; font-style: normal; }
.flow-node strong, .flow-node small { display: block; }
.flow-node strong { font-size: 15px; }
.flow-node small { margin-top: 7px; color: #aab7d3; font-size: 10px; }
.node-order { left: 0; top: 55px; }
.node-kitchen { right: 0; top: 55px; }
.node-cash { right: 0; bottom: 55px; }
.node-data { left: 0; bottom: 55px; }
.flow-line { position: absolute; z-index: 2; color: var(--yellow); font-weight: 950; opacity: .8; }
.flow-line::before { content: ""; position: absolute; border: 1px dashed rgba(255,212,59,.38); }
.line-a { left: 190px; top: 128px; width: calc(50% - 185px); text-align: center; }
.line-a::before { left: 0; right: 0; top: 9px; }
.line-b { right: 91px; top: 200px; height: calc(50% - 182px); }
.line-b::before { top: 0; bottom: 0; left: 5px; }
.line-c { left: 50%; bottom: 181px; height: 53px; }
.line-c::before { top: 0; bottom: 0; left: 4px; }

.feature-section { background: white; }
.feature-tabs { display: flex; gap: 7px; padding: 7px; margin-bottom: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); scrollbar-width: none; }
.feature-tabs::-webkit-scrollbar { display: none; }
.feature-tab { flex: 1; min-width: 118px; padding: 13px 14px; border: 0; border-radius: 10px; color: #667085; background: transparent; font-size: 13px; font-weight: 850; }
.feature-tab.active { color: white; background: var(--navy); box-shadow: 0 9px 20px rgba(7,25,66,.15); }
.feature-showcase { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 530px; overflow: hidden; border: 1px solid var(--line); border-radius: 27px; background: var(--paper); }
.feature-copy { align-self: center; padding: 55px; }
.feature-copy > span { color: var(--blue); font-size: 11px; font-weight: 950; letter-spacing: 1.4px; }
.feature-copy h3 { margin: 12px 0 17px; color: var(--navy); font-size: 35px; line-height: 1.1; letter-spacing: -1.5px; }
.feature-copy > p { margin: 0; color: var(--muted); line-height: 1.72; }
.feature-copy ul { display: grid; gap: 12px; margin: 26px 0; padding: 0; list-style: none; }
.feature-copy li { position: relative; padding-left: 26px; color: #475467; font-size: 14px; line-height: 1.48; }
.feature-copy li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #e9f0ff; font-size: 10px; font-weight: 950; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 14px; font-weight: 900; }
.text-link b { transition: transform .2s; }
.text-link:hover b { transform: translateX(5px); }
.feature-ui { min-width: 0; display: flex; align-items: center; padding: 42px 0 42px 32px; background: linear-gradient(135deg, #eaf0ff 0%, #f9fbff 76%); }
.ui-window { width: 107%; overflow: hidden; border: 1px solid #d9e1ee; border-radius: 20px 0 0 20px; background: white; box-shadow: 0 30px 65px rgba(7,25,66,.18); }
.ui-top { height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 17px; border-bottom: 1px solid #e6eaf1; color: #8995a7; }
.ui-top > span { width: 7px; height: 7px; border-radius: 50%; background: #d8dee8; }
.ui-top strong { margin-left: 9px; color: var(--navy); font-size: 11px; }
.ui-top b { margin-left: auto; padding: 6px 9px; border-radius: 7px; color: #184bb8; background: #eaf1ff; font-size: 8px; }
.ui-sales-grid { min-height: 380px; display: grid; grid-template-columns: 92px 1fr 185px; }
.ui-categories { display: flex; flex-direction: column; gap: 6px; padding: 14px 9px; border-right: 1px solid #e8ecf2; background: #fbfcfe; }
.ui-categories button { padding: 9px 7px; border: 0; border-radius: 7px; color: #7a8799; background: transparent; font-size: 7px; text-align: left; }
.ui-categories button.active { color: var(--blue); background: #edf3ff; font-weight: 900; }
.ui-products { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 10px; padding: 15px; }
.ui-products button { min-height: 98px; padding: 10px; border: 1px solid #e6eaf1; border-radius: 12px; background: white; text-align: left; box-shadow: 0 4px 10px rgba(7,25,66,.03); }
.ui-products i { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 9px; background: #fff5d6; font-size: 19px; font-style: normal; }
.ui-products strong, .ui-products small { display: block; }
.ui-products strong { color: var(--navy); font-size: 8px; }
.ui-products small { margin-top: 5px; color: var(--blue); font-size: 8px; font-weight: 900; }
.ui-ticket { position: relative; padding: 15px; border-left: 1px solid #e8ecf2; }
.ui-ticket > div:first-child { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid #edf0f4; }
.ui-ticket > div:first-child strong { color: var(--navy); font-size: 9px; }
.ui-ticket > div:first-child span { color: #919cad; font-size: 7px; }
.ui-ticket article { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.ui-ticket article > b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: #edf3ff; font-size: 7px; }
.ui-ticket article span, .ui-ticket article span small { display: block; }
.ui-ticket article span { color: var(--navy); font-size: 8px; }
.ui-ticket article span small { margin-top: 3px; color: #98a2b3; font-size: 6px; }
.ui-ticket article > strong { color: var(--navy); font-size: 8px; }
.ui-total { display: flex; justify-content: space-between; margin-top: 25px; color: var(--navy); }
.ui-total span { font-size: 9px; }
.ui-total strong { font-size: 15px; }
.ui-ticket > button { position: absolute; left: 15px; right: 15px; bottom: 15px; padding: 11px; border: 0; border-radius: 9px; color: white; background: var(--blue); font-size: 8px; font-weight: 900; }
.feature-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 25px; }
.feature-card { min-height: 260px; padding: 27px; border: 1px solid var(--line); border-radius: 21px; background: white; transition: transform .25s, box-shadow .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-5px); border-color: rgba(24,89,232,.3); box-shadow: var(--shadow-soft); }
.feature-icon { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 14px; color: var(--blue); background: var(--soft-blue); font-size: 17px; font-weight: 1000; }
.feature-card h3 { margin: 0 0 11px; color: var(--navy); font-size: 19px; }
.feature-card p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.67; }
.feature-card > span { color: var(--blue); font-size: 12px; font-weight: 850; }

.method-section { position: relative; overflow: hidden; background: linear-gradient(145deg, #071942, #0c2a68); color: white; }
.method-section::after { content: ""; position: absolute; right: -170px; top: -290px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(46,117,255,.25), transparent 68%); }
.method-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .75fr 1.25fr; gap: 95px; }
.method-intro { position: sticky; top: 125px; align-self: start; }
.method-steps { position: relative; }
.method-steps::before { content: ""; position: absolute; left: 34px; top: 34px; bottom: 55px; width: 1px; background: rgba(255,255,255,.14); }
.method-step { position: relative; z-index: 2; display: grid; grid-template-columns: 69px 1fr; gap: 23px; padding-bottom: 43px; opacity: .74; transition: opacity .2s; }
.method-step:hover, .method-step.active { opacity: 1; }
.method-step > span { width: 69px; height: 69px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; color: white; background: #0c285f; font-size: 13px; font-weight: 950; }
.method-step.active > span { border-color: var(--yellow); color: var(--navy); background: var(--yellow); box-shadow: 0 13px 30px rgba(255,212,59,.15); }
.method-step small { color: var(--yellow); font-size: 10px; font-weight: 950; letter-spacing: 1.4px; }
.method-step h3 { margin: 5px 0 8px; font-size: 22px; }
.method-step p { margin: 0; color: #aebbd6; font-size: 14px; line-height: 1.65; }

.business-section { background: var(--paper); }
.business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.business-card { position: relative; min-height: 260px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; transition: transform .25s, box-shadow .25s; }
.business-card::after { content: ""; position: absolute; right: -65px; top: -65px; width: 150px; height: 150px; border-radius: 50%; background: var(--card-soft, #edf3ff); }
.business-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.business-emoji { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 27px; border-radius: 17px; background: var(--card-soft, #edf3ff); font-size: 28px; }
.business-card h3 { position: relative; z-index: 2; margin: 0 0 10px; color: var(--navy); font-size: 21px; }
.business-card p { position: relative; z-index: 2; margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.business-card a { position: relative; z-index: 2; color: var(--blue); font-size: 12px; font-weight: 900; }
.business-card.coffee { --card-soft: #fff3d7; }
.business-card.fast { --card-soft: #ffe9e4; }
.business-card.tacos { --card-soft: #eaf8e8; }
.business-card.pizza { --card-soft: #fff0ea; }
.business-card.bar { --card-soft: #f1eaff; }
.business-card.truck { --card-soft: #e6f8ff; }
.business-card.dark { --card-soft: #e9edf5; }
.business-card.chain { --card-soft: #fff7cd; }

.roi-section { background: white; }
.roi-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; align-items: center; }
.roi-copy > p { margin: 23px 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.roi-note { padding: 16px 18px; border-left: 4px solid var(--yellow); border-radius: 0 11px 11px 0; color: #56647a; background: var(--soft-yellow); font-size: 12px; line-height: 1.55; }
.roi-calculator { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-soft); }
.roi-calculator label { position: relative; display: block; margin-bottom: 28px; color: var(--navy); font-size: 13px; font-weight: 850; }
.roi-calculator output { position: absolute; right: 0; top: -3px; color: var(--blue); font-size: 14px; font-weight: 950; }
.roi-calculator input[type="range"] { width: 100%; height: 5px; margin-top: 17px; appearance: none; border-radius: 5px; background: linear-gradient(to right, var(--blue) var(--progress, 50%), #dfe5ee var(--progress, 50%)); outline: none; }
.roi-calculator input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; appearance: none; border: 4px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 3px 10px rgba(24,89,232,.32); }
.roi-calculator input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 3px 10px rgba(24,89,232,.32); }
.roi-result { display: flex; flex-direction: column; align-items: center; margin: 7px 0 21px; padding: 24px; border-radius: 18px; color: white; background: var(--navy); text-align: center; }
.roi-result small { color: #b9c6df; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.roi-result strong { margin: 8px 0 4px; color: var(--yellow); font-size: 38px; line-height: 1; }
.roi-result span { color: #aebbd5; font-size: 11px; }

.reports-section { overflow: hidden; background: var(--paper); }
.reports-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 85px; align-items: center; }
.report-dashboard { overflow: hidden; border: 1px solid #dfe5ee; border-radius: 24px; background: white; box-shadow: var(--shadow); }
.report-top { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e7ebf1; }
.report-top > div { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 12px; }
.report-top > div span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--yellow); font-weight: 1000; }
.report-top > small { color: #0c9657; font-size: 8px; }
.report-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 18px 0; }
.report-kpis article { padding: 15px; border: 1px solid #e5e9f0; border-radius: 13px; background: #fbfcfe; }
.report-kpis small, .report-kpis strong, .report-kpis em { display: block; }
.report-kpis small { color: #8b96a8; font-size: 8px; }
.report-kpis strong { margin: 6px 0 4px; color: var(--navy); font-size: 18px; }
.report-kpis em { color: #079052; font-size: 8px; font-style: normal; font-weight: 850; }
.report-content { display: grid; grid-template-columns: 1.16fr .84fr; gap: 13px; padding: 13px 18px 18px; }
.bar-chart, .top-list { min-height: 260px; padding: 16px; border: 1px solid #e5e9f0; border-radius: 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; }
.chart-head strong { color: var(--navy); font-size: 10px; }
.chart-head span { color: #909bab; font-size: 7px; }
.bars { height: 188px; display: flex; align-items: end; gap: 12px; padding: 25px 5px 0; border-bottom: 1px solid #e9edf3; background-image: linear-gradient(#eef1f5 1px, transparent 1px); background-size: 100% 47px; }
.bars i { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 1px 1px; background: linear-gradient(to top, var(--blue), #4e8cff); }
.bars i b { position: absolute; left: 50%; bottom: -22px; color: #8b96a8; font-size: 7px; font-style: normal; transform: translateX(-50%); }
.top-list article { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.top-list article i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #fff4d2; font-size: 13px; font-style: normal; }
.top-list article span { color: #59667a; font-size: 7px; }
.top-list article b { color: var(--navy); font-size: 8px; }
.reports-copy > p { margin: 23px 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.check-list { display: grid; gap: 12px; margin: 25px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 27px; color: #475467; font-size: 13px; line-height: 1.5; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #e9f0ff; font-size: 10px; font-weight: 950; }

.pricing-section { background: white; }
.billing-toggle { display: inline-flex; gap: 5px; margin-top: 27px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.billing-toggle button { padding: 10px 15px; border: 0; border-radius: 9px; color: #69758a; background: transparent; font-size: 12px; font-weight: 850; }
.billing-toggle button.active { color: white; background: var(--navy); }
.billing-toggle button span { margin-left: 5px; padding: 3px 6px; border-radius: 20px; color: #7a5800; background: var(--yellow); font-size: 8px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; transition: transform .25s, box-shadow .25s; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.price-card.featured { border: 2px solid var(--blue); box-shadow: 0 22px 60px rgba(24,89,232,.15); }
.popular-ribbon { position: absolute; top: -15px; left: 50%; padding: 7px 14px; border-radius: 30px; color: var(--navy); background: var(--yellow); box-shadow: 0 8px 18px rgba(255,191,32,.28); font-size: 9px; font-weight: 950; letter-spacing: .8px; transform: translateX(-50%); }
.price-head > span { color: var(--blue); font-size: 10px; font-weight: 950; letter-spacing: 1.4px; }
.price-head h3 { margin: 8px 0 9px; color: var(--navy); font-size: 25px; }
.price-head p { min-height: 63px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.price { display: flex; align-items: flex-start; margin: 26px 0 3px; color: var(--navy); }
.price small { margin-top: 7px; font-size: 17px; font-weight: 900; }
.price strong { font-size: 51px; line-height: 1; letter-spacing: -2px; }
.price span { align-self: end; margin: 0 0 6px 5px; color: #7b8798; font-size: 11px; }
.annual-note { min-height: 17px; margin-bottom: 18px; color: var(--green); font-size: 10px; font-weight: 800; opacity: 0; }
body.annual-pricing .annual-note { opacity: 1; }
.price-card ul { display: grid; gap: 11px; margin: 26px 0 0; padding: 25px 0 0; border-top: 1px solid var(--line); list-style: none; }
.price-card li { position: relative; padding-left: 24px; color: #536176; font-size: 12px; line-height: 1.45; }
.price-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 950; }
.pricing-disclaimer { max-width: 850px; margin: 26px auto 0; color: #8a95a6; font-size: 11px; line-height: 1.6; text-align: center; }

.equipment-section { background: var(--paper); }
.equipment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.equipment-card { padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: transform .25s, box-shadow .25s; }
.equipment-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.equipment-art { position: relative; height: 180px; margin-bottom: 23px; overflow: hidden; border-radius: 17px; background: linear-gradient(145deg, #eaf0ff, #f9fbff); }
.equipment-card > span { color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: 1.4px; }
.equipment-card h3 { margin: 7px 0 9px; color: var(--navy); font-size: 20px; }
.equipment-card p { min-height: 61px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.equipment-card ul { display: grid; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.equipment-card li { position: relative; padding-left: 18px; color: #536176; font-size: 11px; }
.equipment-card li::before { content: "•"; position: absolute; left: 2px; color: var(--yellow-2); font-size: 18px; line-height: 11px; }
.equipment-link { color: var(--blue); font-size: 12px; font-weight: 900; }
.pos-kit .monitor { position: absolute; left: 48px; top: 28px; width: 105px; height: 76px; display: grid; place-items: center; border: 7px solid #17294f; border-radius: 8px; color: var(--navy); background: var(--yellow); font-size: 30px; font-weight: 1000; box-shadow: 0 12px 20px rgba(7,25,66,.15); }
.pos-kit .monitor::after { content: ""; position: absolute; left: 35px; bottom: -24px; width: 35px; height: 18px; border-bottom: 7px solid #17294f; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.pos-kit .printer { position: absolute; right: 32px; bottom: 28px; width: 66px; height: 50px; display: grid; place-items: center; border-radius: 8px; color: #394965; background: white; box-shadow: 0 10px 20px rgba(7,25,66,.16); font-size: 23px; }
.pos-kit .drawer { position: absolute; left: 35px; bottom: 20px; width: 112px; height: 35px; border-radius: 6px; background: #273753; box-shadow: inset 0 0 0 3px #182846; }
.waiter-kit .tablet { position: absolute; left: 50%; top: 50%; width: 98px; height: 138px; display: grid; place-items: center; border: 7px solid #17294f; border-radius: 13px; background: white; box-shadow: 0 16px 28px rgba(7,25,66,.19); transform: translate(-50%, -50%) rotate(-6deg); }
.waiter-kit .tablet i { width: 70px; height: 90px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: #edf3ff; font-size: 30px; font-style: normal; }
.waiter-kit .wifi { position: absolute; right: 29px; top: 25px; color: var(--blue); font-size: 18px; font-weight: 950; transform: rotate(-32deg); }
.kitchen-kit .screen { position: absolute; left: 50%; top: 50%; width: 175px; height: 108px; padding: 15px; border: 8px solid #17294f; border-radius: 10px; background: white; box-shadow: 0 15px 30px rgba(7,25,66,.18); transform: translate(-50%, -50%); }
.kitchen-kit .screen i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: var(--yellow); font-size: 11px; font-style: normal; font-weight: 950; }
.kitchen-kit .screen b { position: absolute; right: 15px; top: 17px; padding: 5px 8px; border-radius: 20px; color: #946200; background: #fff4d0; font-size: 7px; }
.kitchen-kit .screen::after { content: "Hamburguesa  ·  Papas  ·  Bebida"; position: absolute; left: 15px; right: 15px; bottom: 18px; color: #56647a; font-size: 7px; }
.kitchen-kit .bell { position: absolute; right: 29px; bottom: 25px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 950; box-shadow: 0 8px 18px rgba(18,183,106,.25); }
.full-kit span { position: absolute; display: grid; place-items: center; border: 6px solid #17294f; color: var(--navy); background: white; font-weight: 950; box-shadow: 0 12px 25px rgba(7,25,66,.16); }
.full-kit .device-a { left: 31px; top: 48px; width: 89px; height: 69px; border-radius: 8px; background: var(--yellow); font-size: 25px; }
.full-kit .device-b { right: 38px; top: 25px; width: 60px; height: 89px; border-radius: 10px; color: var(--blue); font-size: 21px; transform: rotate(5deg); }
.full-kit .device-c { right: 45px; bottom: 21px; width: 93px; height: 55px; border-radius: 8px; color: var(--navy); font-size: 15px; }

.implementation-section { position: relative; overflow: hidden; background: var(--navy); color: white; }
.implementation-section::before { content: ""; position: absolute; right: -130px; bottom: -230px; width: 550px; height: 550px; border-radius: 50%; background: radial-gradient(circle, rgba(255,212,59,.13), transparent 70%); }
.implementation-layout { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: center; }
.implementation-timeline { display: grid; gap: 13px; }
.implementation-timeline article { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.045); }
.implementation-timeline article > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: var(--navy); background: var(--yellow); font-size: 11px; font-weight: 950; }
.implementation-timeline strong { font-size: 15px; }
.implementation-timeline p { margin: 4px 0 0; color: #aebbd6; font-size: 12px; line-height: 1.55; }

.faq-section { background: white; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 85px; }
.faq-intro { align-self: start; position: sticky; top: 125px; }
.faq-intro > p { margin: 22px 0 25px; color: var(--muted); line-height: 1.7; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; border: 0; color: var(--navy); background: transparent; text-align: left; font-size: 16px; font-weight: 850; }
.accordion-item button b { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--soft-blue); font-size: 18px; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .33s ease; }
.accordion-content p { margin: 0; padding: 0 50px 22px 2px; color: var(--muted); font-size: 14px; line-height: 1.72; }
.accordion-item.open .accordion-content { max-height: 210px; }

.demo-section { position: relative; overflow: hidden; padding: 110px 0; color: white; background: linear-gradient(140deg, #071942 0%, #0c2a68 70%, #10377e 100%); }
.demo-shape { position: absolute; border-radius: 50%; }
.demo-shape-a { width: 680px; height: 680px; right: -260px; top: -300px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.015); }
.demo-shape-b { width: 430px; height: 430px; left: -230px; bottom: -260px; background: radial-gradient(circle, rgba(255,212,59,.15), transparent 68%); }
.demo-layout { position: relative; display: grid; grid-template-columns: .83fr 1.17fr; gap: 85px; align-items: center; }
.demo-copy > p { max-width: 540px; }
.demo-benefits { display: grid; gap: 13px; margin: 30px 0; }
.demo-benefits article { display: flex; align-items: center; gap: 13px; }
.demo-benefits article > b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: var(--yellow); background: rgba(255,255,255,.05); font-size: 10px; }
.demo-benefits strong, .demo-benefits small { display: block; }
.demo-benefits strong { font-size: 14px; }
.demo-benefits small { margin-top: 3px; color: #aebbd6; font-size: 11px; }
.contact-data { display: grid; gap: 10px; color: #b9c5dc; font-size: 12px; }
.contact-data a:hover { color: var(--yellow); }
.lead-form { padding: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; color: var(--ink); background: white; box-shadow: 0 35px 80px rgba(0,0,0,.25); }
.form-heading { margin-bottom: 24px; }
.form-heading > span { color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: 1.4px; }
.form-heading h3 { margin: 6px 0; color: var(--navy); font-size: 27px; }
.form-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.form-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.lead-form label { display: block; margin-bottom: 14px; color: #344054; font-size: 11px; font-weight: 850; }
.lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid #dce2eb; border-radius: 10px; color: var(--ink); background: #fbfcfe; outline: none; transition: border-color .2s, box-shadow .2s; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,89,232,.1); }
.lead-form input.invalid, .lead-form select.invalid, .lead-form textarea.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.lead-form textarea { resize: vertical; }
.privacy-check { display: flex !important; gap: 9px; align-items: flex-start; color: #687588 !important; font-weight: 600 !important; line-height: 1.45; }
.privacy-check input { margin-top: 2px; accent-color: var(--blue); }
.form-status { min-height: 20px; margin-top: 10px; font-size: 12px; font-weight: 750; text-align: center; }
.form-status.success { color: var(--green); }
.form-status.error { color: var(--red); }
.form-small { display: block; margin-top: 8px; color: #929dad; font-size: 9px; text-align: center; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.submit-button.loading { opacity: .75; pointer-events: none; }
.submit-button.loading span::after { content: "…"; }

.site-footer { padding: 68px 0 22px; color: #aebbd6; background: #05132f; }
.footer-grid { display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); gap: 55px; }
.footer-brand img { height: 55px; width: auto; }
.footer-brand-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.footer-brand-head img { width:72px; height:72px; object-fit:contain; }
.footer-brand-head strong { display:block; font-size:1.1rem; color:#fff; }
.footer-brand-head span { display:block; color:#b7c3d6; font-size:.92rem; }
.footer-brand p { max-width: 360px; margin: 20px 0; color: #8998b5; font-size: 13px; line-height: 1.7; }
.site-footer h3 { margin: 0 0 18px; color: white; font-size: 13px; }
.site-footer .footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 11px; }
.site-footer .footer-grid a, .site-footer .footer-grid span { font-size: 12px; }
.site-footer .footer-grid a:hover { color: var(--yellow); }
.social-links { display: flex; gap: 9px; }
.social-links a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: white; background: rgba(255,255,255,.04); font-weight: 900; }
.social-links a:hover { border-color: var(--yellow); color: var(--navy) !important; background: var(--yellow); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; }
.footer-bottom b { color: var(--yellow); }

.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 9px; padding: 9px 9px 9px 15px; border-radius: 30px; color: white; background: #21b866; box-shadow: 0 14px 34px rgba(33,184,102,.35); font-size: 12px; font-weight: 900; }
.whatsapp-float b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 18px; }
.mobile-cta { display: none; }
.toast { position: fixed; left: 50%; bottom: -90px; z-index: 100; min-width: 260px; max-width: calc(100% - 30px); padding: 14px 18px; border-radius: 12px; color: white; background: var(--navy); box-shadow: 0 20px 50px rgba(7,25,66,.3); font-size: 12px; font-weight: 750; text-align: center; transform: translateX(-50%); transition: bottom .25s; }
.toast.show { bottom: 24px; }

@media (max-width: 1100px) {
  .main-nav { gap: 17px; font-size: 12px; }
  .hero-layout { gap: 30px; }
  .hero-product { min-height: 540px; }
  .phone-order { right: -5px; }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-layout, .method-layout, .roi-layout, .reports-layout, .implementation-layout, .demo-layout { gap: 55px; }
  .feature-card-grid { grid-template-columns: repeat(2, 1fr); }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .business-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.35fr repeat(3, 1fr); gap: 30px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 85px; }
  .section { padding: 86px 0; }
  .top-strip-inner { justify-content: space-between; }
  .menu-button { display: block; }
  .main-nav { position: fixed; inset: 116px 16px auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; padding: 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 25px 70px rgba(7,25,66,.2); opacity: 0; pointer-events: none; transition: max-height .3s, padding .3s, opacity .2s; }
  .main-nav.open { max-height: 550px; padding: 16px 18px; opacity: 1; pointer-events: auto; }
  .main-nav > a { padding: 13px 4px; border-bottom: 1px solid #eef1f5; }
  .main-nav > a::after { display: none; }
  .main-nav .nav-cta { margin-top: 10px; border-bottom: 0; text-align: center; }
  .hero { padding-top: 65px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy > p, .hero-mini-proof { margin-inline: auto; }
  .hero-actions, .hero-bullets { justify-content: center; }
  .hero-product { width: min(100%, 720px); min-height: 570px; margin-inline: auto; }
  .hero-channel-bar { flex-wrap: wrap; }
  .hero-channel-bar > span { width: 100%; text-align: center; }
  .hero-channel-bar div { border-left: 0; padding-left: 0; }
  .section-heading.split { grid-template-columns: 1fr; gap: 18px; }
  .section-heading.split > p { max-width: 720px; }
  .solution-layout, .method-layout, .roi-layout, .reports-layout, .implementation-layout, .demo-layout, .faq-layout { grid-template-columns: 1fr; }
  .flow-visual { width: min(100%, 700px); margin-inline: auto; }
  .method-intro, .faq-intro { position: static; }
  .feature-showcase { grid-template-columns: 1fr; }
  .feature-ui { padding: 20px; }
  .ui-window { width: 100%; border-radius: 18px; }
  .business-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 650px; margin-inline: auto; }
  .price-head p { min-height: auto; }
  .report-dashboard { order: 2; }
  .reports-copy { order: 1; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 26px), var(--container)); }
  .section { padding: 72px 0; }
  .top-strip { display: none; }
  .site-header { top: 0; }
  .nav-shell { min-height: 70px; }
  .brand img { height: 50px; }
  .main-nav { inset: 78px 10px auto; }
  .hero { padding-top: 48px; }
  .hero-copy h1 { font-size: 45px; letter-spacing: -2.8px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-bullets { align-items: flex-start; flex-direction: column; width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .hero-mini-proof { grid-template-columns: 1fr; }
  .hero-product { min-height: 430px; margin-top: 15px; }
  .pos-window { transform: none; border-radius: 18px; }
  .pos-topbar { height: 45px; padding: 0 11px; }
  .pos-mini-logo strong, .pos-top-actions small { display: none; }
  .pos-body { min-height: 342px; grid-template-columns: 42px 1fr; }
  .pos-sidebar { padding: 10px 5px; }
  .pos-sidebar button { width: 31px; height: 31px; font-size: 14px; }
  .pos-content { padding: 12px; }
  .kpi-grid { gap: 6px; }
  .kpi-grid article { padding: 9px; }
  .kpi-grid strong { font-size: 12px; }
  .kpi-grid article:last-child { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-lower-grid { grid-template-columns: 1fr; }
  .live-orders { display: none; }
  .table-cells button { min-height: 39px; }
  .phone-order { right: -2px; bottom: -8px; width: 132px; padding: 5px; border-radius: 22px; }
  .phone-screen { min-height: 228px; padding: 7px; border-radius: 17px; }
  .food-card { grid-template-columns: 31px 1fr 16px; gap: 4px; margin-top: 7px; padding: 5px; }
  .food-card > span { width: 30px; height: 30px; font-size: 14px; }
  .food-card button { width: 16px; height: 16px; padding: 0; font-size: 8px; }
  .cart-bar { left: 12px; right: 12px; bottom: 11px; padding: 6px; }
  .cart-bar button { padding: 5px; }
  .float-chip { display: none; }
  .hero-channel-bar { gap: 10px 16px; margin-top: 36px; border-radius: 16px 16px 0 0; font-size: 11px; }
  .section-heading h2, .solution-copy h2, .method-intro h2, .reports-copy h2, .roi-copy h2, .faq-intro h2, .implementation-copy h2, .demo-copy h2 { font-size: 38px; letter-spacing: -1.8px; }
  .problem-grid, .feature-card-grid, .business-grid, .equipment-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: 250px; }
  .solution-layout { gap: 45px; }
  .flow-visual { min-height: 640px; }
  .flow-node { width: 150px; min-height: 132px; padding: 16px; }
  .node-order { left: 0; top: 35px; }
  .node-kitchen { right: 0; top: 35px; }
  .node-data { left: 0; bottom: 35px; }
  .node-cash { right: 0; bottom: 35px; }
  .flow-core { width: 155px; height: 155px; }
  .flow-line { display: none; }
  .feature-tabs { margin-inline: -2px; }
  .feature-showcase { min-height: auto; }
  .feature-copy { padding: 32px 25px; }
  .feature-copy h3 { font-size: 29px; }
  .feature-ui { padding: 12px; }
  .ui-sales-grid { min-height: 310px; grid-template-columns: 62px 1fr; }
  .ui-ticket { display: none; }
  .ui-products { grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 9px; }
  .ui-products button { min-height: 83px; }
  .method-layout { gap: 45px; }
  .method-step { grid-template-columns: 55px 1fr; gap: 15px; }
  .method-step > span { width: 55px; height: 55px; border-radius: 16px; }
  .method-steps::before { left: 27px; }
  .roi-calculator { padding: 24px 18px; }
  .report-kpis { grid-template-columns: 1fr 1fr; }
  .report-kpis article:last-child { display: none; }
  .report-content { grid-template-columns: 1fr; }
  .top-list { min-height: auto; }
  .price-card { padding: 27px 23px; }
  .implementation-timeline article { grid-template-columns: 45px 1fr; }
  .implementation-timeline article > span { width: 45px; height: 45px; }
  .faq-layout { gap: 40px; }
  .lead-form { padding: 25px 18px; }
  .form-grid.two { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .whatsapp-float { display: none; }
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #dce3ed; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px rgba(7,25,66,.1); }
  .mobile-cta a { padding: 12px 8px; border-radius: 10px; color: var(--navy); background: var(--soft-blue); font-size: 12px; font-weight: 900; text-align: center; }
  .mobile-cta a:last-child { color: var(--navy); background: var(--yellow); }
  .site-footer { padding-bottom: 90px; }
}

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