:root {
  --navy: #3a1d12;
  --navy-soft: #5a2c18;
  --ink: #3b241a;
  --muted: #765f52;
  --blue: #d96420;
  --lime: #ffb14a;
  --surface: #fff8ee;
  --line: #efdcca;
  --white: #fffdfa;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased
}

body.menu-open {
  overflow: hidden
}

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

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

button {
  font: inherit
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

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

.container {
  width: min(100% - 72px, 1280px);
  margin-inline: auto
}

.section-space {
  padding-block: 118px
}

.section-kicker,
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--blue)
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1,
h2,
h3 {
  font-family: "Plus Jakarta Sans", sans-serif
}

h2 {
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.12;
  letter-spacing: -.055em
}

h2 em {
  font-style: normal;
  color: var(--blue)
}

p {
  line-height: 1.7
}

.site-header {
  height: 86px;
  background: #fffdfa;
  position: relative;
  z-index: 50;
  border-bottom: 1px solid #f1dfce
}

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

.brand-logo {
  display: inline-flex;
  align-items: center;
  flex: none
}

.brand-logo img {
  display: block;
  width: 132px;
  height: auto;
  max-height: 60px;
  object-fit: contain
}

.primary-nav {
  display: flex;
  gap: 38px;
  margin: auto;
  font-size: 13px;
  font-weight: 700;
  color: #506079
}

.primary-nav a {
  transition: color .2s
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--blue)
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 17px;
  border: 1px solid #d8dfeb;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  transition: .2s
}

.nav-cta:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.nav-cta svg {
  width: 17px;
  height: 17px
}

.menu-toggle {
  display: none
}

.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 69% 54%, #314477 0%, #192446 38%, transparent 67%);
  opacity: .75
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  pointer-events: none
}

.hero-inner {
  position: relative;
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: 65px;
  padding-block: 75px 85px
}

.eyebrow.light {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bed4ff
}

.eyebrow-line {
  height: 1px;
  width: 25px;
  background: var(--lime)
}

.hero h1 {
  font-size: clamp(54px, 5.3vw, 78px);
  line-height: 1.08;
  letter-spacing: -.067em;
  max-width: 700px;
  margin: 25px 0 24px
}

.hero h1 span {
  color: var(--lime)
}

.hero-copy>p {
  max-width: 490px;
  font-size: 17px;
  color: #b9c7df;
  margin-bottom: 34px
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 54px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s
}

.button:hover {
  transform: translateY(-3px)
}

.button svg {
  width: 18px;
  height: 18px
}

.button-lime {
  background: var(--lime);
  color: var(--navy);
  box-shadow: 0 14px 30px #030b181e
}

.button-lime:hover {
  box-shadow: 0 18px 38px #030b183b
}

.button-dark {
  background: var(--navy);
  color: #fff
}

.hero-link,
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  font-weight: 800
}

.hero-link {
  color: #e1e9fb
}

.hero-link:hover {
  color: var(--lime)
}

.hero-link svg,
.inline-link svg {
  width: 17px;
  height: 17px
}

.hero-points {
  display: flex;
  gap: 22px;
  margin-top: 50px;
  color: #a8bad5;
  font-size: 11px
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.hero-points svg {
  width: 14px;
  height: 14px;
  color: var(--lime)
}

.hero-stage {
  position: relative;
  height: 545px;
  display: flex;
  align-items: center;
  justify-content: center
}

.stage-glow {
  position: absolute;
  width: 90%;
  height: 80%;
  border-radius: 50%;
  filter: blur(60px);
  background: #596cdb47
}

.product-screen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 57px 1fr;
  width: 100%;
  max-width: 685px;
  height: 472px;
  background: #fff;
  border: 7px solid #ffffff1f;
  border-radius: 18px;
  box-shadow: 0 40px 80px #050a1f80;
  overflow: hidden;
  transform: rotate(-1.5deg)
}

.screen-rail {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 19px;
  padding-top: 15px;
  background: #182440
}

.rail-logo {
  font: 800 22px "Plus Jakarta Sans";
  color: var(--lime);
  margin-bottom: 25px
}

.rail-item {
  display: grid;
  place-items: center;
  color: #9eacc8;
  width: 31px;
  height: 31px;
  border-radius: 8px
}

.rail-item svg {
  width: 17px;
  height: 17px
}

.rail-item.selected {
  background: #435df4;
  color: #fff
}

.screen-main {
  color: #17213a;
  background: #f6f8fc;
  padding: 0 22px 20px;
  overflow: hidden
}

.screen-top {
  height: 58px;
  border-bottom: 1px solid #e7ebf1;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.screen-top>div {
  display: flex;
  align-items: center;
  gap: 10px
}

.screen-top small {
  font-size: 9px;
  letter-spacing: .12em;
  color: #8d98ab
}

.screen-top b {
  font-size: 12px
}

.screen-avatar {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #dce5ff;
  color: #4659b5;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center
}

.screen-greeting {
  padding-block: 18px
}

.screen-greeting span {
  font-size: 9px;
  color: #8895ab
}

.screen-greeting h3 {
  font-size: 18px;
  letter-spacing: -.04em;
  margin: 4px 0 2px
}

.screen-greeting p {
  font-size: 9px;
  color: #8390a6;
  margin: 0
}

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

.screen-metrics>div {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 9px;
  padding: 13px
}

.screen-metrics span,
.screen-metrics small {
  display: block;
  color: #8390a7;
  font-size: 9px
}

.screen-metrics strong {
  display: block;
  font: 800 21px "Plus Jakarta Sans";
  letter-spacing: -.05em;
  margin: 9px 0 3px
}

.screen-metrics small {
  font-size: 8px
}

.screen-lower {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 9px;
  margin-top: 10px
}

.sales-chart,
.quick-activity {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 9px;
  padding: 13px
}

.screen-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.screen-card-title b {
  font-size: 10px
}

.screen-card-title span {
  font-size: 8px;
  color: #8290a6
}

.chart-bars {
  height: 102px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  border-bottom: 1px solid #e8edf6;
  padding: 9px 9px 0
}

.chart-bars i {
  flex: 1;
  max-width: 22px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#6e82ff, #d2daff)
}

.chart-bars i:nth-child(6) {
  background: linear-gradient(#586cf6, #b9c7ff)
}

.chart-days {
  display: flex;
  justify-content: space-around;
  font-size: 8px;
  color: #9ba7ba;
  padding-top: 6px
}

.quick-activity>div:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #f0f2f6;
  padding: 9px 0
}

.quick-activity>div:last-child {
  border: 0
}

.quick-activity p {
  margin: 0
}

.quick-activity p b,
.quick-activity p small {
  display: block;
  font-size: 8px
}

.quick-activity p small {
  font-size: 7px;
  color: #9ca7b8;
  margin-top: 3px
}

.activity-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px
}

.activity-icon svg {
  width: 12px;
  height: 12px
}

.activity-icon.purple {
  background: #ece9ff;
  color: #6e5bdd
}

.activity-icon.green {
  background: #e2f7e8;
  color: #2b9852
}

.activity-icon.orange {
  background: #fff0e2;
  color: #d58b36
}

.stage-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  color: var(--ink);
  padding: 12px 17px;
  border: 1px solid #e9eef6;
  border-radius: 12px;
  box-shadow: 0 20px 42px #020c2260
}

.stage-float>span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #e8f4df;
  color: #4d8c2a
}

.stage-float svg {
  width: 17px;
  height: 17px
}

.stage-float b,
.stage-float small {
  display: block
}

.stage-float b {
  font-size: 11px
}

.stage-float small {
  font-size: 9px;
  color: #8793a6;
  margin-top: 3px
}

.float-stock {
  top: 8px;
  right: -25px
}

.float-invoice {
  left: -30px;
  bottom: 10px
}

.float-invoice>span {
  background: #e8eaff;
  color: #5760d8
}

.hero-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #ffffff24;
  padding-block: 22px;
  color: #a8b9d4;
  font-size: 12px
}

.hero-bottom span:first-child {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--lime)
}

.hero-bottom a {
  margin-left: auto;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff
}

.intro-strip {
  padding-block: 100px;
  background: #f2f5fa
}

.intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 90px;
  align-items: end
}

.intro-inner .section-kicker {
  grid-column: 1/-1
}

.intro-inner h2 {
  margin: 0;
  max-width: 690px
}

.intro-inner p {
  color: var(--muted);
  max-width: 425px;
  margin: 0 0 4px;
  font-size: 16px
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 48px
}

.section-heading h2 {
  margin: 15px 0 0
}

.section-heading>p {
  max-width: 365px;
  color: var(--muted);
  margin: 0 0 4px;
  font-size: 15px
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(310px, .43fr) minmax(0, .57fr);
  gap: 24px;
  align-items: stretch
}

.feature-list {
  display: grid;
  gap: 8px;
  align-content: start
}

.feature-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid transparent;
  background: #fff;
  text-align: left;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s
}

.feature-tab:hover {
  background: #f6f8fc
}

.feature-tab.active {
  background: #f1f4ff;
  border-color: #ced7ff
}

.feature-tab-icon {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f3f9;
  color: #53627e;
  flex: none
}

.feature-tab.active .feature-tab-icon {
  background: var(--blue);
  color: #fff
}

.feature-tab-icon svg {
  width: 19px;
  height: 19px
}

.feature-tab>span:nth-child(2) {
  flex: 1;
  min-width: 0
}

.feature-tab b,
.feature-tab small {
  display: block
}

.feature-tab b {
  font: 700 13px "Plus Jakarta Sans"
}

.feature-tab small {
  font-size: 11px;
  color: #8a96aa;
  margin-top: 4px
}

.tab-arrow {
  width: 17px;
  height: 17px;
  color: #b4c0d0;
  opacity: 0;
  transform: translateX(-4px);
  transition: .2s
}

.feature-tab.active .tab-arrow,
.feature-tab:hover .tab-arrow {
  opacity: 1;
  transform: none;
  color: var(--blue)
}

.feature-panel {
  min-height: 660px;
  border-radius: 19px;
  background: #101b39;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative
}

.feature-panel::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #465ac39c;
  filter: blur(95px);
  right: -90px;
  top: 100px;
  opacity: .6
}

.panel-copy {
  position: relative;
  z-index: 1;
  padding: 48px 50px 5px
}

.panel-index {
  font-size: 11px;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: .13em
}

.panel-copy h3 {
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.16;
  letter-spacing: -.055em;
  margin: 18px 0 14px;
  max-width: 500px
}

.panel-copy p {
  max-width: 520px;
  color: #b6c2da;
  font-size: 14px;
  line-height: 1.7;
  margin: 0
}

.panel-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px
}

.panel-benefits span {
  border: 1px solid #ffffff26;
  background: #ffffff10;
  border-radius: 100px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #d9e4f8
}

.panel-benefits svg {
  color: var(--lime);
  width: 13px;
  height: 13px
}

.panel-art {
  position: relative;
  z-index: 1;
  padding: 35px 50px 0;
  min-height: 295px
}

.demo-window {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin-inline: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 13px 13px 0 0;
  box-shadow: 0 20px 45px #030b23aa;
  padding: 17px 20px 25px;
  transform: translateY(15px);
  transition: transform .25s
}

.feature-panel:hover .demo-window {
  transform: translateY(6px)
}

.demo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 13px;
  font-size: 11px;
  font-weight: 800
}

.demo-dots {
  display: flex;
  gap: 4px
}

.demo-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c5cedc
}

.demo-metric {
  padding: 18px 0 15px
}

.demo-metric span,
.demo-metric small {
  display: block;
  font-size: 9px;
  color: #8895a8
}

.demo-metric strong {
  display: block;
  font: 800 26px "Plus Jakarta Sans";
  letter-spacing: -.05em;
  margin: 3px 0
}

.demo-list {
  display: grid;
  gap: 0
}

.demo-list>div {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #edf0f5;
  padding: 9px 0;
  font-size: 9px
}

.demo-list b {
  font-weight: 700;
  flex: 1
}

.demo-list em {
  font-style: normal;
  font-size: 8px;
  color: #73819a
}

.demo-color {
  width: 18px;
  height: 18px;
  border-radius: 5px
}

.demo-color.blue {
  background: #dce5ff
}

.demo-color.amber {
  background: #fff0d8
}

.demo-color.violet {
  background: #ebe6ff
}

.art-accent {
  position: absolute;
  bottom: 0;
  left: 22%;
  width: 65%;
  height: 170px;
  border: 1px solid #ffffff29;
  border-radius: 50% 50% 0 0
}

.flow-section {
  background: #f3f6fb
}

.flow-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center
}

.flow-copy h2 {
  margin: 16px 0 22px
}

.flow-copy>p {
  color: var(--muted);
  max-width: 470px;
  font-size: 16px
}

.inline-link {
  color: var(--blue);
  margin-top: 13px
}

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

.flow-steps {
  border-top: 1px solid #dce3ed
}

.flow-step {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  border-bottom: 1px solid #dce3ed;
  padding: 26px 0
}

.flow-step>span {
  font: 800 12px "Plus Jakarta Sans";
  color: var(--blue);
  padding-top: 4px
}

.flow-step>div {
  flex: 1
}

.flow-step h3 {
  font-size: 18px;
  letter-spacing: -.04em;
  margin: 0 0 6px
}

.flow-step p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 340px
}

.flow-step>svg {
  color: #6c7d9c;
  width: 18px;
  height: 18px
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.industry-card {
  position: relative;
  min-height: 375px;
  padding: 28px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.industry-card::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid currentColor;
  border-radius: 50%;
  right: -85px;
  top: -85px;
  opacity: .16
}

.industry-card.retail {
  background: #e8efff;
  color: #18356e
}

.industry-card.restaurant {
  background: #fff0df;
  color: #6d3e16
}

.industry-card.parking {
  background: #e6f5ee;
  color: #18533e
}

.industry-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  opacity: .62
}

.industry-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #ffffff8c;
  margin-top: auto
}

.industry-icon svg {
  width: 28px;
  height: 28px
}

.industry-card h3 {
  font-size: 23px;
  letter-spacing: -.045em;
  margin: 18px 0 8px
}

.industry-card p {
  font-size: 13px;
  line-height: 1.6;
  max-width: 260px;
  opacity: .8
}

.industry-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px
}

.industry-chip-row span {
  border: 1px solid currentColor;
  border-radius: 50px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 800;
  opacity: .68
}

.hardware-section {
  background: #eef1fa
}

.hardware-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 80px;
  align-items: center
}

.hardware-copy h2 {
  margin: 17px 0 22px
}

.hardware-copy p {
  max-width: 465px;
  color: var(--muted);
  font-size: 15px
}

.hardware-points {
  display: grid;
  gap: 12px;
  margin: 30px 0 35px
}

.hardware-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700
}

.hardware-points svg {
  width: 18px;
  height: 18px;
  color: var(--blue)
}

.hardware-demo {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center
}

.hardware-demo::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: #dce3fa
}

.hardware-screen {
  position: relative;
  z-index: 1;
  width: min(100% - 80px, 410px);
  border: 7px solid #283451;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px #2436573b;
  padding: 22px 25px 25px
}

.hardware-screen-top {
  border-bottom: 1px solid #e9edf3;
  padding-bottom: 20px
}

.hardware-screen-top span {
  display: block;
  color: var(--blue);
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 800
}

.hardware-screen-top b {
  display: block;
  font: 800 19px "Plus Jakarta Sans";
  margin-top: 6px
}

.scan-product {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eff7ec;
  border-radius: 9px;
  padding: 12px;
  margin: 18px 0 25px
}

.scan-symbol {
  font: 800 16px monospace;
  color: #377b42;
  letter-spacing: -.2em
}

.scan-product>div {
  flex: 1
}

.scan-product b,
.scan-product small {
  display: block;
  font-size: 10px
}

.scan-product small {
  font-size: 8px;
  color: #69876e;
  margin-top: 3px
}

.scan-product svg {
  width: 16px;
  height: 16px;
  color: #2a9c54
}

.bill-line,
.bill-total {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 11px;
  border-bottom: 1px solid #edf0f5
}

.bill-total {
  align-items: center;
  border: 0;
  padding: 20px 0
}

.bill-total strong {
  font: 800 25px "Plus Jakarta Sans"
}

.print-action {
  background: var(--blue);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.print-action svg {
  width: 15px;
  height: 15px
}

.hardware-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: 0 14px 35px #13244927;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 11px;
  font-weight: 800
}

.hardware-tag svg {
  color: var(--blue)
}

.tag-printer {
  right: 0;
  top: 63px
}

.tag-scanner {
  left: 0;
  bottom: 78px
}

.barcode {
  font-family: monospace;
  font-weight: 900;
  letter-spacing: -.22em;
  font-size: 19px;
  color: var(--blue)
}

.final-cta {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  text-align: center
}

.final-inner {
  position: relative;
  z-index: 2
}

.final-cta .section-kicker {
  color: var(--lime)
}

.final-cta h2 {
  max-width: 900px;
  margin: 20px auto;
  font-size: clamp(38px, 5.2vw, 72px)
}

.final-cta h2 em {
  color: var(--lime)
}

.final-cta p {
  color: #b6c4da;
  font-size: 16px;
  margin-bottom: 30px
}

.cta-orb {
  position: absolute;
  border: 1px solid #ffffff15;
  border-radius: 50%
}

.orb-one {
  width: 650px;
  height: 650px;
  top: -380px;
  left: -180px
}

.orb-two {
  width: 800px;
  height: 800px;
  bottom: -600px;
  right: -200px
}

.contact-section {
  background: #edf2fa
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: 20px;
  align-items: stretch
}

.contact-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 670px;
  padding: 54px;
  border-radius: 20px;
  background: radial-gradient(circle at 80% 100%, #33467f 0, transparent 48%), var(--navy);
  color: #fff
}

.contact-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 470px;
  height: 470px;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  left: -180px;
  bottom: -230px;
  box-shadow: 0 0 0 80px #ffffff07, 0 0 0 160px #ffffff04
}

.contact-copy .section-kicker {
  color: var(--lime)
}

.contact-copy h2 {
  font-size: clamp(35px, 3.5vw, 53px);
  margin: 26px 0 22px;
  max-width: 540px
}

.contact-copy h2 em {
  color: var(--lime)
}

.contact-copy>p {
  max-width: 390px;
  color: #b8c6de;
  font-size: 15px
}

.contact-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  max-width: 310px;
  color: #d6e1f4;
  font-size: 12px;
  line-height: 1.55
}

.contact-note-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: #c5f27720;
  color: var(--lime)
}

.contact-note-icon svg {
  width: 18px;
  height: 18px
}

.contact-card {
  background: #fff;
  border: 1px solid #dce5f1;
  border-radius: 20px;
  padding: 42px 44px;
  box-shadow: 0 22px 60px #1c31520d
}

.contact-card-heading {
  margin-bottom: 30px
}

.contact-card-heading>span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--blue)
}

.contact-card-heading h3 {
  font-size: 24px;
  letter-spacing: -.045em;
  margin: 8px 0 5px
}

.contact-card-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 17px;
  min-width: 0
}

.form-field label,
.interest-field legend {
  font-size: 12px;
  font-weight: 800;
  color: #34425b;
  margin-bottom: 8px
}

.form-field label span {
  color: #e15c4e
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 45px;
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  background: #fff;
  padding: 11px 13px;
  color: var(--ink);
  font: 500 13px "DM Sans", sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s
}

.form-field textarea {
  resize: vertical;
  min-height: 91px
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9ba7b9
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #435df421
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: #d85654;
  box-shadow: 0 0 0 3px #d8565414
}

.interest-field {
  padding: 0;
  border: 0;
  margin: 2px 0 22px
}

.interest-field legend {
  padding: 0;
  margin-bottom: 10px
}

.interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.interest-grid label {
  position: relative;
  cursor: pointer
}

.interest-grid input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px
}

.interest-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #d9e1ec;
  border-radius: 7px;
  background: #f7f9fc;
  color: #53627a;
  font-size: 11px;
  font-weight: 700;
  transition: .2s
}

.interest-grid input:checked+span {
  border-color: #a9b8ff;
  background: #edf0ff;
  color: #3c50d9
}

.interest-grid input:focus-visible+span {
  outline: 3px solid #83a3ff;
  outline-offset: 2px
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 8px
}

.form-footer>p {
  margin: 0;
  flex: 1;
  color: #2d7146;
  font-size: 12px;
  line-height: 1.4
}

.form-footer>p.error {
  color: #b83d3d
}

.form-submit {
  border: 0;
  cursor: pointer;
  min-height: 48px
}

.form-hint {
  font-size: 11px !important;
  color: #8a96aa !important;
  margin: 13px 0 0 !important
}

.enquiry-review {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #dbe5f0;
  border-radius: 12px;
  background: #f7f9fd
}

.enquiry-review[hidden] {
  display: none
}

.enquiry-review-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e3e9f2
}

.enquiry-review-heading span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em
}

.enquiry-review-heading h4 {
  font: 800 17px "Plus Jakarta Sans";
  letter-spacing: -.04em;
  margin: 5px 0 0
}

.enquiry-review-heading button {
  border: 1px solid #ccd7e8;
  border-radius: 7px;
  background: #fff;
  color: var(--blue);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}

.enquiry-review dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 11px 18px;
  margin: 18px 0 0;
  font-size: 12px
}

.enquiry-review dt {
  color: #718099
}

.enquiry-review dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
  white-space: pre-wrap
}

.field-help {
  display: block;
  margin-top: 7px;
  color: #8b6d5e;
  font-size: 10px;
  line-height: 1.45
}

.form-field select:disabled {
  cursor: wait;
  background: #fff7ee;
  color: #8d7769
}

.form-submit:disabled {
  cursor: wait;
  opacity: .72;
  transform: none
}

.form-submit.is-loading svg {
  animation: enquirySubmitSpin .9s linear infinite
}

@keyframes enquirySubmitSpin {
  to {
    transform: rotate(360deg)
  }
}

.form-footer>p.success {
  color: #277545
}

.enquiry-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 17px;
  border: 1px solid #a9d9b8;
  border-radius: 12px;
  background: #f0fbf3;
  color: #245a36
}

.enquiry-result[hidden] {
  display: none
}

.enquiry-result-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: none;
  border-radius: 9px;
  background: #d8f3df
}

.enquiry-result-icon svg {
  width: 17px;
  height: 17px
}

.enquiry-result>div>span {
  display: block;
  color: #398354;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em
}

.enquiry-result h4 {
  margin: 4px 0;
  font: 800 16px "Plus Jakarta Sans";
  letter-spacing: -.03em
}

.enquiry-result p {
  margin: 0;
  color: #4f765d;
  font-size: 12px;
  line-height: 1.5
}

.site-footer {
  background: #0a1123;
  color: #fff;
  padding-top: 60px
}

.footer-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 60px
}

.footer-brand {
  color: #fff
}

.footer-brand .brand-emblem {
  background: var(--lime);
  color: var(--navy)
}

.footer-brand .brand-emblem span {
  color: var(--blue)
}

.footer-main p {
  font-size: 13px;
  color: #8d9bb6;
  margin: 18px 0 0
}

.footer-nav {
  display: flex;
  gap: 28px;
  color: #a8b4ca;
  font-size: 12px
}

.footer-nav a:hover {
  color: var(--lime)
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ffffff20;
  padding-block: 25px;
  color: #8594af;
  font-size: 11px
}

.footer-bottom a:hover {
  color: #fff
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, .65fr));
  gap: 40px;
  align-items: start
}

.footer-title {
  display: block;
  margin-bottom: 15px;
  color: #ffc26b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em
}

.footer-nav,
.footer-contact,
.footer-socials>div {
  display: grid;
  gap: 10px;
  margin: 0
}

.footer-nav a,
.footer-contact a,
.footer-socials a {
  color: #e5c6b0;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: color .2s
}

.footer-nav a:hover,
.footer-contact a:hover,
.footer-socials a:hover {
  color: #ffc26b
}

:focus-visible {
  outline: 3px solid #83a3ff;
  outline-offset: 3px
}

@media(max-width:1120px) {
  .hero-inner {
    gap: 35px
  }

  .hero h1 {
    font-size: 56px
  }

  .hero-stage {
    height: 470px
  }

  .product-screen {
    height: 420px
  }

  .screen-lower {
    grid-template-columns: 1fr
  }

  .quick-activity {
    display: none
  }

  .feature-layout {
    grid-template-columns: 360px 1fr
  }

  .flow-layout,
  .hardware-layout {
    gap: 50px
  }
}

@media(max-width:900px) {
  .container {
    width: min(100% - 48px, 1280px)
  }

  .site-header {
    height: 72px
  }

  .primary-nav {
    gap: 18px
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 75px;
    gap: 35px
  }

  .hero-copy {
    max-width: 700px
  }

  .hero h1 {
    font-size: clamp(48px, 7vw, 68px)
  }

  .hero-stage {
    max-width: 650px;
    width: 100%;
    margin: auto
  }

  .intro-inner {
    gap: 25px
  }

  .feature-layout {
    grid-template-columns: 1fr
  }

  .feature-list {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature-panel {
    min-height: 600px
  }

  .flow-layout,
  .hardware-layout {
    grid-template-columns: 1fr
  }

  .hardware-demo {
    max-width: 600px;
    width: 100%;
    margin: auto
  }

  .industry-grid {
    gap: 12px
  }

  .industry-card {
    padding: 21px
  }

  .industry-card h3 {
    font-size: 20px
  }
}

@media(max-width:680px) {
  .container {
    width: min(100% - 36px, 1280px)
  }

  .section-space {
    padding-block: 75px
  }

  .site-header {
    height: 66px
  }

  .brand {
    font-size: 23px
  }

  .brand-emblem {
    width: 35px;
    height: 35px
  }

  .nav-cta {
    margin-left: auto;
    padding: 10px 12px;
    font-size: 11px;
    gap: 7px
  }

  .nav-cta svg {
    width: 14px;
    height: 14px
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid #e2e7ef;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    cursor: pointer
  }

  .menu-toggle svg {
    width: 19px;
    height: 19px
  }

  .menu-toggle .close-icon {
    display: none
  }

  .menu-toggle[aria-expanded="true"] .menu-icon {
    display: none
  }

  .menu-toggle[aria-expanded="true"] .close-icon {
    display: block
  }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    background: #fff;
    display: none;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 12px 18px 22px;
    box-shadow: 0 25px 30px #15203a23
  }

  .primary-nav.open {
    display: flex
  }

  .primary-nav a {
    padding: 13px 5px;
    border-bottom: 1px solid #eef1f6
  }

  .hero-inner {
    padding: 70px 0 45px
  }

  .hero h1 {
    font-size: clamp(42px, 10vw, 58px)
  }

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

  .hero-actions {
    gap: 15px;
    flex-wrap: wrap
  }

  .hero-points {
    margin-top: 36px;
    gap: 12px;
    flex-wrap: wrap
  }

  .hero-stage {
    height: 310px
  }

  .product-screen {
    height: 300px;
    grid-template-columns: 39px 1fr;
    border-width: 4px
  }

  .screen-rail {
    gap: 10px
  }

  .rail-logo {
    margin-bottom: 6px;
    font-size: 16px
  }

  .rail-item {
    width: 26px;
    height: 26px
  }

  .rail-item svg {
    width: 14px;
    height: 14px
  }

  .screen-main {
    padding: 0 10px 10px
  }

  .screen-top {
    height: 38px
  }

  .screen-greeting {
    padding-block: 10px
  }

  .screen-greeting h3 {
    font-size: 12px
  }

  .screen-greeting p {
    font-size: 7px
  }

  .screen-metrics {
    gap: 4px
  }

  .screen-metrics>div {
    padding: 7px
  }

  .screen-metrics span,
  .screen-metrics small {
    font-size: 7px
  }

  .screen-metrics strong {
    font-size: 13px;
    margin: 4px 0
  }

  .screen-lower {
    margin-top: 5px
  }

  .sales-chart {
    padding: 8px
  }

  .chart-bars {
    height: 64px
  }

  .stage-float {
    padding: 7px;
    gap: 6px
  }

  .stage-float>span {
    width: 22px;
    height: 22px
  }

  .stage-float svg {
    width: 12px;
    height: 12px
  }

  .stage-float b {
    font-size: 8px
  }

  .stage-float small {
    font-size: 7px
  }

  .float-stock {
    right: -4px;
    top: -3px
  }

  .float-invoice {
    left: -4px;
    bottom: -3px
  }

  .hero-bottom {
    padding-block: 16px
  }

  .intro-strip {
    padding-block: 75px
  }

  .intro-inner {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .intro-inner .section-kicker {
    grid-column: auto
  }

  .intro-inner p {
    font-size: 14px
  }

  .section-heading {
    display: block;
    margin-bottom: 30px
  }

  .section-heading>p {
    font-size: 14px;
    margin-top: 18px
  }

  .feature-list {
    grid-template-columns: 1fr 1fr;
    gap: 7px
  }

  .feature-tab {
    padding: 11px;
    align-items: flex-start;
    gap: 8px;
    min-height: 88px
  }

  .feature-tab-icon {
    width: 30px;
    height: 30px
  }

  .feature-tab-icon svg {
    width: 16px;
    height: 16px
  }

  .feature-tab b {
    font-size: 11px;
    line-height: 1.35
  }

  .feature-tab small {
    font-size: 9px;
    line-height: 1.3
  }

  .tab-arrow {
    display: none
  }

  .feature-panel {
    min-height: 575px
  }

  .panel-copy {
    padding: 32px 25px 0
  }

  .panel-copy h3 {
    font-size: 31px
  }

  .panel-copy p {
    font-size: 11px
  }

  .panel-benefits {
    margin-top: 18px
  }

  .panel-art {
    padding: 27px 22px 0;
    min-height: 250px
  }

  .demo-window {
    padding: 15px;
    max-width: 100%
  }

  .flow-layout {
    gap: 30px
  }

  .flow-step {
    gap: 13px
  }

  .flow-step h3 {
    font-size: 15px
  }

  .flow-step p {
    font-size: 12px
  }

  .industry-grid {
    grid-template-columns: 1fr
  }

  .industry-card {
    min-height: 310px;
    padding: 25px
  }

  .industry-icon {
    margin-top: 36px
  }

  .hardware-layout {
    gap: 30px
  }

  .hardware-copy p {
    font-size: 14px
  }

  .hardware-demo {
    min-height: 395px
  }

  .hardware-demo::before {
    width: 280px;
    height: 280px
  }

  .hardware-screen {
    width: min(100% - 45px, 360px);
    padding: 15px
  }

  .hardware-tag {
    padding: 8px;
    font-size: 9px
  }

  .tag-printer {
    top: 26px
  }

  .tag-scanner {
    bottom: 35px
  }

  .final-cta p {
    font-size: 14px
  }

  .footer-main {
    display: block;
    padding-bottom: 40px
  }

  .footer-nav {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 16px 23px
  }

  .footer-bottom {
    gap: 15px;
    flex-wrap: wrap
  }
}

@media(max-width:380px) {
  .hero h1 {
    font-size: 40px
  }

  .hero-link {
    font-size: 11px
  }

  .feature-tab small {
    display: none
  }

  .feature-tab {
    min-height: 64px
  }

  .feature-panel {
    min-height: 550px
  }

  .hardware-screen {
    width: 100%
  }

  .tag-printer {
    right: -8px
  }

  .tag-scanner {
    left: -8px
  }
}

/* Product feature showcase */
.feature-section {
  background: #fff
}

.feature-layout {
  display: block
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px
}

.feature-tab {
  min-height: 98px;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  background: #f4f6fa;
  border: 1px solid #e4e9f1;
  border-radius: 13px
}

.feature-tab:hover {
  transform: translateY(-2px);
  border-color: #bfcbee;
  background: #eef3ff
}

.feature-tab.active {
  background: #eaf0ff;
  border-color: #7898ef;
  box-shadow: inset 0 -3px 0 var(--blue)
}

.feature-tab-icon {
  width: 34px;
  height: 34px;
  background: #e5eaf4;
  color: #435575
}

.feature-tab.active .feature-tab-icon {
  background: #d8e4ff;
  color: #254de2
}

.feature-tab b {
  font-size: 12px;
  line-height: 1.35
}

.feature-tab small {
  font-size: 10px;
  line-height: 1.4;
  color: #6a7890
}

.feature-tab .tab-arrow {
  display: none
}

.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, .37fr) minmax(0, .63fr);
  align-items: center;
  min-height: 430px;
  background: #091a38;
  border-radius: 20px
}

.feature-panel::before {
  content: none
}

.panel-copy {
  padding: 42px 12px 42px 45px
}

.panel-index {
  font-size: 10px;
  letter-spacing: .15em
}

.panel-copy h3 {
  font-size: clamp(27px, 2.8vw, 38px);
  margin: 18px 0 15px;
  max-width: 390px
}

.panel-copy p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 370px
}

.panel-benefits {
  display: grid;
  gap: 10px;
  margin-top: 28px
}

.panel-benefits span {
  display: flex;
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  color: #dce6f8;
  font-size: 11px
}

.panel-benefits svg {
  width: 15px;
  height: 15px;
  color: var(--lime)
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--lime);
  font-size: 12px;
  font-weight: 800
}

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

.panel-link svg {
  width: 16px;
  height: 16px
}

.panel-art {
  padding: 0 16px 0 0;
  min-height: 0;
  margin: 0;
  align-self: center
}

.panel-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
  box-shadow: 0 20px 50px #0006
}

.panel-art figcaption {
  color: #a8b8d1;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: center;
  padding: 12px 0 0
}

.feature-spotlights {
  display: grid;
  gap: 16px;
  margin-top: 18px
}

.feature-spotlight {
  display: grid;
  grid-template-columns: minmax(0, .37fr) minmax(0, .63fr);
  align-items: stretch;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 17px;
  background: #f2f5fa
}

.feature-spotlight:nth-child(2) {
  background: #eaf1fa
}

.spotlight-copy {
  padding: 36px 42px
}

.spotlight-copy h3 {
  font-size: clamp(24px, 2.4vw, 33px);
  line-height: 1.2;
  letter-spacing: -.045em;
  margin: 14px 0 12px;
  max-width: 340px
}

.spotlight-copy p {
  font-size: 13px;
  color: var(--muted);
  max-width: 355px;
  margin: 0 0 24px
}

.spotlight-copy a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800
}

.spotlight-copy a:hover {
  text-decoration: underline
}

.spotlight-copy svg {
  width: 15px;
  height: 15px
}

.feature-spotlight>img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: #091a38
}

@media(max-width:1050px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .feature-panel {
    grid-template-columns: minmax(0, .41fr) minmax(0, .59fr)
  }

  .panel-copy {
    padding: 34px 6px 34px 32px
  }

  .spotlight-copy {
    padding: 30px
  }
}

@media(max-width:760px) {
  .feature-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .panel-copy {
    padding: 30px 30px 18px
  }

  .panel-copy h3 {
    max-width: 600px
  }

  .panel-copy p {
    max-width: 600px
  }

  .panel-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px
  }

  .panel-link {
    margin-top: 25px
  }

  .panel-art {
    padding: 8px 14px 15px;
    width: 100%
  }

  .feature-spotlight {
    display: block;
    min-height: 0
  }

  .spotlight-copy {
    padding: 30px
  }

  .feature-spotlight>img {
    height: auto;
    max-height: none;
    object-fit: contain
  }
}

@media(max-width:540px) {
  .feature-list {
    gap: 7px
  }

  .feature-tab {
    padding: 11px;
    min-height: 82px;
    gap: 7px
  }

  .feature-tab-icon {
    width: 28px;
    height: 28px
  }

  .feature-tab-icon svg {
    width: 16px;
    height: 16px
  }

  .feature-tab b {
    font-size: 10px
  }

  .feature-tab small {
    display: none
  }

  .panel-copy {
    padding: 28px 22px 15px
  }

  .panel-copy h3 {
    font-size: 18px
  }

  .panel-art {
    overflow-x: auto;
    padding: 5px 0 12px
  }

  .panel-art img {
    min-width: 540px;
    width: 540px;
    border-radius: 0
  }

  .panel-art figcaption {
    min-width: 540px;
    text-align: left;
    padding-left: 18px
  }

  .spotlight-copy {
    padding: 25px
  }

  .spotlight-copy h3 {
    font-size: 25px
  }
}

@media(max-width:900px) {
  .contact-layout {
    grid-template-columns: 1fr
  }

  .contact-copy {
    min-height: 310px;
    padding: 42px
  }

  .contact-note {
    margin-top: 25px
  }

  .contact-card {
    padding: 36px
  }
}

@media(max-width:680px) {
  .contact-copy {
    padding: 30px;
    min-height: 320px
  }

  .contact-copy h2 {
    font-size: 36px
  }

  .contact-copy>p {
    font-size: 13px
  }

  .contact-card {
    padding: 27px 22px
  }

  .contact-card-heading h3 {
    font-size: 21px
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .form-footer {
    align-items: stretch;
    flex-direction: column-reverse
  }

  .form-footer>p {
    width: 100%
  }

  .form-submit {
    width: 100%
  }
}

@media(max-width:680px) {
  .enquiry-review dl {
    grid-template-columns: 1fr;
    gap: 3px
  }

  .enquiry-review dd {
    margin-bottom: 9px
  }

  .enquiry-review-heading {
    align-items: flex-start
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

/* EkBill warm brand palette, derived from the supplied receipt-and-orange logo. */
body {
  background: #fffdfa
}

.primary-nav {
  color: #72594c
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--blue)
}

.nav-cta {
  border-color: #e8cbae;
  background: #fffaf3;
  color: #65331d
}

.nav-cta:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #fff3e4
}

.hero::before {
  background: radial-gradient(circle at 69% 54%, #8f431d 0%, #552715 38%, transparent 67%)
}

.hero-noise {
  background: radial-gradient(circle at 19% 12%, #ffb14a20, transparent 28%)
}

.eyebrow.light {
  color: #ffe4b5
}

.hero-copy>p {
  color: #f2cfb5
}

.hero-link {
  color: #fff1df
}

.hero-points {
  color: #f1cdb2
}

.button-lime {
  background: var(--lime);
  color: #3a1d12;
  box-shadow: 0 14px 30px #30130829
}

.button-lime:hover {
  background: #ffc26b;
  box-shadow: 0 18px 38px #30130842
}

.button-dark {
  background: var(--navy)
}

.stage-glow {
  background: #f47a2c4d
}

.product-screen {
  border-color: #fff5e72b;
  box-shadow: 0 40px 80px #2810068a
}

.screen-rail {
  background: #4c2416
}

.rail-logo {
  color: #ffbd62
}

.rail-item {
  color: #e7b99b
}

.rail-item.selected {
  background: var(--blue)
}

.screen-main {
  color: #3b241a;
  background: #fffaf4
}

.screen-top {
  border-color: #f0dfd1
}

.screen-top small,
.screen-greeting span,
.screen-greeting p,
.screen-metrics span,
.screen-metrics small {
  color: #987b6c
}

.screen-avatar {
  background: #ffe2bd;
  color: #a14c1c
}

.screen-metrics>div,
.sales-chart,
.quick-activity {
  border-color: #f0e1d4;
  background: #fffdfa
}

.chart-bars {
  border-color: #f0e1d4
}

.chart-bars i {
  background: linear-gradient(#f58b3b, #ffe0bd)
}

.chart-bars i:nth-child(6) {
  background: linear-gradient(#d95e1b, #ffc078)
}

.quick-activity>div:not(:first-child) {
  border-color: #f4e7dd
}

.activity-icon.purple {
  background: #ffe7cf;
  color: #b34c1e
}

.activity-icon.green {
  background: #fff0d8;
  color: #b05c25
}

.activity-icon.orange {
  background: #fff0df;
  color: #ca651d
}

.stage-float {
  border-color: #f2dfd0;
  box-shadow: 0 20px 42px #3514083d
}

.stage-float>span {
  background: #fff0d7;
  color: #bd591d
}

.float-invoice>span {
  background: #ffe6ca;
  color: #d55e1e
}

.stage-float small {
  color: #957566
}

.hero-bottom {
  color: #f1cfb6
}

.hero-bottom span:first-child {
  color: #ffc26b
}

.intro-strip,
.flow-section {
  background: #fff5e9
}

.section-kicker,
.eyebrow,
h2 em {
  color: var(--blue)
}

.feature-section {
  background: #fffdfa
}

.feature-tab {
  background: #fff8ef;
  border-color: #f0dfce
}

.feature-tab:hover {
  border-color: #e9b780;
  background: #fff1e0
}

.feature-tab.active {
  background: #ffead2;
  border-color: #e88c42;
  box-shadow: inset 0 -3px 0 var(--blue)
}

.feature-tab-icon {
  background: #fbe4cc;
  color: #9c5a38
}

.feature-tab.active .feature-tab-icon {
  background: #e46c25;
  color: #fff
}

.feature-tab small {
  color: #8b6d5e
}

.feature-panel {
  background: #4a2315
}

.panel-copy p {
  color: #f2d5bf
}

.panel-benefits span {
  color: #ffe8d5
}

.panel-art figcaption {
  color: #eecbb1
}

.feature-spotlight {
  border-color: #f0dcc8;
  background: #fff6ea
}

.feature-spotlight:nth-child(2) {
  background: #ffefdc
}

.spotlight-copy p {
  color: #795f50
}

.spotlight-copy a,
.inline-link {
  color: var(--blue)
}

.feature-spotlight>img {
  background: #4a2315
}

.flow-steps {
  border-color: #ead6c3
}

.flow-step {
  border-color: #ead6c3
}

.flow-step>span {
  color: var(--blue)
}

.industry-card.retail {
  background: #fde3c5;
  color: #753617
}

.industry-card.restaurant {
  background: #fff0d9;
  color: #8a4618
}

.industry-card.parking {
  background: #f8e4cf;
  color: #754222
}

.hardware-section {
  background: #fff3e4
}

.hardware-demo::before {
  background: #ffdfba
}

.hardware-screen {
  border-color: #6b321c;
  box-shadow: 0 30px 60px #73371931
}

.hardware-screen-top {
  border-color: #f0ded0
}

.hardware-screen-top span {
  color: var(--blue)
}

.scan-product {
  background: #fff0d9
}

.scan-symbol {
  color: #bd5b22
}

.scan-product small {
  color: #98694d
}

.scan-product svg {
  color: #ce6224
}

.bill-line {
  border-color: #f0e3d8
}

.print-action {
  background: var(--blue)
}

.hardware-tag {
  box-shadow: 0 14px 35px #6a331c24
}

.hardware-tag svg,
.barcode {
  color: var(--blue)
}

.contact-section {
  background: #fff2e3
}

.contact-copy {
  background: radial-gradient(circle at 80% 100%, #8e421e 0, transparent 48%), var(--navy)
}

.contact-copy>p {
  color: #f0d3bc
}

.contact-note {
  color: #f5dec9
}

.contact-note-icon {
  background: #ffb14a27;
  color: #ffc26b
}

.contact-card {
  border-color: #efd8c3;
  box-shadow: 0 22px 60px #73371912
}

.contact-card-heading>span {
  color: var(--blue)
}

.form-field label,
.interest-field legend {
  color: #5b3827
}

.form-field input,
.form-field select,
.form-field textarea {
  border-color: #e8d6c5;
  background: #fffdfa
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a88b7c
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #d9642024
}

.interest-grid span {
  border-color: #ead6c5;
  background: #fffaf4;
  color: #725342
}

.interest-grid input:checked+span {
  border-color: #eca05b;
  background: #ffead3;
  color: #a74718
}

.enquiry-review {
  border-color: #ecd9c8;
  background: #fff8f0
}

.enquiry-review-heading {
  border-color: #efded0
}

.enquiry-review-heading span,
.enquiry-review-heading button {
  color: var(--blue)
}

.enquiry-review-heading button {
  border-color: #e6cdb8;
  background: #fffaf5
}

.enquiry-review dt {
  color: #8b6d5e
}

.site-footer {
  background: #35180f
}

.footer-brand {
  padding: 7px 11px;
  border-radius: 12px;
  background: #fff5e7
}

.footer-main p {
  color: #dfbda4
}

.footer-nav {
  color: #e5c6b0
}

.footer-nav a:hover,
.footer-bottom a:hover {
  color: #ffc26b
}

.footer-bottom {
  border-color: #ffffff21;
  color: #cba88f
}

:focus-visible {
  outline-color: #ee8438
}

@media(max-width:680px) {
  .site-header {
    height: 70px
  }

  .nav-inner {
    gap: 8px
  }

  .brand-logo img {
    width: 108px;
    max-height: 48px
  }

  .primary-nav {
    top: 69px;
    background: #fffaf4;
    box-shadow: 0 25px 30px #6d321d20
  }

  .menu-toggle {
    border-color: #ead4c0;
    background: #fffaf4
  }
}

/* On phones, make the feature area a guided product explorer rather than a compact tab grid. */
.mobile-feature-guide,
.mobile-preview-status {
  display: none
}

@keyframes featurePreviewUpdate {
  0% {
    box-shadow: 0 0 0 0 #ffb14a00
  }

  45% {
    box-shadow: 0 0 0 5px #ffb14a55
  }

  100% {
    box-shadow: 0 0 0 0 #ffb14a00
  }
}

@media(max-width:760px) {
  .feature-section .section-heading {
    margin-bottom: 20px
  }

  .mobile-feature-guide {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 19px;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid #f0d6bd;
    border-radius: 13px;
    background: #fff4e5;
    color: #70432b
  }

  .mobile-feature-guide-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #ffe0bd;
    color: var(--blue)
  }

  .mobile-feature-guide-icon svg,
  .mobile-feature-guide-arrow {
    width: 17px;
    height: 17px
  }

  .mobile-feature-guide-arrow {
    color: var(--blue)
  }

  .mobile-feature-guide p {
    margin: 0;
    line-height: 1.35
  }

  .mobile-feature-guide strong,
  .mobile-feature-guide span {
    display: block
  }

  .mobile-feature-guide strong {
    font: 800 12px "Plus Jakarta Sans", sans-serif
  }

  .mobile-feature-guide p span {
    margin-top: 3px;
    font-size: 10px;
    color: #8b6855
  }

  .feature-list {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -18px 16px;
    padding: 2px 18px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
  }

  .feature-list::-webkit-scrollbar {
    display: none
  }

  .feature-tab {
    flex: 0 0 min(78vw, 280px);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "icon copy" "hint hint";
    gap: 9px 10px;
    min-height: 130px;
    padding: 14px;
    border-radius: 15px;
    scroll-snap-align: start;
    box-shadow: 0 4px 12px #6d321d09
  }

  .feature-tab-icon {
    grid-area: icon;
    width: 34px;
    height: 34px
  }

  .feature-tab>span:nth-child(2) {
    grid-area: copy
  }

  .feature-tab b {
    font-size: 12px
  }

  .feature-tab small {
    display: block !important;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.35
  }

  .feature-tab::after {
    grid-area: hint;
    content: "Tap to see preview  →";
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    border-top: 1px solid #f0dfd0;
    color: #9b6242;
    font-size: 10px;
    font-weight: 800
  }

  .feature-tab.active::after {
    content: "Preview shown below  ↓";
    color: #a74718;
    border-color: #f2c89f
  }

  .feature-tab.active {
    box-shadow: 0 7px 18px #c85b1e1a
  }

  .feature-panel {
    position: relative;
    scroll-margin-top: 16px
  }

  .feature-panel.is-updating {
    animation: featurePreviewUpdate .7s ease-out
  }

  .mobile-preview-status {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    padding: 16px 24px 0;
    color: #ffe4c6
  }

  .mobile-preview-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffb14a;
    box-shadow: 0 0 0 4px #ffb14a22
  }

  .mobile-preview-status span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em
  }

  .mobile-preview-status strong {
    font-size: 11px;
    color: #fff4e7
  }

  .panel-copy {
    padding-top: 18px
  }

  .panel-art {
    overflow: visible;
    padding: 8px 14px 16px
  }

  .panel-art img {
    min-width: 0;
    width: 100%;
    border-radius: 10px
  }

  .panel-art figcaption {
    min-width: 0;
    padding: 10px 6px 0;
    text-align: center;
    line-height: 1.45
  }
}

@media(max-width:380px) {
  .feature-tab {
    flex-basis: 80vw
  }

  .mobile-preview-status {
    padding-inline: 20px
  }

  .mobile-preview-status strong {
    font-size: 10px
  }
}

/* Mobile feature carousel: the product walkthrough itself is the only navigator. */
.mobile-carousel-head,
.mobile-swipe-hint,
.mobile-panel-category {
  display: none
}

@keyframes mobileFeatureInFromRight {
  from {
    opacity: .35;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes mobileFeatureInFromLeft {
  from {
    opacity: .35;
    transform: translateX(-28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@media(max-width:760px) {

  .mobile-feature-guide,
  .feature-list {
    display: none
  }

  .feature-layout {
    display: block
  }

  .feature-panel {
    min-height: 0;
    touch-action: pan-y
  }

  .mobile-carousel-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 18px 0
  }

  .mobile-preview-status {
    display: flex;
    min-width: 0;
    flex: 1;
    padding: 0
  }

  .mobile-preview-status span {
    font-size: 8px
  }

  .mobile-preview-status strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px
  }

  .mobile-carousel-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none
  }

  .mobile-feature-control {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid #ffffff3a;
    border-radius: 9px;
    background: #ffffff12;
    color: #fff4e7;
    cursor: pointer
  }

  .mobile-feature-control:active {
    background: #ffffff25;
    transform: scale(.95)
  }

  .mobile-feature-control svg {
    width: 16px;
    height: 16px
  }

  .mobile-feature-prev svg {
    transform: rotate(180deg)
  }

  .mobile-swipe-hint {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 20px 0;
    padding: 8px 10px;
    border-top: 1px solid #ffffff1e;
    color: #f2cda9;
    font-size: 10px;
    font-weight: 700
  }

  .mobile-swipe-hint svg {
    width: 15px;
    height: 15px
  }

  .panel-index {
    display: none
  }

  .mobile-panel-category {
    display: block;
    color: var(--lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em
  }

  .feature-panel.is-sliding-next .mobile-carousel-head,
  .feature-panel.is-sliding-next .mobile-swipe-hint,
  .feature-panel.is-sliding-next .panel-copy,
  .feature-panel.is-sliding-next .panel-art {
    animation: mobileFeatureInFromRight .34s ease-out both
  }

  .feature-panel.is-sliding-previous .mobile-carousel-head,
  .feature-panel.is-sliding-previous .mobile-swipe-hint,
  .feature-panel.is-sliding-previous .panel-copy,
  .feature-panel.is-sliding-previous .panel-art {
    animation: mobileFeatureInFromLeft .34s ease-out both
  }
}

@media(max-width:680px) {
  .footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
    padding-bottom: 38px
  }

  .footer-company {
    grid-column: 1 / -1
  }

  .footer-nav,
  .footer-contact,
  .footer-socials>div {
    gap: 9px;
    margin: 0
  }

  .footer-title {
    margin-bottom: 13px
  }

  .footer-nav a,
  .footer-contact a,
  .footer-socials a {
    font-size: 11px
  }
}

@media(max-width:390px) {
  .footer-main {
    grid-template-columns: 1fr
  }
}