:root {
    --orange:#ff5a2a;
    --ink:#101820;
    --muted:#596674;
    --green:#35bf7b;
    --border:#e7ebef
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}

body {
    margin:0;
    background:white;
    color:var(--ink);
    font-family:Inter,Arial,sans-serif;
    font-size:16px;
    -webkit-font-smoothing:antialiased
}

button,a {
    -webkit-tap-highlight-color:transparent
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit;
    cursor:pointer
}

button:focus-visible,a:focus-visible {
    outline:3px solid #2585ce;
    outline-offset:4px
}

img {
    display:block;
    max-width:100%
}

h1,h2,h3,h4,p {
    margin:0
}

h1,h2 {
    font-weight:800;
    letter-spacing:-.045em
}

h2 {
    font-size:36px;
    line-height:1.08
}

p {
    color:var(--muted);
    line-height:1.45
}

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

.icon-definitions {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}

.icon {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}

.site-header {
    height:66px;
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.95);
    border-bottom:1px solid #f1f3f5
}

.header-inner {
    height:100%;
    display:flex;
    align-items:center;
    gap:28px
}

.brand-lockup {
    display:inline-flex;
    align-items:center;
    gap:8px;
    line-height:1
}

.brand-mark {
    width:25px;
    height:29px;
    color:var(--orange)
}

.brand-lockup strong {
    font-size:21px;
    letter-spacing:-1.1px;
    display:block;
    font-weight:800
}

.brand-lockup small {
    display:block;
    text-align:right;
    font-size:8px;
    margin-top:3px;
    letter-spacing:0
}

.desktop-nav {
    display:flex;
    gap:20px;
    align-items:center;
    flex:1;
    white-space:nowrap
}

.desktop-nav a {
    font-size:14px;
    font-weight:500
}

.desktop-nav a:hover,.feature-nav a:hover {
    color:var(--orange)
}

.header-actions {
    display:flex;
    gap:14px;
    align-items:center
}

.button {
    height:46px;
    border-radius:8px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
    border:1px solid transparent;
    transition:background .15s
}

.button .icon {
    width:17px;
    height:17px
}

.primary {
    background:var(--orange);
    color:white
}

.primary:hover {
    background:#e94a1d
}

.secondary {
    background:white;
    border-color:var(--border);
    box-shadow:0 2px 5px #10182004
}

.secondary:hover {
    background:#f7f9fa
}

.header-actions .button {
    height:43px;
    padding-inline:23px;
    font-size:12px
}

.menu-toggle,.mobile-nav {
    display:none
}

.hero {
    height:490px;
    position:relative;
    overflow:hidden;
    background:#fbfcfd
}

.hero-scene {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#fbfcfd 0%,#fbfcfdfc 32%,#fbfcfd9c 48%,transparent 65%),url('pos-terminal.png') 100% 48%/72% auto no-repeat;
    filter:blur(3px);
    opacity:.8
}

.hero-inner {
    position:relative;
    height:100%;
    display:flex;
    align-items:center
}

.hero-copy {
    width:53%;
    z-index:3;
    padding-top:5px
}

.eyebrow {
    display:inline-block;
    background:#eaf0f6;
    color:#4d5c6d;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    padding:7px 16px;
    line-height:1;
    letter-spacing:.02em
}

.hero h1 {
    font-size:48px;
    line-height:1.05;
    margin-top:15px;
    margin-bottom:18px
}

.hero-copy>p {
    font-size:17px;
    max-width:470px
}

.hero-actions {
    display:flex;
    gap:15px;
    margin-top:25px
}

.trust-items {
    display:flex;
    list-style:none;
    padding:0;
    gap:20px;
    margin:42px 0 0;
    white-space:nowrap
}

.trust-items li {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:500
}

.trust-items .icon {
    width:15px;
    height:15px;
    background:#d9f0e2;
    color:#3a9564;
    border-radius:50%;
    padding:2px
}

.hero-products {
    position:absolute;
    width:61%;
    height:100%;
    right:-36px;
    top:0
}

.hero-terminal {
    position:absolute;
    width:90%;
    height:87%;
    object-fit:cover;
    right:26px;
    top:25px;
    mix-blend-mode:multiply;
    border-radius:14px
}

.hero-phone {
    position:absolute;
    width:178px;
    height:300px;
    left:12%;
    top:160px;
    transform:rotate(7deg);
    z-index:2
}

.phone {
    height:100%;
    width:100%;
    background:#111;
    border-radius:31px;
    border:3px solid #62666a;
    padding:7px;
    box-shadow:0 3px 7px #10182035;
    position:relative;
    overflow:hidden
}

.phone-notch {
    position:absolute;
    top:7px;
    left:29%;
    width:42%;
    height:15px;
    border-radius:0 0 12px 12px;
    background:#111;
    z-index:2
}

.phone-screen {
    height:100%;
    background:#fff;
    overflow:hidden;
    border-radius:22px;
    padding-top:13px
}

.phone-heading {
    font-size:9px;
    padding:10px 9px;
    display:flex;
    gap:4px;
    align-items:center;
    font-weight:700
}

.mini-mark {
    font-size:10px;
    color:white;
    background:var(--orange);
    border-radius:4px;
    padding:1px 3px
}

.phone-tools {
    margin-left:auto;
    font-size:9px
}

.phone-banner {
    height:104px;
    position:relative;
    overflow:hidden
}

.phone-banner img {
    width:100%;
    height:100%;
    object-fit:cover
}

.phone-banner:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0008,transparent)
}

.phone-banner strong {
    position:absolute;
    z-index:1;
    left:12px;
    top:23px;
    color:white;
    font-size:20px;
    line-height:1.05;
    letter-spacing:-.04em
}

.order-toggle {
    margin:-10px 10px 0;
    display:flex;
    border-radius:9px;
    box-shadow:0 2px 4px #0001;
    position:relative;
    background:#fff;
    font-size:10px;
    font-weight:600
}

.order-toggle>span {
    flex:1;
    display:flex;
    gap:4px;
    justify-content:center;
    align-items:center;
    padding:11px 0
}

.order-toggle>span:first-child {
    color:var(--orange)
}

.order-toggle .icon {
    width:12px;
    height:12px
}

.phone-address {
    font-size:7px;
    display:flex;
    align-items:center;
    gap:3px;
    padding:10px
}

.phone-address .icon {
    width:10px;
    height:10px
}

.phone-address span {
    margin-left:auto;
    color:#5b7188
}

.phone-tabs {
    display:flex;
    gap:6px;
    padding:0 9px 10px;
    white-space:nowrap
}

.phone-tabs>* {
    font-size:7px;
    padding:5px 6px;
    border-radius:999px;
    background:#f4f5f7
}

.phone-tabs b {
    background:var(--orange);
    color:white
}

.phone-products {
    display:flex;
    gap:8px;
    padding:6px 10px
}

.phone-products img {
    width:60px;
    height:52px;
    object-fit:cover;
    border-radius:7px
}

.phone-products div {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px
}

.phone-products strong,.phone-products b {
    font-size:9px
}

.phone-products small {
    font-size:6px;
    color:#6f7983
}

.phone-cart {
    padding:10px;
    display:flex;
    justify-content:space-between;
    font-size:9px
}

.phone-cart span {
    background:var(--orange);
    padding:4px 12px;
    color:white;
    border-radius:4px
}

.hero-phone .phone-banner {
    height:76px
}

.hero-phone .phone-banner strong {
    font-size:14px;
    top:20px
}

.hero-phone .phone-heading {
    font-size:6px;
    padding:7px
}

.hero-phone .phone-products img {
    width:42px;
    height:37px
}

.hero-phone .phone-products strong,.hero-phone .phone-products b {
    font-size:6px
}

.hero-phone .phone-products small {
    font-size:5px
}

.hero-phone .phone-tabs {
    gap:2px
}

.hero-phone .phone-tabs>* {
    font-size:5px;
    padding:4px
}

.new-order,.sales-card,.pickup-card {
    position:absolute;
    background:#fff;
    border:1px solid #ecedef;
    border-radius:10px;
    box-shadow:0 5px 8px #18222e0d;
    z-index:3
}

.new-order {
    right:-2px;
    top:107px;
    width:190px;
    padding:16px;
    display:flex;
    gap:11px;
    align-items:flex-start
}

.order-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff0e9;
    color:var(--orange);
    border-radius:12px;
    width:38px;
    height:38px;
    flex-shrink:0
}

.new-order strong,.pickup-card strong {
    display:block;
    font-size:11px;
    white-space:nowrap
}

.new-order small,.pickup-card small {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.new-order a {
    display:block;
    color:var(--orange);
    background:#fff0e9;
    width:max-content;
    margin:10px 0 0 auto;
    padding:3px 9px;
    border-radius:5px;
    font-size:9px;
    font-weight:600
}

.sales-card {
    right:-2px;
    top:225px;
    width:202px;
    padding:18px
}

.sales-card>small {
    font-size:10px;
    color:var(--muted)
}

.sales-total {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:7px
}

.sales-total strong {
    font-size:25px;
    letter-spacing:-.05em
}

.sales-total span {
    font-size:10px;
    color:#239a60;
    background:#e1f6e9;
    padding:5px 7px;
    border-radius:5px
}

.sales-card dl {
    margin:20px 0 0;
    font-size:10px
}

.sales-card dl>div {
    display:flex;
    justify-content:space-between;
    margin-top:9px
}

.sales-card dt {
    color:var(--muted)
}

.sales-card dd {
    margin:0;
    font-weight:600
}

.feature-nav {
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px
}

.feature-nav a {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:10px;
    font-size:11px;
    font-weight:500
}

.feature-nav .icon {
    width:25px;
    height:25px
}

.ecosystem {
    background:linear-gradient(#f8fafc,#fafcfd);
    padding:25px 0 24px;
    text-align:center
}

.ecosystem h2 {
    font-size:34px
}

.ecosystem>div>p {
    margin-top:10px;
    font-size:16px
}

.ecosystem-diagram {
    position:relative;
    max-width:920px;
    height:322px;
    margin:8px auto 0;
    display:grid;
    grid-template-columns:1fr 166px 1fr;
    align-items:center;
    gap:105px
}

.connections {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}

.ecosystem-nodes {
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative
}

.ecosystem-node {
    height:65px;
    width:240px;
    border-radius:16px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:24px;
    padding:14px 22px;
    text-align:left;
    box-shadow:0 4px 8px #e9edf23b
}

.ecosystem-node .icon {
    width:32px;
    height:32px
}

.ecosystem-node strong {
    display:block;
    font-size:13px;
    letter-spacing:-.02em
}

.ecosystem-node small {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:5px;
    white-space:nowrap
}

.left-nodes .ecosystem-node:nth-child(2) {
    transform:translateX(-33px)
}

.left-nodes .ecosystem-node:nth-child(3) {
    transform:translateX(-16px)
}

.right-nodes .ecosystem-node:nth-child(2) {
    transform:translateX(29px)
}

.right-nodes .ecosystem-node:nth-child(3) {
    transform:translateX(13px)
}

.ecosystem-brand {
    background:#fff;
    border-radius:30px;
    width:166px;
    height:160px;
    position:relative;
    display:grid;
    place-items:center;
    box-shadow:0 5px 8px #dce3ed70
}

.ecosystem-brand .brand-lockup {
    flex-direction:column;
    gap:8px
}

.ecosystem-brand .brand-mark {
    width:38px;
    height:43px
}

.ecosystem-brand strong {
    font-size:26px
}

.ecosystem-brand small {
    font-size:10px
}

.product-section {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:72px;
    align-items:center;
    padding-top:22px;
    padding-bottom:20px
}

.pos-photo {
    border-radius:15px;
    height:348px;
    overflow:hidden
}

.pos-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}

.product-copy h2 {
    margin-top:14px;
    margin-bottom:12px
}

.product-copy>p {
    font-size:17px;
    line-height:1.42
}

.feature-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    list-style:none;
    gap:11px 18px;
    margin:18px 0 25px;
    padding:0
}

.feature-list li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    white-space:nowrap
}

.feature-list .icon {
    width:21px;
    height:21px;
    padding:4px;
    background:var(--orange);
    color:#fff;
    border-radius:50%;
    stroke-width:2
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--orange);
    font-size:13px;
    font-weight:600
}

.text-link .icon {
    width:17px;
    height:17px
}

.text-link:hover {
    text-decoration:underline
}

.ordering-section {
    grid-template-columns:1.13fr 1fr;
    gap:36px;
    padding-top:12px
}

.ordering-section h2 {
    font-size:34px
}

.ordering-media {
    height:315px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#f7f9fb
}

.ordering-media>.phone {
    position:absolute;
    width:300px;
    height:470px;
    left:35px;
    top:0;
    border-radius:36px;
    padding:8px;
    border-width:4px
}

.ordering-media .phone-heading {
    font-size:9px;
    padding:12px
}

.ordering-media .phone-banner {
    height:115px
}

.ordering-media .phone-banner strong {
    font-size:23px
}

.ordering-media .phone-products img {
    width:76px;
    height:65px
}

.ordering-media .phone-products strong,.ordering-media .phone-products b {
    font-size:11px
}

.ordering-media .phone-products small {
    font-size:7px
}

.ordering-media .phone-tabs>* {
    font-size:9px
}

.ordering-media .order-toggle {
    font-size:12px
}

.ordering-food {
    position:absolute;
    width:55%;
    right:0;
    height:100%;
    object-fit:cover;
    border-radius:70px 70px 0 0
}

.pickup-card {
    right:0;
    top:45px;
    display:flex;
    gap:11px;
    align-items:center;
    padding:15px 18px
}

.delivery-section {
    grid-template-columns:1.12fr 1fr;
    gap:70px;
    padding-top:10px;
    padding-bottom:17px
}

.delivery-media {
    border-radius:14px;
    overflow:hidden;
    background:#f8fafb;
    box-shadow:0 4px 8px #10182005
}

.delivery-media>img {
    width:100%;
    height:202px;
    object-fit:cover;
    object-position:50% 43%
}

.delivery-timeline {
    padding:17px 7px 15px;
    margin:0;
    display:flex;
    list-style:none
}

.delivery-timeline li {
    flex:1;
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:center
}

.delivery-timeline li:before {
    content:'';
    position:absolute;
    top:16px;
    left:-50%;
    width:100%;
    height:2px;
    background:#38ba7b
}

.delivery-timeline li:first-child:before {
    display:none
}

.delivery-timeline li>span {
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    background:#32bd79;
    border:4px solid #eaf5ef;
    width:42px;
    height:42px;
    border-radius:50%;
    color:white
}

.delivery-timeline .icon {
    width:21px;
    height:21px
}

.delivery-timeline strong {
    font-size:10px;
    margin-top:7px
}

.delivery-timeline small {
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.delivery-details {
    position:relative;
    padding-right:164px
}

.delivery-details h2 {
    font-size:29px;
    white-space:nowrap
}

.delivery-details .product-copy>p {
    font-size:12px
}

.feature-list.single {
    grid-template-columns:1fr;
    gap:5px;
    margin-top:14px;
    margin-bottom:16px
}

.single li {
    font-size:12px;
    gap:7px
}

.single .icon {
    width:18px;
    height:18px;
    padding:3px
}

.route-map {
    position:absolute;
    right:-8px;
    top:0;
    width:164px;
    height:263px;
    overflow:visible
}

.route-map>svg {
    width:100%;
    height:100%;
    border-radius:30px
}

.arrival-card {
    position:absolute;
    right:-8px;
    top:126px;
    background:white;
    border-radius:10px;
    padding:14px;
    box-shadow:0 4px 8px #1018200a;
    white-space:nowrap
}

.arrival-card small {
    display:block;
    font-size:9px;
    color:var(--muted)
}

.arrival-card strong {
    display:block;
    font-size:15px;
    margin:5px 0
}

.driver-marker {
    position:absolute;
    left:20px;
    bottom:22px;
    width:38px;
    height:48px;
    background:#91d4e8;
    border:3px solid white;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#132432
}

.back-office {
    background:radial-gradient(ellipse at 20% 15%,#20282d,#10171b 70%);
    color:white;
    padding:28px 0 16px
}

.back-office-inner {
    display:grid;
    grid-template-columns:.86fr 1.14fr;
    gap:40px;
    align-items:start
}

.back-office .product-copy {
    padding-top:8px
}

.back-office h2 {
    font-size:34px
}

.back-office .eyebrow {
    background:#42494e;
    color:white
}

.back-office p {
    color:#d5dadd;
    font-size:16px
}

.back-office .feature-list {
    gap:10px 20px;
    margin-top:22px
}

.back-office .feature-list li {
    font-size:13px
}

.back-office .feature-list .icon {
    background:#35bf7b;
    color:#123a27
}

.back-office .text-link {
    color:white;
    text-decoration:underline;
    text-underline-offset:4px
}

.dashboard-frame {
    width:100%;
    height:408px;
    display:flex;
    border-radius:10px;
    border:3px solid #060b0e;
    padding:3px;
    background:#283137;
    box-shadow:0 0 0 1px #4d555b;
    overflow:hidden
}

.dashboard-sidebar {
    background:#171e26;
    width:126px;
    flex-shrink:0;
    padding:12px 10px
}

.dashboard-sidebar .brand-mark {
    width:14px;
    height:16px
}

.dashboard-sidebar .brand-lockup {
    gap:4px
}

.dashboard-sidebar .brand-lockup strong {
    font-size:13px;
    letter-spacing:-.7px
}

.dashboard-sidebar .brand-lockup small {
    font-size:5px
}

.dashboard-sidebar ul {
    list-style:none;
    padding:0;
    margin:15px 0
}

.dashboard-sidebar li {
    padding:8px 7px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#c3cbd2;
    font-size:8px;
    border-radius:5px
}

.dashboard-sidebar li.active {
    background:#252e38;
    color:white
}

.dashboard-sidebar .icon {
    width:11px;
    height:11px
}

.dashboard-content {
    background:#f8fafc;
    color:#14212e;
    flex:1;
    min-width:0;
    padding:15px 14px
}

.dashboard-heading {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.dashboard-heading h3 {
    font-size:11px
}

.dashboard-heading>span {
    font-size:6px;
    border:1px solid var(--border);
    border-radius:3px;
    padding:4px 8px;
    color:#82909e
}

.dashboard-date {
    font-size:7px;
    margin:12px 0
}

.dashboard-metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px
}

.dashboard-metrics>div {
    background:white;
    border:1px solid #f0f2f5;
    border-radius:5px;
    padding:10px
}

.dashboard-metrics small {
    display:block;
    font-size:7px;
    color:#6f7e8e
}

.dashboard-metrics strong {
    display:block;
    font-size:15px;
    margin:4px 0
}

.dashboard-metrics span {
    font-size:6px;
    color:#27a668;
    background:#e5f8ed;
    padding:2px 4px;
    border-radius:3px
}

.dashboard-charts {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:9px;
    margin-top:10px
}

.chart-panel {
    background:white;
    border-radius:6px;
    padding:10px;
    border:1px solid #f0f2f5;
    min-width:0
}

.chart-panel h4 {
    font-size:8px;
    margin-bottom:10px
}

.line-chart {
    display:flex;
    gap:7px;
    align-items:center;
    height:84px
}

.line-chart>span {
    font-size:6px;
    color:#8a97a5;
    line-height:1.5
}

.line-chart svg {
    width:calc(100% - 22px);
    height:85px
}

.chart-days {
    display:flex;
    justify-content:space-between;
    margin-left:22px;
    color:#6f7e8e;
    font-size:6px
}

.source-chart {
    display:flex;
    gap:13px;
    align-items:center;
    height:97px
}

.donut {
    width:79px;
    height:79px;
    background:conic-gradient(#3b82f6 0% 74.5%,#ff7547 74.5% 97.3%,#45c488 97.3%);
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0;
    transform:rotate(-15deg)
}

.donut>div {
    width:56px;
    height:56px;
    background:white;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:rotate(15deg)
}

.donut strong {
    font-size:13px
}

.donut small {
    font-size:6px;
    color:#6f7e8e
}

.source-chart ul {
    list-style:none;
    padding:0;
    margin:0;
    flex:1;
    font-size:7px
}

.source-chart li {
    display:flex;
    gap:6px;
    align-items:center;
    margin:12px 0
}

.source-chart li i {
    width:6px;
    height:6px;
    background:#3b82f6;
    border-radius:50%
}

.source-chart li:nth-child(2) i {
    background:#ff7547
}

.source-chart li:nth-child(3) i {
    background:#45c488
}

.source-chart b {
    margin-left:auto;
    font-size:7px
}

.chart-panel table {
    width:100%;
    border-collapse:collapse;
    font-size:7px
}

.chart-panel td {
    padding:7px 0;
    border-bottom:1px solid #eef1f5
}

.chart-panel td:first-child {
    width:17px
}

.chart-panel td:last-child {
    text-align:right
}

.location-bars>div {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:6px;
    margin-top:13px
}

.location-bars span {
    width:44px
}

.location-bars i {
    display:block;
    height:8px;
    width:calc(var(--bar-width)*.55);
    background:#4387f5;
    border-radius:1px
}

.location-bars b {
    margin-left:auto;
    font-weight:400
}

.demo-dialog {
    width:min(440px,calc(100% - 40px));
    padding:35px;
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--ink)
}

.demo-dialog::backdrop {
    background:#10182088
}

.demo-dialog h2 {
    font-size:30px;
    margin:18px 0 12px
}

.demo-dialog p {
    margin-bottom:24px
}

.dialog-close {
    position:absolute;
    right:14px;
    top:8px;
    border:0;
    background:transparent;
    font-size:28px;
    color:var(--muted)
}

@media(min-width:1440px) {
    .hero {
        height:550px
    }

    .hero h1 {
        font-size:52px
    }

    .hero-products {
        right:-45px
    }

    .hero-phone {
        top:185px;
        width:190px;
        height:325px
    }

    .new-order {
        top:115px
    }

    .sales-card {
        top:240px
    }

    .product-section {
        padding-block:30px
    }

}

@media(max-width:1190px) {
    .container {
        width:calc(100% - 80px)
    }

    .header-inner {
        gap:28px
    }

    .desktop-nav {
        gap:19px
    }

    .header-actions {
        gap:10px
    }

    .header-actions .button {
        padding-inline:18px
    }

    .hero h1 {
        font-size:43px
    }

    .hero-copy>p {
        font-size:16px
    }

    .hero-products {
        right:-20px
    }

    .hero-phone {
        left:8%;
        width:164px;
        height:284px;
        top:176px
    }

    .hero-terminal {
        right:36px
    }

    .new-order {
        width:174px;
        right:-20px
    }

    .sales-card {
        width:184px;
        right:-20px
    }

    .trust-items {
        gap:16px
    }

    .ecosystem-diagram {
        gap:70px;
        grid-template-columns:1fr 166px 1fr;
        max-width:850px
    }

    .ecosystem-node {
        width:230px
    }

    .product-section {
        gap:60px
    }

    .product-copy h2 {
        font-size:32px
    }

    .feature-list li {
        font-size:12px;
        gap:8px
    }

    .product-copy>p {
        font-size:16px
    }

    .pos-photo {
        height:330px
    }

    .ordering-section {
        gap:28px
    }

    .ordering-section h2 {
        font-size:30px
    }

    .ordering-section .feature-list li {
        font-size:11px
    }

    .ordering-media>.phone {
        left:25px;
        width:275px
    }

    .delivery-section {
        gap:60px
    }

    .delivery-details {
        padding-right:145px
    }

    .delivery-details h2 {
        font-size:27px
    }

    .route-map {
        width:144px
    }

    .back-office h2 {
        font-size:30px
    }

    .back-office .feature-list li {
        font-size:11px
    }

    .dashboard-sidebar {
        width:105px
    }

    .dashboard-content {
        padding:12px 10px
    }

    .dashboard-metrics>div {
        padding:8px
    }

    .donut {
        width:65px;
        height:65px
    }

    .donut>div {
        width:47px;
        height:47px
    }

    .source-chart {
        gap:8px
    }

}

@media(max-width:1000px) {
    .container {
        width:calc(100% - 64px)
    }

    .desktop-nav {
        gap:13px
    }

    .header-inner {
        gap:25px
    }

    .brand-lockup strong {
        font-size:19px
    }

    .header-actions .button {
        padding-inline:15px;
        font-size:10px
    }

    .hero h1 {
        font-size:37px
    }

    .hero-copy>p {
        font-size:14px
    }

    .hero {
        height:450px
    }

    .hero-copy {
        width:56%
    }

    .hero-products {
        right:-15px;
        width:60%
    }

    .hero-terminal {
        width:94%;
        top:30px;
        height:80%;
        right:0
    }

    .hero-phone {
        left:8%;
        top:175px;
        width:145px;
        height:250px
    }

    .new-order {
        width:150px;
        right:-10px;
        padding:12px;
        top:105px;
        gap:8px
    }

    .new-order strong {
        font-size:9px
    }

    .new-order small {
        font-size:8px
    }

    .order-icon {
        width:31px;
        height:31px
    }

    .sales-card {
        width:166px;
        padding:15px;
        right:-10px;
        top:220px
    }

    .sales-total strong {
        font-size:22px
    }

    .trust-items {
        gap:14px
    }

    .trust-items li {
        font-size:9px
    }

    .hero-actions .button {
        padding-inline:20px;
        font-size:11px
    }

    .ecosystem h2 {
        font-size:29px
    }

    .ecosystem-diagram {
        gap:53px;
        grid-template-columns:1fr 148px 1fr
    }

    .ecosystem-brand {
        width:148px;
        height:150px
    }

    .ecosystem-node {
        width:205px;
        padding-inline:20px;
        gap:18px
    }

    .ecosystem-node strong {
        font-size:12px
    }

    .ecosystem-node small {
        font-size:10px
    }

    .product-section {
        gap:44px
    }

    .product-copy h2 {
        font-size:28px
    }

    .product-copy>p {
        font-size:14px
    }

    .feature-list li {
        font-size:10px;
        gap:7px
    }

    .feature-list {
        gap:10px 12px
    }

    .pos-photo {
        height:300px
    }

    .ordering-section {
        gap:24px
    }

    .ordering-section h2 {
        font-size:26px
    }

    .ordering-section .feature-list li {
        font-size:9px
    }

    .ordering-media {
        height:300px
    }

    .ordering-media>.phone {
        left:22px;
        width:250px
    }

    .pickup-card {
        padding:12px;
        gap:8px
    }

    .pickup-card strong {
        font-size:10px
    }

    .pickup-card small {
        font-size:9px
    }

    .delivery-section {
        gap:48px
    }

    .delivery-details {
        padding-right:120px
    }

    .delivery-details h2 {
        font-size:23px
    }

    .delivery-details .product-copy>p {
        font-size:11px
    }

    .single li {
        font-size:10px
    }

    .route-map {
        width:122px;
        height:255px
    }

    .arrival-card {
        padding:10px
    }

    .delivery-timeline strong {
        font-size:8px
    }

    .delivery-timeline small {
        font-size:8px
    }

    .back-office-inner {
        gap:32px;
        grid-template-columns:.9fr 1.2fr
    }

    .back-office h2 {
        font-size:27px
    }

    .back-office p {
        font-size:14px
    }

    .back-office .feature-list {
        gap:10px 14px
    }

    .back-office .feature-list li {
        font-size:9px
    }

    .dashboard-frame {
        height:395px
    }

    .dashboard-sidebar {
        width:95px;
        padding-inline:7px
    }

    .dashboard-metrics {
        gap:5px
    }

    .dashboard-metrics>div {
        padding:7px 5px
    }

    .dashboard-metrics strong {
        font-size:12px
    }

    .dashboard-metrics small {
        font-size:6px
    }

    .dashboard-charts {
        gap:7px
    }

    .chart-panel {
        padding:8px
    }

    .source-chart {
        gap:5px
    }

    .donut {
        width:53px;
        height:53px
    }

    .donut>div {
        width:39px;
        height:39px
    }

    .source-chart ul {
        font-size:6px
    }

    .source-chart li {
        gap:4px
    }

    .source-chart b {
        font-size:6px
    }

}

@media(max-width:1100px) {
    .header-inner {
        justify-content:space-between
    }

    .desktop-nav {
        display:none
    }

    .header-actions .secondary {
        display:none
    }

    .menu-toggle {
        display:grid;
        place-items:center;
        background:transparent;
        border:0;
        padding:5px
    }

    .mobile-nav:not([hidden]) {
        display:grid;
        background:white;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        padding:18px 24px;
        gap:18px;
        box-shadow:0 4px 8px #10182010;
        font-size:14px;
        font-weight:500
    }
}

@media(max-width:767px) {
    .container {
        width:calc(100% - 40px)
    }

    .site-header {
        height:64px
    }

    .header-inner {
        gap:10px;
        justify-content:space-between
    }

    .header-actions .button {
        font-size:11px;
        height:37px;
        padding-inline:15px
    }

    .hero {
        height:auto;
        min-height:760px
    }

    .hero-inner {
        display:block;
        padding-top:40px
    }

    .hero-copy {
        width:100%;
        padding:0
    }

    .hero h1 {
        font-size:clamp(34px,7.7vw,47px);
        margin-top:18px
    }

    .hero-copy>p {
        font-size:15px;
        max-width:440px
    }

    .desktop-break {
        display:none
    }

    .hero-actions {
        gap:10px;
        margin-top:23px
    }

    .hero-actions .button {
        padding-inline:17px;
        font-size:12px
    }

    .trust-items {
        gap:12px 18px;
        flex-wrap:wrap;
        margin-top:24px;
        max-width:370px
    }

    .trust-items li {
        font-size:10px
    }

    .hero-scene {
        top:340px;
        background:linear-gradient(#fbfcfd,transparent 25%),url('pos-terminal.png') center/cover no-repeat;
        filter:blur(2px)
    }

    .hero-products {
        position:relative;
        width:100%;
        height:350px;
        right:auto;
        margin-top:8px
    }

    .hero-terminal {
        width:94%;
        height:94%;
        top:0;
        right:0;
        object-fit:cover
    }

    .hero-phone {
        width:136px;
        height:238px;
        left:0;
        top:92px
    }

    .new-order {
        right:-4px;
        top:30px;
        width:148px;
        padding:11px
    }

    .sales-card {
        right:-4px;
        top:143px;
        width:154px;
        padding:14px
    }

    .sales-card dl {
        font-size:9px;
        margin-top:12px
    }

    .sales-card dl>div {
        margin-top:7px
    }

    .feature-nav {
        height:auto;
        padding-block:23px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:24px 12px
    }

    .feature-nav a {
        font-size:10px;
        gap:8px
    }

    .ecosystem {
        padding:34px 0 28px
    }

    .ecosystem h2 {
        font-size:28px;
        max-width:340px;
        margin-inline:auto
    }

    .ecosystem>div>p {
        font-size:14px;
        max-width:290px;
        margin-inline:auto
    }

    .ecosystem-diagram {
        margin-top:24px;
        height:auto;
        max-width:450px;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px
    }

    .connections {
        display:none
    }

    .ecosystem-brand {
        grid-column:1/-1;
        grid-row:1;
        width:135px;
        height:126px;
        margin:0 auto 12px;
        border-radius:22px
    }

    .ecosystem-brand strong {
        font-size:22px
    }

    .ecosystem-brand .brand-mark {
        width:30px;
        height:34px
    }

    .ecosystem-nodes {
        gap:12px
    }

    .ecosystem-node {
        transform:none!important;
        width:100%;
        min-width:0;
        height:76px;
        padding:12px;
        gap:10px;
        border-radius:12px
    }

    .ecosystem-node .icon {
        width:25px;
        height:25px
    }

    .ecosystem-node strong {
        font-size:11px
    }

    .ecosystem-node small {
        font-size:9px;
        line-height:1.35;
        white-space:normal
    }

    .product-section {
        grid-template-columns:1fr;
        gap:26px;
        padding-top:34px;
        padding-bottom:16px
    }

    .pos-photo {
        height:270px
    }

    .product-copy h2,.ordering-section h2 {
        font-size:30px
    }

    .product-copy>p {
        font-size:15px
    }

    .feature-list li,.ordering-section .feature-list li {
        font-size:11px
    }

    .feature-list {
        gap:12px 14px;
        margin-bottom:22px
    }

    .feature-list .icon {
        width:20px;
        height:20px
    }

    .ordering-media {
        height:315px;
        max-width:470px;
        width:100%;
        margin-inline:auto
    }

    .ordering-media>.phone {
        width:270px;
        left:20px
    }

    .ordering-section {
        padding-top:34px
    }

    .pickup-card {
        right:0;
        top:45px
    }

    .delivery-section {
        padding-top:34px;
        padding-bottom:34px
    }

    .delivery-media>img {
        height:210px
    }

    .delivery-timeline strong,.delivery-timeline small {
        font-size:8px
    }

    .delivery-details {
        padding-right:130px;
        min-height:275px
    }

    .delivery-details h2 {
        font-size:25px;
        white-space:normal
    }

    .delivery-details .product-copy>p {
        font-size:12px
    }

    .single li {
        font-size:11px;
        white-space:normal
    }

    .route-map {
        width:120px;
        height:260px;
        right:0;
        top:10px
    }

    .arrival-card {
        right:-3px;
        top:127px
    }

    .back-office {
        padding:32px 0
    }

    .back-office-inner {
        grid-template-columns:1fr;
        gap:28px
    }

    .back-office h2 {
        font-size:30px
    }

    .back-office p {
        font-size:15px
    }

    .back-office .feature-list li {
        font-size:11px
    }

    .dashboard-frame {
        height:370px
    }

    .dashboard-sidebar {
        width:84px
    }

    .dashboard-sidebar li {
        font-size:7px;
        gap:6px;
        padding-inline:4px
    }

    .dashboard-sidebar .brand-lockup strong {
        font-size:11px
    }

    .dashboard-content {
        padding:10px 8px
    }

    .dashboard-charts {
        grid-template-columns:1.1fr 1fr
    }

    .dashboard-metrics strong {
        font-size:11px
    }

    .dashboard-metrics small {
        font-size:5px
    }

    .chart-panel {
        padding:7px
    }

    .line-chart {
        height:75px
    }

    .line-chart svg {
        height:75px
    }

    .source-chart {
        height:88px
    }

    .donut {
        width:46px;
        height:46px
    }

    .donut>div {
        width:33px;
        height:33px
    }

    .donut strong {
        font-size:10px
    }

    .donut small {
        font-size:5px
    }

    .source-chart ul,.source-chart b {
        font-size:5px
    }

    .source-chart li {
        gap:3px
    }

    .source-chart li i {
        width:4px;
        height:4px
    }

    .chart-panel table {
        font-size:6px
    }

    .location-bars>div {
        font-size:5px;
        gap:4px
    }

    .location-bars span {
        width:30px
    }

    .chart-panel h4 {
        font-size:7px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    * {
        transition:none!important
    }

}

.product-copy {
    min-width:0
}

.hero-terminal {
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

@media(max-width:767px) {
    .feature-list li {
        white-space:normal
    }

    .ordering-section {
        grid-template-columns:minmax(0,1fr)
    }

    .hero h1 {
        font-size:clamp(32px,8vw,44px)
    }

    .hero-products {
        margin-top:15px
    }

    .hero-terminal {
        mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)
    }

}

.hero-scene {
    background:linear-gradient(90deg,#fbfcfd 0%,#fbfcfdfc 32%,#fbfcfd9c 48%,transparent 65%),url('restaurant.png') right center/cover no-repeat;
    opacity:1
}

.hero-terminal {
    mask-image:radial-gradient(ellipse 70% 70% at 50% 53%,#000 52%,transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 53%,#000 52%,transparent 78%)
}

.back-office .dashboard-date {
    font-size:7px;
    color:#6f7e8e;
    line-height:1.4
}

.delivery-media>img {
    object-position:50% 28%
}

@media(max-width:767px) {
    .hero-scene {
        background:linear-gradient(#fbfcfd,transparent 35%),url('restaurant.png') center/cover no-repeat
    }

    .hero-terminal {
        mask-image:radial-gradient(ellipse 75% 70% at 50% 53%,#000 52%,transparent 82%);
        -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 53%,#000 52%,transparent 82%)
    }

}

.dashboard-content,.chart-panel {
    font-size:8px;
    line-height:1.25
}

.dashboard-metrics>div {
    padding-block:8px
}

.chart-panel td {
    padding-block:6px
}

.dashboard-charts {
    gap:8px
}

.location-bars>div {
    margin-top:11px
}

.hero-terminal {
    mask-image:radial-gradient(ellipse 80% 90% at 50% 53%,#000 62%,transparent 82%);
    -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 53%,#000 62%,transparent 82%)
}

.line-chart,.line-chart svg {
    height:75px
}

.source-chart {
    height:84px
}

.chart-panel td {
    padding-block:5px
}

@media(max-width:767px) {
    .dashboard-frame {
        height:auto;
        min-height:370px
    }

    .dashboard-content {
        padding-bottom:12px
    }

    .hero-terminal {
        mask-image:radial-gradient(ellipse 80% 90% at 50% 53%,#000 62%,transparent 82%);
        -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 53%,#000 62%,transparent 82%)
    }

}