:root {
  --blue-950: #071a3a;
  --blue-900: #0a2552;
  --blue-800: #103d7f;
  --blue-700: #1759b5;
  --blue-600: #246fdf;
  --blue-500: #4288f5;
  --blue-300: #a9cbff;
  --blue-100: #eaf3ff;
  --blue-50: #f5f9ff;
  --ink: #10213d;
  --text: #51627b;
  --muted: #72829a;
  --border: #dfe8f4;
  --white: #ffffff;
  --danger: #ef4c5a;
  --shadow-sm: 0 10px 30px rgba(13, 56, 117, .08);
  --shadow-md: 0 24px 70px rgba(13, 56, 117, .14);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --container: 1180px;
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

button, input, textarea, select { font: inherit; }

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

.section { padding: 108px 0; position: relative; }

.centered { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 9999;
  transform: translateY(-150%);
  background: var(--blue-900);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }



.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span:not(.sr-only) {
  width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 13px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-small { min-height: 42px; padding: 0 16px; font-size: 13px; }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: white;
  box-shadow: 0 12px 28px rgba(36,111,223,.25);
}
.btn-primary:hover { box-shadow: 0 16px 36px rgba(36,111,223,.32); }
.btn-secondary {
  background: white;
  border-color: #cfdced;
  color: var(--blue-800);
}
.btn-secondary:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--blue-800); }
.btn-white { background: white; color: var(--blue-800); }
.btn-outline-light { color: white; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }

.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--blue-600);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .16em;
}
.eyebrow.light { color: #cfe2ff; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.035em; }
h1 {
  font-size: clamp(48px, 6vw, 78px);
  margin-bottom: 26px;
}
h2 {
  font-size: clamp(38px, 4.2vw, 58px);
  margin-bottom: 22px;
}
h1 span, h2 span { color: var(--blue-600); }
h3 { font-size: 21px; margin-bottom: 12px; }
p { color: var(--text); }



.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading.centered { margin-inline: auto; }
.section-heading p { font-size: 17px; margin-bottom: 0; }

.problem-section { background: white; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.problem-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.problem-card.reveal.visible:hover{
    transform:translateY(-8px) !important;
    box-shadow:var(--shadow-sm);
    border-color:#c8dbf2;
}
.problem-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff1f3;
  color: var(--danger);
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 20px;
}
.problem-card p { margin-bottom: 0; font-size: 14px; }
.section-action { margin-top: 38px; }
.text-link { color: var(--blue-700); font-size: 18px; font-weight: 800; }
.text-link span { transition: transform .2s ease; display: inline-block; }
.text-link:hover span { transform: translateX(4px); }

.platform-section { background: var(--blue-50); }

/* =========================================================
   INTERACTIVE ERP ECOSYSTEM
========================================================= */
.erp-ecosystem {
  position: relative;
  width: min(590px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}

.erp-ecosystem::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 28%, rgba(228,239,255,.82) 29% 58%, rgba(224,237,255,.22) 59% 72%, transparent 73%);
  filter: drop-shadow(0 28px 55px rgba(29, 87, 165, .12));
}

.ecosystem-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ecosystem-ring {
  fill: none;
  stroke: #bcd5f4;
  stroke-width: 1.25;
  stroke-dasharray: 5 7;
  opacity: .8;
}

.ecosystem-ring-inner {
  stroke: #d4e3f6;
  stroke-dasharray: 3 6;
}

.ecosystem-connector {
  fill: none;
  stroke: #9fc3ef;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  opacity: .58;
  transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease;
  animation: ecosystemFlow 7s linear infinite;
}

.connector-dot {
  fill: #fff;
  stroke: #79aaf0;
  stroke-width: 2;
  transition: fill .25s ease, stroke .25s ease, r .25s ease;
}

@keyframes ecosystemFlow {
  to { stroke-dashoffset: -56; }
}

.ecosystem-hub{
    position:absolute;
    left:50%;
    top:50%;
    z-index:4;

    width:185px;
    height:185px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 30%,
        #4f92ff 0%,
        #2d72dd 48%,
        #174fa8 100%);

    border:2px solid rgba(255,255,255,.18);

    box-shadow:
    0 12px 30px rgba(44,95,180,.10),
    0 4px 10px rgba(44,95,180,.06);

    transition:.35s ease;
}

.ecosystem-hub::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.22);
}


.ecosystem-hub:hover{
    transform:translate(-50%,-50%) scale(1.05);

    box-shadow:
    0 12px 30px rgba(44,95,180,.10),
    0 4px 10px rgba(44,95,180,.06);
}


@keyframes hubPulse {
  0% { transform: scale(.76); opacity: 0; }
  30% { opacity: .7; }
  100% { transform: scale(1.55); opacity: 0; }
}

.hub-brand {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
color:#fff;
}

.hub-title {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 800;
color:#fff;
}

.hub-subtitle {
  margin-top: 3px;
  color: #dceaff;
  font-size: 12px;
  font-weight: 650;
color:#eaf3ff;
}
.ecosystem-node{

    position:absolute;
    z-index:5;

    width:188px;
    min-height:76px;

    display:grid;
    grid-template-columns:42px minmax(0,1fr) 18px;
    align-items:center;
    gap:10px;

    padding:12px 12px 12px 14px;

    border:1px solid #dce8f6;
    border-radius:18px;

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(12px);

    box-shadow:
        0 8px 22px rgba(34,102,215,.08),
        0 2px 8px rgba(34,102,215,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}
.ecosystem-node:hover{

    transform:translateY(-4px);

    border-color:#8ab6ff;

    background:#fff;

    box-shadow:
        0 18px 40px rgba(34,102,215,.15),
        0 6px 16px rgba(34,102,215,.08);
}
.ecosystem-node:focus-visible {
  z-index: 8;
  border-color: #82b4f4;
  background: #fff;
  box-shadow: 0 22px 48px rgba(25, 91, 184, .2);
  outline: none;
}

.node-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #2369cf;
  background: linear-gradient(145deg, #edf5ff, #dcecff);
  transition: transform .25s ease, color .25s ease, background .25s ease;
}

.node-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecosystem-node:hover .node-icon,
.ecosystem-node:focus-visible .node-icon {
  color: #fff;
  background: linear-gradient(145deg, #2369cf, #438cf3);
  transform: rotate(-4deg) scale(1.07);
}

.node-content {
  min-width: 0;
}

.node-content strong,
.node-content small {
  display: block;
}

.node-content strong {
  color: #123b76;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.node-content small {
  margin-top: 4px;
  color: #718199;
  font-size: 9px;
  line-height: 1.35;
}

.node-arrow {
  color: #8aa6ca;
  font-size: 15px;
  transition: color .25s ease, transform .25s ease;
}

.ecosystem-node:hover .node-arrow,
.ecosystem-node:focus-visible .node-arrow {
  color: #2369cf;
  transform: translate(2px, -2px);
}

.node-pos {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.node-pos:hover,
.node-pos:focus-visible {
  transform: translateX(-50%) translateY(-7px);
}

.node-inventory {
  right: -2%;
  top: 22%;
}

.node-inventory:hover,
.node-inventory:focus-visible {
  transform: translate(7px, -5px);
}

.node-purchasing {
  right: -2%;
  bottom: 22%;
}

.node-purchasing:hover,
.node-purchasing:focus-visible {
  transform: translate(7px, 5px);
}

.node-crm {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.node-crm:hover,
.node-crm:focus-visible {
  transform: translateX(-50%) translateY(7px);
}

.node-analytics {
  left: -2%;
  bottom: 22%;
}

.node-analytics:hover,
.node-analytics:focus-visible {
  transform: translate(-7px, 5px);
}

.node-finance {
  left: -2%;
  top: 22%;
}

.node-finance:hover,
.node-finance:focus-visible {
  transform: translate(-7px, -5px);
}

/* Highlight the corresponding connector in browsers that support :has() */
.erp-ecosystem:has(.node-pos:hover) .connector-pos,
.erp-ecosystem:has(.node-inventory:hover) .connector-inventory,
.erp-ecosystem:has(.node-purchasing:hover) .connector-purchasing,
.erp-ecosystem:has(.node-crm:hover) .connector-crm,
.erp-ecosystem:has(.node-analytics:hover) .connector-analytics,
.erp-ecosystem:has(.node-finance:hover) .connector-finance,
.erp-ecosystem:has(.node-pos:focus-visible) .connector-pos,
.erp-ecosystem:has(.node-inventory:focus-visible) .connector-inventory,
.erp-ecosystem:has(.node-purchasing:focus-visible) .connector-purchasing,
.erp-ecosystem:has(.node-crm:focus-visible) .connector-crm,
.erp-ecosystem:has(.node-analytics:focus-visible) .connector-analytics,
.erp-ecosystem:has(.node-finance:focus-visible) .connector-finance {
  stroke: #2f7be4;
  stroke-width: 3;
  opacity: 1;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.feature-list { display: grid; gap: 22px; margin: 30px 0 34px; }
.feature-list > div { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.feature-list > div > span {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #dcecff;
  color: var(--blue-700);
  font-weight: 900;
}
.feature-list p { margin: 0; font-size: 14px; }
.feature-list strong { color: var(--ink); font-size: 15px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.module-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: 0 8px 30px rgba(21,64,121,.04);
  transition: .2s ease;
}
.module-card.reveal.visible:hover{
    transform:translateY(-8px) !important;
    box-shadow:var(--shadow-sm);
    border-color:#c8dbf2;
}
.module-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;

  font-size:22px;      /* Increase from current */
  line-height:1;

  border-radius:15px;
  background:var(--blue-100);
  color:var(--blue-700);

  transition:
    transform .25s ease,
    color .25s ease,
    background .25s ease;
}

.module-card .module-icon{
  max-width:52px;
  min-width:52px;
}


.module-card:hover .module-icon{
  transform:translateY(-3px) rotate(-3deg) scale(1.04);
  color:#fff;
  background:linear-gradient(145deg,#2369cf,#438cf3);
}
.module-card p { font-size: 14px; min-height: 69px; }
.module-card a { color: var(--blue-700); font-size: 13px; font-weight: 800; }

#modules-overview {
  scroll-margin-top: 110px;
}

.industries-section { background: #fbfdff; }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.industry-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  transition: .25s ease;
}
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.industry-card img, .industry-placeholder {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
}
.industry-card:hover img { transform: scale(1.035); }
.industry-card img { transition: transform .35s ease; }
.industry-card-body { padding: 22px; }
.industry-card-body h3 { font-size: 18px; }
.industry-card-body p { font-size: 13px; margin-bottom: 0; }
.industry-tag {
  display: inline-block;
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 9px;
  text-transform: uppercase;
}
.industry-card.featured { border-color: #8ab7f4; box-shadow: 0 20px 45px rgba(36,111,223,.12); }
.featured-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--blue-600);
  color: white;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.industry-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 800;
}
.industry-placeholder {
  display: grid;
  place-items: center;
  font-size: 54px;
  font-weight: 800;
  color: white;
}
.industry-wholesale { background: linear-gradient(135deg, #245da9, #73aaff); }
.industry-production { background: linear-gradient(135deg, #15345f, #4e8adf); }
.industry-specialty { background: linear-gradient(135deg, #597494, #8daacb); }
.industry-service { background: linear-gradient(135deg, #324f72, #74a0d3); }

.industry-cta {
  margin-top: 34px;
  padding: 30px 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f0f6ff, #f9fbff);
  border: 1px solid #d8e6f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.industry-cta h3 { margin-bottom: 6px; }
.industry-cta p { margin-bottom: 0; }

.pricing-advantage {
  background: linear-gradient(140deg, #081c3c 0%, #0f3671 55%, #1956a5 100%);
  color: white;
  overflow: hidden;
}
.pricing-advantage h2, .pricing-advantage h3 { color: white; }
.pricing-advantage p { color: #c7d7eb; }
.saving-list { display: grid; gap: 12px; margin: 30px 0 34px; }
.saving-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 20px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}
.saving-list span { font-weight: 750; }
.saving-list strong { font-size: 22px; }
.saving-list small { grid-column: 1 / -1; color: #9eb8d8; }
.pricing-panel {
margin-top: 12px;
  padding: 25px 40px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
}
.pricing-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #a9c9f5; }
.pricing-orb {
  width: 220px; height: 220px;
  border-radius: 50%;
  margin: 24px auto 34px;
  display: grid;
  place-items: center;
  align-content: center;
  background: radial-gradient(circle at 35% 30%, #5d9ef4, #1b5ab1 58%, #0f3f82);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.08), 0 25px 60px rgba(0,0,0,.22);
}
.pricing-orb span { font-size: 62px; font-weight: 800; line-height: 1; }
.pricing-orb small { color: #d8e7fb; font-weight: 700; }
.pricing-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.pricing-panel li { color: #e7f0fb; }
.pricing-panel li::before { content: "✓"; margin-right: 10px; color: #8fc0ff; font-weight: 900; }

.timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg, #d9e7f7, #7fb1f3, #d9e7f7);
}
.timeline-item { position: relative; z-index: 1; text-align: center; }
.timeline-item > span {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #9bc1f3;
  color: var(--blue-700);
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(34,99,186,.12);
}
.timeline-item h3 { font-size: 16px; }
.timeline-item p { font-size: 12px; }

.site-footer {
  padding: 70px 0 28px;
  background: #07182f;
  color: white;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 50px;
}
.footer-brand img { width: 180px; margin-bottom: 0px; filter: brightness(0) invert(1); }
.footer-brand p { color: #9fb1c9; max-width: 390px; }
.footer-contact { display: grid; gap: 5px; color: #b7c6d9; font-size: 13px; }
.site-footer h3 { font-size: 14px; letter-spacing: .02em; margin-bottom: 20px; }
.site-footer .footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 10px; }
.site-footer .footer-grid > div:not(.footer-brand) a { color: #9fb1c9; font-size: 13px; }
.site-footer a:hover { color: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #8296b0;
  font-size: 12px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0ms; }
.delay-2 { transition-delay: 60ms; }
.delay-3 { transition-delay: 120ms; }
.delay-4 { transition-delay: 180ms; }
.delay-5 { transition-delay: 240ms; }
.delay-6 { transition-delay: 300ms; }

/* =========================================================
   HEADER & NAVIGATION
========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: rgba(223, 232, 244, .95);
  box-shadow: 0 10px 35px rgba(11, 39, 78, .08);
}

.nav-wrap {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  flex: 0 0 auto;
}

.brand img {
  width: 140px;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-left:4px;   /* spacing after logo */
  margin-right: 22px; /* was auto */  /* pushes phone & button right */
}

.primary-nav > a,
.nav-dropdown-toggle {
  position: relative;
  padding: 32px 0;
  border: 0;
  background: none;
  color: #26364f;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.primary-nav > a::after,
.nav-dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 21px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.primary-nav > a:hover,
.primary-nav > a.active,
.nav-dropdown-toggle:hover {
  color: var(--blue-600);
}

.primary-nav > a:hover::after,
.primary-nav > a.active::after,
.nav-dropdown:hover .nav-dropdown-toggle::before,
.nav-dropdown.open .nav-dropdown-toggle::before {
  transform: scaleX(1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-left: 28px;
}
.nav-dropdown {
  position: relative;
}

.nav-phone{display:inline-flex;align-items:center;gap:8px;color:#202b3c;font-size:16px;font-weight:600;white-space:nowrap}
.nav-phone svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-phone:hover{color:var(--blue-600)}

.nav-dropdown-toggle::after {
  content: "⌄";
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  transition: transform .2s ease;
}

.mega-menu {
  width: 560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.nav-demo-btn {
  min-width: 138px;
  margin-left:12px;   /* spacing after logo */
  margin-right:auto;  /* pushes phone & button right */
white-space: nowrap;

}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* =========================================================
   HERO
========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 32px 0 105px;
  background:
    radial-gradient(circle at 80% 12%, rgba(70, 144, 255, .14), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(520px, 1fr);
  align-items: center;
  gap: 70px;
}

.hero-copy {
  max-width: 680px;
}

.hero-title {
  margin: 0 0 38px;
  font-size: clamp(60px, 5vw, 82px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.052em;
}

.hero-line {
  display: block;
  line-height: inherit;
  white-space: nowrap;
}

.hero-line + .hero-line {
  margin-top: .06em;
}

.hero-line-dark {
  color: var(--ink);
}

.hero-line-blue {
  color: var(--blue-600);
}

.hero-lead {
  max-width: 555px;
  margin-bottom: 58px;
  font-size: 17px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 58px;
margin-bottom: 28px;
  color: #5d708c;
  font-size: 13px;
  font-weight: 700;
}

.trust-strip span {
  position: relative;
  padding-left: 22px;
}

.trust-strip span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8f2ff;
  box-shadow: inset 0 0 0 1px #bdd6f6;
  transform: translateY(-50%);
}

.trust-strip span::after {
  content: "✓";
  position: absolute;
  left: 3px;
  top: 50%;
  color: var(--blue-600);
  font-size: 9px;
  font-weight: 900;
  transform: translateY(-56%);
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 650px;
  justify-self: end;
}

.dashboard-shell {
  padding: 16px;
  border: 1px solid rgba(207, 220, 237, .9);
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 34px 90px rgba(18, 64, 126, .18);
}

.dashboard-shell img {
  width: 100%;
  border-radius: 18px;
}

.dashboard-topbar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 10px;
}

.dashboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8e2ef;
}

.dashboard-label {
  margin-left: auto;
  color: #71839b;
  font-size: 11px;
  font-weight: 700;
}

.floating-card {
  position: absolute;
  z-index: 3;
  min-width: 190px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-md);
}

.floating-card strong,
.floating-card span {
  display: block;
}

.floating-card strong {
  color: var(--blue-800);
  font-size: 13px;
}

.floating-card span {
  color: var(--muted);
  font-size: 10px;
}

.floating-card-one {
  left: -42px;
  bottom: 56px;
}

.floating-card-two {
  right: -18px;
  top: 64px;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(15px);
}

.hero-glow-one {
  width: 260px;
  height: 260px;
  right: -90px;
  top: 100px;
  background: #dcecff;
  opacity: .34;
}

.hero-glow-two {
  width: 180px;
  height: 180px;
  left: -80px;
  bottom: 40px;
  background: #edf6ff;
  opacity: .28;
}



/* =========================================================
   TRUST METRICS
========================================================= */
.metrics {
  padding: 5px 0;
  background: #f7faff;
  border-top: 1px solid #e4edf8;
  border-bottom: 1px solid #e4edf8;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metrics-grid > div {
  padding: 8px 28px;
  border-right: 1px solid #dfe8f4;
}

.metrics-grid > div:first-child {
  padding-left: 0;
}

.metrics-grid > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.metrics-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #1e5fe0;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.metrics-grid > div:nth-child(3) strong,
.metrics-grid > div:nth-child(4) strong {
  font-size: 25px;
}

.metrics-grid span {
  display: block;
  color: #667993;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}



.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 22px;
  height: 2px;
  flex: 0 0 2px;
  background: var(--ink);
  border-radius: 999px;
}

.pricing-disclaimer{
    margin-top:18px;
    font-size:13px;
    line-height:1.6;
    color:rgba(255,255,255,.65);
}

.pricing-highlights{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:25px;
}

.pricing-highlights strong{
    display:block;
    font-size:30px;
    font-weight:800;
    color:#fff;
}

.pricing-highlights span{
    display:block;
    margin-top:6px;
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.4;
}

@media(max-width:768px){

    .pricing-highlights{
        grid-template-columns:1fr;
        gap:20px;
        text-align:center;
    }

}

.pricing-testimonial{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.15);
}

.pricing-testimonial .stars{
    font-size:13px;
    color:#FFD54A;
    letter-spacing:4px;
margin-top:0px;
    margin-bottom:10px;
}

.pricing-testimonial p{
    margin:0;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.92);
    font-style:italic;
}

.testimonial-footer{
    margin-top:22px;
}

.testimonial-footer strong{
    display:block;
    color:#fff;
    font-size:17px;
    font-weight:700;
}

.testimonial-footer span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.65);
    font-size:14px;
}

.implementation-section{
background:#f5f9ff;
  padding:90px 0 30px;
  margin:0;
}

.implementation-section .section-heading{
  margin-bottom:45px;
}

.implementation-section .timeline,
.implementation-section .timeline-item{
  margin-bottom:0;
}

/* =========================================================
   IMPLEMENTATION TIMELINE — ENHANCED PROGRESS ANIMATION
========================================================= */

.implementation-section .timeline{
  position:relative;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

/* neutral base line */
.implementation-section .timeline::before{
  content:"";
  position:absolute;
  left:4.5%;
  right:4.5%;
  top:26px;

  height:2px;

  background:#d9e5f3;

  z-index:0;
}

/* animated blue progress line */
.implementation-section .timeline::after{
  content:"";
  position:absolute;

  left:4.5%;
  top:26px;

  width:0;
  height:2px;

  background:linear-gradient(
    90deg,
    #246fdf,
    #4b91f5
  );

  z-index:1;

  transition:
    width 1.8s cubic-bezier(.22,1,.36,1);
}

.implementation-section .timeline.timeline-active::after{
  width:91%;
}


/* each step */

.implementation-section .timeline-item{
  position:relative;
  z-index:2;

  opacity:.42;
  transform:translateY(10px);

  transition:
    opacity .45s ease,
    transform .45s ease;
}


/* numbered circle */

.implementation-section .timeline-item > span{
  position:relative;
  z-index:3;

  background:#fff;

  border:2px solid #cfe0f7;

  color:#6d7d92;

  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}


/* activate each step */

.implementation-section .timeline-item.step-active{
  opacity:1;
  transform:translateY(0);
}

.implementation-section .timeline-item.step-active > span{
  background:#2d72dd;
  border-color:#2d72dd;

  color:#fff;

  transform:scale(1.04);

  box-shadow:
    0 8px 22px rgba(45,114,221,.20);
}


/* title becomes slightly stronger on activation */

.implementation-section .timeline-item.step-active h3{
  color:#10223f;
}


/* keep hover subtle */

.implementation-section .timeline-item:hover > span{
  transform:scale(1.08);
}

/* =========================================================
   FINAL CTA
========================================================= */

.final-cta-section{
    position:relative;
    overflow:hidden;

    padding:110px 30px;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(65,137,244,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(47,113,222,.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b1c35 0%,
            #102b52 52%,
            #153e72 100%
        );

    color:#fff;
}


/* subtle ambient glow */
.final-cta-section::before{
    content:"";

    position:absolute;

    top:-160px;
    right:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        rgba(75,145,245,.10);

    filter:blur(25px);

    pointer-events:none;
}


.final-cta-container{
    width:min(1180px,100%);
    margin:0 auto;
}


.final-cta-content{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:0 auto;

    text-align:center;
}


/* =========================================================
   EYEBROW
========================================================= */

.final-cta-eyebrow{
    display:block;

    margin-bottom:20px;

    color:#8fbcff;

    font-size:12px;
    font-weight:800;

    letter-spacing:.18em;
}


/* =========================================================
   HEADING
========================================================= */

.final-cta-content h2{
    margin:0;

    color:#ffffff;

    font-size:clamp(46px,5vw,70px);
    font-weight:800;

    line-height:1.03;

    letter-spacing:-.05em;
}


.final-cta-content h2 span{
    display:block;

    color:#66a5ff;
}


/* =========================================================
   BODY
========================================================= */

.final-cta-content > p{
    max-width:720px;

    margin:28px auto 0;

    color:rgba(255,255,255,.75);

    font-size:17px;
    line-height:1.75;
}


/* =========================================================
   ACTIONS
========================================================= */

.final-cta-actions{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;

    margin-top:38px;
}


/* primary */

.final-cta-primary{
    display:inline-flex;
    align-items:center;

    gap:14px;

    padding:17px 26px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #2d72dd,
            #4a91f5
        );

    color:#fff;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 14px 34px rgba(38,105,220,.28);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.final-cta-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 20px 42px rgba(38,105,220,.36);
}


.final-cta-primary span{
    font-size:15px;
    font-weight:700;

    transition:
        transform .25s ease;
}


.final-cta-primary:hover span{
    transform:
        translateX(4px);
}


/* secondary */

.final-cta-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:17px 26px;

    border:1px solid
        rgba(255,255,255,.28);

    border-radius:10px;

    color:#ffffff;

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.final-cta-secondary:hover{
    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(255,255,255,.45);
}


/* =========================================================
   PROOF / REASSURANCE
========================================================= */

.final-cta-proof{
    display:flex;
    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:28px;

    margin-top:34px;

    color:
        rgba(255,255,255,.65);

    font-size:13px;
    font-weight:600;
}


.final-cta-proof span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}


/* =========================================================
   HOVER LIGHT EFFECT
========================================================= */

.final-cta-content::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-110px;

    width:540px;
    height:180px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(73,145,245,.17),
            transparent 70%
        );

    pointer-events:none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:700px){

    .final-cta-section{
        padding:82px 22px;
    }

    .final-cta-content h2{
        font-size:42px;
    }

    .final-cta-content > p{
        font-size:15px;
    }

    .final-cta-actions{
        flex-direction:column;
    }

    .final-cta-primary,
    .final-cta-secondary{
        width:100%;
        max-width:340px;
    }

    .final-cta-proof{
        flex-direction:column;

        gap:12px;
    }

}


/* ANIMATED HERO COMMAND CENTRE */
.hero-command-centre{max-width:690px}.command-window{overflow:hidden;border:1px solid #d7dde5;border-radius:18px;background:#fff;box-shadow:0 32px 90px rgba(15,46,91,.18)}.command-browserbar{height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid #d8dde4;background:#eef0f3}.command-browser-dot{width:10px;height:10px;border-radius:50%;background:#cfd9e4}.command-address{min-width:0;flex:1;height:28px;display:flex;align-items:center;margin-left:8px;padding:0 12px;overflow:hidden;border:1px solid #d4d8de;border-radius:4px;color:#777d86;background:#fff;font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}.command-dashboard{padding:22px 18px 18px;color:#202228;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.command-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.command-heading strong{color:#69717c;font-family:"Manrope",sans-serif;font-size:14px;font-weight:800}.command-heading>span{color:#9a9fa8;font-size:10px}.command-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.command-kpi{min-width:0;padding:13px 12px;border:1px solid #e1e4e8;border-radius:4px;background:#f7f7f8}.command-kpi small,.command-kpi strong,.command-kpi span{display:block}.command-kpi small{margin-bottom:6px;color:#999ea6;font-size:9px;letter-spacing:.08em}.command-kpi strong{overflow:hidden;color:#191b20;font-size:17px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.command-trend{margin-top:6px;font-family:"Manrope",sans-serif;font-size:9px;font-weight:800}.command-trend.positive{color:#128255}.command-trend.negative{color:#d90045}.command-panel{padding:15px 13px;border:1px solid #e1e4e8;border-radius:4px;background:#fff}.command-panel+.command-panel{margin-top:10px}.command-panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.command-panel-title strong{color:#777e87;font-family:"Manrope",sans-serif;font-size:11px;font-weight:800}.command-panel-title span{color:#999ea6;font-size:9px;letter-spacing:.05em}.branch-row{display:grid;grid-template-columns:88px minmax(0,1fr) 64px;align-items:center;gap:10px;min-height:25px}.branch-row>span{overflow:hidden;color:#59606a;font-family:"Manrope",sans-serif;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.branch-row b{color:#353941;font-size:9px;font-weight:500;text-align:right;white-space:nowrap}.branch-track{height:7px;overflow:hidden;border-radius:2px;background:#eceef1}.branch-fill{display:block;width:0;height:100%;border-radius:inherit;transition:width 1.15s cubic-bezier(.22,1,.36,1)}.branch-magenta{background:#dd0a4f}.branch-indigo{background:#42549b}.branch-teal{background:#167a7b}.branch-amber{background:#bd6c00}.branch-grey{background:#8a8d92}.alert-panel{position:relative;overflow:hidden;min-height:165px}.alert-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto 54px;align-items:center;gap:8px;min-height:44px;border-top:1px solid #eceef1}.alert-row:first-of-type{border-top:0}.alert-symbol{color:#c1c6cc;font-size:12px}.alert-row div{min-width:0}.alert-row strong,.alert-row small{display:block}.alert-row strong{overflow:hidden;color:#282c33;font-family:"Manrope",sans-serif;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.alert-row small{margin-top:2px;color:#a1a6ae;font-size:8px}.alert-row>b{color:#363a41;font-size:9px;font-weight:500;text-align:right;white-space:nowrap}.alert-chip{padding:4px 6px;border-radius:2px;font-size:8px;font-style:normal;white-space:nowrap}.alert-chip.danger{color:#bc0040;background:#fde6ee}.alert-chip.warning{color:#8b6100;background:#fff2cf}.alert-chip.neutral{color:#59606a;background:#edf0f4}.intelligence-card{position:absolute;right:-22px;bottom:-28px;z-index:4;width:220px;padding:14px;border:1px solid #d9dde4;border-radius:4px;background:rgba(255,255,255,.98);box-shadow:0 22px 60px rgba(12,39,77,.18)}.intelligence-title{display:flex;align-items:center;gap:8px;color:#5b616b;font-size:11px;font-weight:800}.intelligence-title span{color:#db0a4c;font-size:17px}.intelligence-bars{height:48px;display:flex;align-items:end;gap:5px;margin:12px 0 9px}.intelligence-bars i{flex:1;height:12%;background:#e8e9ec;transition:height 1.1s cubic-bezier(.22,1,.36,1),background .25s ease}.intelligence-bars i:last-child{background:#dd0a4f}.intelligence-card p{margin:0;color:#8a9099;font-size:8px}.intelligence-card strong{display:block;margin-top:3px;color:#2c3037;font-size:9px;line-height:1.35}@media(prefers-reduced-motion:reduce){.branch-fill,.intelligence-bars i{transition:none}}


/* =========================================================
   COMPACT HERO DASHBOARD — SINGLE-SCREEN REFINEMENT
========================================================= */
.hero {
  padding-top: 20px;
  padding-bottom: 42px;
}

.hero-command-centre {
  max-width: 650px;
}

.command-browserbar {
  height: 38px;
  padding-inline: 12px;
}

.command-browser-dot {
  width: 8px;
  height: 8px;
}

.command-address {
  height: 24px;
  font-size: 10px;
}

.command-dashboard {
  padding: 15px 14px 13px;
}

.command-heading {
  margin-bottom: 11px;
}

.command-heading strong {
  font-size: 12px;
}

.command-heading > span {
  font-size: 9px;
}

.command-kpis {
  gap: 8px;
  margin-bottom: 10px;
}

.command-kpi {
  padding: 9px 10px;
}

.command-kpi small {
  margin-bottom: 4px;
  font-size: 8px;
}

.command-kpi strong {
  font-size: 15px;
}

.command-trend {
  margin-top: 4px;
  font-size: 8px;
}

.command-panel {
  padding: 11px 12px;
}

.command-panel + .command-panel {
  margin-top: 8px;
}

.command-panel-title {
  margin-bottom: 8px;
}

.branch-row {
  min-height: 24px;
}

.branch-track {
  height: 6px;
}

.alert-panel {
  min-height: 128px;
}

.alert-row {
  min-height: 35px;
}

.alert-chip {
  padding: 3px 5px;
}

.intelligence-card {
  right: -16px;
  bottom: -20px;
  width: 205px;
  padding: 12px;
}

.intelligence-bars {
  height: 38px;
  margin: 9px 0 7px;
}


/* HERO DASHBOARD — FINAL COMPACT FIX */
.alert-panel,
.intelligence-card { display: none !important; }

.hero {
  padding-top: 18px;
  padding-bottom: 26px;
}

.command-window {
  border-radius: 16px;
}

.command-browserbar {
  height: 34px;
}

.command-dashboard {
  padding: 12px 12px 10px;
}

.command-heading {
  margin-bottom: 8px;
}

.command-kpis {
  margin-bottom: 8px;
}

.command-kpi {
  padding: 7px 9px;
}

.command-kpi small {
  margin-bottom: 3px;
}

.command-kpi strong {
  font-size: 14px;
}

.command-trend {
  margin-top: 3px;
}

.command-panel {
  padding: 9px 10px;
}

.command-panel-title {
  margin-bottom: 6px;
}

.branch-row {
  min-height: 22px;
}

.metrics {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* =========================================================
   HERO DASHBOARD — COMPACT BOTTOM PANEL RESTORED
========================================================= */
.alert-panel.compact-alert-panel {
  display: block !important;
  min-height: 0;
  margin-top: 8px;
  padding: 8px 10px;
}

.compact-alert-panel .command-panel-title {
  margin-bottom: 3px;
}

.compact-alert-panel .alert-row {
  min-height: 29px;
  grid-template-columns: 12px minmax(0, 1fr) auto 48px;
  gap: 7px;
}

.compact-alert-panel .alert-row strong {
  font-size: 8.5px;
}

.compact-alert-panel .alert-row small {
  font-size: 7px;
}

.compact-alert-panel .alert-chip {
  padding: 2px 4px;
  font-size: 6.5px;
}

.compact-alert-panel .alert-row > b {
  font-size: 7.5px;
}

.compact-intelligence {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid #eceef1;
}

.compact-intelligence > span {
  color: #dd0a4f;
  font-size: 12px;
}

.compact-intelligence strong {
  color: #676d76;
  font-family: "Manrope", sans-serif;
  font-size: 8px;
  white-space: nowrap;
}

.compact-intelligence small {
  overflow: hidden;
  color: #8e949d;
  font-size: 7px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero {
  padding-top: 14px;
  padding-bottom: 20px;
}

.command-dashboard {
  padding-bottom: 9px;
}

/* =========================================================
   HERO DASHBOARD — TALLER BALANCED VERSION + AI VISUAL
========================================================= */
.hero {
  padding-top: 58px;
  padding-bottom: 70px;
}

.hero-command-centre {
  margin-top: 22px;
  max-width: 700px;
  padding-bottom: 34px;
}

.command-window {
  min-height: 430px;
}

.command-browserbar {
  height: 48px;
}

.command-dashboard {
  padding: 20px 16px 14px;
}

.command-kpi {
  padding: 12px 11px;
}

.command-panel {
  padding: 13px 12px;
}

.alert-panel.compact-alert-panel {
  padding: 10px 11px;
}

.compact-alert-panel .alert-row {
  min-height: 34px;
}

.hero-ai-card {
  position: absolute;
  right: -18px;
  bottom: 0;
  z-index: 6;
  width: 225px;
  padding: 13px 14px 12px;
  border: 1px solid #dce2ea;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 48px rgba(16,48,91,.16);
}

.hero-ai-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5d6470;
  font-size: 10px;
}

.hero-ai-heading span {
  color: #d90b4c;
  font-size: 16px;
}

.hero-ai-heading strong {
  font-weight: 800;
}

.hero-ai-chart {
  height: 42px;
  display: flex;
  align-items: end;
  gap: 5px;
  margin: 10px 0 7px;
}

.hero-ai-chart i {
  flex: 1;
  height: 12%;
  background: #e8eaee;
  transition: height 1.2s cubic-bezier(.22,1,.36,1);
}

.hero-ai-chart i:last-child {
  background: #d90b4c;
}

.hero-ai-card small,
.hero-ai-card b {
  display: block;
}

.hero-ai-card small {
  color: #9299a3;
  font-size: 7px;
}

.hero-ai-card b {
  margin-top: 2px;
  color: #2d3239;
  font-size: 8px;
  line-height: 1.35;
}

.metrics-grid strong[data-count] {
  min-width: 72px;
  font-variant-numeric: tabular-nums;
}




/* =========================================================
   LIVE ERP SCREENS — PART 2A
   Section layout, left navigation and browser frame
========================================================= */

.erp-demo-section{
  position:relative;
  overflow:hidden;
  padding:110px 0 120px;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(66,136,245,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbff 100%
    );
}

.erp-demo-section::before{
  content:"";
  position:absolute;
  left:-180px;
  bottom:-220px;
  width:460px;
  height:460px;
  border-radius:50%;
  background:rgba(36,111,223,.06);
  filter:blur(20px);
  pointer-events:none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.erp-demo-section .section-header{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto 58px;
  text-align:center;
}

.erp-demo-section .section-label{
  display:inline-block;
  margin-bottom:16px;
  color:var(--blue-600);
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.erp-demo-section .section-header h2{
  margin:0 0 22px;
  color:var(--ink);
  font-size:clamp(38px,4.2vw,58px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.erp-demo-section .section-header h2 span{
  color:var(--blue-600);
}

.erp-demo-section .section-header p{
  max-width:720px;
  margin:0 auto;
  color:var(--text);
  font-size:17px;
  line-height:1.75;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
========================================================= */

.erp-demo-wrapper{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:34px;
  align-items:start;
}

/* =========================================================
   LEFT SCREEN NAVIGATION
========================================================= */

.erp-demo-menu{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.erp-demo-item{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:15px;

  width:100%;
  min-height:116px;
  padding:20px 18px;

  border:1px solid transparent;
  border-radius:16px;

  background:transparent;
  color:#66758b;

  cursor:pointer;

  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease,
    color .24s ease;
}

.erp-demo-item::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;

  width:3px;

  border-radius:0 999px 999px 0;

  background:linear-gradient(
    180deg,
    var(--blue-500),
    var(--blue-700)
  );

  opacity:0;
  transform:scaleY(.4);

  transition:
    opacity .24s ease,
    transform .24s ease;
}

.erp-demo-item:hover{
  color:var(--ink);
  background:rgba(255,255,255,.72);
  transform:translateX(3px);
}

.erp-demo-item.active{
  color:var(--ink);
  border-color:#d7e4f4;
  background:#ffffff;

  box-shadow:
    0 14px 36px rgba(20,67,132,.09),
    0 3px 10px rgba(20,67,132,.04);
}

.erp-demo-item.active::before{
  opacity:1;
  transform:scaleY(1);
}

.erp-demo-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid #dce7f5;
  border-radius:13px;

  color:#7e8ca0;
  background:#f6f9fd;

  font-size:19px;

  transition:
    transform .24s ease,
    color .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

.erp-demo-item:hover .erp-demo-icon{
  color:var(--blue-600);
  border-color:#bfd5f2;
}

.erp-demo-item.active .erp-demo-icon{
  color:#ffffff;
  border-color:transparent;

  background:linear-gradient(
    145deg,
    var(--blue-600),
    var(--blue-500)
  );

  box-shadow:
    0 10px 24px rgba(36,111,223,.22);
}

.erp-demo-item h4{
  margin:0 0 7px;
  color:inherit;
  font-size:17px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

.erp-demo-item p{
  margin:0;
  color:#7d8a9d;
  font-size:13px;
  line-height:1.55;
}

.erp-demo-item.active p{
  color:#69788d;
}


/* =========================================================
   BROWSER / APPLICATION WINDOW
========================================================= */

.erp-browser{
  position:relative;
  min-width:0;

  overflow:hidden;

  border:1px solid #d6dfeb;
  border-radius:18px;

  background:#ffffff;

  box-shadow:
    0 34px 90px rgba(16,55,110,.16),
    0 8px 24px rgba(16,55,110,.07);

  isolation:isolate;
}

.erp-browser::before{
  content:"";
  position:absolute;
  inset:0;

  z-index:-1;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(66,136,245,.08),
      transparent 34%
    );

  pointer-events:none;
}


/* =========================================================
   BROWSER TOP BAR
========================================================= */

.erp-browser-top{
  height:48px;

  display:flex;
  align-items:center;
  gap:7px;

  padding:0 14px;

  border-bottom:1px solid #d8e0ea;

  background:linear-gradient(
    180deg,
    #f5f7fa 0%,
    #eef1f5 100%
  );
}

.erp-browser-top > span{
  flex:0 0 auto;

  width:9px;
  height:9px;

  border-radius:50%;

  background:#cbd5e1;

  box-shadow:
    inset 0 0 0 1px rgba(15,35,65,.04);
}

.erp-browser-top > span:nth-child(1){
  background:#f2a3a9;
}

.erp-browser-top > span:nth-child(2){
  background:#f0ce7e;
}

.erp-browser-top > span:nth-child(3){
  background:#8ed3aa;
}

.erp-browser-address{
  min-width:0;
  flex:1;

  height:28px;

  display:flex;
  align-items:center;

  margin-left:8px;
  padding:0 12px;

  overflow:hidden;

  border:1px solid #d5dce6;
  border-radius:6px;

  color:#747f8e;
  background:#ffffff;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:10px;
  line-height:1;

  white-space:nowrap;
  text-overflow:ellipsis;
}


/* =========================================================
   SCREEN CONTAINER
========================================================= */

.erp-screen{
  position:relative;
  min-height:560px;
  padding:18px;

  overflow:hidden;

  color:#202632;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    );
}

.erp-page{
  position:absolute;
  inset:18px;

  visibility:hidden;
  opacity:0;

  pointer-events:none;

  transform:translateX(24px);

  transition:
    opacity .36s ease,
    transform .36s cubic-bezier(.22,1,.36,1),
    visibility .36s ease;
}

.erp-page.active{
  position:relative;
  inset:auto;

  visibility:visible;
  opacity:1;

  pointer-events:auto;

  transform:translateX(0);
}


/* =========================================================
   ACTIVE SCREEN GLOW
========================================================= */

.erp-browser::after{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-120px;

  width:320px;
  height:320px;

  z-index:-1;

  border-radius:50%;

  background:rgba(66,136,245,.08);

  filter:blur(28px);

  pointer-events:none;
}


/* =========================================================
   ACCESSIBILITY / KEYBOARD
========================================================= */

.erp-demo-item:focus-visible{
  outline:3px solid rgba(66,136,245,.24);
  outline-offset:3px;
}

.erp-demo-item:focus-visible .erp-demo-icon{
  color:var(--blue-600);
  border-color:var(--blue-400, #74a9f7);
}


/* =========================================================
   INITIAL ENTRANCE POLISH
========================================================= */

.erp-demo-wrapper.reveal{
  transform:translateY(24px);
}

.erp-demo-wrapper.reveal.visible{
  transform:translateY(0);
}


/* =========================================================
   LARGE DESKTOP REFINEMENT
========================================================= */

@media (min-width:1200px){
  .erp-demo-wrapper{
    align-items:start;
  }
}

.erp-demo-menu{
  align-self:start;
  padding-top:0;
}

/* =========================================================
   TABLET — BASIC STRUCTURE ONLY
   Detailed responsive behaviour will come in Part 2C
========================================================= */

@media (max-width:980px){

  .erp-demo-wrapper{
    grid-template-columns:1fr;
    gap:24px;
  }

  .erp-demo-menu{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }

  .erp-demo-item{
    min-height:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 10px;
    text-align:center;
  }

  .erp-demo-item::before{
    left:18px;
    right:18px;
    top:auto;
    bottom:0;

    width:auto;
    height:3px;

    transform:scaleX(.4);
  }

  .erp-demo-item.active::before{
    transform:scaleX(1);
  }

  .erp-demo-item h4{
    margin:0;
    font-size:13px;
  }

  .erp-demo-item p{
    display:none;
  }

  .erp-demo-icon{
    width:38px;
    height:38px;
    font-size:17px;
  }
}


/* =========================================================
   SMALL SCREEN SAFETY
========================================================= */

@media (max-width:620px){

  .erp-demo-section{
    padding:78px 0 84px;
  }

  .erp-demo-section .section-header{
    margin-bottom:38px;
  }

  .erp-demo-section .section-header p{
    font-size:15px;
  }

  .erp-demo-menu{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .erp-browser{
    border-radius:14px;
  }

  .erp-browser-top{
    height:40px;
    padding-inline:10px;
  }

  .erp-browser-top > span{
    width:7px;
    height:7px;
  }

  .erp-browser-address{
    height:24px;
    font-size:8px;
  }

  .erp-screen{
    min-height:480px;
    padding:10px;
  }

  .erp-page{
    inset:10px;
  }
}

/* =========================================================
   LIVE ERP SCREENS — PART 2B
   Dashboard components, KPIs, cards, tables and badges
========================================================= */


/* =========================================================
   SHARED SCREEN HEADER
========================================================= */

.erp-demo-section .erp-screen-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
}

.erp-demo-section .erp-screen-header h3{
  margin:0 0 4px;
  color:#29313d;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

.erp-demo-section .erp-screen-header p{
  margin:0;
  color:#929ba8;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size:9px;
  line-height:1.5;
}

.erp-demo-section .erp-screen-date{
  flex:0 0 auto;
  padding-top:2px;
  color:#9aa3af;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size:9px;
  white-space:nowrap;
}


/* =========================================================
   KPI GRID
========================================================= */

.erp-demo-section .erp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:10px;
}

.erp-demo-section .erp-kpi-card{
  min-width:0;
  padding:13px 12px;

  border:1px solid #e0e5eb;
  border-radius:5px;

  background:
    linear-gradient(
      180deg,
      #fafbfc 0%,
      #f7f8fa 100%
    );

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.erp-demo-section .erp-kpi-card:hover{
  transform:translateY(-3px);
  border-color:#c6d9f1;
  background:#ffffff;

  box-shadow:
    0 10px 28px rgba(21,64,121,.08);
}

.erp-demo-section .erp-kpi-card > span{
  display:block;

  overflow:hidden;

  color:#929aa5;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:8px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.08em;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-kpi-card strong{
  display:block;
  margin:6px 0 4px;

  overflow:hidden;

  color:#171b22;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:17px;
  font-weight:700;
  line-height:1.2;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-kpi-card small{
  display:block;
  font-size:8px;
  font-weight:800;
  line-height:1.3;
}

.erp-demo-section .erp-positive{
  color:#128255 !important;
}

.erp-demo-section .erp-negative{
  color:#d90045 !important;
}

.erp-demo-section .erp-neutral{
  color:#637083 !important;
}


/* =========================================================
   GENERAL DASHBOARD PANEL
========================================================= */

.erp-demo-section .erp-panel{
  position:relative;
  overflow:hidden;

  padding:12px;

  border:1px solid #e0e5eb;
  border-radius:5px;

  background:#ffffff;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.erp-demo-section .erp-panel + .erp-panel{
  margin-top:9px;
}

.erp-demo-section .erp-panel:hover{
  border-color:#cfdeef;

  box-shadow:
    0 9px 25px rgba(22,65,122,.06);
}

.erp-demo-section .erp-panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:9px;
}

.erp-demo-section .erp-panel-title strong{
  color:#737c88;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}

.erp-demo-section .erp-panel-title span{
  color:#989faa;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  line-height:1.2;
  letter-spacing:.07em;

  white-space:nowrap;
}


/* =========================================================
   HEAD OFFICE — BRANCH SALES
========================================================= */

.erp-demo-section .erp-branch-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) 62px;
  align-items:center;
  gap:9px;
  min-height:28px;
}

.erp-demo-section .erp-branch-row + .erp-branch-row{
  margin-top:2px;
}

.erp-demo-section .erp-branch-row > span{
  overflow:hidden;

  color:#5d6672;
  font-size:9px;
  font-weight:600;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-branch-row > b{
  color:#343942;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:8px;
  font-weight:500;
  text-align:right;
  white-space:nowrap;
}

.erp-demo-section .erp-branch-track{
  position:relative;
  height:6px;
  overflow:hidden;

  border-radius:2px;

  background:#eceef1;
}

.erp-demo-section .erp-branch-fill{
  display:block;
  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--blue-500)
    );

  transition:
    width 1.1s cubic-bezier(.22,1,.36,1);
}

.erp-demo-section .erp-branch-fill.erp-purple{
  background:#42549b;
}

.erp-demo-section .erp-branch-fill.erp-teal{
  background:#167a7b;
}

.erp-demo-section .erp-branch-fill.erp-amber{
  background:#bd6c00;
}


/* =========================================================
   ALERT / STATUS ROWS
========================================================= */

.erp-demo-section .erp-status-row{
  display:grid;
  grid-template-columns:13px minmax(0,1fr) auto 56px;
  align-items:center;
  gap:8px;

  min-height:38px;

  border-top:1px solid #eceff3;
}

.erp-demo-section .erp-status-row:first-of-type{
  border-top:0;
}

.erp-demo-section .erp-status-symbol{
  color:#bcc3cc;
  font-size:11px;
  text-align:center;
}

.erp-demo-section .erp-status-copy{
  min-width:0;
}

.erp-demo-section .erp-status-copy strong,
.erp-demo-section .erp-status-copy small{
  display:block;
}

.erp-demo-section .erp-status-copy strong{
  overflow:hidden;

  color:#292e36;
  font-size:8px;
  font-weight:800;
  line-height:1.35;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-status-copy small{
  margin-top:2px;

  overflow:hidden;

  color:#9ba3ad;
  font-size:7px;
  line-height:1.3;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-status-row > b{
  color:#373c44;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:500;
  text-align:right;
  white-space:nowrap;
}


/* =========================================================
   BADGES
========================================================= */

.erp-demo-section .erp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:20px;
  padding:3px 6px;

  border-radius:3px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:6px;
  font-style:normal;
  font-weight:700;
  line-height:1;

  white-space:nowrap;
}

.erp-demo-section .erp-badge-danger{
  color:#bc0040;
  background:#fde6ee;
}

.erp-demo-section .erp-badge-warning{
  color:#8b6100;
  background:#fff2cf;
}

.erp-demo-section .erp-badge-success{
  color:#087a50;
  background:#e3f5ed;
}

.erp-demo-section .erp-badge-blue{
  color:#215cae;
  background:#e7f0ff;
}

.erp-demo-section .erp-badge-neutral{
  color:#59606a;
  background:#edf0f4;
}


/* =========================================================
   POINT OF SALE — MAIN LAYOUT
========================================================= */

.erp-demo-section .erp-pos-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:10px;
}

.erp-demo-section .erp-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.erp-demo-section .erp-product-button{
  min-height:72px;
  padding:10px;

  border:1px solid #e0e5eb;
  border-radius:5px;

  color:#272c34;
  background:
    linear-gradient(
      180deg,
      #fafbfc,
      #f7f8fa
    );

  text-align:left;
  cursor:pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.erp-demo-section .erp-product-button:hover{
  transform:translateY(-2px);
  border-color:#bfd4ef;
  background:#ffffff;

  box-shadow:
    0 8px 18px rgba(23,67,126,.07);
}

.erp-demo-section .erp-product-button.active{
  border-color:#9dc3f2;
  background:#eef5ff;

  box-shadow:
    inset 0 0 0 1px rgba(36,111,223,.08);
}

.erp-demo-section .erp-product-button strong,
.erp-demo-section .erp-product-button span{
  display:block;
}

.erp-demo-section .erp-product-button strong{
  color:#252a32;
  font-size:9px;
  line-height:1.35;
}

.erp-demo-section .erp-product-button span{
  margin-top:6px;

  color:#747d88;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:8px;
}


/* =========================================================
   POINT OF SALE — BILL
========================================================= */

.erp-demo-section .erp-bill-panel{
  min-width:0;
  padding:12px;

  border:1px solid #dfe4ea;
  border-radius:5px;

  background:#ffffff;
}

.erp-demo-section .erp-bill-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;

  padding:9px 0;

  border-bottom:1px dashed #e1e5e9;

  color:#343a43;
  font-size:8px;
}

.erp-demo-section .erp-bill-line > span{
  min-width:0;
}

.erp-demo-section .erp-bill-line > span strong,
.erp-demo-section .erp-bill-line > span small{
  display:block;
}

.erp-demo-section .erp-bill-line > span strong{
  overflow:hidden;

  font-size:8px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-bill-line > span small{
  margin-top:3px;

  color:#9aa2ac;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:6px;
}

.erp-demo-section .erp-bill-line > b{
  flex:0 0 auto;

  color:#363b43;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:500;

  white-space:nowrap;
}

.erp-demo-section .erp-bill-discount{
  color:#246fdf;
}

.erp-demo-section .erp-bill-total{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;

  margin-top:12px;
  padding-top:10px;

  border-top:1px solid #242a31;
}

.erp-demo-section .erp-bill-total span{
  color:#777f8a;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  letter-spacing:.08em;
}

.erp-demo-section .erp-bill-total strong{
  color:#171b20;
  font-size:17px;
}

.erp-demo-section .erp-payment-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:12px;
}

.erp-demo-section .erp-payment-grid button{
  min-height:34px;

  border:1px solid #d7dde5;
  border-radius:4px;

  color:#48515e;
  background:#ffffff;

  font-size:8px;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.erp-demo-section .erp-payment-grid button:hover{
  transform:translateY(-2px);
  border-color:#9fc1ed;
}

.erp-demo-section .erp-payment-grid button:first-child{
  color:#ffffff;
  border-color:var(--blue-600);

  background:
    linear-gradient(
      135deg,
      var(--blue-700),
      var(--blue-500)
    );
}

.erp-demo-section .erp-offline-note{
  margin:10px 0 0;
  padding:8px;

  border-radius:4px;

  color:#7f6100;
  background:#fff4d7;

  font-size:7px;
  font-weight:700;
  line-height:1.45;
}


/* =========================================================
   POINT OF SALE — KITCHEN STATUS
========================================================= */

.erp-demo-section .erp-kitchen-panel{
  margin-top:9px;
}

.erp-demo-section .erp-kitchen-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 42px;
  align-items:center;
  gap:8px;

  min-height:34px;

  border-top:1px solid #eceff3;
}

.erp-demo-section .erp-kitchen-row:first-of-type{
  border-top:0;
}

.erp-demo-section .erp-kitchen-row strong,
.erp-demo-section .erp-kitchen-row small{
  display:block;
}

.erp-demo-section .erp-kitchen-row strong{
  color:#2c3139;
  font-size:8px;
}

.erp-demo-section .erp-kitchen-row small{
  margin-top:2px;
  color:#9aa2ac;
  font-size:7px;
}

.erp-demo-section .erp-kitchen-row > b{
  color:#3a4048;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:500;
  text-align:right;
}


/* =========================================================
   INVENTORY TABLE
========================================================= */

.erp-demo-section .erp-data-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.erp-demo-section .erp-data-table th{
  padding:7px 8px;

  border-bottom:1px solid #dfe4e9;

  color:#8e97a3;
  background:#f7f8fa;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:6px;
  font-weight:700;
  text-align:left;
  letter-spacing:.06em;
}

.erp-demo-section .erp-data-table td{
  padding:9px 8px;

  border-bottom:1px solid #eceff2;

  color:#323740;
  font-size:7px;
  vertical-align:middle;
}

.erp-demo-section .erp-data-table tr:last-child td{
  border-bottom:0;
}

.erp-demo-section .erp-data-table tbody tr{
  transition:
    background .2s ease;
}

.erp-demo-section .erp-data-table tbody tr:hover{
  background:#f8fbff;
}

.erp-demo-section .erp-data-table td strong,
.erp-demo-section .erp-data-table td small{
  display:block;
}

.erp-demo-section .erp-data-table td strong{
  overflow:hidden;

  color:#272c34;
  font-size:8px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-data-table td small{
  margin-top:2px;

  color:#9aa2ac;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:6px;
}

.erp-demo-section .erp-data-table .erp-number{
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  text-align:right;
  white-space:nowrap;
}


/* =========================================================
   INVENTORY SUGGESTION CARDS
========================================================= */

.erp-demo-section .erp-suggestion-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}

.erp-demo-section .erp-suggestion-card{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;

  padding:10px;

  border:1px solid #dfe6ef;
  border-radius:5px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );
}

.erp-demo-section .erp-suggestion-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:var(--blue-600);
  background:#eaf3ff;

  font-size:13px;
}

.erp-demo-section .erp-suggestion-card strong,
.erp-demo-section .erp-suggestion-card small{
  display:block;
}

.erp-demo-section .erp-suggestion-card strong{
  color:#2c323a;
  font-size:8px;
}

.erp-demo-section .erp-suggestion-card small{
  margin-top:3px;
  color:#8e98a5;
  font-size:7px;
  line-height:1.4;
}


/* =========================================================
   FINANCE — LEDGER ROWS
========================================================= */

.erp-demo-section .erp-ledger-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 92px;
  align-items:center;
  gap:10px;

  min-height:42px;

  border-top:1px solid #eceff3;
}

.erp-demo-section .erp-ledger-row:first-of-type{
  border-top:0;
}

.erp-demo-section .erp-ledger-copy{
  min-width:0;
}

.erp-demo-section .erp-ledger-copy strong,
.erp-demo-section .erp-ledger-copy small{
  display:block;
}

.erp-demo-section .erp-ledger-copy strong{
  overflow:hidden;

  color:#2a2f36;
  font-size:8px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-ledger-copy small{
  margin-top:2px;
  color:#9ba3ad;
  font-size:7px;
}

.erp-demo-section .erp-ledger-row > b{
  color:#363b43;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:500;
  text-align:right;

  white-space:nowrap;
}


/* =========================================================
   FINANCE — BALANCE SUMMARY
========================================================= */

.erp-demo-section .erp-balance-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}

.erp-demo-section .erp-balance-item{
  padding:10px;

  border:1px solid #e0e5eb;
  border-radius:5px;

  background:#fafbfc;
}

.erp-demo-section .erp-balance-item span,
.erp-demo-section .erp-balance-item strong{
  display:block;
}

.erp-demo-section .erp-balance-item span{
  color:#929aa5;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:6px;
  letter-spacing:.06em;
}

.erp-demo-section .erp-balance-item strong{
  margin-top:5px;

  color:#252a31;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:11px;
}


/* =========================================================
   LIVE INDICATOR
========================================================= */

.erp-demo-section .erp-live-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:#14815a;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
}

.erp-demo-section .erp-live-indicator::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#17b577;

  box-shadow:
    0 0 0 4px rgba(23,181,119,.12);
}


/* =========================================================
   DASHBOARD LOWER GRID
========================================================= */

.erp-demo-section .erp-two-column{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:9px;
}

.erp-demo-section .erp-equal-column{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}


/* =========================================================
   MINI CHART
========================================================= */

.erp-demo-section .erp-mini-chart{
  height:86px;

  display:flex;
  align-items:flex-end;
  gap:5px;

  padding-top:10px;
}

.erp-demo-section .erp-mini-chart i{
  flex:1;
  min-width:4px;
  height:10%;

  border-radius:2px 2px 0 0;

  background:#dce8f8;

  transition:
    height 1s cubic-bezier(.22,1,.36,1),
    background .2s ease;
}

.erp-demo-section .erp-mini-chart i:nth-child(3n){
  background:#9fc1ee;
}

.erp-demo-section .erp-mini-chart i:last-child{
  background:var(--blue-600);
}


/* =========================================================
   SMALL PROGRESS BAR
========================================================= */

.erp-demo-section .erp-progress-row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;

  min-height:27px;
}

.erp-demo-section .erp-progress-row > span{
  overflow:hidden;

  color:#626c79;
  font-size:8px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.erp-demo-section .erp-progress-row > b{
  color:#535b67;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:7px;
  font-weight:500;
  text-align:right;
}

.erp-demo-section .erp-progress-track{
  height:5px;
  overflow:hidden;

  border-radius:999px;

  background:#ebeff4;
}

.erp-demo-section .erp-progress-fill{
  display:block;
  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--blue-500)
    );

  transition:
    width 1s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   EMPTY / LOADING STATE
========================================================= */

.erp-demo-section .erp-loading{
  min-height:420px;

  display:grid;
  place-items:center;

  color:#8c97a5;
  font-size:12px;
}

.erp-demo-section .erp-loading::before{
  content:"";

  width:28px;
  height:28px;

  border:3px solid #e2e8f0;
  border-top-color:var(--blue-600);
  border-radius:50%;

  animation:erpLoadingSpin .8s linear infinite;
}

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


/* =========================================================
   TABLET COMPONENT ADJUSTMENTS
========================================================= */

@media (max-width:980px){

  .erp-demo-section .erp-screen-header h3{
    font-size:15px;
  }

  .erp-demo-section .erp-kpi-card strong{
    font-size:15px;
  }
}


/* =========================================================
   MOBILE COMPONENT ADJUSTMENTS
========================================================= */

@media (max-width:620px){

  .erp-demo-section .erp-screen-header{
    gap:10px;
  }

  .erp-demo-section .erp-screen-date{
    font-size:7px;
  }

  .erp-demo-section .erp-kpi-grid{
    grid-template-columns:1fr;
  }

  .erp-demo-section .erp-kpi-card{
    padding:11px;
  }

  .erp-demo-section .erp-pos-layout{
    grid-template-columns:1fr;
  }

  .erp-demo-section .erp-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .erp-demo-section .erp-two-column,
  .erp-demo-section .erp-equal-column,
  .erp-demo-section .erp-suggestion-grid,
  .erp-demo-section .erp-balance-strip{
    grid-template-columns:1fr;
  }

  .erp-demo-section .erp-branch-row{
    grid-template-columns:82px minmax(0,1fr);
  }

  .erp-demo-section .erp-branch-row > b{
    display:none;
  }

  .erp-demo-section .erp-status-row{
    grid-template-columns:12px minmax(0,1fr) auto;
  }

  .erp-demo-section .erp-status-row > b{
    display:none;
  }

  .erp-demo-section .erp-ledger-row{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .erp-demo-section .erp-ledger-row > b{
    grid-column:1 / -1;
    padding-bottom:7px;
    text-align:left;
  }

  .erp-demo-section .erp-data-table{
    min-width:580px;
  }

  .erp-demo-section .erp-panel.erp-table-panel{
    overflow-x:auto;
  }
}


/* =========================================================
   LIVE ERP SCREENS — PART 2C
   Animations, autoplay progress and responsive refinements
========================================================= */


/* =========================================================
   SCREEN CHANGE ANIMATION
========================================================= */

.erp-demo-section .erp-page{
  transform:
    translateX(22px)
    scale(.992);
}

.erp-demo-section .erp-page.active{
  animation:
    erpScreenEnter .42s
    cubic-bezier(.22,1,.36,1)
    both;
}

.erp-demo-section .erp-page.erp-page-leaving{
  animation:
    erpScreenLeave .24s
    ease
    both;
}

@keyframes erpScreenEnter{
  from{
    opacity:0;
    transform:
      translateX(26px)
      scale(.988);
    filter:blur(2px);
  }

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

@keyframes erpScreenLeave{
  from{
    opacity:1;
    transform:
      translateX(0)
      scale(1);
  }

  to{
    opacity:0;
    transform:
      translateX(-16px)
      scale(.994);
  }
}


/* =========================================================
   LEFT MENU ACTIVE ANIMATION
========================================================= */

.erp-demo-section .erp-demo-item.active{
  animation:
    erpMenuActivate .36s
    cubic-bezier(.22,1,.36,1)
    both;
}

@keyframes erpMenuActivate{
  from{
    opacity:.72;
    transform:translateX(-4px);
  }

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


/* =========================================================
   AUTOPLAY PROGRESS BAR
========================================================= */

.erp-demo-section .erp-browser-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  z-index:10;

  height:3px;

  overflow:hidden;

  background:rgba(36,111,223,.08);
}

.erp-demo-section .erp-browser-progress > span{
  display:block;

  width:0;
  height:100%;

  border-radius:0 999px 999px 0;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--blue-500)
    );

  box-shadow:
    0 0 12px rgba(66,136,245,.35);
}

.erp-demo-section .erp-browser-progress.is-running > span{
  animation:
    erpDemoProgress
    var(--erp-cycle-duration, 7000ms)
    linear
    forwards;
}

@keyframes erpDemoProgress{
  from{
    width:0;
  }

  to{
    width:100%;
  }
}


/* =========================================================
   LIVE DOT ANIMATION
========================================================= */

.erp-demo-section .erp-live-indicator::before{
  animation:
    erpLivePulse
    1.8s
    ease-out
    infinite;
}

@keyframes erpLivePulse{
  0%{
    box-shadow:
      0 0 0 0
      rgba(23,181,119,.28);
  }

  65%{
    box-shadow:
      0 0 0 7px
      rgba(23,181,119,0);
  }

  100%{
    box-shadow:
      0 0 0 0
      rgba(23,181,119,0);
  }
}


/* =========================================================
   KPI ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-kpi-card{
  opacity:0;
  transform:translateY(10px);

  animation:
    erpCardRise .46s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(1){
  animation-delay:70ms;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(2){
  animation-delay:130ms;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(3){
  animation-delay:190ms;
}

@keyframes erpCardRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   PANEL STAGGER
========================================================= */

.erp-demo-section .erp-page.active .erp-panel{
  opacity:0;
  transform:translateY(12px);

  animation:
    erpPanelRise .5s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(1){
  animation-delay:190ms;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(2){
  animation-delay:260ms;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(3){
  animation-delay:330ms;
}

@keyframes erpPanelRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   PRODUCT BUTTON ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-product-button{
  opacity:0;
  transform:translateY(8px);

  animation:
    erpProductEnter .38s
    ease
    forwards;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(1){
  animation-delay:80ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(2){
  animation-delay:120ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(3){
  animation-delay:160ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(4){
  animation-delay:200ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(5){
  animation-delay:240ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(6){
  animation-delay:280ms;
}

@keyframes erpProductEnter{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   TABLE ROW ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-data-table tbody tr{
  opacity:0;
  transform:translateY(6px);

  animation:
    erpTableRowEnter .4s
    ease
    forwards;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(1){
  animation-delay:100ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(2){
  animation-delay:150ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(3){
  animation-delay:200ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(4){
  animation-delay:250ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(5){
  animation-delay:300ms;
}

@keyframes erpTableRowEnter{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   BADGE SOFT PULSE
========================================================= */

.erp-demo-section .erp-badge-danger{
  animation:
    erpDangerPulse
    2.6s
    ease-in-out
    infinite;
}

@keyframes erpDangerPulse{
  0%,
  100%{
    box-shadow:none;
  }

  50%{
    box-shadow:
      0 0 0 4px
      rgba(217,0,69,.06);
  }
}


/* =========================================================
   ACTIVE MENU ICON
========================================================= */

.erp-demo-section .erp-demo-item.active .erp-demo-icon{
  animation:
    erpIconActivate
    .42s
    cubic-bezier(.22,1,.36,1);
}

@keyframes erpIconActivate{
  0%{
    transform:scale(.88) rotate(-5deg);
  }

  70%{
    transform:scale(1.06) rotate(2deg);
  }

  100%{
    transform:scale(1) rotate(0);
  }
}


/* =========================================================
   BROWSER HOVER
========================================================= */

.erp-demo-section .erp-browser{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.erp-demo-section .erp-browser:hover{
  transform:translateY(-4px);
  border-color:#c8d9ed;

  box-shadow:
    0 40px 105px rgba(16,55,110,.19),
    0 10px 28px rgba(16,55,110,.08);
}


/* =========================================================
   SCREEN HOVER STATES
========================================================= */

.erp-demo-section .erp-status-row,
.erp-demo-section .erp-ledger-row,
.erp-demo-section .erp-kitchen-row{
  transition:
    background .2s ease,
    padding-left .2s ease;
}

.erp-demo-section .erp-status-row:hover,
.erp-demo-section .erp-ledger-row:hover,
.erp-demo-section .erp-kitchen-row:hover{
  padding-left:5px;
  background:#f8fbff;
}


/* =========================================================
   DESKTOP HEIGHT AND PROPORTION
========================================================= */

@media (min-width:1200px){

  .erp-demo-section{
    padding-top:116px;
    padding-bottom:126px;
  }

  .erp-demo-wrapper{
    align-items:center;
  }

  .erp-demo-item{
    min-height:118px;
  }

  .erp-screen{
    min-height:590px;
  }
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width:1199px) and (min-width:981px){

  .erp-demo-wrapper{
    grid-template-columns:280px minmax(0,1fr);
    gap:28px;
  }

  .erp-demo-item{
    min-height:108px;
    padding:18px 16px;
  }

  .erp-demo-item h4{
    font-size:16px;
  }

  .erp-demo-item p{
    font-size:12px;
  }

  .erp-screen{
    min-height:550px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:980px){

  .erp-demo-section{
    padding:94px 0 100px;
  }

  .erp-demo-section .section-header{
    margin-bottom:44px;
  }

  .erp-demo-section .section-header h2{
    font-size:clamp(36px,6vw,50px);
  }

  .erp-demo-wrapper{
    gap:22px;
  }

  .erp-demo-menu{
    position:relative;
    z-index:3;
  }

  .erp-demo-item{
    min-height:86px;
    border-color:#e0e8f2;
    background:#fff;
    box-shadow:0 7px 20px rgba(21,64,121,.04);
  }

  .erp-demo-item:hover{
    transform:translateY(-2px);
  }

  .erp-demo-item.active{
    transform:none;
  }

  .erp-demo-item::before{
    border-radius:999px 999px 0 0;
  }

  .erp-browser{
    border-radius:16px;
  }

  .erp-screen{
    min-height:540px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:620px){

  .erp-demo-section{
    padding:74px 0 82px;
  }

  .erp-demo-section .section-header h2{
    font-size:34px;
    line-height:1.12;
  }

  .erp-demo-section .section-header p{
    font-size:14px;
    line-height:1.7;
  }

  .erp-demo-menu{
    gap:8px;
  }

  .erp-demo-item{
    min-height:78px;
    padding:11px 8px;
  }

  .erp-demo-icon{
    width:35px;
    height:35px;
  }

  .erp-demo-item h4{
    font-size:12px;
  }

  .erp-browser{
    box-shadow:
      0 22px 54px rgba(16,55,110,.14);
  }

  .erp-browser:hover{
    transform:none;
  }

  .erp-screen{
    min-height:500px;
  }

  .erp-screen-header{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  .erp-screen-date{
    padding-top:0;
  }

  .erp-kpi-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }

  .erp-kpi-card{
    min-width:150px;
  }

  .erp-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .erp-product-button{
    min-height:68px;
  }

  .erp-status-row{
    min-height:42px;
  }

  .erp-browser-progress{
    height:2px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:420px){

  .erp-demo-menu{
    grid-template-columns:1fr 1fr;
  }

  .erp-demo-item{
    min-height:74px;
  }

  .erp-browser-top{
    gap:5px;
  }

  .erp-browser-address{
    margin-left:3px;
  }

  .erp-screen{
    min-height:470px;
  }

  .erp-panel{
    padding:10px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .erp-demo-section *,
  .erp-demo-section *::before,
  .erp-demo-section *::after{
    scroll-behavior:auto !important;

    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

  .erp-demo-section .erp-browser-progress > span{
    width:100%;
  }
}/* =========================================================
   LIVE ERP SCREENS — PART 2C
   Animations, autoplay progress and responsive refinements
========================================================= */


/* =========================================================
   SCREEN CHANGE ANIMATION
========================================================= */

.erp-demo-section .erp-page{
  transform:
    translateX(22px)
    scale(.992);
}

.erp-demo-section .erp-page.active{
  animation:
    erpScreenEnter .42s
    cubic-bezier(.22,1,.36,1)
    both;
}

.erp-demo-section .erp-page.erp-page-leaving{
  animation:
    erpScreenLeave .24s
    ease
    both;
}

@keyframes erpScreenEnter{
  from{
    opacity:0;
    transform:
      translateX(26px)
      scale(.988);
    filter:blur(2px);
  }

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

@keyframes erpScreenLeave{
  from{
    opacity:1;
    transform:
      translateX(0)
      scale(1);
  }

  to{
    opacity:0;
    transform:
      translateX(-16px)
      scale(.994);
  }
}


/* =========================================================
   LEFT MENU ACTIVE ANIMATION
========================================================= */

.erp-demo-section .erp-demo-item.active{
  animation:
    erpMenuActivate .36s
    cubic-bezier(.22,1,.36,1)
    both;
}

@keyframes erpMenuActivate{
  from{
    opacity:.72;
    transform:translateX(-4px);
  }

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


/* =========================================================
   AUTOPLAY PROGRESS BAR
========================================================= */

.erp-demo-section .erp-browser-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  z-index:10;

  height:3px;

  overflow:hidden;

  background:rgba(36,111,223,.08);
}

.erp-demo-section .erp-browser-progress > span{
  display:block;

  width:0;
  height:100%;

  border-radius:0 999px 999px 0;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--blue-500)
    );

  box-shadow:
    0 0 12px rgba(66,136,245,.35);
}

.erp-demo-section .erp-browser-progress.is-running > span{
  animation:
    erpDemoProgress
    var(--erp-cycle-duration, 7000ms)
    linear
    forwards;
}

@keyframes erpDemoProgress{
  from{
    width:0;
  }

  to{
    width:100%;
  }
}


/* =========================================================
   LIVE DOT ANIMATION
========================================================= */

.erp-demo-section .erp-live-indicator::before{
  animation:
    erpLivePulse
    1.8s
    ease-out
    infinite;
}

@keyframes erpLivePulse{
  0%{
    box-shadow:
      0 0 0 0
      rgba(23,181,119,.28);
  }

  65%{
    box-shadow:
      0 0 0 7px
      rgba(23,181,119,0);
  }

  100%{
    box-shadow:
      0 0 0 0
      rgba(23,181,119,0);
  }
}


/* =========================================================
   KPI ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-kpi-card{
  opacity:0;
  transform:translateY(10px);

  animation:
    erpCardRise .46s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(1){
  animation-delay:70ms;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(2){
  animation-delay:130ms;
}

.erp-demo-section .erp-page.active .erp-kpi-card:nth-child(3){
  animation-delay:190ms;
}

@keyframes erpCardRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   PANEL STAGGER
========================================================= */

.erp-demo-section .erp-page.active .erp-panel{
  opacity:0;
  transform:translateY(12px);

  animation:
    erpPanelRise .5s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(1){
  animation-delay:190ms;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(2){
  animation-delay:260ms;
}

.erp-demo-section .erp-page.active .erp-panel:nth-of-type(3){
  animation-delay:330ms;
}

@keyframes erpPanelRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   PRODUCT BUTTON ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-product-button{
  opacity:0;
  transform:translateY(8px);

  animation:
    erpProductEnter .38s
    ease
    forwards;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(1){
  animation-delay:80ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(2){
  animation-delay:120ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(3){
  animation-delay:160ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(4){
  animation-delay:200ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(5){
  animation-delay:240ms;
}

.erp-demo-section .erp-page.active .erp-product-button:nth-child(6){
  animation-delay:280ms;
}

@keyframes erpProductEnter{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   TABLE ROW ENTRANCE
========================================================= */

.erp-demo-section .erp-page.active .erp-data-table tbody tr{
  opacity:0;
  transform:translateY(6px);

  animation:
    erpTableRowEnter .4s
    ease
    forwards;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(1){
  animation-delay:100ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(2){
  animation-delay:150ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(3){
  animation-delay:200ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(4){
  animation-delay:250ms;
}

.erp-demo-section .erp-page.active .erp-data-table tbody tr:nth-child(5){
  animation-delay:300ms;
}

@keyframes erpTableRowEnter{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   BADGE SOFT PULSE
========================================================= */

.erp-demo-section .erp-badge-danger{
  animation:
    erpDangerPulse
    2.6s
    ease-in-out
    infinite;
}

@keyframes erpDangerPulse{
  0%,
  100%{
    box-shadow:none;
  }

  50%{
    box-shadow:
      0 0 0 4px
      rgba(217,0,69,.06);
  }
}


/* =========================================================
   ACTIVE MENU ICON
========================================================= */

.erp-demo-section .erp-demo-item.active .erp-demo-icon{
  animation:
    erpIconActivate
    .42s
    cubic-bezier(.22,1,.36,1);
}

@keyframes erpIconActivate{
  0%{
    transform:scale(.88) rotate(-5deg);
  }

  70%{
    transform:scale(1.06) rotate(2deg);
  }

  100%{
    transform:scale(1) rotate(0);
  }
}


/* =========================================================
   BROWSER HOVER
========================================================= */

.erp-demo-section .erp-browser{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.erp-demo-section .erp-browser:hover{
  transform:translateY(-4px);
  border-color:#c8d9ed;

  box-shadow:
    0 40px 105px rgba(16,55,110,.19),
    0 10px 28px rgba(16,55,110,.08);
}


/* =========================================================
   SCREEN HOVER STATES
========================================================= */

.erp-demo-section .erp-status-row,
.erp-demo-section .erp-ledger-row,
.erp-demo-section .erp-kitchen-row{
  transition:
    background .2s ease,
    padding-left .2s ease;
}

.erp-demo-section .erp-status-row:hover,
.erp-demo-section .erp-ledger-row:hover,
.erp-demo-section .erp-kitchen-row:hover{
  padding-left:5px;
  background:#f8fbff;
}


/* =========================================================
   DESKTOP HEIGHT AND PROPORTION
========================================================= */

@media (min-width:1200px){

  .erp-demo-section{
    padding-top:116px;
    padding-bottom:126px;
  }

  .erp-demo-wrapper{
    align-items:center;
  }

  .erp-demo-item{
    min-height:118px;
  }

  .erp-screen{
    min-height:590px;
  }
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width:1199px) and (min-width:981px){

  .erp-demo-wrapper{
    grid-template-columns:280px minmax(0,1fr);
    gap:28px;
  }

  .erp-demo-item{
    min-height:108px;
    padding:18px 16px;
  }

  .erp-demo-item h4{
    font-size:16px;
  }

  .erp-demo-item p{
    font-size:12px;
  }

  .erp-screen{
    min-height:550px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:980px){

  .erp-demo-section{
    padding:94px 0 100px;
  }

  .erp-demo-section .section-header{
    margin-bottom:44px;
  }

  .erp-demo-section .section-header h2{
    font-size:clamp(36px,6vw,50px);
  }

  .erp-demo-wrapper{
    gap:22px;
  }

  .erp-demo-menu{
    position:relative;
    z-index:3;
  }

  .erp-demo-item{
    min-height:86px;
    border-color:#e0e8f2;
    background:#fff;
    box-shadow:0 7px 20px rgba(21,64,121,.04);
  }

  .erp-demo-item:hover{
    transform:translateY(-2px);
  }

  .erp-demo-item.active{
    transform:none;
  }

  .erp-demo-item::before{
    border-radius:999px 999px 0 0;
  }

  .erp-browser{
    border-radius:16px;
  }

  .erp-screen{
    min-height:540px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:620px){

  .erp-demo-section{
    padding:74px 0 82px;
  }

  .erp-demo-section .section-header h2{
    font-size:34px;
    line-height:1.12;
  }

  .erp-demo-section .section-header p{
    font-size:14px;
    line-height:1.7;
  }

  .erp-demo-menu{
    gap:8px;
  }

  .erp-demo-item{
    min-height:78px;
    padding:11px 8px;
  }

  .erp-demo-icon{
    width:35px;
    height:35px;
  }

  .erp-demo-item h4{
    font-size:12px;
  }

  .erp-browser{
    box-shadow:
      0 22px 54px rgba(16,55,110,.14);
  }

  .erp-browser:hover{
    transform:none;
  }

  .erp-screen{
    min-height:500px;
  }

  .erp-screen-header{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  .erp-screen-date{
    padding-top:0;
  }

  .erp-kpi-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }

  .erp-kpi-card{
    min-width:150px;
  }

  .erp-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .erp-product-button{
    min-height:68px;
  }

  .erp-status-row{
    min-height:42px;
  }

  .erp-browser-progress{
    height:2px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:420px){

  .erp-demo-menu{
    grid-template-columns:1fr 1fr;
  }

  .erp-demo-item{
    min-height:74px;
  }

  .erp-browser-top{
    gap:5px;
  }

  .erp-browser-address{
    margin-left:3px;
  }

  .erp-screen{
    min-height:470px;
  }

  .erp-panel{
    padding:10px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .erp-demo-section *,
  .erp-demo-section *::before,
  .erp-demo-section *::after{
    scroll-behavior:auto !important;

    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

  .erp-demo-section .erp-browser-progress > span{
    width:100%;
  }
}





/* Keep dashboard area fixed when switching screens */
.erp-demo-section .erp-screen{
  position:relative;
  height:640px;
  min-height:6400px;
  overflow:hidden;
}

.erp-demo-section .erp-page,
.erp-demo-section .erp-page.active{
  position:absolute;
  inset:18px;
  width:auto;
  height:auto;
}

/* Allow dashboard content to scroll internally only if required */
/*.erp-demo-section .erp-page{*/
/*  overflow-y:auto;*/
/*  overflow-x:hidden;*/
/*  scrollbar-width:thin;*/
/*}*/


.erp-demo-section .erp-page{
  overflow:visible;
}
@media (min-width:1200px){
  .erp-demo-section .erp-screen{
    height:660px;
    min-height:660px;
  }
}

@media (max-width:980px){
  .erp-demo-section .erp-screen{
    height:560px;
    min-height:560px;
  }
}

@media (max-width:620px){
  .erp-demo-section .erp-screen{
    height:520px;
    min-height:520px;
  }

  .erp-demo-section .erp-page,
  .erp-demo-section .erp-page.active{
    inset:10px;
  }
}

/* =========================================================
   AI INTELLIGENCE SECTION
   24x7 Retail Solutions Australia
========================================================= */

.ai-intelligence-section{
    position:relative;
    overflow:hidden;

    padding:110px 0 115px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(66,136,245,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f2f7fd 100%
        );

    color:#10223f;
}

.ai-section h2 span{
    color:#2f78e6;
}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.ai-intelligence-container{
    width:min(1320px, calc(100% - 48px));
    margin:auto;

    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);

    gap:70px;
    align-items:center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ai-copy{
    position:relative;
    z-index:2;
}


.ai-eyebrow{
    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:22px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}


.ai-eyebrow strong{
    color:#246fdf;

    font-size:14px;
    font-weight:800;

    letter-spacing:.08em;
}


.ai-eyebrow span{
    color:#246fdf;

    font-size:11px;
    font-weight:800;

    letter-spacing:.17em;
}


/* =========================================================
   HEADING
========================================================= */

.ai-copy h2{
    max-width:620px;

    margin:0 0 22px;

    color:#0d2140;

    font-size:clamp(42px,3.6vw,57px);
    font-weight:800;

    line-height:1.08;

    letter-spacing:-.045em;
}


.ai-copy h2 .ai-blue{
    color:#2d72dd;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.ai-intro{
    max-width:630px;

    margin:0;

    color:#53657f;

    font-size:16px;
    line-height:1.75;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.ai-feature-list{
    margin-top:31px;
}


.ai-feature{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);

    gap:15px;

    margin-top:21px;
}


.ai-feature-icon{
    color:#2d72dd;

    font-size:19px;
    line-height:1;
}


.ai-feature h4{
    margin:0 0 6px;

    color:#10223f;

    font-size:15px;
    font-weight:800;
}


.ai-feature p{
    max-width:580px;

    margin:0;

    color:#66768d;

    font-size:13px;
    line-height:1.65;
}


/* =========================================================
   CTA
========================================================= */

.ai-cta{
    display:inline-flex;
    align-items:center;
    gap:16px;

    margin-top:34px;

    padding:15px 24px;

    border:1px solid #2d72dd;
    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(135deg, var(--blue-600), var(--blue-500));

   box-shadow: 0 12px 28px rgba(36,111,223,.25);

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.ai-cta:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #1d63cc,
            #347fe9
        );

    box-shadow:
        0 17px 36px rgba(45,114,221,.24);
}


.ai-cta span{
    font-size:19px;

    transition:transform .25s ease;
}


.ai-cta:hover span{
    transform:translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.ai-visual{
    min-width:0;
}


.ai-forecast-card,
.ai-insight-card{
    border:1px solid #d7e3f2;

    border-radius:14px;

    background:rgba(255,255,255,.97);

    box-shadow:
        0 22px 60px rgba(31,77,135,.10),
        0 4px 14px rgba(31,77,135,.04);
}


/* =========================================================
   FORECAST CARD
========================================================= */

.ai-forecast-card{
    padding:23px 24px 20px;
}


/* =========================================================
   FORECAST HEADER
========================================================= */

.ai-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;
}


.ai-live-title{
    display:flex;
    align-items:center;
    gap:10px;
}


.ai-live-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#2d72dd;

    box-shadow:
        0 0 0 7px rgba(45,114,221,.10);

    animation:aiLivePulse 1.8s infinite;
}


@keyframes aiLivePulse{

    50%{
        box-shadow:
            0 0 0 12px rgba(45,114,221,0);
    }

}


.ai-live{
    color:#2d72dd;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:10px;

    letter-spacing:.07em;
}


.ai-live-title strong{
    color:#17345c;

    font-size:14px;
    font-weight:800;
}


/* =========================================================
   LEGEND
========================================================= */

.ai-legend{
    display:flex;

    gap:16px;

    color:#8190a4;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:9px;

    letter-spacing:.08em;
}


.ai-legend span{
    display:flex;
    align-items:center;

    gap:7px;
}


.ai-legend i{
    display:inline-block;

    width:14px;
    height:2px;
}


.actual-line{
    background:#2d72dd;
}


.forecast-line{
    background:
        repeating-linear-gradient(
            90deg,
            #74a9f7 0 5px,
            transparent 5px 9px
        );
}


/* =========================================================
   CHART
========================================================= */

.ai-chart{
    position:relative;
}


.ai-chart svg{
    display:block;

    width:100%;
    height:210px;
}


.ai-chart line{
    stroke:#dfe7f1;
    stroke-width:1;
}


/* actual historical data */
.ai-area{
    fill:rgba(45,114,221,.15);
}


/* solid actual line */
.ai-actual-path{
    fill:none;

    stroke:#2d72dd;
    stroke-width:2.5;

    vector-effect:non-scaling-stroke;

    stroke-dasharray:1000;
    stroke-dashoffset:1000;
}


/* forecast confidence range */
.ai-forecast-area{
    fill:rgba(116,169,247,.18);
}


/* dashed forecast line */
.ai-forecast-path{
    fill:none;

    stroke:#6fa7f5;
    stroke-width:2.4;

    stroke-dasharray:7 6;

    vector-effect:non-scaling-stroke;

    stroke-dashoffset:1000;
}


/* forecast end point */
.ai-chart-point{
    fill:#ffffff;

    stroke:#2d72dd;
    stroke-width:3;

    opacity:0;
}


/* animations */
.ai-intelligence-section.ai-visible .ai-actual-path{
    animation:
        aiDrawLine
        1.35s
        ease
        forwards;
}

.ai-intelligence-section.ai-visible .ai-forecast-path{
    animation:
        aiDrawLine
        1.15s
        .8s
        ease
        forwards;
}

.ai-intelligence-section.ai-visible .ai-chart-point{
    animation:
        aiPointIn
        .3s
        1.9s
        ease
        forwards;
}

@keyframes aiDrawLine{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes aiPointIn{
    to{
        opacity:1;
    }
}

.ai-chart-months{
    display:flex;
    justify-content:space-between;

    margin-top:-4px;

    color:#8996a8;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:9px;
}


/* =========================================================
   KPI STATS
========================================================= */

.ai-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin-top:22px;
    padding-top:18px;

    border-top:1px solid #e2e8f0;
}


.ai-stats div{
    min-width:0;
}


.ai-stats span{
    display:block;

    margin-bottom:8px;

    color:#8794a7;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:9px;

    letter-spacing:.11em;
}


.ai-stats strong{
    color:#132c50;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:18px;
}


/* =========================================================
   INSIGHT CARD
========================================================= */

.ai-insight-card{
    position:relative;

    min-height:155px;

    margin-top:14px;
    padding:20px 22px;

    overflow:hidden;
}


.ai-insight-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}


.ai-insight-header > div:first-child{
    display:flex;
    align-items:center;

    gap:10px;
}


.ai-spark{
    color:#2d72dd;

    font-size:18px;
}


.ai-insight-header strong{
    color:#17345c;

    font-size:14px;
}


/* =========================================================
   INSIGHT DOTS
========================================================= */

.ai-insight-dots{
    display:flex;

    gap:5px;
}


.ai-insight-dots i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#cbd5e1;
}


.ai-insight-dots i.active{
    background:#2d72dd;
}


/* =========================================================
   INSIGHT CONTENT
========================================================= */

.ai-insight-content{
    position:relative;

    min-height:78px;
}


.ai-insight-item{
    position:absolute;
    inset:0;

    opacity:0;

    transform:
        translateY(8px);

    filter:blur(2px);

    transition:
        opacity .38s ease,
        transform .38s ease,
        filter .38s ease;
}

.ai-insight-item.active{
    opacity:1;

    transform:
        translateY(0);

    filter:blur(0);
}

.ai-insight-item.active{
    opacity:1;

    transform:translateY(0);
}


.ai-tag{
    display:inline-block;

    margin-bottom:7px;
    padding:3px 7px;

    color:#2767ba;

    background:#e7f1ff;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:8px;
    font-weight:800;

    letter-spacing:.08em;
}


.ai-insight-item h4{
    display:inline-block;

    margin:0 0 8px 8px;

    color:#17345c;

    font-size:14px;
}


.ai-insight-item p{
    max-width:620px;

    margin:0;

    color:#697a91;

    font-size:13px;
    line-height:1.6;
}


.ai-insight-item p strong{
    color:#274363;
}

.ai-forecast-divider{
    stroke:#a9bdd9 !important;
    stroke-width:1 !important;
    stroke-dasharray:4 5;
    opacity:.55;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

    .ai-intelligence-container{
        grid-template-columns:1fr;

        gap:52px;
    }

    .ai-copy{
        max-width:760px;
    }

}


@media(max-width:700px){

    .ai-intelligence-section{
        padding:80px 0;
    }

    .ai-intelligence-container{
        width:min(100% - 30px, 1320px);
    }

    .ai-copy h2{
        font-size:38px;
    }

    .ai-copy h2 br{
        display:none;
    }

    .ai-intro{
        font-size:15px;
    }

    .ai-card-header{
        align-items:flex-start;

        flex-direction:column;
    }

    .ai-chart svg{
        height:175px;
    }

    .ai-stats{
        gap:15px;
    }

    .ai-stats strong{
        font-size:15px;
    }

}


@media(max-width:480px){

    .ai-eyebrow{
        gap:13px;
    }

    .ai-copy h2{
        font-size:33px;
    }

    .ai-feature{
        grid-template-columns:20px 1fr;
    }

    .ai-forecast-card{
        padding:17px 15px;
    }

    .ai-stats{
        grid-template-columns:1fr;

        gap:14px;
    }

    .ai-insight-card{
        padding:17px 15px;
    }

}


/* =========================================================
   BUILT FOR AUSTRALIA
========================================================= */

.au-section {
    position: relative;
    padding: 105px 30px 100px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(46, 124, 240, 0.08),
            transparent 38%
        ),
        #ffffff;
    overflow: hidden;
}

.au-container {
    width: min(1240px, 100%);
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.au-heading {
    max-width: 780px;
    margin: 0 auto 72px;
    text-align: center;
}

.au-heading .section-eyebrow {
    display: block;
    margin-bottom: 22px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #2874e8;
}

.au-heading h2 {
    margin: 0;

    font-size: clamp(42px, 4.5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 700;

    color: #102343;
}

.au-heading h2 span {
    display: block;
    color: #2874e8;
}

.au-heading p {
    max-width: 680px;
    margin: 26px auto 0;

    font-size: 17px;
    line-height: 1.75;

    color: #61708a;
}


/* =========================================================
   BENEFITS
========================================================= */

.au-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #dce6f3;
    border-bottom: 1px solid #dce6f3;
}

.au-benefit {
    position: relative;
    min-height: 270px;
    padding: 38px 34px 42px;

    border-right: 1px solid #dce6f3;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.au-benefit:last-child {
    border-right: none;
}

.au-benefit:hover {
    background: #f7faff;
    transform: translateY(-6px);
}


/* number */

.au-number {
    position: absolute;
    top: 24px;
    right: 26px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #a8b8ce;
}


/* icon */

.au-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin-bottom: 30px;

    border-radius: 14px;

    background: #eaf3ff;
    color: #2874e8;

    font-size: 22px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.au-benefit:hover .au-icon {
    transform: translateY(-4px) scale(1.06);

    background: #2874e8;
    color: #ffffff;
}


/* text */

.au-benefit h3 {
    margin: 0 0 13px;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;

    color: #102343;
}

.au-benefit p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #66758c;
}


/* =========================================================
   CTA
========================================================= */

.au-cta {
    display: flex;
    justify-content: center;
    margin-top: 46px;
}

.au-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    padding: 17px 26px;

    border-radius: 10px;

    background: #2874e8;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(40, 116, 232, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.au-button span {
    transition: transform 0.25s ease;
}

.au-button:hover {
    transform: translateY(-3px);
    background: #1f67d4;

    box-shadow:
        0 18px 38px rgba(40, 116, 232, 0.27);
}

.au-button:hover span {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .au-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .au-benefit:nth-child(2) {
        border-right: none;
    }

    .au-benefit:nth-child(-n+2) {
        border-bottom: 1px solid #dce6f3;
    }
}


@media (max-width: 650px) {

    .au-section {
        padding: 80px 22px;
    }

    .au-heading {
        margin-bottom: 50px;
    }

    .au-heading h2 {
        font-size: 40px;
    }

    .au-heading p {
        font-size: 15px;
    }

    .au-benefits {
        grid-template-columns: 1fr;
    }

    .au-benefit {
        min-height: auto;
        padding: 32px 24px 34px;

        border-right: none;
        border-bottom: 1px solid #dce6f3;
    }

    .au-benefit:last-child {
        border-bottom: none;
    }

}

/* =========================================================
   REVEAL + DELAY FIX
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(22px);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22,1,.36,1);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.reveal.delay-1{
    transition-delay:60ms;
}

.reveal.delay-2{
    transition-delay:120ms;
}

.reveal.delay-3{
    transition-delay:180ms;
}

.reveal.delay-4{
    transition-delay:240ms;
}

.reveal.delay-5{
    transition-delay:300ms;
}

.reveal.delay-6{
    transition-delay:360ms;
}


/* =========================================================
   SEE 24x7 RETAIL IN ACTION
========================================================= */

.video-showcase-section {
    position: relative;
    padding: 110px 30px 105px;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(45, 114, 221, 0.08),
            transparent 42%
        ),
        #ffffff;

    overflow: hidden;
}

.video-showcase-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* =========================================================
   PROVEN EXPERIENCE
========================================================= */

.proof-section{
    position:relative;
    padding:110px 30px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(45,114,221,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

    overflow:hidden;
}


.proof-container{
    width:min(1240px,100%);
    margin:0 auto;

    display:grid;
    grid-template-columns:.85fr 1.15fr;

    gap:80px;
    align-items:center;
}


/* =========================================================
   LEFT COPY
========================================================= */

.proof-eyebrow{
    display:block;
    margin-bottom:18px;

    color:#2874e8;

    font-size:12px;
    font-weight:800;

    letter-spacing:.18em;
}


.proof-copy h2{
    max-width:560px;
    margin:0;

    color:#102343;

    font-size:clamp(42px,4.2vw,60px);
    line-height:1.05;

    letter-spacing:-.045em;
}


.proof-copy h2 span{
    display:block;
    color:#2874e8;
}


.proof-copy > p{
    max-width:570px;
    margin:26px 0 0;

    color:#61708a;

    font-size:16px;
    line-height:1.75;
}


.proof-note{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:30px;
    padding:12px 16px;

    border:1px solid #d9e6f5;
    border-radius:10px;

    color:#435673;
    background:#ffffff;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 8px 24px rgba(30,73,130,.05);
}


.proof-note span{
    display:grid;
    place-items:center;

    width:22px;
    height:22px;

    border-radius:50%;

    color:#2874e8;
    background:#eaf3ff;

    font-size:12px;
}


/* =========================================================
   METRIC GRID
========================================================= */

.proof-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    border-top:1px solid #dce6f3;
    border-left:1px solid #dce6f3;
}


.proof-metric{
    position:relative;

    min-height:250px;

    padding:34px 32px;

    border-right:1px solid #dce6f3;
    border-bottom:1px solid #dce6f3;

    background:rgba(255,255,255,.72);

    transition:
        transform .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}


.proof-metric:hover{
    transform:translateY(-6px);

    background:#ffffff;

    box-shadow:
        0 18px 42px rgba(26,72,133,.08);
}


.proof-index{
    position:absolute;
    top:24px;
    right:26px;

    color:#a9b7c9;

    font-size:11px;
    font-weight:700;

    letter-spacing:.12em;
}


.proof-metric > strong{
    display:block;

    margin-bottom:16px;

    color:#2874e8;

    font-size:46px;
    font-weight:800;

    line-height:1;

    letter-spacing:-.04em;
}


.proof-metric h3{
    margin:0 0 10px;

    color:#102343;

    font-size:18px;
    line-height:1.3;
}


.proof-metric p{
    margin:0;

    color:#68778d;

    font-size:13px;
    line-height:1.65;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .proof-container{
        grid-template-columns:1fr;

        gap:55px;
    }

}


@media(max-width:650px){

    .proof-section{
        padding:80px 22px;
    }

    .proof-copy h2{
        font-size:40px;
    }

    .proof-metrics{
        grid-template-columns:1fr;
    }

    .proof-metric{
        min-height:auto;
        padding:30px 26px;
    }

    .proof-metric > strong{
        font-size:40px;
    }

}

/* =========================================================
   HEADING
========================================================= */

.video-showcase-heading {
    max-width: 800px;
    margin: 0 auto 52px;
    text-align: center;
}

.video-showcase-heading .eyebrow {
    display: block;
    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;

    color: #2874e8;
}

.video-showcase-heading h2 {
    margin: 0;

    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.05;
    letter-spacing: -.045em;

    color: #102343;
}

.video-showcase-heading h2 span {
    display: block;
    color: #2874e8;
}

.video-showcase-heading p {
    max-width: 690px;
    margin: 24px auto 0;

    font-size: 17px;
    line-height: 1.7;

    color: #61708a;
}


/* =========================================================
   VIDEO
========================================================= */

.video-showcase {
    position: relative;

    max-width: 1000px;
    margin: 0 auto;
}

.video-frame {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid #d5e2f2;
    border-radius: 20px;

    background: #0c1d38;

    box-shadow:
        0 35px 80px rgba(24, 59, 105, .16),
        0 8px 25px rgba(24, 59, 105, .08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.video-frame:hover {
    transform: translateY(-5px);

    box-shadow:
        0 42px 90px rgba(24, 59, 105, .20),
        0 10px 30px rgba(24, 59, 105, .10);
}

.video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   PROOF POINTS
========================================================= */

.video-proof {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 42px;

    margin-top: 35px;
}

.video-proof div {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 14px;
    font-weight: 600;

    color: #43536b;
}

.video-proof div span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #e9f3ff;
    color: #2874e8;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   CTA
========================================================= */

.video-showcase-cta {
    display: flex;
    justify-content: center;

    margin-top: 38px;
}

.video-demo-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    padding: 17px 26px;

    border-radius: 10px;

    background: #2874e8;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(40, 116, 232, .20);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.video-demo-button span {
    transition: transform .25s ease;
}

.video-demo-button:hover {
    transform: translateY(-3px);

    background: #1f67d4;

    box-shadow:
        0 18px 38px rgba(40, 116, 232, .27);
}

.video-demo-button:hover span {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .video-showcase-section {
        padding: 80px 20px;
    }

    .video-showcase-heading {
        margin-bottom: 38px;
    }

    .video-showcase-heading h2 {
        font-size: 40px;
    }

    .video-showcase-heading p {
        font-size: 15px;
    }

    .video-frame {
        border-radius: 14px;
    }

    .video-proof {
        flex-direction: column;
        align-items: flex-start;

        width: max-content;
        max-width: 100%;

        margin: 28px auto 0;

        gap: 14px;
    }

}

/* =========================================================
   FOOTER SOCIAL MARKS
========================================================= */

.footer-social-link{
    font-family:Arial,sans-serif;
}

.social-mark{
    display:block;

    color:#b7c2d2;

    font-size:17px;
    font-weight:700;

    line-height:1;
}

.social-mark.linkedin{
    font-size:14px;
    font-weight:800;
}

.social-youtube{
    display:block;

    color:#b7c2d2;

    font-size:14px;

    transform:translateX(1px);
}

.footer-social-link:hover .social-mark,
.footer-social-link:hover .social-youtube{
    color:#ffffff;
}

.footer-registration{
    position:relative;
    padding-left:18px;
}

.footer-registration::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:1px;
    height:16px;

    transform:translateY(-50%);

    background:rgba(255,255,255,.14);
}


.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    min-height:58px;
}

.footer-bottom-links{
    display:flex;
    align-items:center;

    gap:22px;
}

.footer-bottom-links a{
    color:#74879e;

    font-size:11px;

    text-decoration:none;

    transition:color .2s ease;
}

.footer-bottom-links a:hover{
    color:#ffffff;
}


@media(max-width:700px){

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;

        padding-top:22px;
        padding-bottom:4px;
    }

    .footer-bottom-links{
        flex-wrap:wrap;

        gap:12px 18px;
    }

}

/* =========================================================
   PRICING PAGE — HERO + PLAN CARDS
========================================================= */

.pricing-hero-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 110px;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(45, 116, 235, 0.09),
            transparent 35%),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 48%,
            #f8fbff 100%
        );
}

.pricing-container {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BACKGROUND GLOWS
--------------------------------------------------------- */

.pricing-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.pricing-glow-left {
    width: 500px;
    height: 500px;
    left: -280px;
    top: 140px;
    background: rgba(44, 115, 235, 0.055);
}

.pricing-glow-right {
    width: 600px;
    height: 600px;
    right: -340px;
    top: -100px;
    background: rgba(91, 151, 255, 0.07);
}


/* ---------------------------------------------------------
   HERO HEADING
--------------------------------------------------------- */

.pricing-hero-heading {
    max-width: 850px;
    margin: 0 auto 62px;
    text-align: center;
}

.pricing-eyebrow {
    display: block;
    margin-bottom: 18px;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.20em;

    color: #2d74eb;
}

.pricing-hero-heading h1 {
    margin: 0;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 700;

    color: #0b2144;
}

.pricing-hero-heading h1 span {
    display: block;
    color: #2d74eb;
}

.pricing-hero-intro {
    max-width: 690px;
    margin: 24px auto 0;

    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;

    color: #5f708c;
}


/* ---------------------------------------------------------
   TRUST ROW
--------------------------------------------------------- */

.pricing-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px 30px;
    margin-top: 28px;
}

.pricing-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 13px;
    font-weight: 600;
    color: #415473;
}

.pricing-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #eaf3ff;
    color: #2d74eb;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   PLAN GRID
========================================================= */

.pricing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    align-items: stretch;
}


/* ---------------------------------------------------------
   PLAN CARD
--------------------------------------------------------- */

.pricing-plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 36px 32px 30px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #dce7f5;
    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(20, 55, 100, 0.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.pricing-plan-card:hover {
    transform: translateY(-6px);

    border-color: #b7d1f5;

    box-shadow:
        0 28px 65px rgba(20, 55, 100, 0.13);
}


/* ---------------------------------------------------------
   FEATURED / PROFESSIONAL
--------------------------------------------------------- */

.pricing-plan-featured {
    border: 2px solid #2d74eb;

    box-shadow:
        0 24px 65px rgba(45, 116, 235, 0.16);
}

.pricing-plan-featured::before {
    content: "";

    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;

    height: 3px;

    border-radius: 0 0 10px 10px;

    background: linear-gradient(
        90deg,
        #2d74eb,
        #6ba3ff
    );
}

.pricing-popular-badge {
    position: absolute;

    left: 50%;
    top: -16px;

    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 17px;

    white-space: nowrap;

    border: 1px solid #d6e5ff;
    border-radius: 999px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(45, 116, 235, 0.13);

    color: #2d74eb;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .13em;
}


/* ---------------------------------------------------------
   CARD CONTENT
--------------------------------------------------------- */

.pricing-plan-label {
    display: block;

    margin-bottom: 12px;

    color: #2d74eb;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .16em;
}

.pricing-plan-card h2 {
    margin: 0 0 10px;

    font-size: 27px;
    line-height: 1.2;

    font-weight: 700;

    color: #0b2144;
}

.pricing-plan-description {
    min-height: 54px;

    margin: 0;

    color: #70809a;

    font-size: 14px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   PRICE
--------------------------------------------------------- */

.pricing-plan-price {
    display: flex;
    align-items: flex-end;

    margin-top: 27px;

    color: #0b2144;
}

.pricing-currency {
    margin: 0 3px 8px 0;

    font-size: 20px;
    font-weight: 700;
}

.pricing-plan-price strong {
    font-size: 52px;
    line-height: .9;

    letter-spacing: -0.05em;

    font-weight: 700;
}

.pricing-period {
    margin: 0 0 5px 9px;

    color: #74839b;

    font-size: 13px;
}


/* ---------------------------------------------------------
   USERS
--------------------------------------------------------- */

.pricing-user-box {
    margin-top: 27px;

    padding: 15px 17px;

    border: 1px solid #e2eaf5;
    border-radius: 13px;

    background: #f7faff;
}

.pricing-user-box > div {
    display: flex;
    align-items: baseline;
    gap: 6px;

    color: #0b2144;

    font-size: 14px;
    font-weight: 600;
}

.pricing-user-number {
    color: #2d74eb;

    font-size: 20px;
    font-weight: 700;
}

.pricing-user-box small {
    display: block;

    margin-top: 5px;

    color: #8794a8;

    font-size: 11px;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   DIVIDER
--------------------------------------------------------- */

.pricing-plan-divider {
    height: 1px;

    margin: 25px 0;

    background: #e6edf6;
}


/* ---------------------------------------------------------
   FEATURES
--------------------------------------------------------- */

.pricing-plan-features {
    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 0;
    margin: 0 0 30px;

    list-style: none;
}

.pricing-plan-features li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: #40516d;

    font-size: 13px;
    line-height: 1.5;
}

.pricing-plan-features li span {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-top: 1px;

    border-radius: 50%;

    background: #eaf3ff;

    color: #2d74eb;

    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   BUTTONS
========================================================= */

.pricing-plan-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    width: 100%;

    min-height: 52px;

    margin-top: auto;

    border-radius: 10px;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.pricing-plan-button span {
    font-size: 18px;

    transition: transform .25s ease;
}

.pricing-plan-button:hover span {
    transform: translateX(4px);
}


/* OUTLINE */

.pricing-button-outline {
    border: 1px solid #b9cce7;

    background: #ffffff;

    color: #1e5fc7;
}

.pricing-button-outline:hover {
    background: #f3f8ff;

    border-color: #2d74eb;

    color: #2d74eb;
}


/* PRIMARY */

.pricing-button-primary {
    border: 1px solid #2d74eb;

    background: #2d74eb;

    color: #ffffff;
}

.pricing-button-primary:hover {
    background: #1f64d7;

    border-color: #1f64d7;

    box-shadow:
        0 10px 25px rgba(45, 116, 235, .22);

    color: #ffffff;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.pricing-plan-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 30px;

    color: #7c8ca4;

    font-size: 12px;
}

.pricing-plan-note i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #9db1cc;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .pricing-plan-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
        gap: 28px;
    }

    .pricing-plan-description {
        min-height: auto;
    }

    .pricing-plan-featured {
        order: -1;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .pricing-hero-section {
        padding: 75px 0 80px;
    }

    .pricing-container {
        width: min(100% - 30px, 1180px);
    }

    .pricing-hero-heading {
        margin-bottom: 48px;
    }

    .pricing-eyebrow {
        font-size: 10px;
        margin-bottom: 15px;
    }

    .pricing-hero-heading h1 {
        font-size: 39px;
        line-height: 1.07;
    }

    .pricing-hero-intro {
        font-size: 15px;
        line-height: 1.65;
    }

    .pricing-trust-row {
        gap: 10px 18px;
    }

    .pricing-trust-item {
        font-size: 11px;
    }

    .pricing-plan-card {
        padding: 32px 24px 25px;
    }

    .pricing-plan-price strong {
        font-size: 47px;
    }

    .pricing-plan-note {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .pricing-plan-note i {
        display: none;
    }

}

/* =========================================================
   PRICING PAGE — ASSURANCE STRIP
========================================================= */

.pricing-assurance-section {
    position: relative;
    padding: 0 0 100px;

    background: #f8fbff;
}

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


/* ---------------------------------------------------------
   MAIN PANEL
--------------------------------------------------------- */

.pricing-assurance-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    background: #ffffff;

    border: 1px solid #dce7f5;
    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(20, 55, 100, 0.07);

    overflow: hidden;
}


/* ---------------------------------------------------------
   INDIVIDUAL ITEM
--------------------------------------------------------- */

.pricing-assurance-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 34px 30px;
}


/* DIVIDERS */

.pricing-assurance-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 30px;
    bottom: 30px;

    width: 1px;

    background: #e4ebf5;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.pricing-assurance-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background: #edf5ff;

    color: #2d74eb;

    transition:
        transform .25s ease,
        background .25s ease;
}

.pricing-assurance-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.8;
}

.pricing-assurance-item:hover .pricing-assurance-icon {
    transform: translateY(-3px);

    background: #e2efff;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.pricing-assurance-content {
    min-width: 0;
}

.pricing-assurance-label {
    display: block;

    margin-bottom: 8px;

    color: #2d74eb;

    font-size: 9px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: .15em;
}

.pricing-assurance-content h3 {
    margin: 0 0 9px;

    color: #0b2144;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-assurance-content p {
    margin: 0;

    color: #70809a;

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .pricing-assurance-grid {
        grid-template-columns: 1fr;
    }

    .pricing-assurance-item:not(:last-child)::after {
        top: auto;

        left: 30px;
        right: 30px;
        bottom: 0;

        width: auto;
        height: 1px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .pricing-assurance-section {
        padding-bottom: 75px;
    }

    .pricing-assurance-container {
        width: min(100% - 30px, 1180px);
    }

    .pricing-assurance-item {
        padding: 27px 23px;

        gap: 15px;
    }

    .pricing-assurance-icon {
        width: 42px;
        height: 42px;
    }

    .pricing-assurance-content h3 {
        font-size: 18px;
    }

}

/* =========================================================
   PRICING — PLAN COMPARISON
========================================================= */

.plan-compare-section {
    position: relative;
    padding: 105px 0 115px;
    background: #ffffff;
}

.plan-compare-container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.plan-compare-heading {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.plan-compare-eyebrow {
    display: block;
    margin-bottom: 17px;

    color: #2d74eb;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .18em;
}

.plan-compare-heading h2 {
    margin: 0;

    color: #0b2144;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.08;

    font-weight: 700;
    letter-spacing: -.04em;
}

.plan-compare-heading h2 span {
    color: #2d74eb;
}

.plan-compare-heading p {
    max-width: 620px;

    margin: 19px auto 0;

    color: #71819a;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   PLAN KEY
========================================================= */

.plan-compare-key {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;

    padding: 18px 22px;

    border: 1px solid #e0e8f3;
    border-radius: 13px;

    background: #f8fbff;
}

.plan-key-intro {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plan-key-intro strong {
    color: #0b2144;

    font-size: 13px;
    font-weight: 700;
}

.plan-key-intro span {
    color: #8290a6;

    font-size: 11px;
}

.plan-key-plans {
    display: flex;
    align-items: center;

    gap: 22px;
}

.plan-key-item {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #5c6e89;

    font-size: 11px;
    font-weight: 600;
}

.plan-key-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.plan-key-dot.essential {
    background: #9db0c9;
}

.plan-key-dot.professional {
    background: #2d74eb;
}

.plan-key-dot.enterprise {
    background: #0b2144;
}


/* =========================================================
   ACCORDION
========================================================= */

.plan-compare-accordion {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.plan-module {
    overflow: hidden;

    border: 1px solid #e0e8f3;
    border-radius: 15px;

    background: #ffffff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.plan-module:hover {
    border-color: #c8daf3;
}

.plan-module.active {
    border-color: #b9d2f6;

    box-shadow:
        0 14px 38px rgba(20, 55, 100, .07);
}


/* =========================================================
   ACCORDION HEADER
========================================================= */

.plan-module-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 20px 22px;

    border: 0;
    outline: none;

    background: transparent;

    text-align: left;

    cursor: pointer;
}

.plan-module-title {
    display: flex;
    align-items: center;

    gap: 17px;
}

.plan-module-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 11px;

    background: #edf5ff;

    color: #2d74eb;
}

.plan-module-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.8;
}

.plan-module-number {
    display: block;

    margin-bottom: 3px;

    color: #2d74eb;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .14em;
}

.plan-module-title h3 {
    margin: 0;

    color: #0b2144;

    font-size: 16px;
    line-height: 1.35;

    font-weight: 700;
}

.plan-module-title p {
    margin: 3px 0 0;

    color: #8491a5;

    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.plan-module-right {
    display: flex;
    align-items: center;

    gap: 22px;
}

.plan-module-availability {
    display: flex;
    align-items: center;

    gap: 6px;
}

.plan-module-availability span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 23px;

    padding: 0 6px;

    border-radius: 6px;

    background: #edf5ff;

    color: #2d74eb;

    font-size: 8px;
    font-weight: 700;
}

.plan-module-availability .plan-unavailable {
    background: #f3f5f8;

    color: #b5becb;
}


/* PLUS */

.plan-module-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid #dce6f3;
    border-radius: 50%;

    color: #2d74eb;

    background: #ffffff;

    transition:
        transform .3s ease,
        background .25s ease;
}

.plan-module-toggle svg {
    width: 16px;
    height: 16px;
}

.plan-module.active .plan-module-toggle {
    transform: rotate(180deg);
    background: #edf5ff;
    border-color: #9fc3f3;
}


/* =========================================================
   ACCORDION CONTENT
========================================================= */

.plan-module-content {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .3s ease;
}

.plan-module.active .plan-module-content {
    opacity: 1;
}


/* =========================================================
   FEATURE TABLE
========================================================= */

.plan-feature-table {
    margin: 0 22px 22px;

    overflow: hidden;

    border: 1px solid #e5ebf4;
    border-radius: 11px;
}

.plan-feature-row {
    display: grid;

    grid-template-columns:
        minmax(250px, 2fr)
        repeat(3, minmax(110px, .7fr));

    align-items: center;

    min-height: 48px;

    border-bottom: 1px solid #edf1f6;
}

.plan-feature-row:last-child {
    border-bottom: 0;
}

.plan-feature-row > div {
    padding: 12px 16px;

    color: #53647e;

    font-size: 11px;
}

.plan-feature-row > div:not(:first-child) {
    text-align: center;

    border-left: 1px solid #edf1f6;
}

.plan-feature-heading {
    background: #f7faff;
}

.plan-feature-heading > div {
    color: #0b2144;

    font-size: 10px;
    font-weight: 700;
}

.included {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: #e9f3ff;

    color: #2d74eb;

    font-size: 11px;
    font-weight: 800;
}

.not-included {
    color: #b6c0ce;

    font-size: 15px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .plan-compare-section {
        padding: 80px 0 85px;
    }

    .plan-compare-container {
        width: min(100% - 30px, 1120px);
    }

    .plan-compare-key {
        align-items: flex-start;
        flex-direction: column;
    }

    .plan-key-plans {
        width: 100%;

        justify-content: space-between;

        gap: 8px;
    }

    .plan-module-header {
        padding: 17px 16px;

        gap: 12px;
    }

    .plan-module-title {
        gap: 12px;
    }

    .plan-module-icon {
        width: 39px;
        height: 39px;
    }

    .plan-module-title p {
        display: none;
    }

    .plan-module-availability {
        display: none;
    }

    .plan-module-right {
        gap: 0;
    }

    .plan-feature-table {
        overflow-x: auto;

        margin: 0 14px 16px;
    }

    .plan-feature-row {
        min-width: 650px;
    }

}

/* =========================================================
   PRICING — OPTIONAL ADD-ONS
========================================================= */

.pricing-addons-section{
    position:relative;

    padding:110px 0 115px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(45,116,235,.075),
            transparent 30%
        ),
        #f8fbff;
}


.pricing-addons-container,
.pricing-custom-container{
    width:min(1180px, calc(100% - 48px));
}


/* =========================================================
   HEADING
========================================================= */

/* =========================================================
   HEADING
========================================================= */

.pricing-addons-heading{
    width:100%;
    max-width:1200px;
    margin:0 auto 52px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}


/* EYEBROW */

.pricing-addons-eyebrow{
    display:block;
    margin-bottom:16px;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
}


/* MAIN HEADING */

.pricing-addons-heading h2{
    width:100%;
    margin:0 auto;

    color:#0b2144;

    font-size:clamp(40px,4vw,56px);
    line-height:1.06;

    font-weight:700;
    letter-spacing:-.04em;

    text-align:center;
}

.pricing-addons-heading h2 span{
    display:block;

    color:#2d74eb;

    text-align:center;
    white-space:nowrap;
}


/* BADGE + DESCRIPTION */

.pricing-addons-heading-side{
    width:100%;
    max-width:650px;

    margin:28px auto 0;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.pricing-addons-heading-side > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:7px 12px;

    border-radius:999px;

    background:#eaf3ff;
    color:#2d74eb;

    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
}

.pricing-addons-heading-side p{
    margin:14px auto 0;

    color:#78879d;

    font-size:12px;
    line-height:1.6;

    text-align:center;
}

/* =========================================================
   GRID
========================================================= */

.pricing-addons-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


/* =========================================================
   CARD
========================================================= */

.pricing-addon-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-height:310px;

    padding:30px 27px 26px;

    border:1px solid #dce7f5;
    border-radius:17px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 14px 38px rgba(20,55,100,.055);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.pricing-addon-card:hover{
    transform:translateY(-6px);

    border-color:#bcd3f3;

    box-shadow:
        0 22px 48px rgba(20,55,100,.10);
}


/* =========================================================
   CARD TOP
========================================================= */

.pricing-addon-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}


.pricing-addon-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border-radius:12px;

    background:#edf5ff;

    color:#2d74eb;

    transition:
        background .28s ease,
        color .28s ease,
        transform .28s ease;
}


.pricing-addon-icon svg{
    width:20px;
    height:20px;

    stroke-width:1.8;
}


.pricing-addon-card:hover .pricing-addon-icon{
    transform:translateY(-3px);

    background:#2d74eb;

    color:#ffffff;
}


.pricing-addon-number{
    color:#acb8c8;

    font-size:9px;
    font-weight:700;

    letter-spacing:.14em;
}


/* =========================================================
   CONTENT
========================================================= */

.pricing-addon-card h3{
    margin:0 0 10px;

    color:#0b2144;

    font-size:17px;
    line-height:1.3;

    font-weight:700;

    letter-spacing:-.015em;
}


.pricing-addon-card > p{
    margin:0;

    color:#718099;

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   PRICE
========================================================= */

.pricing-addon-bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-top:auto;
    padding-top:25px;

    border-top:1px solid #edf1f6;
}


.pricing-addon-price strong{
    display:block;

    margin-bottom:4px;

    color:#2d74eb;

    font-size:25px;
    line-height:1;

    font-weight:700;

    letter-spacing:-.035em;
}


.pricing-addon-price span{
    display:block;

    color:#8a97a9;

    font-size:10px;
    line-height:1.4;
}


.pricing-addon-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:1px solid #d8e4f3;

    border-radius:50%;

    color:#2d74eb;

    font-size:15px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


.pricing-addon-card:hover .pricing-addon-arrow{
    transform:translateX(3px);

    background:#2d74eb;

    color:#ffffff;
}


/* =========================================================
   NOTE
========================================================= */

.pricing-addons-note{
    display:flex;
    align-items:flex-start;

    gap:11px;

    max-width:820px;

    margin:30px auto 0;
    padding:15px 18px;

    border:1px solid #dae7f6;
    border-radius:11px;

    background:rgba(255,255,255,.80);

    color:#6f7f96;
}


.pricing-addons-note svg{
    flex:0 0 auto;

    width:17px;
    height:17px;

    margin-top:2px;

    color:#2d74eb;

    stroke-width:1.8;
}


.pricing-addons-note p{
    margin:0;

    font-size:11px;
    line-height:1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .pricing-addons-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .pricing-addons-heading{
        align-items:flex-start;

        flex-direction:column;

        gap:22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .pricing-addons-section{
        padding:80px 0 85px;
    }


    .pricing-addons-container{
        width:min(100% - 30px,1180px);
    }


    .pricing-addons-heading{
        margin-bottom:36px;
    }


    .pricing-addons-heading h2{
        font-size:39px;
    }


    .pricing-addons-grid{
        grid-template-columns:1fr;
    }


    .pricing-addon-card{
        min-height:255px;
    }

}

/* =========================================================
   PRICING — CUSTOM CONFIGURATION
========================================================= */

.pricing-custom-section{
    padding:105px 0;

    background:#ffffff;
}


.pricing-custom-container{
    width:min(1180px,calc(100% - 48px));

    margin:0 auto;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.pricing-custom-panel{
    position:relative;

    display:grid;
    grid-template-columns:1.1fr .9fr;

    overflow:hidden;

    border:1px solid #d9e5f3;
    border-radius:22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(71,139,239,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 62%
        );

    box-shadow:
        0 22px 60px rgba(20,55,100,.08);
}


/* =========================================================
   LEFT
========================================================= */

.pricing-custom-copy{
    padding:55px 54px 52px;
}


.pricing-custom-eyebrow{
    display:block;

    margin-bottom:16px;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;

    letter-spacing:.18em;
}


.pricing-custom-copy h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(40px,4vw,56px);
    line-height:1.06;

    font-weight:700;

    letter-spacing:-.04em;
}


.pricing-custom-copy h2 span{
    color:#2d74eb;
}


.pricing-custom-copy > p{
    max-width:620px;

    margin:22px 0 0;

    color:#66768f;

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   POINTS
========================================================= */

.pricing-custom-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px 22px;

    margin-top:30px;
}


.pricing-custom-points > div{
    display:flex;
    align-items:center;

    gap:10px;

    color:#415473;

    font-size:12px;
    font-weight:600;
}


.pricing-custom-points svg{
    flex:0 0 auto;

    width:17px;
    height:17px;

    color:#2d74eb;

    stroke-width:1.8;
}


/* =========================================================
   RIGHT ACTION PANEL
========================================================= */

.pricing-custom-action{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:48px 44px;

    border-left:1px solid #dbe6f3;

    background:
        linear-gradient(
            145deg,
            #0c2445 0%,
            #123969 100%
        );
}


.pricing-custom-action-label{
    display:block;

    margin-bottom:15px;

    color:#8dbbff;

    font-size:9px;
    font-weight:700;

    letter-spacing:.16em;
}


.pricing-custom-action h3{
    margin:0;

    color:#ffffff;

    font-size:30px;
    line-height:1.18;

    letter-spacing:-.03em;
}


.pricing-custom-action p{
    margin:17px 0 0;

    color:rgba(255,255,255,.70);

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   BUTTON
========================================================= */

.pricing-custom-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:13px;

    width:max-content;

    margin-top:26px;
    padding:15px 20px;

    border-radius:10px;

    background:#2d74eb;

    color:#ffffff;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 12px 28px rgba(15,74,170,.28);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.pricing-custom-button:hover{
    transform:translateY(-3px);

    background:#3d82f0;

    box-shadow:
        0 17px 34px rgba(15,74,170,.36);
}


.pricing-custom-button span{
    font-size:17px;

    transition:transform .25s ease;
}


.pricing-custom-button:hover span{
    transform:translateX(4px);
}


.pricing-custom-action small{
    display:block;

    margin-top:13px;

    color:rgba(255,255,255,.48);

    font-size:10px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .pricing-custom-panel{
        grid-template-columns:1fr;
    }


    .pricing-custom-action{
        border-left:0;
        border-top:1px solid #dbe6f3;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .pricing-custom-section{
        padding:80px 0;
    }


    .pricing-custom-container{
        width:min(100% - 30px,1180px);
    }


    .pricing-custom-copy{
        padding:38px 26px;
    }


    .pricing-custom-copy h2{
        font-size:39px;
    }


    .pricing-custom-points{
        grid-template-columns:1fr;
    }


    .pricing-custom-action{
        padding:36px 26px;
    }


    .pricing-custom-action h3{
        font-size:27px;
    }


    .pricing-custom-button{
        width:100%;
    }

}

/* =========================================================
   PRICING — FAQ
========================================================= */

.pricing-faq-section{
    position:relative;

    padding:105px 0 110px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(45,116,235,.07),
            transparent 30%
        ),
        #f8fbff;
}


.pricing-faq-container{
    width:min(1040px, calc(100% - 48px));
}


/* =========================================================
   HEADING
========================================================= */

.pricing-faq-heading{
    max-width:720px;

    margin:0 auto 45px;

    text-align:center;
}


.pricing-faq-eyebrow{
    display:block;

    margin-bottom:16px;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;

    letter-spacing:.18em;
}


.pricing-faq-heading h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(40px,4vw,56px);
    line-height:1.06;

    font-weight:700;

    letter-spacing:-.04em;
}


.pricing-faq-heading h2 span{
    color:#2d74eb;
}


.pricing-faq-heading p{
    max-width:600px;

    margin:20px auto 0;

    color:#74839a;

    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   FAQ LIST
========================================================= */

.pricing-faq-list{
    display:flex;
    flex-direction:column;

    gap:12px;
}


/* =========================================================
   FAQ ITEM
========================================================= */
/* =========================================================
   PRICING FAQ — RELIABLE DETAILS VERSION
========================================================= */

.pricing-faq-item{
    overflow:hidden;

    border:1px solid #dce6f3;
    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 8px 24px rgba(20,55,100,.035);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.pricing-faq-item[open]{
    border-color:#b8d1f5;

    box-shadow:
        0 14px 34px rgba(20,55,100,.07);
}


/* remove browser marker */
.pricing-faq-question{
    list-style:none;
}

.pricing-faq-question::-webkit-details-marker{
    display:none;
}


/* question */
.pricing-faq-question{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    padding:20px 22px;

    cursor:pointer;

    color:#0b2144;

    font-size:14px;
    line-height:1.45;
    font-weight:700;

    text-align:left;
}


/* plus */
.pricing-faq-plus{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:1px solid #d8e5f5;
    border-radius:50%;

    color:#2d74eb;

    font-size:19px;
    font-weight:400;

    transition:
        transform .3s ease,
        background .25s ease;
}


.pricing-faq-item[open] .pricing-faq-plus{
    transform:rotate(45deg);

    background:#edf5ff;
}


/* answer */
.pricing-faq-answer{
    color:#6f7f96;

    font-size:13px;
    line-height:1.7;
}


.pricing-faq-answer > div{
    padding:
        0
        65px
        22px
        22px;
}

/* =========================================================
   HELP LINE
========================================================= */

.pricing-faq-help{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    margin-top:40px;

    color:#78879c;

    font-size:18px;
}


.pricing-faq-help a{
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:#2d74eb;

    font-weight:700;

    text-decoration:none;
}


.pricing-faq-help a > span{
    transition:transform .2s ease;
}


.pricing-faq-help a:hover > span{
    transform:translateX(3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .pricing-faq-section{
        padding:80px 0 85px;
    }


    .pricing-faq-container{
        width:min(100% - 30px,980px);
    }


    .pricing-faq-heading{
        margin-bottom:35px;
    }


    .pricing-faq-heading h2{
        font-size:39px;
    }


    .pricing-faq-question{
        padding:18px;

        font-size:13px;
    }


    .pricing-faq-answer > div{
        padding-left:18px;
        padding-right:18px;
    }


    .pricing-faq-help{
        flex-direction:column;

        gap:6px;
    }

}


/* =========================================================
   PRICING PAGE ALIGNMENT FIX
   Add at END of pricing CSS
========================================================= */

/* Keep all major pricing sections centred */
.pricing-addons-container,
.pricing-custom-container,
.pricing-faq-container{
    margin-left: auto;
    margin-right: auto;
}


/* OPTIONAL ADD-ONS HEADING */
.pricing-addons-heading{
    display: block;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 45px;
}

.pricing-addons-heading > div:first-child{
    text-align: center;
}

.pricing-addons-heading-side{
    text-align: center;
    max-width: 620px;
    margin: 18px auto 0;
}

.pricing-addons-heading-side p{
    margin-left: auto;
    margin-right: auto;
}


/* Keep add-on CARD content left aligned */
.pricing-addon-card{
    text-align: left;
}


/* CUSTOM CONFIGURATION
   Centre the whole panel on page,
   but keep its internal content left aligned */
.pricing-custom-panel{
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}


/* FAQ HEADING */
.pricing-faq-heading{
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-faq-heading p{
    margin-left: auto;
    margin-right: auto;
}


/* FAQ list centred, questions remain left aligned */
.pricing-faq-list{
    margin-left: auto;
    margin-right: auto;
}

.pricing-faq-question,
.pricing-faq-answer{
    text-align: left;
}


/* Bottom FAQ help */
.pricing-faq-help{
    justify-content: center;
    text-align: center;
}

/* =========================================================
   FINAL PRICING CTA
========================================================= */

.pricing-final-cta-section{
    padding:100px 0;

    background:#ffffff;
}


.pricing-final-cta-container{
    width:min(1180px,calc(100% - 48px));

    margin:0 auto;
}


.pricing-final-cta-panel{
    position:relative;
    overflow:hidden;

    padding:78px 55px;

    border-radius:24px;

    text-align:center;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(80,148,255,.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b2144 0%,
            #123b70 100%
        );

    box-shadow:
        0 24px 60px rgba(11,33,68,.15);
}


.pricing-final-eyebrow{
    display:block;

    margin-bottom:18px;

    color:#82b3ff;

    font-size:10px;
    font-weight:700;

    letter-spacing:.18em;
}


.pricing-final-cta-panel h2{
    margin:0;

    color:#ffffff;

    font-size:clamp(42px,5vw,64px);
    line-height:1.05;

    font-weight:700;

    letter-spacing:-.045em;
}


.pricing-final-cta-panel h2 span{
    display:block;

    color:#69a6ff;
}


.pricing-final-cta-panel > p{
    max-width:680px;

    margin:24px auto 0;

    color:rgba(255,255,255,.72);

    font-size:15px;
    line-height:1.7;
}


/* BUTTONS */

.pricing-final-buttons{
    display:flex;
    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:13px;

    margin-top:32px;
}


.pricing-final-primary,
.pricing-final-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;

    padding:0 24px;

    border-radius:10px;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.pricing-final-primary{
    gap:12px;

    background:#2d74eb;

    color:#ffffff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


.pricing-final-primary:hover{
    transform:translateY(-3px);

    background:#4183ef;
}


.pricing-final-primary span{
    font-size:17px;

    transition:transform .25s ease;
}


.pricing-final-primary:hover span{
    transform:translateX(4px);
}


.pricing-final-secondary{
    border:1px solid rgba(255,255,255,.25);

    color:#ffffff;

    background:rgba(255,255,255,.06);
}


.pricing-final-secondary:hover{
    transform:translateY(-3px);

    background:rgba(255,255,255,.11);

    border-color:rgba(255,255,255,.42);
}


/* TRUST POINTS */

.pricing-final-points{
    display:flex;
    justify-content:center;

    flex-wrap:wrap;

    gap:24px;

    margin-top:30px;
    padding-top:26px;

    border-top:1px solid rgba(255,255,255,.12);

    color:rgba(255,255,255,.62);

    font-size:11px;
}


/* MOBILE */

@media(max-width:600px){

    .pricing-final-cta-section{
        padding:75px 0;
    }


    .pricing-final-cta-container{
        width:min(100% - 30px,1180px);
    }


    .pricing-final-cta-panel{
        padding:55px 24px;
        border-radius:18px;
    }


    .pricing-final-cta-panel h2{
        font-size:40px;
    }


    .pricing-final-buttons{
        flex-direction:column;
    }


    .pricing-final-primary,
    .pricing-final-secondary{
        width:100%;
    }


    .pricing-final-points{
        flex-direction:column;

        gap:10px;
    }

}












/* =========================================================
   COMPARE PLANS - EXPAND INDICATOR
========================================================= */

.plan-module-header{
    cursor:pointer;
}

.pricing-module-toggle{
    flex:0 0 42px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #cfe0f5;
    border-radius:50%;

    color:#2d74eb;
    background:#ffffff;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .3s ease;
}

.pricing-module-toggle svg{
    width:17px;
    height:17px;
    stroke-width:1.8;
}

.plan-module:hover .pricing-module-toggle{
    background:#edf5ff;
    border-color:#9fc3f3;
}

/* Arrow turns upward when module is expanded */
.plan-module.active .pricing-module-toggle{
    transform:rotate(180deg);
    background:#edf5ff;
    border-color:#9fc3f3;
}

/* =========================================================
   COMPARE PLAN EXPAND / COLLAPSE
========================================================= */

.plan-module-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .3s ease;
}

.plan-module.active .plan-module-content {
    opacity: 1;
}


/* Chevron */

.plan-module.active .pricing-module-toggle{
    transform:rotate(180deg);
    background:#edf5ff;
    border-color:#9fc3f3;
}


/* =========================================================
   COMPARE PLANS - FINAL EXPAND FIX
========================================================= */

.plan-module-content{
    display:none !important;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    opacity:1 !important;
}

.plan-module.active .plan-module-content{
    display:block !important;
}


/* Chevron */

.pricing-module-toggle{
    transition:
        transform .3s ease,
        background .25s ease,
        border-color .25s ease;
}

.plan-module.active .pricing-module-toggle{
    transform:rotate(180deg);
    background:#edf5ff;
    border-color:#9fc3f3;
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page{
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(66,136,245,.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f6faff 100%
        );
}


/* =========================================================
   MAIN SECTION
========================================================= */

.contact-section{
    position:relative;
    overflow:hidden;

    padding:105px 0 55px;
}

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


/* =========================================================
   PAGE HEADING
========================================================= */

.contact-heading{
    max-width:900px;
    margin:0 auto 62px;
    text-align:center;
}

.contact-eyebrow{
    display:block;
    margin-bottom:18px;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
}

.contact-heading h1{
    margin:0;

    color:#0b2144;

    font-size:clamp(46px,5vw,68px);
    line-height:1.05;

    font-weight:700;
    letter-spacing:-.045em;
}

.contact-heading h1 span{
    display:block;
    color:#2d74eb;
}

.contact-heading > p{
    max-width:720px;
    margin:24px auto 0;

    color:#6f7f96;

    font-size:16px;
    line-height:1.75;
}


/* =========================================================
   TRUST ROW
========================================================= */

.contact-trust{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:24px;

    margin-top:30px;
}

.contact-trust span{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#586b85;

    font-size:12px;
    font-weight:600;
}

.contact-trust svg{
    width:16px;
    height:16px;

    stroke:#2d74eb;
    stroke-width:2;
}


/* =========================================================
   MAIN GRID
========================================================= */

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);

    gap:30px;

    align-items:start;
}

.contact-left{
    display:flex;
    flex-direction:column;

    gap:22px;
}


/* =========================================================
   SHARED CARD
========================================================= */

.contact-info-card,
.contact-next-card,
.contact-form-card{
    border:1px solid #dfe8f3;
    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 14px 40px rgba(20,55,100,.06);
}


/* =========================================================
   LEFT CONTACT CARD
========================================================= */

.contact-info-card{
    padding:30px;
}

.contact-card-label{
    display:block;

    margin-bottom:12px;

    color:#2d74eb;

    font-size:10px;
    font-weight:700;
    letter-spacing:.15em;
}

.contact-info-card h2{
    margin:0;

    color:#0b2144;

    font-size:30px;
    line-height:1.15;

    font-weight:700;
    letter-spacing:-.035em;
}

.contact-card-intro{
    margin:14px 0 26px;

    color:#77869b;

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   CONTACT INFO ROWS
========================================================= */

.contact-info-row{
    position:relative;

    display:grid;
    grid-template-columns:42px minmax(0,1fr) 18px;

    align-items:center;
    gap:14px;

    min-height:70px;

    padding:12px 0;

    border-top:1px solid #edf1f6;

    color:inherit;
}

.contact-info-row:first-of-type{
    border-top:0;
}

.contact-info-icon{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    border-radius:11px;

    background:#edf5ff;

    color:#2d74eb;
}

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

    stroke-width:1.8;
}

.contact-info-row small,
.contact-info-row strong{
    display:block;
}

.contact-info-row small{
    margin-bottom:3px;

    color:#93a0b2;

    font-size:8px;
    font-weight:700;

    letter-spacing:.12em;
}

.contact-info-row strong{
    color:#173052;

    font-size:13px;
    font-weight:700;
    line-height:1.45;
}

.contact-row-arrow{
    width:16px;
    height:16px;

    color:#9aabc0;

    transition:
        transform .2s ease,
        color .2s ease;
}

a.contact-info-row:hover .contact-row-arrow{
    transform:translate(2px,-2px);
    color:#2d74eb;
}


/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

.contact-next-card{
    padding:28px 30px;
}

.contact-next-card h3{
    margin:0 0 24px;

    color:#0b2144;

    font-size:22px;
    line-height:1.35;

    font-weight:700;
    letter-spacing:-.025em;
}

.contact-next-step{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);

    gap:14px;

    padding:16px 0;

    border-top:1px solid #edf1f6;
}

.contact-next-step:first-of-type{
    border-top:0;
}

.contact-next-step > span{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:#edf5ff;

    color:#2d74eb;

    font-size:9px;
    font-weight:800;
}

.contact-next-step strong{
    display:block;

    color:#173052;

    font-size:13px;
    font-weight:700;
}

.contact-next-step p{
    margin:5px 0 0;

    color:#7d8ca0;

    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card{
    padding:34px 34px 48px;
}

.contact-form-heading{
    margin-bottom:30px;
}

.contact-form-heading h2{
    margin:0;

    color:#0b2144;

    font-size:32px;
    line-height:1.2;

    font-weight:700;
    letter-spacing:-.035em;
}

.contact-form-heading p{
    margin:12px 0 0;

    color:#78879b;

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   FORM GRID
========================================================= */

.contact-form{
    display:flex;
    flex-direction:column;

    gap:22px;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:16px;
}

.contact-field{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.contact-field label{
    color:#243a59;

    font-size:11px;
    font-weight:700;
}

.contact-field label span{
    margin-left:5px;

    color:#9aa6b7;

    font-size:9px;
    font-weight:500;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea{
    width:100%;

    border:1px solid #dce5f0;
    border-radius:10px;

    background:#fbfdff;

    color:#203550;

    outline:none;

    font-size:13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.contact-field input,
.contact-field select{
    height:48px;
    padding:0 14px;
}

.contact-field textarea{
    min-height:140px;

    padding:13px 14px;

    resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:#a5b0bf;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:#7fafee;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(45,116,235,.08);
}


/* =========================================================
   OPTION GROUPS
========================================================= */

.contact-options{
    margin:0;
    padding:0;

    border:0;
}

.contact-options legend{
    margin-bottom:12px;

    color:#243a59;

    font-size:11px;
    font-weight:700;
}

.contact-option-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:9px;
}

.contact-radio-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:9px;
}


/* =========================================================
   CUSTOM OPTION BUTTONS
========================================================= */

.contact-option-grid label,
.contact-radio-grid label{
    position:relative;

    cursor:pointer;
}

.contact-option-grid input,
.contact-radio-grid input{
    position:absolute;

    opacity:0;
    pointer-events:none;
}

.contact-option-grid label span,
.contact-radio-grid label span{
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:8px 10px;

    border:1px solid #dce5f0;
    border-radius:9px;

    background:#fbfdff;

    color:#63758d;

    font-size:10px;
    font-weight:600;

    text-align:center;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.contact-option-grid label:hover span,
.contact-radio-grid label:hover span{
    border-color:#adc9ee;
    background:#f5f9ff;
}

.contact-option-grid input:checked + span,
.contact-radio-grid input:checked + span{
    border-color:#77a8ec;

    background:#edf5ff;

    color:#2d74eb;

    box-shadow:
        inset 0 0 0 1px rgba(45,116,235,.06);
}


/* =========================================================
   MESSAGE
========================================================= */

.contact-message{
    margin-top:2px;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit{
    width:100%;
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    border:0;
    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #2d72dd,
            #4a91f5
        );

    color:#ffffff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 28px rgba(45,114,221,.22);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.contact-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 17px 36px rgba(45,114,221,.28);
}

.contact-submit svg{
    width:17px;
    height:17px;

    transition:transform .22s ease;
}

.contact-submit:hover svg{
    transform:translateX(3px);
}


/* =========================================================
   PRIVACY NOTE
========================================================= */

.contact-privacy{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:7px;

    margin:0;

    color:#8b99aa;

    font-size:10px;

    text-align:center;
}

.contact-privacy svg{
    width:14px;
    height:14px;

    stroke:#6f9edc;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:980px){

    .contact-section{
        padding:88px 0 100px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-left{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media(max-width:760px){

    .contact-heading h1{
        font-size:44px;
    }

    .contact-left{
        grid-template-columns:1fr;
    }

    .contact-option-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .contact-radio-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:580px){

    .contact-section{
        padding:72px 0 82px;
    }

    .contact-container{
        width:min(100% - 30px,1180px);
    }

    .contact-heading{
        margin-bottom:44px;
    }

    .contact-heading h1{
        font-size:38px;
    }

    .contact-heading > p{
        font-size:14px;
    }

    .contact-trust{
        flex-direction:column;
        gap:10px;
    }

    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .contact-info-card,
    .contact-next-card,
    .contact-form-card{
        padding:24px;
    }

    .contact-option-grid{
        grid-template-columns:1fr 1fr;
    }

}

/* =========================================================
   CONTACT — TRUST CARD
========================================================= */

.contact-trust-card{
    padding:22px 30px 18px;

    border:1px solid #dfe8f3;
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #0b2144 0%,
            #143b72 100%
        );

    box-shadow:
        0 14px 40px rgba(20,55,100,.08);
}

.contact-trust-card .contact-card-label{
    color:#72a9ff;
}

.contact-trust-card h3{
    margin:0 0 20px;

    color:#ffffff;

    font-size:21px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:-.025em;
}

.contact-trust-points{
    display:flex;
    flex-direction:column;
}

.contact-trust-points > div{
    display:grid;
    grid-template-columns:38px 1fr;
    align-items:center;
    gap:12px;

    padding:8px 0;

    border-top:1px solid rgba(255,255,255,.10);
}

.contact-trust-points > div:first-child{
    border-top:0;
}

.contact-trust-points svg{
    width:18px;
    height:18px;

    color:#72a9ff;
    stroke-width:1.8;
}

.contact-trust-points span{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.contact-trust-points strong{
    color:#ffffff;

    font-size:12px;
    font-weight:700;
}

.contact-trust-points small{
    color:#a9bdd8;

    font-size:10px;
    line-height:1.4;
}


/* =========================================================
   CONTACT — COMPACT TRUST POINTS
========================================================= */

.contact-trust-points{
    display:flex;
    flex-direction:column;
    width:100%;
}

.contact-trust-points > div{
    display:block;

    width:100%;

    padding:10px 0;

    border-top:1px solid rgba(255,255,255,.10);
}

.contact-trust-points > div:first-child{
    border-top:0;
}

.contact-trust-points strong{
    display:block;

    width:100%;

    color:#ffffff;

    font-size:12px;
    font-weight:600;
    line-height:1.4;

    white-space:nowrap;
}


/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page{
    background:#ffffff;
}

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


/* =========================================================
   SHARED EYEBROW / HEADING
========================================================= */

.about-eyebrow{
    display:block;
    margin-bottom:16px;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
}

.about-section-heading{
    max-width:820px;
    margin:0 auto 52px;
    text-align:center;
}

.about-section-heading h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(38px,4vw,54px);
    line-height:1.08;

    font-weight:700;
    letter-spacing:-.04em;
}

.about-section-heading h2 span{
    display:block;
    color:#2d74eb;
}

.about-section-heading p{
    max-width:680px;
    margin:18px auto 0;

    color:#71819a;

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   HERO
========================================================= */

.about-hero{
    position:relative;
    overflow:hidden;

    padding:105px 0 115px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(69,135,244,.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f6faff 100%
        );
}

.about-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);

    gap:70px;
    align-items:center;
}

.about-hero-content{
    max-width:650px;
}

.about-hero-content h1{
    margin:0;

    color:#0b2144;

    font-size:clamp(50px,5vw,72px);
    line-height:1.02;

    font-weight:700;
    letter-spacing:-.05em;
}

.about-hero-content h1 span{
    display:block;
    color:#2d74eb;
}

.about-hero-lead{
    max-width:600px;
    margin:24px 0 0;

    color:#324966;

    font-size:18px;
    line-height:1.6;
    font-weight:500;
}

.about-hero-copy{
    max-width:600px;
    margin:15px 0 0;

    color:#75849a;

    font-size:14px;
    line-height:1.75;
}

.about-hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:20px;

    margin-top:27px;
}

.about-hero-trust span{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#5d7089;

    font-size:11px;
    font-weight:600;
}

.about-hero-trust svg{
    width:16px;
    height:16px;

    color:#2d74eb;
    stroke-width:1.9;
}

.about-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:31px;
}


/* =========================================================
   HERO PLATFORM CARD
========================================================= */

.about-hero-visual{
    display:flex;
    justify-content:flex-end;
}

.about-platform-card{
    width:100%;
    max-width:510px;

    padding:34px;

    border:1px solid #dbe6f3;
    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 24px 60px rgba(20,55,100,.10);
}

.about-platform-label{
    display:block;

    color:#2d74eb;

    font-size:9px;
    font-weight:700;
    letter-spacing:.15em;
}

.about-platform-card h2{
    margin:14px 0 26px;

    color:#0b2144;

    font-size:32px;
    line-height:1.12;

    font-weight:700;
    letter-spacing:-.035em;
}

.about-platform-card h2 span{
    display:block;
    color:#2d74eb;
}

.about-platform-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;
}

.about-platform-grid > div{
    min-height:118px;

    padding:20px;

    border:1px solid #e2e9f2;
    border-radius:14px;

    background:#f9fbfe;
}

.about-platform-grid strong{
    display:block;

    color:#153252;

    font-size:14px;
    font-weight:700;
}

.about-platform-grid small{
    display:block;
    margin-top:8px;

    color:#7f8da0;

    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   OUR STORY
========================================================= */

.about-story-section{
    padding:110px 0 115px;
    background:#ffffff;
}

.about-story-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;
}

.about-story-card{
    position:relative;

    min-height:260px;

    padding:26px;

    border:1px solid #e0e8f3;
    border-radius:17px;

    background:#ffffff;

    box-shadow:
        0 12px 30px rgba(20,55,100,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.about-story-card:hover{
    transform:translateY(-4px);
    border-color:#c8daf3;

    box-shadow:
        0 18px 38px rgba(20,55,100,.08);
}

.about-story-card > span{
    position:absolute;
    top:25px;
    right:24px;

    color:#a7b7ca;

    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}

.about-story-icon{
    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    border-radius:12px;

    background:#edf5ff;
    color:#2d74eb;
}

.about-story-icon svg{
    width:20px;
    height:20px;
    stroke-width:1.8;
}

.about-story-card h3{
    margin:24px 0 9px;

    color:#0b2144;

    font-size:17px;
    line-height:1.35;
    font-weight:700;
}

.about-story-card p{
    margin:0;

    color:#78879b;

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   PURPOSE
========================================================= */

.about-purpose-section{
    padding:110px 0 120px;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #f3f8ff 100%
        );
}

.about-purpose-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px;
}

.about-purpose-card{
    min-height:270px;

    padding:30px;

    border:1px solid #dfe8f3;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 14px 34px rgba(20,55,100,.05);
}

.about-purpose-card > span{
    color:#2d74eb;

    font-size:9px;
    font-weight:700;
    letter-spacing:.15em;
}

.about-purpose-card h3{
    margin:18px 0 11px;

    color:#0b2144;

    font-size:22px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:-.025em;
}

.about-purpose-card p{
    margin:0;

    color:#7b899d;

    font-size:12px;
    line-height:1.7;
}

.about-purpose-highlight{
    background:
        linear-gradient(
            145deg,
            #0b2144 0%,
            #153e76 100%
        );

    border-color:transparent;
}

.about-purpose-highlight > span{
    color:#72a9ff;
}

.about-purpose-highlight h3{
    color:#ffffff;
}

.about-purpose-highlight p{
    color:#b1c2d8;
}


/* =========================================================
   DELIVERY MODEL
========================================================= */

.about-delivery-section{
    padding:115px 0;
    background:#ffffff;
}

.about-delivery-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:22px;
}

.about-delivery-card{
    padding:34px;

    border:1px solid #dfe8f3;
    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 14px 36px rgba(20,55,100,.06);
}

.about-delivery-icon{
    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    margin-bottom:20px;

    border-radius:12px;

    background:#edf5ff;
    color:#2d74eb;
}

.about-delivery-icon svg{
    width:20px;
    height:20px;
    stroke-width:1.8;
}

.about-card-label{
    display:block;

    color:#2d74eb;

    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
}

.about-delivery-card h3{
    margin:12px 0 20px;

    color:#0b2144;

    font-size:24px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:-.03em;
}

.about-delivery-card ul{
    margin:0;
    padding:0;

    list-style:none;
}

.about-delivery-card li{
    position:relative;

    padding:11px 0 11px 22px;

    border-top:1px solid #edf1f6;

    color:#697a91;

    font-size:12px;
    line-height:1.5;
}

.about-delivery-card li:first-child{
    border-top:0;
}

.about-delivery-card li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:11px;

    color:#2d74eb;

    font-weight:800;
}

.about-delivery-dark{
    background:
        linear-gradient(
            145deg,
            #0b2144 0%,
            #153e76 100%
        );

    border-color:transparent;
}

.about-delivery-dark .about-delivery-icon{
    background:rgba(255,255,255,.08);
    color:#72a9ff;
}

.about-delivery-dark .about-card-label{
    color:#72a9ff;
}

.about-delivery-dark h3{
    color:#ffffff;
}

.about-delivery-dark li{
    border-top-color:rgba(255,255,255,.10);
    color:#b5c6da;
}

.about-delivery-dark li::before{
    color:#72a9ff;
}


/* =========================================================
   WHAT WE BELIEVE
========================================================= */

.about-belief-section{
    padding:110px 0 120px;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #f2f7fd 100%
        );
}

.about-belief-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;
}

.about-belief-grid article{
    min-height:235px;

    padding:28px;

    border:1px solid #dfe8f3;
    border-radius:17px;

    background:#ffffff;
}

.about-belief-grid svg{
    width:22px;
    height:22px;

    margin-bottom:22px;

    color:#2d74eb;
    stroke-width:1.8;
}

.about-belief-grid h3{
    margin:0 0 10px;

    color:#0b2144;

    font-size:17px;
    line-height:1.35;
    font-weight:700;
}

.about-belief-grid p{
    margin:0;

    color:#79889c;

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   INDUSTRIES / WHERE WE OPERATE
========================================================= */

.about-industries-section{
    padding:115px 0;

    background:#ffffff;
}

.about-industries-layout{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);

    gap:70px;

    align-items:start;
}

.about-industries-layout h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(40px,4vw,56px);
    line-height:1.06;

    font-weight:700;
    letter-spacing:-.04em;
}

.about-industries-layout h2 span{
    display:block;
    color:#2d74eb;
}

.about-industries-copy > p{
    margin:0;

    color:#71819a;

    font-size:14px;
    line-height:1.8;
}

.about-industry-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:27px;
}

.about-industry-tags span{
    display:inline-flex;

    padding:10px 14px;

    border:1px solid #dce6f3;
    border-radius:999px;

    background:#f8fbff;

    color:#506580;

    font-size:11px;
    font-weight:600;
}


/* =========================================================
   CTA
========================================================= */

.about-cta-section{
    padding:110px 0;

    background:
        linear-gradient(
            180deg,
            #eef5fd 0%,
            #f5f9fe 100%
        );
}

.about-cta{
    max-width:920px;
    margin:0 auto;

    text-align:center;
}

.about-cta h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(42px,4vw,58px);
    line-height:1.07;

    font-weight:700;
    letter-spacing:-.04em;
}

.about-cta h2 span{
    display:block;
    color:#2d74eb;
}

.about-cta p{
    max-width:680px;

    margin:20px auto 0;

    color:#71819a;

    font-size:14px;
    line-height:1.75;
}

.about-cta-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:980px){

    .about-hero-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-hero-content{
        max-width:760px;
    }

    .about-hero-visual{
        justify-content:flex-start;
    }

    .about-platform-card{
        max-width:680px;
    }

    .about-story-grid,
    .about-belief-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-purpose-grid{
        grid-template-columns:1fr;
    }

    .about-industries-layout{
        grid-template-columns:1fr;
        gap:28px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media(max-width:760px){

    .about-hero{
        padding:85px 0 95px;
    }

    .about-story-section,
    .about-purpose-section,
    .about-delivery-section,
    .about-belief-section,
    .about-industries-section,
    .about-cta-section{
        padding:90px 0;
    }

    .about-delivery-grid{
        grid-template-columns:1fr;
    }

    .about-platform-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:580px){

    .about-container{
        width:min(100% - 30px,1180px);
    }

    .about-hero-content h1{
        font-size:42px;
    }

    .about-hero-lead{
        font-size:16px;
    }

    .about-story-grid,
    .about-belief-grid{
        grid-template-columns:1fr;
    }

    .about-platform-grid{
        grid-template-columns:1fr;
    }

    .about-platform-card,
    .about-story-card,
    .about-purpose-card,
    .about-delivery-card,
    .about-belief-grid article{
        padding:24px;
    }

    .about-hero-actions,
    .about-cta-actions{
        flex-direction:column;
    }

    .about-hero-actions .btn,
    .about-cta-actions .btn{
        width:100%;
        justify-content:center;
    }

}

/* =========================================================
   ABOUT — REVEAL ANIMATION
========================================================= */

.about-reveal{
    opacity:0;
    transform:translateY(22px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.about-reveal.about-reveal-visible{
    opacity:1;
    transform:translateY(0);
}


/* Accessibility */
@media (prefers-reduced-motion:reduce){

    .about-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}

/* =========================================================
   MODULES PAGE
========================================================= */

.modules-page{
    background:#ffffff;
}

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

.modules-eyebrow{
    display:block;

    color:#2d74eb;

    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
}


/* =========================================================
   HERO
========================================================= */

.modules-hero{
    padding:105px 0 88px;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(45,116,235,.10),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f5f9ff 100%
        );
}

.modules-hero-heading{
    max-width:900px;
    margin:0 auto;

    text-align:center;
}

.modules-hero-heading h1{
    margin:18px 0 0;

    color:#0b2144;

    font-size:clamp(48px,5vw,68px);
    line-height:1.04;

    font-weight:700;
    letter-spacing:-.045em;
}

.modules-hero-heading h1 span{
    display:block;
    color:#2d74eb;
}

.modules-hero-heading > p{
    max-width:720px;
    margin:24px auto 0;

    color:#71819a;

    font-size:15px;
    line-height:1.75;
}

.modules-hero-points{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:24px;

    margin-top:28px;
}

.modules-hero-points span{
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:#5e7089;

    font-size:11px;
    font-weight:600;
}

.modules-hero-points svg{
    width:15px;
    height:15px;

    color:#2d74eb;
    stroke-width:2;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.modules-nav-section{
    position:sticky;
    top:88px;
    z-index:20;

    padding:18px 0;

    border-top:1px solid #edf1f6;
    border-bottom:1px solid #e7edf5;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(14px);
}

.modules-category-nav{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    overflow-x:auto;

    scrollbar-width:none;
}

.modules-category-nav::-webkit-scrollbar{
    display:none;
}

.modules-category-nav a{
    flex:0 0 auto;

    padding:10px 14px;

    border:1px solid transparent;
    border-radius:999px;

    color:#65758b;

    font-size:12px;
    font-weight:600;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.modules-category-nav a:hover{
    color:#2d74eb;

    background:#f3f8ff;
    border-color:#dbe8f7;
}


/* =========================================================
   MODULE GROUP
========================================================= */

.modules-group{
    padding:105px 0 115px;

    background:#ffffff;
}

.modules-group-alt{
    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #f3f8fe 100%
        );
}

.modules-group-heading{
    max-width:760px;
    margin-bottom:48px;
}

.modules-group-heading > div{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:14px;
}

.modules-group-number{
    display:grid;
    place-items:center;

    width:32px;
    height:32px;

    border:1px solid #d7e5f6;
    border-radius:50%;

    background:#f3f8ff;

    color:#2d74eb;

    font-size:9px;
    font-weight:800;
}

.modules-group-heading h2{
    margin:0;

    color:#0b2144;

    font-size:clamp(38px,4vw,54px);
    line-height:1.07;

    font-weight:700;
    letter-spacing:-.04em;
}

.modules-group-heading h2 span{
    display:block;
    color:#2d74eb;
}

.modules-group-heading > p{
    max-width:650px;

    margin:17px 0 0;

    color:#75849a;

    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   MODULE GRID
========================================================= */

.modules-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;
}


/* =========================================================
   MODULE CARD
========================================================= */

.module-card{
    position:relative;

    min-height:250px;

    display:flex;
    flex-direction:column;

    padding:22px;

    border:1px solid #dfe8f3;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 12px 34px rgba(20,55,100,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.module-card:hover{
    transform:translateY(-4px);

    border-color:#bfd6f4;

    box-shadow:
        0 18px 42px rgba(20,55,100,.08);
}

.module-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:18px;
}

.module-icon{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    border-radius:12px;

    background:#edf5ff;

    color:#2d74eb;
}

.module-icon svg{
    width:20px;
    height:20px;

    stroke-width:1.8;
}

.module-code{
    color:#aab8c9;

    font-size:9px;
    font-weight:700;

    letter-spacing:.14em;
}

.module-card h3{
    margin:16px 0 8px;

    color:#0b2144;

    font-size:18px;
    line-height:1.35;

    font-weight:700;
    letter-spacing:-.02em;
}

.module-card > p{
    margin:0;

    color:#77869b;

    font-size:12px;
    line-height:1.65;
}

.module-card ul{
    margin:20px 0 0;
    padding:0;

    list-style:none;
}

.module-card li{
    position:relative;

    padding:6px 0 6px 18px;

    color:#62758d;

    font-size:11px;
    line-height:1.45;
}

.module-card li::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#2d74eb;
}

.module-card > a{
    display:inline-flex;
    align-items:center;

    gap:7px;

    margin-top:auto;
    padding-top:16px;

    color:#1f65d6;

    font-size:11px;
    font-weight:700;
}

.module-card > a svg{
    width:14px;
    height:14px;

    transition:transform .2s ease;
}

.module-card > a:hover svg{
    transform:translateX(3px);
}


/* =========================================================
   CUSTOM CTA
========================================================= */

.modules-custom-section{
    padding:105px 0;

    background:#ffffff;
}

.modules-custom-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;

    gap:40px;
    align-items:center;

    padding:46px;

    border:1px solid #dbe6f3;
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #f8fbff 0%,
            #eef5ff 100%
        );

    box-shadow:
        0 18px 44px rgba(20,55,100,.06);
}

.modules-custom-card h2{
    margin:15px 0 0;

    color:#0b2144;

    font-size:clamp(36px,3.5vw,48px);
    line-height:1.08;

    font-weight:700;
    letter-spacing:-.04em;
}

.modules-custom-card h2 span{
    color:#2d74eb;
}

.modules-custom-card p{
    max-width:600px;

    margin:16px 0 0;

    color:#71819a;

    font-size:13px;
    line-height:1.7;
}

.modules-custom-actions{
    display:flex;
    flex-direction:column;

    gap:10px;

    min-width:190px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .modules-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


@media(max-width:900px){

    .modules-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .modules-custom-card{
        grid-template-columns:1fr;
    }

    .modules-custom-actions{
        flex-direction:row;
        min-width:0;
    }

}


@media(max-width:680px){

    .modules-hero{
        padding:80px 0 70px;
    }

    .modules-group{
        padding:82px 0 90px;
    }

    .modules-grid{
        grid-template-columns:1fr;
    }

    .modules-category-nav{
        justify-content:flex-start;
    }

    .modules-custom-actions{
        flex-direction:column;
    }

    .modules-custom-card{
        padding:30px;
    }

}


@media(max-width:580px){

    .modules-container{
        width:min(100% - 30px,1180px);
    }

    .modules-hero-heading h1{
        font-size:40px;
    }

    .module-card{
        min-height:auto;
    }

}


html{
    scroll-behavior:smooth;
}

.modules-group{
    scroll-margin-top:150px;
}

.primary-nav .nav-dropdown.active > .nav-dropdown-toggle{
    color:#2d74eb;
}

.primary-nav .nav-dropdown.active > .nav-dropdown-toggle::after{
    color:#2d74eb;
}

.nav-podcast {
  width: 43px;
  height: 43px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  color: #2878e8;
  background: #f1f6ff;

  border: 1px solid #d9e7fb;
  border-radius: 10px;

  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.nav-podcast svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.nav-podcast:hover {
  color: #ffffff;
  background: #2878e8;
  border-color: #2878e8;

  transform: translateY(-1px);

  box-shadow:
    0 8px 20px rgba(40, 120, 232, .18);
}

/* =========================================================
   SOLUTIONS PAGE
========================================================= */

.solutions-page{
  background:#ffffff;
}

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

.solutions-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.solutions-section-heading{
  max-width:820px;
  margin:0 auto 50px;
  text-align:center;
}

.solutions-section-heading h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.solutions-section-heading h2 span{
  display:block;
  color:#2d74eb;
}

.solutions-section-heading p{
  max-width:650px;
  margin:18px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.72;
}


/* =========================================================
   HERO
========================================================= */

.solutions-hero{
  padding:105px 0 95px;

  background:
    radial-gradient(
      circle at 83% 13%,
      rgba(45,116,235,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f5f9ff 100%
    );
}

.solutions-hero-content{
  max-width:920px;
  margin:0 auto;

  text-align:center;
}

.solutions-hero-content h1{
  margin:0;

  color:#0b2144;

  font-size:clamp(50px,5vw,70px);
  line-height:1.03;

  font-weight:700;
  letter-spacing:-.048em;
}

.solutions-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.solutions-hero-content > p{
  max-width:760px;
  margin:24px auto 0;

  color:#71819a;

  font-size:15px;
  line-height:1.75;
}

.solutions-hero-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:28px;
}

.solutions-hero-tags span{
  padding:8px 13px;

  border:1px solid #dce8f7;
  border-radius:999px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:10px;
  font-weight:600;
}


/* =========================================================
   CHALLENGES
========================================================= */

.solutions-challenges{
  padding:110px 0 120px;

  background:#ffffff;
}

.solutions-challenge-grid{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:18px;
}

.solution-challenge-card{
  min-height:305px;

  display:flex;
  flex-direction:column;

  padding:26px;

  border:1px solid #dfe8f3;
  border-radius:18px;

  background:#ffffff;

  box-shadow:
    0 12px 34px rgba(20,55,100,.05);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.solution-challenge-card:hover{
  transform:translateY(-4px);

  border-color:#bdd5f5;

  box-shadow:
    0 18px 42px rgba(20,55,100,.08);
}

.solution-challenge-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.solution-challenge-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#edf5ff;
  color:#2d74eb;
}

.solution-challenge-icon svg{
  width:20px;
  height:20px;

  stroke-width:1.8;
}

.solution-challenge-top > span{
  color:#aab8c9;

  font-size:9px;
  font-weight:700;

  letter-spacing:.13em;
}

.solution-challenge-card h3{
  margin:23px 0 10px;

  color:#0b2144;

  font-size:19px;
  line-height:1.32;

  font-weight:700;
  letter-spacing:-.025em;
}

.solution-challenge-card > p{
  margin:0;

  color:#74849a;

  font-size:12px;
  line-height:1.68;
}

.solution-challenge-tags{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:auto;
  padding-top:22px;
}

.solution-challenge-tags span{
  padding:6px 9px;

  border-radius:7px;

  background:#f2f7fd;

  color:#5c708a;

  font-size:9px;
  font-weight:600;
}


/* =========================================================
   TRANSACTION FLOW
========================================================= */

.solutions-transaction{
  padding:110px 0;

  background:
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #f2f7fd 100%
    );
}

.solutions-transaction-layout{
  display:grid;

  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);

  gap:55px;

  align-items:center;
}

.solutions-transaction-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,52px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.solutions-transaction-content h2 span{
  display:block;
  color:#2d74eb;
}

.solutions-transaction-content p{
  margin:19px 0 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}

.solutions-transaction-content .btn{
  margin-top:28px;
}

.transaction-flow{
  display:flex;
  align-items:center;

  gap:8px;

  padding:24px;

  overflow-x:auto;

  border:1px solid #dce7f5;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 18px 46px rgba(20,55,100,.07);

  scrollbar-width:none;
}

.transaction-flow::-webkit-scrollbar{
  display:none;
}

.transaction-step{
  flex:0 0 auto;

  width:78px;
  min-height:112px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:12px;

  border:1px solid #e2eaf4;
  border-radius:13px;

  background:#f9fbfe;

  text-align:center;
}

.transaction-step > span{
  margin-bottom:7px;

  color:#a6b5c7;

  font-size:8px;
  font-weight:700;
}

.transaction-step svg{
  width:19px;
  height:19px;

  margin-bottom:8px;

  color:#2d74eb;

  stroke-width:1.8;
}

.transaction-step strong{
  color:#0b2144;

  font-size:10px;
  font-weight:700;
}

.transaction-step-highlight{
  border-color:#b9d3f5;
  background:#edf5ff;
}

.transaction-arrow{
  flex:0 0 auto;

  width:15px;
  height:15px;

  color:#9fb0c6;
}


/* =========================================================
   SOLUTION MODELS
========================================================= */

.solutions-models{
  padding:110px 0 120px;
  background:#ffffff;
}

.solutions-model-grid{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:20px;
}

.solution-model-card{
  position:relative;

  min-height:420px;

  display:flex;
  flex-direction:column;

  padding:30px;

  border:1px solid #dfe8f3;
  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 14px 36px rgba(20,55,100,.05);
}

.solution-model-featured{
  background:
    linear-gradient(
      145deg,
      #0b2144 0%,
      #173e73 100%
    );

  border-color:transparent;
}

.solution-model-number{
  position:absolute;
  top:26px;
  right:26px;

  color:#a9b8ca;

  font-size:9px;
  font-weight:700;

  letter-spacing:.13em;
}

.solution-model-featured
.solution-model-number{
  color:#6e91bd;
}

.solution-model-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:#edf5ff;

  color:#2d74eb;
}

.solution-model-featured
.solution-model-icon{
  background:rgba(255,255,255,.08);
  color:#72a9ff;
}

.solution-model-icon svg{
  width:21px;
  height:21px;

  stroke-width:1.8;
}

.solution-model-card h3{
  margin:24px 0 9px;

  color:#0b2144;

  font-size:21px;
  line-height:1.3;

  font-weight:700;
}

.solution-model-featured h3{
  color:#ffffff;
}

.solution-model-card > p{
  margin:0;

  color:#77869a;

  font-size:12px;
  line-height:1.68;
}

.solution-model-featured > p{
  color:#b3c4da;
}

.solution-model-flow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:24px;
}

.solution-model-flow span{
  padding:7px 9px;

  border-radius:7px;

  background:#f1f6fc;

  color:#536a85;

  font-size:9px;
  font-weight:600;
}

.solution-model-flow svg{
  width:12px;
  height:12px;

  color:#9cafc6;
}

.solution-model-featured
.solution-model-flow span{
  background:rgba(255,255,255,.08);
  color:#ffffff;
}

.solution-model-featured
.solution-model-flow svg{
  color:#7fa1ca;
}

.solution-model-card ul{
  margin:23px 0 0;
  padding:0;

  list-style:none;
}

.solution-model-card li{
  position:relative;

  padding:7px 0 7px 20px;

  color:#60748c;

  font-size:11px;
  line-height:1.45;
}

.solution-model-card li::before{
  content:"✓";

  position:absolute;
  left:0;

  color:#2d74eb;

  font-weight:800;
}

.solution-model-featured li{
  color:#c0cee0;
}

.solution-model-featured li::before{
  color:#72a9ff;
}


/* =========================================================
   ERP ARCHITECTURE
========================================================= */

.solutions-architecture{
  padding:115px 0;

  background:
    linear-gradient(
      145deg,
      #091d3c 0%,
      #123765 100%
    );
}

.solutions-architecture-layout{
  display:grid;

  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);

  gap:70px;
  align-items:center;
}

.solutions-architecture
.solutions-eyebrow{
  color:#72a9ff;
}

.solutions-architecture-content h2{
  margin:0;

  color:#ffffff;

  font-size:clamp(40px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.solutions-architecture-content h2 span{
  display:block;
  color:#72a9ff;
}

.solutions-architecture-content p{
  margin:20px 0 0;

  color:#aebed3;

  font-size:14px;
  line-height:1.75;
}


/* ERP MAP */

.erp-map{
  position:relative;

  min-height:460px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(78,143,241,.14),
      transparent 40%
    ),
    rgba(255,255,255,.025);

  overflow:hidden;
}

.erp-connections{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:0;
}

.erp-connections line{
  stroke:rgba(114,169,255,.30);
  stroke-width:1.4;
}

.erp-node{
  z-index:2;
}

.erp-node-main{
  z-index:3;
}


.erp-node{
  position:absolute;

  display:flex;
  align-items:center;

  gap:7px;

 min-width:92px;
  justify-content:center;
  padding:12px 16px;


  padding:11px 14px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;

  background:rgba(255,255,255,.06);

  color:#d5e1f0;

  font-size:10px;
  font-weight:600;

  backdrop-filter:blur(8px);
}

.erp-node svg{
  width:16px;
  height:16px;

  color:#72a9ff;
}

.erp-node-main{
  left:50%;
  top:50%;

  width:145px;
  height:80px;

  justify-content:center;

  transform:translate(-50%,-50%);

  background:#2d74eb;
  border-color:#4687ef;

  color:#ffffff;

  font-size:13px;

  box-shadow:
    0 15px 40px rgba(45,116,235,.25);
}

.erp-node-main svg{
  color:#ffffff;
}

.erp-node-sales{
  left:8%;
  top:13%;
}

.erp-node-purchase{
  right:8%;
  top:12%;
}

.erp-node-finance{
  left:10%;
  bottom:15%;
}

.erp-node-warehouse{
    right: 5%;
    top: 43%;
}

.erp-node-crm{
  left:9%;
  top:46%;
}

.erp-node-bi{
 right: 8%;
    bottom: 8%;
    transform: translateY(-50%);
}

.erp-node-production {
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
}

/* =========================================================
   GROWTH STAGES
========================================================= */

.solutions-growth{
  padding:110px 0 120px;

  background:#ffffff;
}

.solutions-growth-flow{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  align-items:center;

  gap:16px;
}

.solutions-growth-stage{
  min-height:320px;

  padding:28px;

  border:1px solid #dfe8f3;
  border-radius:19px;

  background:#ffffff;

  box-shadow:
    0 12px 34px rgba(20,55,100,.05);
}

.growth-stage-number{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  margin-bottom:22px;

  border-radius:50%;

  background:#edf5ff;

  color:#2d74eb;

  font-size:9px;
  font-weight:800;
}

.growth-stage-label{
  color:#2d74eb;

  font-size:8px;
  font-weight:700;

  letter-spacing:.15em;
}

.solutions-growth-stage h3{
  margin:9px 0 8px;

  color:#0b2144;

  font-size:20px;
  font-weight:700;
}

.solutions-growth-stage > p{
  margin:0;

  color:#78879a;

  font-size:12px;
  line-height:1.6;
}

.growth-tags{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:22px;
}

.growth-tags span{
  padding:7px 9px;

  border-radius:7px;

  background:#f2f7fd;

  color:#596d86;

  font-size:9px;
  font-weight:600;
}

.growth-arrow svg{
  width:21px;
  height:21px;

  color:#9fb1c7;
}


/* =========================================================
   INDUSTRY CONFIGURATION
========================================================= */

.solutions-industries{
  padding:110px 0;

  background:
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #f2f7fd 100%
    );
}

.solutions-industries-layout{
  display:grid;

  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);

  gap:65px;

  align-items:center;
}

.solutions-industries-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,52px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.solutions-industries-content h2 span{
  display:block;
  color:#2d74eb;
}

.solutions-industries-content p{
  margin:20px 0 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}

.solutions-industry-cloud{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  padding:30px;

  border:1px solid #dce7f5;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 18px 46px rgba(20,55,100,.06);
}

.solutions-industry-cloud span{
  padding:12px 15px;

  border:1px solid #dce7f5;
  border-radius:999px;

  background:#f8fbff;

  color:#4f6480;

  font-size:11px;
  font-weight:600;
}


/* =========================================================
   SOLUTION FINDER
========================================================= */

.solution-finder{
  padding:110px 0;

  background:#ffffff;
}

.solution-finder-card{
  display:grid;

  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);

  gap:55px;

  padding:45px;

  border:1px solid #dbe6f3;
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #f8fbff 0%,
      #eef5ff 100%
    );

  box-shadow:
    0 18px 44px rgba(20,55,100,.06);
}

.solution-finder-intro h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(36px,3.5vw,48px);
  line-height:1.08;

  font-weight:700;
  letter-spacing:-.04em;
}

.solution-finder-intro h2 span{
  display:block;
  color:#2d74eb;
}

.solution-finder-intro p{
  margin:17px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.7;
}

.solution-finder-questions{
  display:flex;
  flex-direction:column;

  gap:22px;
}

.solution-finder-group strong{
  display:block;

  margin-bottom:10px;

  color:#0b2144;

  font-size:11px;
  font-weight:700;
}

.solution-finder-group > div{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

.solution-finder-group span{
  padding:9px 12px;

  border:1px solid #d7e4f3;
  border-radius:8px;

  background:#ffffff;

  color:#60728a;

  font-size:10px;
  font-weight:600;
}

.solution-finder-button{
  align-self:flex-start;

  display:inline-flex;
  align-items:center;

  gap:8px;

  margin-top:3px;
}

.solution-finder-button svg{
  width:15px;
  height:15px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.solutions-final{
  padding:110px 0;

  background:
    linear-gradient(
      180deg,
      #eef5fd 0%,
      #f6f9fe 100%
    );
}

.solutions-final-content{
  max-width:900px;
  margin:0 auto;

  text-align:center;
}

.solutions-final-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(42px,4vw,58px);
  line-height:1.06;

  font-weight:700;
  letter-spacing:-.04em;
}

.solutions-final-content h2 span{
  display:block;
  color:#2d74eb;
}

.solutions-final-content p{
  max-width:670px;
  margin:19px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}

.solutions-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:11px;

  margin-top:29px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .solutions-challenge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .solutions-transaction-layout,
  .solutions-architecture-layout,
  .solutions-industries-layout,
  .solution-finder-card{
    grid-template-columns:1fr;
  }

  .solutions-model-grid{
    grid-template-columns:1fr;
  }

  .solutions-growth-flow{
    grid-template-columns:1fr;
  }

  .growth-arrow{
    display:none;
  }

}


@media(max-width:700px){

  .solutions-container{
    width:min(100% - 30px,1180px);
  }

  .solutions-hero{
    padding:80px 0 70px;
  }

  .solutions-hero-content h1{
    font-size:42px;
  }

  .solutions-challenges,
  .solutions-transaction,
  .solutions-models,
  .solutions-architecture,
  .solutions-growth,
  .solutions-industries,
  .solution-finder,
  .solutions-final{
    padding:82px 0;
  }

  .solutions-challenge-grid{
    grid-template-columns:1fr;
  }

  .solution-challenge-card{
    min-height:auto;
  }

  .erp-map{
    min-height:420px;
  }

  .solution-finder-card{
    padding:30px;
  }

}


@media(max-width:520px){

  .solutions-hero-tags{
    gap:6px;
  }

  .transaction-flow{
    padding:18px;
  }

  .solutions-industry-cloud{
    padding:22px;
  }

  .solutions-final-actions{
    flex-direction:column;
  }

  .solutions-final-actions .btn{
    width:100%;
    justify-content:center;
  }

}

/* =========================================================
   RESOURCES PAGE
========================================================= */

.resources-page{
  background:#ffffff;
}

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

.resources-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.resources-section-heading{
  max-width:820px;
  margin:0 auto 50px;

  text-align:center;
}

.resources-section-heading h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.resources-section-heading h2 span{
  display:block;
  color:#2d74eb;
}

.resources-section-heading p{
  max-width:650px;
  margin:18px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.72;
}


/* =========================================================
   HERO
========================================================= */

.resources-hero{
  padding:105px 0 95px;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(45,116,235,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f5f9ff 100%
    );
}

.resources-hero-content{
  max-width:900px;
  margin:0 auto;

  text-align:center;
}

.resources-hero-content h1{
  margin:0;

  color:#0b2144;

  font-size:clamp(50px,5vw,68px);
  line-height:1.04;

  font-weight:700;
  letter-spacing:-.045em;
}

.resources-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.resources-hero-content > p{
  max-width:720px;
  margin:24px auto 0;

  color:#71819a;

  font-size:15px;
  line-height:1.75;
}

.resources-hero-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:30px;
}

.resources-hero-links a{
  display:inline-flex;
  align-items:center;

  gap:8px;

  padding:10px 14px;

  border:1px solid #dce7f5;
  border-radius:999px;

  background:#ffffff;

  color:#516985;

  font-size:10px;
  font-weight:600;

  text-decoration:none;

  transition:.2s ease;
}

.resources-hero-links a svg{
  width:15px;
  height:15px;

  color:#2d74eb;
}

.resources-hero-links a:hover{
  color:#2d74eb;
  border-color:#bfd5f4;
  background:#edf5ff;
}


/* =========================================================
   FAQ
========================================================= */

.resources-faq{
  padding:110px 0 120px;

  background:#ffffff;

  scroll-margin-top:110px;
}

.resources-faq-layout{
  display:grid;

  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);

  gap:48px;

  align-items:start;
}

.resources-faq-intro{
  position:sticky;
  top:120px;

  padding:30px;

  border:1px solid #dce7f5;
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #f8fbff 0%,
      #eef5ff 100%
    );

  box-shadow:
    0 14px 36px rgba(20,55,100,.05);
}

.resources-faq-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:#eaf3ff;

  color:#2d74eb;
}

.resources-faq-icon svg{
  width:21px;
  height:21px;
}

.resources-faq-intro h3{
  margin:22px 0 9px;

  color:#0b2144;

  font-size:21px;
  line-height:1.3;

  font-weight:700;
}

.resources-faq-intro p{
  margin:0;

  color:#71819a;

  font-size:12px;
  line-height:1.7;
}

.resources-faq-intro .btn{
  margin-top:24px;
}


/* FAQ LIST */

.resources-faq-list{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.resource-faq-item{
  overflow:hidden;

  border:1px solid #dfe7f2;
  border-radius:15px;

  background:#ffffff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.resource-faq-item.active{
  border-color:#bfd5f4;

  box-shadow:
    0 12px 30px rgba(20,55,100,.06);
}

.resource-faq-question{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:20px 22px;

  border:0;
  outline:0;

  background:transparent;

  color:#0b2144;

  font-family:inherit;
  font-size:14px;
  font-weight:700;

  text-align:left;

  cursor:pointer;
}

.resource-faq-question svg{
  flex:0 0 auto;

  width:18px;
  height:18px;

  color:#2d74eb;

  transition:transform .25s ease;
}

.resource-faq-item.active
.resource-faq-question svg{
  transform:rotate(45deg);
}

.resource-faq-answer{
  display:none;
}

.resource-faq-item.active .resource-faq-answer{
  display:block;
}

.resource-faq-answer p{
  margin:0;

  padding:0 22px 22px;

  color:#71819a;

  font-size:12px;
  line-height:1.75;
}


/* =========================================================
   PODCAST & INSIGHTS
========================================================= */

.resources-insights{
  padding:110px 0 120px;

  background:
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #f2f7fd 100%
    );

  scroll-margin-top:110px;
}

.resources-insights-heading{
  display:grid;

  grid-template-columns:minmax(0,1fr) minmax(0,.75fr);

  gap:45px;

  align-items:end;

  margin-bottom:48px;
}

.resources-insights-heading h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.resources-insights-heading h2 span{
  display:block;
  color:#2d74eb;
}

.resources-insights-heading > p{
  margin:0 0 4px;

  color:#71819a;

  font-size:13px;
  line-height:1.75;
}


/* GRID */

.resources-insights-grid{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:18px;
}

.resource-insight-card{
  min-height:305px;

  display:flex;
  flex-direction:column;

  padding:26px;

  border:1px solid #dce7f5;
  border-radius:18px;

  background:#ffffff;

  box-shadow:
    0 12px 34px rgba(20,55,100,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.resource-insight-card:hover{
  transform:translateY(-4px);

  border-color:#bfd5f4;

  box-shadow:
    0 18px 42px rgba(20,55,100,.08);
}

.resource-insight-featured{
  grid-column:span 2;

  display:grid;

  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);

  gap:26px;

  min-height:330px;

  background:
    linear-gradient(
      145deg,
      #0b2144 0%,
      #173d70 100%
    );

  border-color:transparent;
}

.resource-insight-media{
  position:relative;

  min-height:230px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:15px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(114,169,255,.18),
      transparent 45%
    ),
    rgba(255,255,255,.05);
}

.resource-podcast-symbol{
  width:82px;
  height:82px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:#2d74eb;

  color:#ffffff;

  box-shadow:
    0 18px 45px rgba(45,116,235,.28);
}

.resource-podcast-symbol svg{
  width:34px;
  height:34px;
}

.resource-media-label{
  position:absolute;
  left:18px;
  top:18px;

  color:#72a9ff;

  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.resource-insight-content{
  display:flex;
  flex-direction:column;

  justify-content:center;
}

.resource-content-type{
  display:block;

  margin-bottom:12px;

  color:#2d74eb;

  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.resource-insight-featured
.resource-content-type{
  color:#72a9ff;
}

.resource-insight-card h3{
  margin:0;

  color:#0b2144;

  font-size:19px;
  line-height:1.35;

  font-weight:700;
  letter-spacing:-.02em;
}

.resource-insight-featured h3{
  color:#ffffff;

  font-size:24px;
}

.resource-insight-card p{
  margin:12px 0 0;

  color:#74849a;

  font-size:12px;
  line-height:1.7;
}

.resource-insight-featured p{
  color:#b7c6d9;
}

.resource-insight-icon{
  width:47px;
  height:47px;

  display:grid;
  place-items:center;

  margin-bottom:20px;

  border-radius:12px;

  background:#edf5ff;

  color:#2d74eb;
}

.resource-insight-icon svg{
  width:20px;
  height:20px;
}

.resource-insight-link{
  display:inline-flex;
  align-items:center;

  gap:7px;

  margin-top:auto;
  padding-top:22px;

  color:#1764db;

  font-size:10px;
  font-weight:700;

  text-decoration:none;
}

.resource-insight-link svg{
  width:14px;
  height:14px;
}

.resource-insight-featured
.resource-insight-link{
  color:#72a9ff;
}


/* =========================================================
   PRIVACY POLICY
========================================================= */

.resources-privacy{
  padding:110px 0 120px;

  background:#ffffff;

  scroll-margin-top:110px;
}

.resources-privacy-layout{
  display:grid;

  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);

  gap:60px;

  align-items:start;
}

.resources-privacy-sidebar{
  position:sticky;
  top:120px;
}

.resources-privacy-sidebar h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,50px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.resources-privacy-sidebar h2 span{
  display:block;
  color:#2d74eb;
}

.resources-privacy-sidebar > p{
  margin:18px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.75;
}

.resources-policy-meta{
  display:flex;
  flex-direction:column;

  gap:9px;

  margin-top:25px;
}

.resources-policy-meta span{
  display:flex;
  align-items:flex-start;

  gap:8px;

  color:#63768f;

  font-size:10px;
  line-height:1.5;
}

.resources-policy-meta svg{
  flex:0 0 auto;

  width:15px;
  height:15px;

  color:#2d74eb;
}


/* POLICY CONTENT */

.resources-policy-content{
  border:1px solid #dfe8f3;
  border-radius:20px;

  background:#ffffff;

  overflow:hidden;

  box-shadow:
    0 14px 36px rgba(20,55,100,.045);
}

.resources-policy-content section{
  position:relative;

  padding:27px 30px 28px 66px;

  border-bottom:1px solid #e9eef5;
}

.resources-policy-content section:last-child{
  border-bottom:0;
}

.resources-policy-number{
  position:absolute;
  left:26px;
  top:30px;

  color:#2d74eb;

  font-size:9px;
  font-weight:700;

  letter-spacing:.12em;
}

.resources-policy-content h3{
  margin:0 0 10px;

  color:#0b2144;

  font-size:16px;
  font-weight:700;
}

.resources-policy-content p{
  margin:0;

  color:#71819a;

  font-size:12px;
  line-height:1.75;
}

.resources-policy-content p + p{
  margin-top:10px;
}

.resources-policy-contact{
  display:flex;
  flex-direction:column;

  gap:5px;

  margin-top:14px;

  padding:16px;

  border-radius:10px;

  background:#f5f9ff;
}

.resources-policy-contact strong{
  color:#0b2144;

  font-size:11px;
}

.resources-policy-contact a,
.resources-policy-contact span{
  color:#647991;

  font-size:10px;

  text-decoration:none;
}

.resources-policy-contact a:hover{
  color:#2d74eb;
}


/* =========================================================
   FINAL CTA
========================================================= */

.resources-final{
  padding:100px 0 110px;

  background:
    linear-gradient(
      180deg,
      #eef5fd 0%,
      #f6f9fe 100%
    );
}

.resources-final-card{
  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  gap:40px;

  align-items:center;

  padding:44px;

  border:1px solid #dce7f5;
  border-radius:23px;

  background:#ffffff;

  box-shadow:
    0 18px 44px rgba(20,55,100,.06);
}

.resources-final-card h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(34px,3.5vw,48px);
  line-height:1.08;

  font-weight:700;
  letter-spacing:-.04em;
}

.resources-final-card h2 span{
  display:block;
  color:#2d74eb;
}

.resources-final-card p{
  max-width:620px;

  margin:16px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.7;
}

.resources-final-actions{
  min-width:205px;

  display:flex;
  flex-direction:column;

  gap:10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .resources-faq-layout,
  .resources-privacy-layout{
    grid-template-columns:1fr;
  }

  .resources-faq-intro,
  .resources-privacy-sidebar{
    position:static;
  }

  .resources-insights-heading{
    grid-template-columns:1fr;
  }

  .resources-insights-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .resource-insight-featured{
    grid-column:span 2;
  }

  .resources-final-card{
    grid-template-columns:1fr;
  }

  .resources-final-actions{
    flex-direction:row;
  }

}


@media(max-width:700px){

  .resources-container{
    width:min(100% - 30px,1180px);
  }

  .resources-hero{
    padding:80px 0 70px;
  }

  .resources-hero-content h1{
    font-size:42px;
  }

  .resources-faq,
  .resources-insights,
  .resources-privacy,
  .resources-final{
    padding:82px 0;
  }

  .resources-insights-grid{
    grid-template-columns:1fr;
  }

  .resource-insight-featured{
    grid-column:auto;

    grid-template-columns:1fr;
  }

  .resource-insight-media{
    min-height:190px;
  }

  .resources-policy-content section{
    padding:25px 22px 25px 56px;
  }

  .resources-policy-number{
    left:20px;
    top:28px;
  }

  .resources-final-card{
    padding:30px;
  }

  .resources-final-actions{
    flex-direction:column;
  }

}


@media(max-width:520px){

  .resources-hero-links{
    flex-direction:column;
  }

  .resources-hero-links a{
    justify-content:center;
  }

  .resources-final-actions .btn{
    width:100%;
    justify-content:center;
  }

}

/* =========================================================
   RESOURCE ANCHOR SCROLLING
========================================================= */

html{
  scroll-behavior:smooth;
}

#faq,
#insights,
#privacy{
  scroll-margin-top:120px;
}


/* =========================================================
   RESTAURANT & HOSPITALITY PAGE
========================================================= */

.restaurant-page{
  background:#fff;
}

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

.restaurant-eyebrow{
  display:block;
  margin-bottom:16px;
  color:#2d74eb;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.restaurant-section-heading{
  max-width:800px;
  margin:0 auto 52px;
  text-align:center;
}

.restaurant-section-heading h2,
.restaurant-ingredient-heading h2{
  margin:0;
  color:#0b2144;
  font-size:clamp(38px,4vw,54px);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.04em;
}

.restaurant-section-heading h2 span,
.restaurant-ingredient-heading h2 span{
  display:block;
  color:#2d74eb;
}

.restaurant-section-heading p,
.restaurant-ingredient-heading p{
  max-width:680px;
  margin:18px auto 0;
  color:#71819a;
  font-size:14px;
  line-height:1.75;
}


/* =========================================================
   HERO
========================================================= */

.restaurant-hero{
  padding:105px 0 100px;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(45,116,235,.12),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f4f8fd 100%
    );
}

.restaurant-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:70px;
  align-items:center;
}

.restaurant-hero-content h1{
  margin:0;
  color:#0b2144;
  font-size:clamp(50px,5vw,68px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-.045em;
}

.restaurant-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.restaurant-hero-content > p{
  max-width:570px;
  margin:24px 0 0;
  color:#71819a;
  font-size:14px;
  line-height:1.75;
}

.restaurant-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.restaurant-hero-strip{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:34px;
}

.restaurant-hero-strip span{
  padding:8px 11px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#fff;
  color:#60738c;
  font-size:9px;
  font-weight:600;
}


/* HERO DASHBOARD */

.restaurant-dashboard-card{
  padding:26px;
  border:1px solid #d7e4f3;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(20,55,100,.09);
}

.restaurant-dashboard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid #e7edf5;
}

.restaurant-dashboard-top small{
  display:block;
  margin-bottom:5px;
  color:#2d74eb;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.restaurant-dashboard-top strong{
  color:#0b2144;
  font-size:17px;
}

.restaurant-live-status{
  padding:6px 9px;
  border-radius:999px;
  background:#eaf7ef;
  color:#248653;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}

.restaurant-dashboard-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:20px;
}

.restaurant-dashboard-stats div{
  padding:17px;
  border:1px solid #e0e9f4;
  border-radius:12px;
  background:#f9fbfe;
}

.restaurant-dashboard-stats small{
  display:block;
  margin-bottom:7px;
  color:#8594a8;
  font-size:9px;
}

.restaurant-dashboard-stats strong{
  color:#0b2144;
  font-size:19px;
}

.restaurant-dashboard-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin-top:22px;
  padding:22px 15px;
  border-radius:14px;
  background:#0f315d;
}

.restaurant-dashboard-flow > div{
  min-width:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:9px;
  font-weight:600;
}

.restaurant-dashboard-flow > div svg{
  width:19px;
  height:19px;
  color:#72a9ff;
}

.restaurant-dashboard-flow > svg{
  width:14px;
  height:14px;
  color:#6f8bad;
}

.restaurant-dashboard-bottom{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:18px;
}

.restaurant-dashboard-bottom span{
  position:relative;
  padding-left:13px;
  color:#71819a;
  font-size:9px;
}

.restaurant-dashboard-bottom span:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2d74eb;
  transform:translateY(-50%);
}


/* =========================================================
   CONNECTED WORKFLOW
========================================================= */
/* =========================================================
   CONNECTED RESTAURANT WORKFLOW — REDESIGNED
========================================================= */

.restaurant-workflow{
  padding:115px 0 125px;
  background:#ffffff;
}


/* MAIN SHELL */

.restaurant-workflow-shell{
  max-width:960px;
  margin:0 auto;

  padding:34px;

  border:1px solid #dbe6f3;
  border-radius:25px;

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f6f9fd 100%
    );

  box-shadow:
    0 20px 50px rgba(20,55,100,.055);
}


/* =========================================================
   ORDER ENTRY
========================================================= */

.restaurant-order-entry{
  text-align:center;
}

.restaurant-flow-label{
  display:inline-block;

  margin-bottom:18px;

  color:#2d74eb;

  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.restaurant-order-entry-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;
}

.restaurant-order-entry-grid article{
  min-height:120px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:16px;

  border:1px solid #dce6f2;
  border-radius:13px;

  background:#ffffff;
}

.restaurant-order-entry-grid article svg{
  width:20px;
  height:20px;

  margin-bottom:10px;

  color:#2d74eb;
}

.restaurant-order-entry-grid article strong{
  color:#0b2144;

  font-size:11px;
}

.restaurant-order-entry-grid article span{
  margin-top:5px;

  color:#8593a6;

  font-size:8px;
  line-height:1.4;
}


/* =========================================================
   FLOW ARROW
========================================================= */

.restaurant-flow-arrow{
  height:45px;

  display:grid;
  place-items:center;
}

.restaurant-flow-arrow svg{
  width:17px;
  height:17px;

  color:#83a8d8;
}


/* =========================================================
   MAIN FLOW STAGES
========================================================= */

.restaurant-flow-stage{
  max-width:620px;

  display:grid;

  grid-template-columns:auto 1fr auto;

  gap:16px;

  align-items:center;

  margin:0 auto;

  padding:20px 22px;

  border:1px solid #dce6f2;
  border-radius:15px;

  background:#ffffff;

  box-shadow:
    0 10px 28px rgba(20,55,100,.045);
}

.restaurant-flow-stage-primary{
  border-color:#c3d9f8;

  background:
    linear-gradient(
      135deg,
      #edf5ff 0%,
      #ffffff 100%
    );
}

.restaurant-flow-stage-inventory{
  border-color:#b8d1f5;

  box-shadow:
    0 12px 30px rgba(45,116,235,.08);
}

.restaurant-flow-stage-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#edf5ff;

  color:#2d74eb;
}

.restaurant-flow-stage-primary
.restaurant-flow-stage-icon{
  background:#2d74eb;
  color:#ffffff;
}

.restaurant-flow-stage-icon svg{
  width:20px;
  height:20px;
}

.restaurant-flow-stage span{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.restaurant-flow-stage h3{
  margin:0;

  color:#0b2144;

  font-size:14px;
  font-weight:700;
}

.restaurant-flow-stage p{
  margin:5px 0 0;

  color:#77879b;

  font-size:9px;
  line-height:1.5;
}

.restaurant-flow-stage-status{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;

  text-transform:uppercase;
}


/* =========================================================
   SPLIT / BRANCHES
========================================================= */

.restaurant-flow-split{
  position:relative;

  margin-top:34px;
}

.restaurant-flow-branch-line{
  position:absolute;

  left:50%;
  top:-34px;

  width:1px;
  height:34px;

  background:#bcd1eb;

  transform:translateX(-50%);
}

.restaurant-flow-branches{
  position:relative;

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:18px;
}

.restaurant-flow-branches:before{
  content:"";

  position:absolute;

  left:25%;
  right:25%;
  top:-17px;

  height:1px;

  background:#bcd1eb;
}

.restaurant-flow-branch{
  position:relative;

  padding:24px;

  border:1px solid #dce6f2;
  border-radius:15px;

  background:#ffffff;
}

.restaurant-flow-branch:before{
  content:"";

  position:absolute;

  left:50%;
  top:-17px;

  width:1px;
  height:17px;

  background:#bcd1eb;
}

.restaurant-flow-branch-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin-bottom:17px;

  border-radius:11px;

  background:#edf5ff;

  color:#2d74eb;
}

.restaurant-flow-branch-icon svg{
  width:19px;
  height:19px;
}

.restaurant-flow-branch > span{
  display:block;

  margin-bottom:7px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;

  letter-spacing:.12em;
}

.restaurant-flow-branch h3{
  margin:0;

  color:#0b2144;

  font-size:14px;
}

.restaurant-flow-branch > p{
  margin:8px 0 0;

  color:#76879b;

  font-size:9px;
  line-height:1.6;
}


/* NEXT RESULT */

.restaurant-flow-next{
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:18px;
  padding-top:14px;

  border-top:1px solid #edf1f6;
}

.restaurant-flow-next svg{
  width:13px;
  height:13px;

  color:#2d74eb;
}

.restaurant-flow-next strong{
  color:#546c87;

  font-size:9px;
}


/* =========================================================
   FOUNDATION STRIP
========================================================= */

.restaurant-flow-foundation{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  margin-top:22px;
  padding:18px;

  border-radius:13px;

  background:#0e305b;
}

.restaurant-flow-foundation div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:42px;

  color:#d8e5f3;

  font-size:8px;
  font-weight:600;

  text-align:center;
}

.restaurant-flow-foundation svg{
  flex:0 0 auto;

  width:15px;
  height:15px;

  color:#72a9ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:800px){

  .restaurant-order-entry-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .restaurant-flow-branches{
    grid-template-columns:1fr;
  }

  .restaurant-flow-branches:before,
  .restaurant-flow-branch:before,
  .restaurant-flow-branch-line{
    display:none;
  }

  .restaurant-flow-foundation{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:520px){

  .restaurant-workflow-shell{
    padding:20px;
  }

  .restaurant-order-entry-grid{
    grid-template-columns:1fr;
  }

  .restaurant-flow-stage{
    grid-template-columns:auto 1fr;
  }

  .restaurant-flow-stage-status{
    grid-column:2;
    justify-self:start;
  }

  .restaurant-flow-foundation{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   INGREDIENT / RECIPE COSTING
========================================================= */


.restaurant-ingredient{
  padding:115px 0 125px;

  background:
    linear-gradient(
      180deg,
      #f4f8fd 0%,
      #f8fbff 100%
    );
}

.restaurant-ingredient-heading{
  max-width:820px;

  margin:0 auto 55px;

  text-align:center;
}


/* =========================================================
   MAIN SHOWCASE
========================================================= */

.restaurant-ingredient-showcase{
  max-width:1100px;

  display:grid;

  grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr);

  gap:22px;

  margin:0 auto;
}


/* =========================================================
   FOOD VISUAL
========================================================= */

.restaurant-food-visual{
  display:flex;
  flex-direction:column;

  border:1px solid #d9e5f3;
  border-radius:22px;

  background:#ffffff;

  overflow:hidden;

  box-shadow:
    0 20px 48px rgba(20,55,100,.07);
}

.restaurant-food-image-wrap{
  position:relative;

  min-height:445px;

  overflow:hidden;

  background:#f6f9fd;
}

.restaurant-food-image-wrap img{
  width:100%;
  height:100%;

  position:absolute;
  inset:0;

  object-fit:cover;
}


/* CALLOUTS */

.ingredient-callout{
  position:absolute;

  min-width:145px;

  padding:13px 15px;

  border:1px solid rgba(210,225,244,.95);
  border-radius:12px;

  background:rgba(255,255,255,.94);

  box-shadow:
    0 12px 28px rgba(20,55,100,.12);

  backdrop-filter:blur(8px);
}

.ingredient-callout span{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;

  letter-spacing:.12em;
}

.ingredient-callout strong{
  display:block;

  color:#0b2144;

  font-size:10px;
}

.ingredient-callout small{
  display:block;

  margin-top:4px;

  color:#71819a;

  font-size:9px;
}


/* positions */

.ingredient-callout-one{
  left:18px;
  top:45px;
}

.ingredient-callout-two{
  right:18px;
  top:36px;
}

.ingredient-callout-three{
  right:18px;
  bottom:36px;
}


/* FOOD CAPTION */

.restaurant-food-caption{
  padding:20px 22px;
}

.restaurant-food-caption span{
  display:block;

  margin-bottom:6px;

  color:#2d74eb;

  font-size:8px;
  font-weight:700;

  letter-spacing:.1em;
}

.restaurant-food-caption strong{
  display:block;

  max-width:390px;

  color:#0b2144;

  font-size:12px;
  line-height:1.55;

  font-weight:600;
}


/* =========================================================
   RECIPE COST PANEL
========================================================= */

.restaurant-recipe-cost-panel{
  padding:26px;

  border:1px solid #d9e5f3;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 20px 48px rgba(20,55,100,.07);
}


/* HEADER */

.restaurant-recipe-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  padding:22px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #0d2c55,
      #173f73
    );
}

.restaurant-recipe-label{
  display:block;

  margin-bottom:8px;

  color:#72a9ff;

  font-size:7px;
  font-weight:700;

  letter-spacing:.14em;
}

.restaurant-recipe-header h3{
  margin:0;

  color:#ffffff;

  font-size:21px;
  font-weight:700;
}

.restaurant-selling-price{
  text-align:right;
}

.restaurant-selling-price small{
  display:block;

  margin-bottom:5px;

  color:#aec3dd;

  font-size:8px;
}

.restaurant-selling-price strong{
  color:#ffffff;

  font-size:21px;
}


/* INGREDIENT ROWS */

.restaurant-recipe-ingredients{
  margin-top:16px;

  border:1px solid #e2eaf4;
  border-radius:13px;

  overflow:hidden;
}

.restaurant-recipe-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:14px 16px;

  border-bottom:1px solid #edf1f6;
}

.restaurant-recipe-row:last-child{
  border-bottom:0;
}

.restaurant-recipe-row strong{
  display:block;

  color:#0b2144;

  font-size:10px;
}

.restaurant-recipe-row span{
  display:block;

  margin-top:3px;

  color:#8897aa;

  font-size:8px;
}

.restaurant-recipe-row b{
  color:#2d74eb;

  font-size:11px;
}


/* SUMMARY */

.restaurant-recipe-summary{
  display:grid;

  grid-template-columns:
    1.15fr
    .85fr
    1fr;

  gap:8px;

  margin-top:14px;
}

.restaurant-recipe-summary > div{
  padding:16px;

  border:1px solid #dce6f2;
  border-radius:11px;

  background:#ffffff;
}

.restaurant-recipe-summary-primary{
  background:#edf5ff !important;

  border-color:#c9ddf7 !important;
}

.restaurant-recipe-summary small{
  display:block;

  margin-bottom:7px;

  color:#8393a7;

  font-size:7px;
  font-weight:700;

  letter-spacing:.07em;
}

.restaurant-recipe-summary strong{
  color:#0b2144;

  font-size:17px;
}

.restaurant-recipe-summary-primary strong{
  color:#1764db;
}


/* =========================================================
   CONNECTED INGREDIENT FLOW
========================================================= */

.restaurant-ingredient-flow{
  max-width:1100px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin:18px auto 0;

  padding:21px 18px;

  border:1px solid #dce6f2;
  border-radius:15px;

  background:#ffffff;

  box-shadow:
    0 12px 30px rgba(20,55,100,.045);
}

.restaurant-ingredient-flow > div{
  min-width:110px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:8px;

  text-align:center;

  color:#566c87;

  font-size:8px;
  font-weight:600;
}

.restaurant-ingredient-flow > div svg{
  width:19px;
  height:19px;

  color:#2d74eb;
}

.restaurant-ingredient-flow > svg{
  flex:0 0 auto;

  width:14px;
  height:14px;

  color:#9eb2ca;
}


/* =========================================================
   BENEFITS
========================================================= */

.restaurant-ingredient-benefits{
  max-width:1100px;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:12px;

  margin:16px auto 0;
}

.restaurant-ingredient-benefits article{
  display:flex;

  gap:11px;

  padding:18px;

  border:1px solid #dce6f2;
  border-radius:13px;

  background:#ffffff;
}

.restaurant-ingredient-benefits article > svg{
  flex:0 0 auto;

  width:18px;
  height:18px;

  color:#2d74eb;
}

.restaurant-ingredient-benefits strong{
  display:block;

  color:#0b2144;

  font-size:10px;
}

.restaurant-ingredient-benefits span{
  display:block;

  margin-top:5px;

  color:#7d8da1;

  font-size:8px;
  line-height:1.55;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .restaurant-ingredient-showcase{
    grid-template-columns:1fr;
  }

  .restaurant-food-image-wrap{
    min-height:500px;
  }

  .restaurant-ingredient-benefits{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:700px){

  .restaurant-food-image-wrap{
    min-height:420px;
  }

  .ingredient-callout{
    min-width:125px;

    padding:11px;
  }

  .restaurant-recipe-summary{
    grid-template-columns:1fr;
  }

  .restaurant-ingredient-flow{
    flex-direction:column;
  }

  .restaurant-ingredient-flow > svg{
    transform:rotate(90deg);
  }

}


@media(max-width:520px){

  .restaurant-recipe-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .restaurant-selling-price{
    text-align:left;
  }

  .restaurant-food-image-wrap{
    min-height:390px;
  }

  .ingredient-callout-one{
    left:10px;
    top:15px;
  }

  .ingredient-callout-two{
    right:10px;
    top:15px;
  }

  .ingredient-callout-three{
    right:10px;
    bottom:15px;
  }

  .restaurant-ingredient-benefits{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   KITCHEN / KDS
========================================================= */

.restaurant-kitchen{
  padding:120px 0;
  background:#fff;
}

.restaurant-kitchen-layout{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:65px;
  align-items:center;
}

.restaurant-kitchen-content h2,
.restaurant-multisite-content h2{
  margin:0;
  color:#0b2144;
  font-size:clamp(38px,4vw,52px);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.04em;
}

.restaurant-kitchen-content h2 span,
.restaurant-multisite-content h2 span{
  display:block;
  color:#2d74eb;
}

.restaurant-kitchen-content > p,
.restaurant-multisite-content > p{
  margin:20px 0 0;
  color:#71819a;
  font-size:13px;
  line-height:1.75;
}

.restaurant-kitchen-content ul{
  margin:25px 0 0;
  padding:0;
  list-style:none;
}

.restaurant-kitchen-content li{
  position:relative;
  margin:10px 0;
  padding-left:21px;
  color:#60738c;
  font-size:11px;
}

.restaurant-kitchen-content li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:#2d74eb;
  font-weight:700;
}


/* KDS */

.restaurant-kds-board{
  padding:25px;
  border-radius:22px;
  background:#0c294f;
  box-shadow:0 24px 55px rgba(10,39,77,.17);
}

.restaurant-kds-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:18px;
  color:#fff;
}

.restaurant-kds-header span{
  color:#72a9ff;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
}

.restaurant-kds-header strong{
  font-size:11px;
}

.restaurant-kds-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.restaurant-kds-order{
  min-height:190px;
  display:flex;
  flex-direction:column;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}

.restaurant-kds-order > div{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.restaurant-kds-order span{
  color:#d8e4f2;
  font-size:8px;
  font-weight:700;
}

.restaurant-kds-order > div strong{
  color:#72a9ff;
  font-size:9px;
}

.restaurant-kds-order p{
  margin:22px 0;
  color:#fff;
  font-size:10px;
  line-height:1.8;
}

.restaurant-kds-order > b{
  margin-top:auto;
  color:#72a9ff;
  font-size:8px;
  letter-spacing:.08em;
}

.restaurant-kds-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:18px;
  padding:13px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
}

.restaurant-kds-flow span{
  color:#c3d1e1;
  font-size:8px;
  font-weight:600;
}

.restaurant-kds-flow svg{
  width:12px;
  height:12px;
  color:#557ba9;
}

/* =====================================================
   KDS ORDER STATUS COLOURS
===================================================== */

.restaurant-kds-order {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* PREPARING - GREEN */
.restaurant-kds-order.kds-preparing {
  border: 1px solid rgba(43, 196, 126, 0.75);
  border-top: 4px solid #2bc47e;
  background:
    linear-gradient(
      180deg,
      rgba(43, 196, 126, 0.13) 0%,
      rgba(43, 196, 126, 0.03) 38%,
      rgba(255, 255, 255, 0.03) 100%
    );
}

.restaurant-kds-order.kds-preparing > div strong,
.restaurant-kds-order.kds-preparing > b {
  color: #43dc94;
}


/* NEW - AMBER */
.restaurant-kds-order.kds-new {
  border: 1px solid rgba(245, 190, 54, 0.78);
  border-top: 4px solid #f5be36;
  background:
    linear-gradient(
      180deg,
      rgba(245, 190, 54, 0.14) 0%,
      rgba(245, 190, 54, 0.03) 38%,
      rgba(255, 255, 255, 0.03) 100%
    );
}

.restaurant-kds-order.kds-new > div strong,
.restaurant-kds-order.kds-new > b {
  color: #ffd15c;
}


/* READY - RED */
.restaurant-kds-order.kds-ready {
  border: 1px solid rgba(239, 92, 92, 0.78);
  border-top: 4px solid #ef5c5c;
  background:
    linear-gradient(
      180deg,
      rgba(239, 92, 92, 0.14) 0%,
      rgba(239, 92, 92, 0.03) 38%,
      rgba(255, 255, 255, 0.03) 100%
    );
}

.restaurant-kds-order.kds-ready > div strong,
.restaurant-kds-order.kds-ready > b {
  color: #ff7777;
}


/* Slight interaction */
.restaurant-kds-order:hover {
  transform: translateY(-3px);
}
/* =========================================================
   ORDERING CHANNELS
========================================================= */

.restaurant-ordering{
  padding:115px 0 125px;
  background:#f5f9fe;
}

.restaurant-ordering-map{
  max-width:1000px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 auto;
}

.restaurant-order-channel{
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px solid #dce7f4;
  border-radius:15px;
  background:#fff;
  text-align:center;
}

.restaurant-order-channel svg{
  width:22px;
  height:22px;
  margin-bottom:13px;
  color:#2d74eb;
}

.restaurant-order-channel strong{
  color:#0b2144;
  font-size:12px;
}

.restaurant-order-channel span{
  margin-top:6px;
  color:#8291a4;
  font-size:9px;
}

.restaurant-order-platform{
  grid-column:1/-1;
  padding:28px;
  border-radius:17px;
  background:
    linear-gradient(
      135deg,
      #0c294f,
      #174273
    );
  text-align:center;
}

.restaurant-order-platform small{
  display:block;
  color:#72a9ff;
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.restaurant-order-platform > strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:19px;
}

.restaurant-order-platform div{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}

.restaurant-order-platform div span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(255,255,255,.05);
  color:#c7d5e6;
  font-size:8px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.restaurant-capabilities{
  padding:115px 0 125px;
  background:#fff;
  scroll-margin-top:120px;
}

.restaurant-capability-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.restaurant-capability-grid article{
  min-height:190px;
  padding:22px;
  border:1px solid #dce6f2;
  border-radius:15px;
  background:#fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.restaurant-capability-grid article:hover{
  transform:translateY(-3px);
  border-color:#bfd5f4;
  box-shadow:0 15px 35px rgba(20,55,100,.07);
}

.restaurant-capability-grid article > svg{
  width:21px;
  height:21px;
  margin-bottom:22px;
  color:#2d74eb;
}

.restaurant-capability-grid h3{
  margin:0;
  color:#0b2144;
  font-size:14px;
}

.restaurant-capability-grid p{
  margin:9px 0 0;
  color:#7c8ca0;
  font-size:10px;
  line-height:1.65;
}

.restaurant-capabilities-action{
  margin-top:30px;
  text-align:center;
}


/* =========================================================
   MULTI LOCATION
========================================================= */

.restaurant-multisite{
  padding:120px 0;
  background:
    linear-gradient(
      180deg,
      #f6f9fd,
      #eef5fc
    );
}

.restaurant-multisite-layout{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:65px;
  align-items:center;
}

.restaurant-multisite-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:25px;
}

.restaurant-multisite-tags span{
  padding:8px 10px;
  border:1px solid #d7e4f3;
  border-radius:8px;
  background:#fff;
  color:#62758e;
  font-size:9px;
}


/* LOCATION MAP */

.restaurant-location-map{
  padding:26px;
  border:1px solid #d5e3f2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 45px rgba(20,55,100,.06);
}

.restaurant-location-hq{
  width:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto;
  padding:15px;
  border-radius:11px;
  background:#2d74eb;
  color:#fff;
}

.restaurant-location-hq svg{
  width:17px;
  height:17px;
}

.restaurant-location-hq strong{
  font-size:11px;
}

.restaurant-location-sites{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:34px;
}

.restaurant-location-sites article{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:17px;
  border:1px solid #e0e8f2;
  border-radius:12px;
  background:#f9fbfe;
}

.restaurant-location-sites small{
  color:#2d74eb;
  font-size:7px;
  font-weight:700;
  letter-spacing:.1em;
}

.restaurant-location-sites strong{
  margin:6px 0 13px;
  color:#0b2144;
  font-size:12px;
}

.restaurant-location-sites span{
  margin:2px;
  color:#7d8da1;
  font-size:8px;
}

.restaurant-location-central{
  margin-top:18px;
  padding:17px;
  border-radius:11px;
  background:#0e305b;
  text-align:center;
}

.restaurant-location-central small{
  display:block;
  margin-bottom:6px;
  color:#72a9ff;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.restaurant-location-central strong{
  color:#fff;
  font-size:9px;
  font-weight:500;
}


/* =========================================================
   FINAL CTA
========================================================= */

.restaurant-final{
  padding:105px 0 115px;
  background:#fff;
}

.restaurant-final-content{
  max-width:920px;
  margin:0 auto;
  padding:55px 40px;
  border:1px solid #d7e4f3;
  border-radius:24px;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(45,116,235,.11),
      transparent 30%
    ),
    #f7faff;
  text-align:center;
}

.restaurant-final-content h2{
  margin:0;
  color:#0b2144;
  font-size:clamp(40px,4vw,56px);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.04em;
}

.restaurant-final-content h2 span{
  display:block;
  color:#2d74eb;
}

.restaurant-final-content > p{
  max-width:650px;
  margin:19px auto 0;
  color:#71819a;
  font-size:13px;
  line-height:1.75;
}

.restaurant-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .restaurant-hero-layout,
  .restaurant-kitchen-layout,
  .restaurant-multisite-layout{
    grid-template-columns:1fr;
  }

  .restaurant-hero-layout{
    gap:50px;
  }

  .restaurant-ingredient-list{
    grid-template-columns:repeat(3,1fr);
  }

  .restaurant-ingredient-benefits{
    grid-template-columns:repeat(2,1fr);
  }

  .restaurant-capability-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:760px){

  .restaurant-container{
    width:min(100% - 30px,1180px);
  }

  .restaurant-hero,
  .restaurant-workflow,
  .restaurant-ingredient,
  .restaurant-kitchen,
  .restaurant-ordering,
  .restaurant-capabilities,
  .restaurant-multisite,
  .restaurant-final{
    padding:82px 0;
  }

  .restaurant-hero-content h1{
    font-size:43px;
  }

  .restaurant-dashboard-stats{
    grid-template-columns:1fr;
  }

  .restaurant-dashboard-flow{
    flex-wrap:wrap;
    justify-content:center;
  }

  .restaurant-workflow-map{
    min-height:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:20px;
  }

  .restaurant-workflow-lines{
    display:none;
  }

  .restaurant-workflow-node{
    position:static;
    transform:none;
    min-width:0;
  }

  .restaurant-node-main{
    grid-column:1/-1;
  }

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

  .restaurant-cost-summary{
    grid-template-columns:1fr;
  }

  .restaurant-cost-flow{
    flex-direction:column;
  }

  .restaurant-cost-flow > svg{
    transform:rotate(90deg);
  }

  .restaurant-kds-grid{
    grid-template-columns:1fr;
  }

  .restaurant-kds-order{
    min-height:150px;
  }

  .restaurant-ordering-map{
    grid-template-columns:repeat(2,1fr);
  }

  .restaurant-order-platform{
    grid-column:1/-1;
  }

  .restaurant-location-sites{
    grid-template-columns:1fr;
  }

}


@media(max-width:520px){

  .restaurant-hero-actions,
  .restaurant-final-actions{
    flex-direction:column;
  }

  .restaurant-hero-actions .btn,
  .restaurant-final-actions .btn{
    width:100%;
    justify-content:center;
  }

  .restaurant-costing-board{
    padding:18px;
  }

  .restaurant-menu-item{
    grid-template-columns:1fr;
  }

  .restaurant-menu-price{
    text-align:left;
  }

  .restaurant-ingredient-list,
  .restaurant-ingredient-benefits,
  .restaurant-capability-grid,
  .restaurant-ordering-map{
    grid-template-columns:1fr;
  }

  .restaurant-order-platform{
    grid-column:auto;
  }

  .restaurant-kds-flow{
    flex-wrap:wrap;
  }

  .restaurant-final-content{
    padding:38px 22px;
  }

}

/* =========================================================
   SALES & CUSTOMER PAGE
========================================================= */

.sales-customer-page{
  background:#ffffff;
}

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

.sales-customer-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}


/* =========================================================
   HERO
========================================================= */

.sales-customer-hero{
  padding:105px 0 95px;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(45,116,235,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f5f9ff 100%
    );
}

.sales-customer-hero-content{
  max-width:900px;
  margin:0 auto;

  text-align:center;
}

.sales-customer-hero-content h1{
  margin:0;

  color:#0b2144;

  font-size:clamp(48px,5vw,66px);
  line-height:1.04;

  font-weight:700;
  letter-spacing:-.045em;
}

.sales-customer-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.sales-customer-hero-content > p{
  max-width:690px;
  margin:22px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}


/* HERO NAV CARDS */

.sales-customer-hero-actions{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:38px;
}

.sales-customer-nav-card{
  min-height:105px;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  padding:18px;

  border:1px solid #dce7f5;
  border-radius:14px;

  background:#ffffff;

  text-align:left;
  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.sales-customer-nav-card span{
  color:#2d74eb;

  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.sales-customer-nav-card strong{
  margin-top:8px;

  color:#0b2144;

  font-size:12px;
}

.sales-customer-nav-card:hover{
  transform:translateY(-3px);

  border-color:#bfd5f4;

  box-shadow:
    0 12px 30px rgba(20,55,100,.07);
}


/* =========================================================
   COMMON MODULE SECTION
========================================================= */

.sales-customer-section{
  padding:115px 0 125px;

  background:#ffffff;

  scroll-margin-top:120px;
}

.sales-customer-alt{
  background:
    linear-gradient(
      180deg,
      #f5f9fe 0%,
      #f8fbff 100%
    );
}

.sales-customer-layout{
  display:grid;

  grid-template-columns:
    minmax(0,.78fr)
    minmax(0,1.22fr);

  gap:70px;

  align-items:center;
}

.sales-customer-layout-reverse
.sales-customer-content{
  order:2;
}

.sales-customer-layout-reverse
.sales-customer-visual{
  order:1;
}


/* CONTENT */

.sales-customer-section-number{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  margin-bottom:18px;

  border:1px solid #d4e3f5;
  border-radius:50%;

  background:#f5f9ff;

  color:#2d74eb;

  font-size:9px;
  font-weight:700;
}

.sales-customer-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,52px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.sales-customer-content h2 span{
  display:block;
  color:#2d74eb;
}

.sales-customer-content > p{
  max-width:540px;

  margin:20px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.75;
}


/* FEATURE LIST */

.sales-customer-feature-list{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:11px 18px;

  margin:26px 0 0;
  padding:0;

  list-style:none;
}

.sales-customer-feature-list li{
  position:relative;

  padding-left:19px;

  color:#60738c;

  font-size:10px;
  line-height:1.5;
}

.sales-customer-feature-list li:before{
  content:"";

  position:absolute;

  left:0;
  top:6px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#2d74eb;
}

.sales-customer-content .btn{
  margin-top:28px;
}


/* =========================================================
   VISUAL WRAPPER
========================================================= */

.sales-customer-visual{
  min-width:0;
}


/* =========================================================
   ADVANCED POS VISUAL
========================================================= */

.sales-pos-advanced{
  overflow:hidden;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.09);
}


/* TOP */
.sales-pos-main{
  display:grid;

  grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr);

  min-height:350px;
}


/* PRODUCTS */

.sales-pos-products{
  padding:22px;

  border-right:1px solid #e4ebf4;
}

.sales-pos-search{
  display:flex;
  align-items:center;

  gap:8px;

  padding:10px 12px;

  border:1px solid #e0e8f2;
  border-radius:8px;

  background:#fafcff;

  color:#8a98aa;

  font-size:8px;
}

.sales-pos-search svg{
  width:13px;
  height:13px;
}

.sales-pos-categories{
  display:flex;
  gap:6px;

  margin-top:12px;
}

.sales-pos-categories span{
  padding:5px 9px;

  border-radius:6px;

  color:#71819a;

  font-size:7px;
}

.sales-pos-categories .active{
  background:#0b2144;
  color:#ffffff;
}


.sales-pos-product-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:14px;
}

.sales-pos-product-grid article{
  min-height:105px;

  display:flex;
  flex-direction:column;

  padding:10px;

  border:1px solid #e3eaf3;
  border-radius:9px;

  background:#ffffff;
}

.sales-product-thumb{
  height:52px;

  display:grid;
  place-items:center;

  margin-bottom:8px;

  border-radius:7px;

  background:#f3f7fc;

  color:#2d74eb;
}

.sales-product-thumb svg{
  width:22px;
  height:22px;
}

.sales-pos-product-grid strong{
  color:#0b2144;

  font-size:8px;
  line-height:1.35;
}

.sales-pos-product-grid span{
  margin-top:4px;

  color:#2d74eb;

  font-size:8px;
  font-weight:700;
}


/* CURRENT ORDER */

.sales-pos-order{
  display:flex;
  flex-direction:column;

  padding:21px;
}

.sales-pos-order-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:10px;

  padding-bottom:15px;

  border-bottom:1px solid #e5ebf3;
}

.sales-pos-order-header small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.1em;
}

.sales-pos-order-header strong{
  color:#0b2144;

  font-size:11px;
}

.sales-pos-active{
  padding:5px 7px;

  border-radius:999px;

  background:#e8f6ee;

  color:#248653;

  font-size:6px;
  font-weight:700;
}


/* ORDER LINES */

.sales-pos-order-lines{
  margin-top:10px;
}

.sales-pos-order-lines > div{
  display:grid;

  grid-template-columns:26px 1fr auto;

  gap:8px;

  align-items:center;

  padding:10px 0;

  border-bottom:1px solid #edf1f6;
}

.sales-order-code{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  border-radius:6px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
}

.sales-pos-order-lines strong{
  display:block;

  color:#0b2144;

  font-size:8px;
}

.sales-pos-order-lines small{
  display:block;

  margin-top:3px;

  color:#8b99aa;

  font-size:6px;
}

.sales-pos-order-lines b{
  color:#2d74eb;

  font-size:8px;
}


/* SUMMARY */

.sales-pos-order-summary{
  margin-top:auto;
  padding-top:14px;
}

.sales-pos-order-summary > div{
  display:flex;
  justify-content:space-between;

  padding:4px 0;

  color:#73849a;

  font-size:8px;
}

.sales-pos-order-summary strong{
  color:#0b2144;
}

.sales-pos-net{
  margin-top:6px;
  padding-top:10px !important;

  border-top:1px solid #e5ebf3;

  font-weight:700;
}

.sales-pos-net strong{
  color:#2d74eb;

  font-size:12px;
}


/* BUTTONS */

.sales-pos-order-actions{
  display:grid;

  grid-template-columns:.7fr 1.3fr;

  gap:7px;

  margin-top:13px;
}

.sales-pos-order-actions button,
.sales-complete-sale{
  border:0;

  font-family:inherit;
  font-size:7px;
  font-weight:700;

  cursor:default;
}

.sales-pos-order-actions button{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  padding:9px;

  border-radius:7px;
}

.sales-pos-order-actions svg{
  width:12px;
  height:12px;
}

.sales-pos-hold{
  background:#fff6e5;
  color:#c98700;
}

.sales-pos-checkout{
  background:#31a669;
  color:#ffffff;
}


/* =========================================================
   LOWER POS
========================================================= */

.sales-pos-lower{
  display:grid;

  grid-template-columns:.9fr 1.1fr;

  border-top:1px solid #e3eaf3;
}

.sales-pos-voucher,
.sales-pos-payment{
  padding:20px;
}

.sales-pos-voucher{
  border-right:1px solid #e3eaf3;
}

.sales-pos-subheading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:15px;
}

.sales-pos-subheading small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.sales-pos-subheading strong{
  color:#0b2144;

  font-size:11px;
}

.sales-pos-subheading > svg{
  width:18px;
  height:18px;

  color:#2d74eb;
}

.sales-pos-subheading > span{
  color:#7b8b9f;

  font-size:7px;
}


/* VOUCHER */

.sales-voucher-values{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:6px;

  margin-top:14px;
}

.sales-voucher-values span{
  padding:9px 4px;

  border:1px solid #dfe7f1;
  border-radius:7px;

  background:#f9fbfe;

  color:#536a86;

  font-size:7px;
  font-weight:600;

  text-align:center;
}

.sales-voucher-meta{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-top:11px;
}

.sales-voucher-meta div{
  padding:9px;

  border-radius:7px;

  background:#f5f8fc;
}

.sales-voucher-meta small{
  display:block;

  color:#8c99aa;

  font-size:6px;
}

.sales-voucher-meta strong{
  display:block;

  margin-top:4px;

  color:#0b2144;

  font-size:7px;
}


/* PAYMENT */

.sales-payment-tabs{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:5px;

  margin-top:14px;
}

.sales-payment-tabs span{
  padding:8px 4px;

  border:1px solid #e0e7f1;
  border-radius:6px;

  color:#708198;

  font-size:7px;

  text-align:center;
}

.sales-payment-tabs .active{
  border-color:#bcd4f5;

  background:#edf5ff;

  color:#1764db;

  font-weight:700;
}

.sales-payment-summary{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:6px;

  margin-top:11px;
}

.sales-payment-summary > div{
  padding:9px;

  border-radius:7px;

  background:#f7f9fc;
}

.sales-payment-summary span{
  display:block;

  color:#8997a9;

  font-size:6px;
}

.sales-payment-summary strong{
  display:block;

  margin-top:4px;

  color:#0b2144;

  font-size:8px;
}

.sales-complete-sale{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  margin-top:11px;
  padding:10px;

  border-radius:7px;

  background:#31a669;

  color:#ffffff;
}

.sales-complete-sale svg{
  width:13px;
  height:13px;
}


/* RESPONSIVE */

@media(max-width:850px){

  .sales-pos-main,
  .sales-pos-lower{
    grid-template-columns:1fr;
  }

  .sales-pos-products,
  .sales-pos-voucher{
    border-right:0;
    border-bottom:1px solid #e3eaf3;
  }

}

@media(max-width:520px){

  .sales-pos-product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .sales-voucher-values,
  .sales-payment-tabs{
    grid-template-columns:repeat(2,1fr);
  }

}

/* =========================================================
   ADVANCED CRM & LOYALTY VISUAL
========================================================= */

.sales-crm-advanced{
  overflow:hidden;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}


/* PROFILE HEADER */

.sales-crm-profile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:24px;

  border-bottom:1px solid #e7edf5;
}

.sales-crm-profile-main{
  display:flex;
  align-items:center;

  gap:14px;
}

.sales-crm-avatar{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#eaf3ff;

  color:#2d74eb;
}

.sales-crm-avatar svg{
  width:23px;
  height:23px;
}

.sales-crm-profile-main small,
.sales-crm-customer-id small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;

  letter-spacing:.11em;
}

.sales-crm-profile-main h3{
  margin:0;

  color:#0b2144;

  font-size:17px;
}

.sales-crm-tier{
  display:flex;
  align-items:center;

  gap:5px;

  margin-top:5px;

  color:#8b6b1c;

  font-size:8px;
  font-weight:600;
}

.sales-crm-tier svg{
  width:12px;
  height:12px;
}

.sales-crm-customer-id{
  text-align:right;
}

.sales-crm-customer-id strong{
  color:#0b2144;

  font-size:10px;
}


/* KPI ROW */

.sales-crm-kpis{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  padding:18px 24px;
}

.sales-crm-kpis > div{
  padding:16px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#f9fbfe;
}

.sales-crm-kpis small{
  display:block;

  margin-bottom:6px;

  color:#8291a5;

  font-size:7px;
}

.sales-crm-kpis strong{
  display:block;

  color:#0b2144;

  font-size:17px;
}

.sales-crm-kpis span{
  display:block;

  margin-top:5px;

  color:#2d74eb;

  font-size:7px;
}


/* BODY */

.sales-crm-body{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:12px;

  padding:0 24px 20px;
}


/* BLOCK HEADING */

.sales-crm-block-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;

  margin-bottom:12px;
}

.sales-crm-block-heading small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;

  letter-spacing:.11em;
}

.sales-crm-block-heading strong{
  color:#0b2144;

  font-size:10px;
}

.sales-crm-block-heading > span{
  color:#2d74eb;

  font-size:7px;
  font-weight:600;
}


/* PURCHASE HISTORY */

.sales-crm-purchases,
.sales-crm-loyalty-panel{
  padding:17px;

  border:1px solid #e0e8f2;
  border-radius:12px;

  background:#ffffff;
}

.sales-crm-purchase-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:11px 0;

  border-bottom:1px solid #edf1f6;
}

.sales-crm-purchase-row:last-child{
  border-bottom:0;
}

.sales-crm-purchase-row strong{
  display:block;

  color:#0b2144;

  font-size:8px;
}

.sales-crm-purchase-row span{
  display:block;

  margin-top:3px;

  color:#8a98aa;

  font-size:7px;
}

.sales-crm-purchase-row b{
  color:#2d74eb;

  font-size:8px;
}


/* LOYALTY */

.sales-crm-points{
  padding:13px;

  border-radius:9px;

  background:#f5f9ff;
}

.sales-crm-points small{
  display:block;

  color:#7b8da4;

  font-size:6px;
  font-weight:700;

  letter-spacing:.08em;
}

.sales-crm-points strong{
  display:block;

  margin-top:5px;

  color:#0b2144;

  font-size:20px;
}

.sales-crm-progress{
  height:5px;

  margin-top:10px;

  overflow:hidden;

  border-radius:999px;

  background:#dfeaf8;
}

.sales-crm-progress span{
  display:block;

  height:100%;

  border-radius:999px;

  background:#2d74eb;
}

.sales-crm-points p{
  margin:7px 0 0;

  color:#8291a5;

  font-size:7px;
}


/* OFFER */

.sales-crm-offer{
  display:flex;

  gap:10px;

  margin-top:10px;
  padding:12px;

  border:1px solid #dce7f5;
  border-radius:9px;

  background:#fff;
}

.sales-crm-offer-icon{
  flex:0 0 auto;

  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:#eaf3ff;

  color:#2d74eb;
}

.sales-crm-offer-icon svg{
  width:15px;
  height:15px;
}

.sales-crm-offer small{
  display:block;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
}

.sales-crm-offer strong{
  display:block;

  margin-top:4px;

  color:#0b2144;

  font-size:8px;
}

.sales-crm-offer span{
  display:block;

  margin-top:4px;

  color:#8392a5;

  font-size:6px;
  line-height:1.45;
}


/* REDEEM */

.sales-crm-redeem{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  margin-top:10px;
  padding:10px;

  border:0;
  border-radius:7px;

  background:#2d74eb;

  color:#fff;

  font-family:inherit;

  font-size:7px;
  font-weight:700;
}

.sales-crm-redeem svg{
  width:12px;
  height:12px;
}


/* BOTTOM SIGNALS */

.sales-crm-signals{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:7px;

  padding:14px 24px 20px;
}

.sales-crm-signals div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  padding:9px;

  border-radius:8px;

  background:#0e305b;

  color:#d8e4f2;

  font-size:7px;
}

.sales-crm-signals svg{
  width:12px;
  height:12px;

  color:#72a9ff;
}


/* RESPONSIVE */

@media(max-width:700px){

  .sales-crm-kpis{
    grid-template-columns:1fr;
  }

  .sales-crm-body{
    grid-template-columns:1fr;
  }

  .sales-crm-signals{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:480px){

  .sales-crm-profile-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .sales-crm-customer-id{
    text-align:left;
  }

  .sales-crm-signals{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   ADVANCED PROMOTIONS & OFFERS
========================================================= */

.sales-promo-advanced{
  overflow:hidden;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}


/* HEADER */

.sales-promo-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:24px;

  border-bottom:1px solid #e7edf5;
}

.sales-promo-top small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.sales-promo-top h3{
  margin:0;

  color:#0b2144;

  font-size:17px;
}

.sales-promo-live{
  padding:7px 10px;

  border-radius:999px;

  background:#e9f6ee;

  color:#248653;

  font-size:7px;
  font-weight:700;
}


/* =========================================================
   RULE BUILDER
========================================================= */

.sales-promo-builder{
  margin:18px 22px 0;
  padding:18px;

  border:1px solid #dce7f5;
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #f6f9ff,
      #ffffff
    );
}

.sales-promo-builder-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;
}

.sales-promo-builder-heading small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.sales-promo-builder-heading strong{
  color:#0b2144;

  font-size:11px;
}

.sales-promo-builder-heading > span{
  padding:5px 7px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:6px;
  font-weight:700;
}


/* RULE FLOW */

.sales-promo-rule-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-top:17px;
}

.sales-promo-step{
  flex:1;

  min-height:95px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:12px;

  border:1px solid #dce6f2;
  border-radius:10px;

  background:#ffffff;
}

.sales-promo-step > span{
  color:#2d74eb;

  font-size:6px;
  font-weight:700;

  letter-spacing:.1em;
}

.sales-promo-step strong{
  margin-top:6px;

  color:#0b2144;

  font-size:9px;
}

.sales-promo-step small{
  margin-top:4px;

  color:#8291a5;

  font-size:7px;
}

.sales-promo-step-result{
  border-color:#bdd6f6;

  background:#edf5ff;
}

.sales-promo-rule-flow > svg{
  flex:0 0 auto;

  width:13px;
  height:13px;

  color:#9bb1cb;
}


/* =========================================================
   PROMOTION TYPES
========================================================= */

.sales-promo-types{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  padding:18px 22px;
}

.sales-promo-types article{
  position:relative;

  min-height:155px;

  display:flex;
  flex-direction:column;

  padding:15px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#ffffff;
}

.sales-promo-type-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border-radius:8px;

  background:#edf5ff;

  color:#2d74eb;
}

.sales-promo-type-icon svg{
  width:16px;
  height:16px;
}

.sales-promo-types article > small{
  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.09em;
}

.sales-promo-types article > strong{
  margin-top:5px;

  color:#0b2144;

  font-size:9px;
  line-height:1.4;
}

.sales-promo-types article > span{
  margin-top:5px;

  color:#8795a7;

  font-size:7px;
  line-height:1.45;
}

.sales-promo-types article > b{
  margin-top:auto;
  padding-top:12px;

  color:#248653;

  font-size:6px;
  letter-spacing:.08em;
}


/* =========================================================
   AUTOMATION STRIP
========================================================= */

.sales-promo-automation{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin:0 22px 22px;
  padding:15px;

  border-radius:11px;

  background:#0e305b;
}

.sales-promo-automation > div{
  min-width:90px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:6px;

  color:#d6e3f2;

  text-align:center;

  font-size:7px;
  font-weight:600;
}

.sales-promo-automation > div svg{
  width:15px;
  height:15px;

  color:#72a9ff;
}

.sales-promo-automation > svg{
  width:12px;
  height:12px;

  color:#587da8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:700px){

  .sales-promo-rule-flow{
    flex-direction:column;
  }

  .sales-promo-rule-flow > svg{
    transform:rotate(90deg);
  }

  .sales-promo-step{
    width:100%;
  }

  .sales-promo-types{
    grid-template-columns:1fr;
  }

  .sales-promo-automation{
    flex-direction:column;
  }

  .sales-promo-automation > svg{
    transform:rotate(90deg);
  }

}

/* =========================================================
   ADVANCED GIFT VOUCHER MANAGEMENT
========================================================= */

.sales-voucher-advanced{
  overflow:hidden;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}


/* HEADER */

.sales-voucher-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:24px;

  border-bottom:1px solid #e7edf5;
}

.sales-voucher-top small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.sales-voucher-top h3{
  margin:0;

  color:#0b2144;

  font-size:17px;
}

.sales-voucher-status{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;
}


/* =========================================================
   MAIN VOUCHER + BALANCE
========================================================= */

.sales-voucher-main{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;

  padding:20px 22px 0;
}


/* VISUAL VOUCHER */

.sales-voucher-card-visual{
  position:relative;

  min-height:235px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:25px;

  overflow:hidden;

  border-radius:17px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(114,169,255,.26),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #0b2850,
      #17477a
    );

  color:#ffffff;
}

.sales-voucher-card-visual:before{
  content:"";

  position:absolute;

  right:-55px;
  top:-55px;

  width:180px;
  height:180px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
}

.sales-voucher-card-visual
.sales-voucher-brand{
  position:absolute;

  left:25px;
  top:23px;

  color:#72a9ff;

  font-size:10px;
  font-weight:700;
}

.sales-voucher-card-visual > small{
  color:#72a9ff;

  font-size:7px;
  font-weight:700;
  letter-spacing:.13em;
}

.sales-voucher-card-visual > strong{
  margin-top:7px;

  font-size:38px;
  line-height:1;
}

.sales-voucher-card-visual > span{
  margin-top:9px;

  color:#c2d2e5;

  font-size:8px;
}

.sales-voucher-card-visual
.sales-voucher-code{
  margin-top:18px;
  padding-top:12px;

  border-top:1px solid rgba(255,255,255,.12);

  color:#ffffff;

  font-size:8px;
  letter-spacing:.12em;
}


/* BALANCE */

.sales-voucher-balance-panel{
  padding:22px;

  border:1px solid #dfe8f2;
  border-radius:15px;

  background:#f9fbfe;
}

.sales-voucher-balance-panel > small{
  color:#2d74eb;

  font-size:7px;
  font-weight:700;

  letter-spacing:.11em;
}

.sales-voucher-balance-panel > strong{
  display:block;

  margin-top:8px;

  color:#0b2144;

  font-size:30px;
}

.sales-voucher-progress{
  height:6px;

  margin-top:16px;

  overflow:hidden;

  border-radius:999px;

  background:#dfe9f6;
}

.sales-voucher-progress span{
  display:block;

  height:100%;

  border-radius:999px;

  background:#2d74eb;
}

.sales-voucher-balance-meta{
  margin-top:17px;
}

.sales-voucher-balance-meta > div{
  display:flex;
  justify-content:space-between;

  gap:15px;

  padding:8px 0;

  border-bottom:1px solid #e8eef5;
}

.sales-voucher-balance-meta > div:last-child{
  border-bottom:0;
}

.sales-voucher-balance-meta span{
  color:#7d8da1;

  font-size:8px;
}

.sales-voucher-balance-meta b{
  color:#0b2144;

  font-size:8px;
}


/* =========================================================
   VOUCHER OPTIONS
========================================================= */

.sales-voucher-options{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  padding:14px 22px 0;
}

.sales-voucher-options article{
  min-height:95px;

  display:flex;
  flex-direction:column;

  padding:13px;

  border:1px solid #e0e8f2;
  border-radius:10px;

  background:#ffffff;
}

.sales-voucher-options svg{
  width:17px;
  height:17px;

  margin-bottom:11px;

  color:#2d74eb;
}

.sales-voucher-options small{
  color:#8291a5;

  font-size:6px;
  font-weight:700;

  letter-spacing:.08em;
}

.sales-voucher-options strong{
  margin-top:4px;

  color:#0b2144;

  font-size:8px;
  line-height:1.35;
}


/* =========================================================
   ACTIVITY HISTORY
========================================================= */

.sales-voucher-activity{
  margin:14px 22px 0;
  padding:17px;

  border:1px solid #e0e8f2;
  border-radius:12px;

  background:#ffffff;
}

.sales-voucher-activity-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;

  padding-bottom:11px;

  border-bottom:1px solid #edf1f6;
}

.sales-voucher-activity-heading small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;

  letter-spacing:.1em;
}

.sales-voucher-activity-heading strong{
  color:#0b2144;

  font-size:10px;
}

.sales-voucher-activity-heading > span{
  color:#8291a5;

  font-size:7px;
}

.sales-voucher-history-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:11px 0;

  border-bottom:1px solid #edf1f6;
}

.sales-voucher-history-row:last-child{
  border-bottom:0;
}

.sales-voucher-history-row > div{
  display:flex;
  align-items:center;

  gap:10px;
}

.sales-voucher-history-row svg{
  width:15px;
  height:15px;

  color:#2d74eb;
}

.sales-voucher-history-row strong{
  display:block;

  color:#0b2144;

  font-size:8px;
}

.sales-voucher-history-row span{
  display:block;

  margin-top:3px;

  color:#8997a9;

  font-size:7px;
}

.sales-voucher-history-row b{
  font-size:8px;
}

.voucher-credit{
  color:#258657;
}

.voucher-debit{
  color:#d45d5d;
}


/* =========================================================
   FLOW STRIP
========================================================= */

.sales-voucher-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:7px;

  margin:14px 22px 22px;
  padding:14px;

  border-radius:11px;

  background:#0e305b;
}

.sales-voucher-flow > div{
  min-width:75px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:6px;

  color:#d6e3f2;

  text-align:center;

  font-size:7px;
  font-weight:600;
}

.sales-voucher-flow > div svg{
  width:15px;
  height:15px;

  color:#72a9ff;
}

.sales-voucher-flow > svg{
  width:12px;
  height:12px;

  color:#587da8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:700px){

  .sales-voucher-main{
    grid-template-columns:1fr;
  }

  .sales-voucher-options{
    grid-template-columns:repeat(2,1fr);
  }

  .sales-voucher-flow{
    flex-direction:column;
  }

  .sales-voucher-flow > svg{
    transform:rotate(90deg);
  }

}

@media(max-width:480px){

  .sales-voucher-options{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   FINAL CTA
========================================================= */

.sales-customer-final{
  padding:105px 0 115px;

  background:#ffffff;
}

.sales-customer-final-card{
  max-width:920px;

  margin:0 auto;
  padding:52px 38px;

  border:1px solid #d7e4f3;
  border-radius:24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(45,116,235,.11),
      transparent 30%
    ),
    #f7faff;

  text-align:center;
}

.sales-customer-final-card h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(40px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.sales-customer-final-card h2 span{
  display:block;
  color:#2d74eb;
}

.sales-customer-final-card p{
  max-width:620px;

  margin:18px auto 0;

  color:#71819a;

  font-size:13px;
  line-height:1.7;
}

.sales-customer-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .sales-customer-hero-actions{
    grid-template-columns:repeat(2,1fr);
  }

  .sales-customer-layout{
    grid-template-columns:1fr;

    gap:48px;
  }

  .sales-customer-layout-reverse
  .sales-customer-content,
  .sales-customer-layout-reverse
  .sales-customer-visual{
    order:initial;
  }

}


@media(max-width:700px){

  .sales-customer-container{
    width:min(100% - 30px,1180px);
  }

  .sales-customer-hero,
  .sales-customer-section,
  .sales-customer-final{
    padding:82px 0;
  }

  .sales-customer-hero-content h1{
    font-size:42px;
  }

  .sales-customer-feature-list{
    grid-template-columns:1fr;
  }

  .sales-pos-payments,
  .sales-crm-stats{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:520px){

  .sales-customer-hero-actions{
    grid-template-columns:1fr;
  }

  .sales-pos-payments,
  .sales-crm-stats{
    grid-template-columns:1fr;
  }

  .sales-customer-final-actions{
    flex-direction:column;
  }

  .sales-customer-final-actions .btn{
    width:100%;
    justify-content:center;
  }

}


/* =========================================================
   INVENTORY & SUPPLY PAGE
========================================================= */

.inventory-supply-page{
  background:#ffffff;
}

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

.inventory-supply-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}


/* =========================================================
   HERO
========================================================= */

.inventory-supply-hero{
  padding:105px 0 95px;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(45,116,235,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f4f8fd 100%
    );
}

.inventory-supply-hero-content{
  max-width:920px;
  margin:0 auto;

  text-align:center;
}

.inventory-supply-hero-content h1{
  margin:0;

  color:#0b2144;

  font-size:clamp(48px,5vw,66px);
  line-height:1.04;

  font-weight:700;
  letter-spacing:-.045em;
}

.inventory-supply-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.inventory-supply-hero-content > p{
  max-width:700px;
  margin:22px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}


/* HERO NAV */

.inventory-supply-hero-nav{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:38px;
}

.inventory-supply-hero-nav a{
  min-height:105px;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  padding:18px;

  border:1px solid #dce7f5;
  border-radius:14px;

  background:#ffffff;

  text-decoration:none;
  text-align:left;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.inventory-supply-hero-nav a span{
  color:#2d74eb;

  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.inventory-supply-hero-nav a strong{
  margin-top:8px;

  color:#0b2144;

  font-size:12px;
  line-height:1.35;
}

.inventory-supply-hero-nav a:hover{
  transform:translateY(-3px);

  border-color:#bfd5f4;

  box-shadow:
    0 12px 30px rgba(20,55,100,.07);
}


/* =========================================================
   COMMON SECTION
========================================================= */

.inventory-supply-section{
  padding:115px 0 125px;

  background:#ffffff;

  scroll-margin-top:120px;
}

.inventory-supply-alt{
  background:
    linear-gradient(
      180deg,
      #f5f9fe 0%,
      #f8fbff 100%
    );
}

.inventory-supply-layout{
  display:grid;

  grid-template-columns:
    minmax(0,.78fr)
    minmax(0,1.22fr);

  gap:70px;

  align-items:center;
}

.inventory-supply-layout-reverse
.inventory-supply-content{
  order:2;
}

.inventory-supply-layout-reverse
.inventory-supply-visual{
  order:1;
}


/* =========================================================
   CONTENT
========================================================= */

.inventory-supply-number{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  margin-bottom:18px;

  border:1px solid #d4e3f5;
  border-radius:50%;

  background:#f5f9ff;

  color:#2d74eb;

  font-size:9px;
  font-weight:700;
}

.inventory-supply-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,52px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.inventory-supply-content h2 span{
  display:block;
  color:#2d74eb;
}

.inventory-supply-content > p{
  max-width:540px;

  margin:20px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.75;
}


/* FEATURE LIST */

.inventory-supply-feature-list{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:11px 18px;

  margin:26px 0 0;
  padding:0;

  list-style:none;
}

.inventory-supply-feature-list li{
  position:relative;

  padding-left:19px;

  color:#60738c;

  font-size:10px;
  line-height:1.5;
}

.inventory-supply-feature-list li:before{
  content:"";

  position:absolute;

  left:0;
  top:6px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#2d74eb;
}


/* =========================================================
   INVENTORY DASHBOARD
========================================================= */

.inventory-dashboard{
  padding:26px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.inventory-dashboard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding-bottom:18px;

  border-bottom:1px solid #e7edf5;
}

.inventory-dashboard-top small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.inventory-dashboard-top strong{
  color:#0b2144;

  font-size:16px;
}

.inventory-dashboard-top > span{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;
}


/* KPI CARDS */

.inventory-kpis{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:9px;

  margin-top:18px;
}

.inventory-kpis > div{
  padding:15px;

  border:1px solid #e0e8f2;
  border-radius:10px;

  background:#f9fbfe;
}

.inventory-kpis small{
  display:block;

  margin-bottom:6px;

  color:#8291a5;

  font-size:7px;
}

.inventory-kpis strong{
  color:#0b2144;

  font-size:15px;
}


/* LOCATION LIST */

.inventory-location-list{
  margin-top:16px;

  border:1px solid #e0e8f2;
  border-radius:12px;

  overflow:hidden;
}

.inventory-location-list > div{
  display:grid;

  grid-template-columns:1fr 90px 75px;

  align-items:center;

  gap:10px;

  padding:12px 14px;

  border-bottom:1px solid #edf1f6;
}

.inventory-location-list > div:last-child{
  border-bottom:0;
}

.inventory-list-heading{
  background:#f5f8fc;

  color:#8291a5;

  font-size:7px;
  font-weight:600;
}

.inventory-location-list strong{
  color:#0b2144;

  font-size:8px;
}

.inventory-location-list span{
  color:#71819a;

  font-size:8px;
}

.inventory-location-list b{
  color:#258657;

  font-size:7px;
}

.inventory-location-list .inventory-warning{
  color:#d89222;
}


/* ALERT STRIP */

.inventory-alert-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-top:15px;
  padding:13px 15px;

  border-radius:10px;

  background:#fff7e8;
}

.inventory-alert-strip > div{
  display:flex;
  align-items:center;

  gap:8px;

  color:#8f6d25;

  font-size:8px;
}

.inventory-alert-strip svg{
  width:14px;
  height:14px;
}

.inventory-alert-strip strong{
  color:#a56f00;

  font-size:7px;
}


/* =========================================================
   PURCHASING WORKFLOW
========================================================= */

.purchasing-workflow{
  padding:25px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.purchasing-workflow-heading{
  padding-bottom:17px;

  border-bottom:1px solid #e7edf5;
}

.purchasing-workflow-heading small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.purchasing-workflow-heading strong{
  color:#0b2144;

  font-size:16px;
}


/* FLOW */

.purchasing-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-top:20px;
}

.purchasing-flow > div{
  flex:1;

  min-height:110px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:12px;

  border:1px solid #e0e8f2;
  border-radius:10px;

  background:#f9fbfe;

  text-align:center;
}

.purchasing-flow > div svg{
  width:19px;
  height:19px;

  margin-bottom:9px;

  color:#2d74eb;
}

.purchasing-flow > div span{
  color:#8291a5;

  font-size:7px;
}

.purchasing-flow > div strong{
  margin-top:4px;

  color:#0b2144;

  font-size:8px;
}

.purchasing-flow > svg{
  flex:0 0 auto;

  width:13px;
  height:13px;

  color:#9eb2ca;
}


/* DETAILS */

.purchasing-order-details{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  margin-top:16px;
}

.purchasing-order-details > div{
  padding:13px;

  border-radius:9px;

  background:#f5f8fc;
}

.purchasing-order-details small{
  display:block;

  color:#8392a5;

  font-size:6px;
}

.purchasing-order-details strong{
  display:block;

  margin-top:5px;

  color:#0b2144;

  font-size:8px;
}


/* STATUS LIST */

.purchasing-status-list{
  margin-top:14px;

  border:1px solid #e0e8f2;
  border-radius:10px;

  overflow:hidden;
}

.purchasing-status-list > div{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:11px 13px;

  border-bottom:1px solid #edf1f6;
}

.purchasing-status-list > div:last-child{
  border-bottom:0;
}

.purchasing-status-list span{
  color:#60738c;

  font-size:8px;
}

.purchasing-status-list b{
  color:#258657;

  font-size:7px;
}

.purchasing-status-list > div:last-child b{
  color:#d89222;
}


/* =========================================================
   WAREHOUSE MAP
========================================================= */

.warehouse-map{
  padding:25px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.warehouse-map-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  padding-bottom:17px;

  border-bottom:1px solid #e7edf5;
}

.warehouse-map-header small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.warehouse-map-header strong{
  color:#0b2144;

  font-size:16px;
}

.warehouse-map-header > span{
  padding:6px 9px;

  border-radius:999px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
}


/* ZONES */

.warehouse-zones{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:18px;
}

.warehouse-zones article{
  min-height:145px;

  display:flex;
  flex-direction:column;

  padding:15px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#f9fbfe;
}

.warehouse-zone-icon{
  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border-radius:9px;

  background:#eaf3ff;

  color:#2d74eb;
}

.warehouse-zone-icon svg{
  width:16px;
  height:16px;
}

.warehouse-zones small{
  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.09em;
}

.warehouse-zones strong{
  margin-top:5px;

  color:#0b2144;

  font-size:9px;
}

.warehouse-zones span{
  margin-top:auto;
  padding-top:14px;

  color:#8291a5;

  font-size:7px;
}


/* WAREHOUSE FLOW */

.warehouse-flow{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:16px;
  padding:14px;

  border-radius:10px;

  background:#0e305b;
}

.warehouse-flow span{
  color:#d6e3f2;

  font-size:7px;
  font-weight:600;
}

.warehouse-flow svg{
  width:11px;
  height:11px;

  color:#5f83ae;
}


/* =========================================================
   TRANSFER CONTROL
========================================================= */

.transfer-control{
  padding:25px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.transfer-control-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  padding-bottom:17px;

  border-bottom:1px solid #e7edf5;
}

.transfer-control-heading small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.transfer-control-heading strong{
  color:#0b2144;

  font-size:16px;
}

.transfer-control-heading > span{
  padding:6px 9px;

  border-radius:999px;

  background:#fff5df;

  color:#c88600;

  font-size:7px;
  font-weight:700;
}


/* ROUTE */

.transfer-route{
  display:grid;

  grid-template-columns:1fr 1.2fr 1fr;

  gap:15px;

  align-items:center;

  margin-top:22px;
}

.transfer-location{
  min-height:150px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:18px;

  border:1px solid #e0e8f2;
  border-radius:12px;

  background:#f9fbfe;

  text-align:center;
}

.transfer-location svg{
  width:22px;
  height:22px;

  margin-bottom:12px;

  color:#2d74eb;
}

.transfer-location small{
  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.transfer-location strong{
  margin-top:5px;

  color:#0b2144;

  font-size:10px;
}

.transfer-location span{
  margin-top:4px;

  color:#8493a6;

  font-size:7px;
}


/* MIDDLE ROUTE */

.transfer-route-middle{
  text-align:center;
}

.transfer-route-line{
  position:relative;

  height:45px;
}

.transfer-route-line:before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:50%;

  height:1px;

  background:#bdd3ef;
}

.transfer-route-line span{
  position:absolute;

  left:0;
  top:50%;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#2d74eb;

  transform:translateY(-50%);
}

.transfer-route-line svg{
  position:absolute;

  left:50%;
  top:50%;

  width:22px;
  height:22px;

  padding:4px;

  border-radius:50%;

  background:#ffffff;

  color:#2d74eb;

  transform:translate(-50%,-50%);
}

.transfer-route-middle small{
  color:#71819a;

  font-size:7px;
}


/* SUMMARY */

.transfer-summary{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  margin-top:18px;
}

.transfer-summary > div{
  padding:13px;

  border-radius:9px;

  background:#f5f8fc;
}

.transfer-summary small{
  display:block;

  color:#8291a5;

  font-size:6px;
}

.transfer-summary strong{
  display:block;

  margin-top:5px;

  color:#0b2144;

  font-size:9px;
}


/* TIMELINE */

.transfer-timeline{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:17px;
  padding-top:16px;

  border-top:1px solid #edf1f6;
}

.transfer-timeline > div{
  position:relative;

  display:flex;
  align-items:flex-start;

  gap:8px;
}

.transfer-timeline > div > span{
  flex:0 0 auto;

  width:9px;
  height:9px;

  margin-top:2px;

  border:2px solid #cad6e5;
  border-radius:50%;

  background:#fff;
}

.transfer-timeline .complete > span{
  border-color:#2d74eb;
  background:#2d74eb;
}

.transfer-timeline .active > span{
  border-color:#d89b28;
  background:#fff5df;
}

.transfer-timeline strong{
  display:block;

  color:#0b2144;

  font-size:7px;
}

.transfer-timeline small{
  display:block;

  margin-top:3px;

  color:#8a98aa;

  font-size:6px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.inventory-supply-final{
  padding:105px 0 115px;

  background:#ffffff;
}

.inventory-supply-final-card{
  max-width:920px;

  margin:0 auto;
  padding:52px 38px;

  border:1px solid #d7e4f3;
  border-radius:24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(45,116,235,.11),
      transparent 30%
    ),
    #f7faff;

  text-align:center;
}

.inventory-supply-final-card h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(40px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.inventory-supply-final-card h2 span{
  display:block;

  color:#2d74eb;
}

.inventory-supply-final-card p{
  max-width:620px;

  margin:18px auto 0;

  color:#71819a;

  font-size:13px;
  line-height:1.7;
}

.inventory-supply-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:28px;
}


/* =========================================================
   ANCHOR POSITION
========================================================= */

#inventory,
#purchasing,
#warehouse,
#transfers{
  scroll-margin-top:120px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .inventory-supply-hero-nav{
    grid-template-columns:repeat(2,1fr);
  }

  .inventory-supply-layout{
    grid-template-columns:1fr;

    gap:48px;
  }

  .inventory-supply-layout-reverse
  .inventory-supply-content,
  .inventory-supply-layout-reverse
  .inventory-supply-visual{
    order:initial;
  }

}


@media(max-width:760px){

  .inventory-supply-container{
    width:min(100% - 30px,1180px);
  }

  .inventory-supply-hero,
  .inventory-supply-section,
  .inventory-supply-final{
    padding:82px 0;
  }

  .inventory-supply-hero-content h1{
    font-size:42px;
  }

  .inventory-supply-feature-list{
    grid-template-columns:1fr;
  }

  .inventory-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .purchasing-flow{
    flex-direction:column;
  }

  .purchasing-flow > div{
    width:100%;
  }

  .purchasing-flow > svg{
    transform:rotate(90deg);
  }

  .purchasing-order-details{
    grid-template-columns:repeat(2,1fr);
  }

  .warehouse-zones{
    grid-template-columns:repeat(2,1fr);
  }

  .warehouse-flow{
    flex-wrap:wrap;
  }

  .transfer-route{
    grid-template-columns:1fr;
  }

  .transfer-route-line{
    width:120px;
    margin:0 auto;
  }

  .transfer-summary,
  .transfer-timeline{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:520px){

  .inventory-supply-hero-nav{
    grid-template-columns:1fr;
  }

  .inventory-kpis,
  .purchasing-order-details,
  .warehouse-zones,
  .transfer-summary,
  .transfer-timeline{
    grid-template-columns:1fr;
  }

  .inventory-location-list > div{
    grid-template-columns:1fr 65px;
  }

  .inventory-location-list > div > *:last-child{
    grid-column:1/-1;
  }

  .inventory-supply-final-actions{
    flex-direction:column;
  }

  .inventory-supply-final-actions .btn{
    width:100%;
    justify-content:center;
  }

}

/* =========================================================
   INTELLIGENCE PAGE
========================================================= */

.intelligence-page{
  background:#ffffff;
}

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

.intelligence-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.intelligence-section-heading{
  max-width:820px;
  margin:0 auto 50px;
  text-align:center;
}

.intelligence-section-heading h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.intelligence-section-heading h2 span{
  display:block;
  color:#2d74eb;
}

.intelligence-section-heading p{
  max-width:670px;
  margin:18px auto 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}


/* =========================================================
   HERO
========================================================= */

.intelligence-hero{
  padding:105px 0 100px;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(45,116,235,.12),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f4f8fd 100%
    );
}

.intelligence-hero-layout{
  display:grid;

  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);

  gap:68px;
  align-items:center;
}

.intelligence-hero-content h1{
  margin:0;

  color:#0b2144;

  font-size:clamp(50px,5vw,68px);
  line-height:1.03;

  font-weight:700;
  letter-spacing:-.045em;
}

.intelligence-hero-content h1 span{
  display:block;
  color:#2d74eb;
}

.intelligence-hero-content > p{
  max-width:590px;

  margin:24px 0 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}

.intelligence-hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:28px;
}

.intelligence-hero-tags{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:30px;
}

.intelligence-hero-tags span{
  padding:8px 10px;

  border:1px solid #d9e5f3;
  border-radius:8px;

  background:#ffffff;

  color:#61758d;

  font-size:8px;
  font-weight:600;
}


/* =========================================================
   HERO MINI DASHBOARD
========================================================= */

.intelligence-mini-dashboard{
  padding:24px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 24px 58px rgba(20,55,100,.09);
}

.intelligence-mini-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding-bottom:17px;

  border-bottom:1px solid #e7edf5;
}

.intelligence-mini-top small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.intelligence-mini-top strong{
  color:#0b2144;

  font-size:15px;
}

.intelligence-mini-top > span{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;
}

.intelligence-mini-kpis{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:9px;

  margin-top:17px;
}

.intelligence-mini-kpis > div{
  padding:15px;

  border:1px solid #e0e8f2;
  border-radius:10px;

  background:#f9fbfe;
}

.intelligence-mini-kpis small{
  display:block;

  margin-bottom:6px;

  color:#8291a5;

  font-size:7px;
}

.intelligence-mini-kpis strong{
  display:block;

  color:#0b2144;

  font-size:16px;
}

.intelligence-mini-kpis span{
  display:block;

  margin-top:5px;

  font-size:7px;
  font-weight:700;
}

.metric-positive{
  color:#258657;
}

.metric-warning{
  color:#d28c1f;
}

.intelligence-mini-chart{
  margin-top:16px;

  padding:15px;

  border-radius:12px;

  background:#f7faff;
}

.mini-chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;
}

.mini-chart-header span{
  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.1em;
}

.mini-chart-header strong{
  color:#60738c;

  font-size:8px;
}

.intelligence-mini-chart svg{
  width:100%;
  height:145px;

  margin-top:8px;
}


/* =========================================================
   EXECUTIVE DASHBOARD
========================================================= */

.intelligence-dashboard-section{
  padding:115px 0 125px;

  background:#ffffff;

  scroll-margin-top:120px;
}

.executive-dashboard{
  padding:25px;

  border:1px solid #d7e4f3;
  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f7faff 100%
    );

  box-shadow:
    0 22px 55px rgba(20,55,100,.06);
}

.executive-dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding-bottom:18px;

  border-bottom:1px solid #e6edf5;
}

.executive-dashboard-header small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.executive-dashboard-header strong{
  color:#0b2144;

  font-size:16px;
}

.executive-dashboard-filters{
  display:flex;
  flex-wrap:wrap;

  gap:6px;
}

.executive-dashboard-filters span{
  padding:7px 10px;

  border:1px solid #dfe7f1;
  border-radius:7px;

  background:#ffffff;

  color:#6c7f97;

  font-size:7px;
}

.executive-dashboard-filters .active{
  border-color:#bcd4f5;
  background:#edf5ff;
  color:#1764db;
  font-weight:700;
}


/* KPI GRID */

.executive-kpi-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:18px;
}

.executive-kpi-card{
  padding:17px;

  border:1px solid #e0e8f2;
  border-radius:12px;

  background:#ffffff;
}

.executive-kpi-card small{
  display:block;

  margin-bottom:6px;

  color:#8392a5;

  font-size:7px;
  font-weight:600;
  letter-spacing:.06em;
}

.executive-kpi-card strong{
  display:block;

  color:#0b2144;

  font-size:18px;
}

.executive-kpi-card > span{
  display:inline-block;

  margin-top:8px;
  padding:5px 7px;

  border-radius:999px;

  font-size:7px;
  font-weight:700;
}

.kpi-positive{
  background:#e9f6ee;
  color:#258657;
}

.kpi-warning{
  background:#fff5df;
  color:#c88600;
}

.executive-kpi-card p{
  margin:8px 0 0;

  color:#8795a7;

  font-size:7px;
  line-height:1.45;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.executive-dashboard-grid{
  display:grid;

  grid-template-columns:1.35fr .65fr;

  gap:12px;

  margin-top:12px;
}

.dashboard-panel{
  padding:18px;

  border:1px solid #e0e8f2;
  border-radius:13px;

  background:#ffffff;
}

.dashboard-panel-sales{
  grid-row:span 2;
}

.dashboard-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;
}

.dashboard-panel-heading small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.11em;
}

.dashboard-panel-heading strong{
  color:#0b2144;

  font-size:11px;
}

.dashboard-panel-heading > span{
  color:#258657;

  font-size:8px;
  font-weight:700;
}


/* SALES CHART */

.dashboard-chart-area{
  display:grid;

  grid-template-columns:42px 1fr;

  gap:8px;

  margin-top:18px;
}

.dashboard-chart-y{
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:2px 0 18px;
}

.dashboard-chart-y span{
  color:#9aa7b7;

  font-size:6px;
}

.dashboard-chart-main svg{
  width:100%;
  height:230px;
}

.dashboard-chart-x{
  display:flex;
  justify-content:space-between;

  margin-top:3px;
}

.dashboard-chart-x span{
  color:#8a98aa;

  font-size:6px;
}


/* =========================================================
   LOCATION BARS
========================================================= */

.dashboard-location-bars{
  margin-top:16px;
}

.dashboard-location-bars > div{
  display:grid;

  grid-template-columns:72px 1fr 58px;

  gap:8px;

  align-items:center;

  margin-bottom:12px;
}

.dashboard-location-bars > div:last-child{
  margin-bottom:0;
}

.dashboard-location-bars > div > span{
  color:#60738c;

  font-size:7px;
}

.dashboard-location-bars > div > div{
  height:7px;

  overflow:hidden;

  border-radius:999px;

  background:#e8eef6;
}

.dashboard-location-bars i{
  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #2d74eb,
      #69a4ff
    );
}

.dashboard-location-bars strong{
  color:#0b2144;

  font-size:7px;

  text-align:right;
}


/* =========================================================
   DONUT
========================================================= */

.dashboard-donut-wrap{
  display:flex;
  align-items:center;

  gap:20px;

  margin-top:18px;
}

.dashboard-donut{
  flex:0 0 135px;

  width:135px;
  height:135px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #2d74eb 0 38%,
      #7b61d1 38% 65%,
      #37a777 65% 86%,
      #ef9a3d 86% 100%
    );

  position:relative;
}

.dashboard-donut:after{
  content:"";

  position:absolute;

  inset:23px;

  border-radius:50%;

  background:#ffffff;
}

.dashboard-donut > div{
  position:relative;
  z-index:2;

  text-align:center;
}

.dashboard-donut strong{
  display:block;

  color:#0b2144;

  font-size:14px;
}

.dashboard-donut span{
  color:#8a98aa;

  font-size:6px;
}

.dashboard-donut-legend{
  flex:1;
}

.dashboard-donut-legend > div{
  display:flex;
  align-items:center;

  gap:8px;

  margin-bottom:9px;
}

.dashboard-donut-legend > div:last-child{
  margin-bottom:0;
}

.dashboard-donut-legend > div > span{
  width:8px;
  height:8px;

  border-radius:50%;
}

.legend-blue{
  background:#2d74eb;
}

.legend-purple{
  background:#7b61d1;
}

.legend-green{
  background:#37a777;
}

.legend-orange{
  background:#ef9a3d;
}

.dashboard-donut-legend p{
  flex:1;

  display:flex;
  justify-content:space-between;

  margin:0;
}

.dashboard-donut-legend strong{
  color:#5f738c;

  font-size:7px;
}

.dashboard-donut-legend small{
  color:#0b2144;

  font-size:7px;
  font-weight:700;
}


/* =========================================================
   ALERTS
========================================================= */

.dashboard-panel-alerts .dashboard-panel-heading > span{
  padding:5px 8px;

  border-radius:999px;

  background:#fff0f0;

  color:#d55e5e;
}

.dashboard-alert-list{
  margin-top:15px;
}

.dashboard-alert-list article{
  display:flex;
  gap:10px;

  padding:12px;

  border-radius:9px;

  margin-bottom:8px;
}

.dashboard-alert-list article:last-child{
  margin-bottom:0;
}

.dashboard-alert-list svg{
  flex:0 0 auto;

  width:16px;
  height:16px;
}

.dashboard-alert-list strong{
  display:block;

  color:#0b2144;

  font-size:8px;
}

.dashboard-alert-list span{
  display:block;

  margin-top:4px;

  color:#71819a;

  font-size:7px;
  line-height:1.45;
}

.alert-critical{
  background:#fff0f0;
}

.alert-critical svg{
  color:#d95d5d;
}

.alert-warning{
  background:#fff7e8;
}

.alert-warning svg{
  color:#d28c1f;
}

.alert-info{
  background:#edf5ff;
}

.alert-info svg{
  color:#2d74eb;
}


/* =========================================================
   DECISION INTELLIGENCE
========================================================= */

.intelligence-decision-section{
  padding:115px 0 125px;

  background:
    linear-gradient(
      180deg,
      #f4f8fd 0%,
      #f8fbff 100%
    );
}

.intelligence-decision-layout{
  display:grid;

  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);

  gap:65px;

  align-items:center;
}

.intelligence-decision-content h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(38px,4vw,52px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.intelligence-decision-content h2 span{
  display:block;
  color:#2d74eb;
}

.intelligence-decision-content > p{
  margin:20px 0 0;

  color:#71819a;

  font-size:13px;
  line-height:1.75;
}

.intelligence-feature-list{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:10px 18px;

  margin:25px 0 0;
  padding:0;

  list-style:none;
}

.intelligence-feature-list li{
  position:relative;

  padding-left:18px;

  color:#60738c;

  font-size:9px;
}

.intelligence-feature-list li:before{
  content:"";

  position:absolute;

  left:0;
  top:5px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#2d74eb;
}


/* DECISION BOARD */

.decision-intelligence-board{
  padding:23px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.decision-intelligence-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:16px;

  border-bottom:1px solid #e7edf5;
}

.decision-intelligence-heading small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.decision-intelligence-heading strong{
  color:#0b2144;

  font-size:14px;
}

.decision-intelligence-heading > span{
  color:#71819a;

  font-size:7px;
}

.decision-insight-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:10px;

  margin-top:16px;
}

.decision-insight{
  min-height:175px;

  display:flex;
  flex-direction:column;

  padding:16px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#ffffff;
}

.decision-insight-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border-radius:8px;
}

.decision-insight-icon svg{
  width:16px;
  height:16px;
}

.decision-insight > small{
  font-size:6px;
  font-weight:700;
  letter-spacing:.09em;
}

.decision-insight > strong{
  margin-top:5px;

  color:#0b2144;

  font-size:9px;
}

.decision-insight p{
  margin:7px 0 0;

  color:#7c8ca0;

  font-size:7px;
  line-height:1.45;
}

.decision-insight > b{
  margin-top:auto;
  padding-top:12px;

  font-size:7px;
}

.decision-insight.positive{
  background:#f2fbf6;
}

.decision-insight.positive
.decision-insight-icon{
  background:#dff5e8;
  color:#258657;
}

.decision-insight.positive > small,
.decision-insight.positive > b{
  color:#258657;
}

.decision-insight.warning{
  background:#fffaf0;
}

.decision-insight.warning
.decision-insight-icon{
  background:#fff0ce;
  color:#c88600;
}

.decision-insight.warning > small,
.decision-insight.warning > b{
  color:#c88600;
}

.decision-insight.negative{
  background:#fff5f5;
}

.decision-insight.negative
.decision-insight-icon{
  background:#ffe4e4;
  color:#d65d5d;
}

.decision-insight.negative > small,
.decision-insight.negative > b{
  color:#d65d5d;
}

.decision-insight.info{
  background:#f2f7ff;
}

.decision-insight.info
.decision-insight-icon{
  background:#e3efff;
  color:#2d74eb;
}

.decision-insight.info > small,
.decision-insight.info > b{
  color:#2d74eb;
}


/* =========================================================
   REPORTING SECTION
========================================================= */

.intelligence-report-section{
  padding:115px 0 125px;

  background:#ffffff;
}

.sales-report-window{
  overflow:hidden;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.07);
}

.sales-report-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:22px;

  border-bottom:1px solid #e6edf5;
}

.sales-report-header small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.sales-report-header strong{
  color:#0b2144;

  font-size:14px;
}

.sales-report-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;
}

.sales-report-actions > span{
  color:#71819a;

  font-size:7px;
}

.sales-report-actions button{
  display:flex;
  align-items:center;

  gap:5px;

  padding:7px 9px;

  border:1px solid #dfe7f1;
  border-radius:7px;

  background:#ffffff;

  color:#60738c;

  font-family:inherit;
  font-size:7px;
}

.sales-report-actions svg{
  width:12px;
  height:12px;

  color:#2d74eb;
}


/* REPORT SUMMARY */

.sales-report-summary{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  padding:16px 22px;
}

.sales-report-summary > div{
  padding:15px;

  border-radius:10px;

  background:#f6f9fd;
}

.sales-report-summary small{
  display:block;

  color:#8392a5;

  font-size:7px;
}

.sales-report-summary strong{
  display:block;

  margin-top:5px;

  color:#0b2144;

  font-size:14px;
}


/* TABLE */

.sales-report-table{
  margin:0 22px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  overflow:hidden;
}

.sales-report-row{
  display:grid;

  grid-template-columns:1.2fr .6fr 1fr 1fr .7fr .7fr;

  gap:10px;

  align-items:center;

  padding:12px 14px;

  border-bottom:1px solid #edf1f6;
}

.sales-report-row:last-child{
  border-bottom:0;
}

.sales-report-table-head{
  background:#f5f8fc;

  color:#8291a5;

  font-size:7px;
  font-weight:600;
}

.sales-report-row strong{
  color:#0b2144;

  font-size:8px;
}

.sales-report-row span{
  color:#667b93;

  font-size:8px;
}

.sales-report-row b{
  font-size:8px;
}

.report-up{
  color:#258657;
}

.report-down{
  color:#d65d5d;
}


/* REPORT INSIGHT */

.sales-report-insight{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin:16px 22px 22px;
  padding:14px 16px;

  border-radius:10px;

  background:#edf5ff;
}

.sales-report-insight > div{
  display:flex;
  align-items:center;

  gap:10px;
}

.sales-report-insight svg{
  width:18px;
  height:18px;

  color:#2d74eb;
}

.sales-report-insight small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.09em;
}

.sales-report-insight strong{
  color:#0b2144;

  font-size:8px;
}

.sales-report-insight > span{
  color:#526a87;

  font-size:7px;

  text-align:right;
}


/* =========================================================
   FORECAST SECTION
========================================================= */

.intelligence-forecast-section{
  padding:115px 0 125px;

  background:
    linear-gradient(
      180deg,
      #f5f9fe 0%,
      #f8fbff 100%
    );
}

.intelligence-forecast-layout{
  display:grid;

  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);

  gap:65px;

  align-items:center;
}

.forecast-board{
  padding:23px;

  border:1px solid #d8e4f2;
  border-radius:22px;

  background:#ffffff;

  box-shadow:
    0 22px 52px rgba(20,55,100,.08);
}

.forecast-board-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid #e7edf5;
}

.forecast-board-heading small{
  display:block;

  margin-bottom:5px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.forecast-board-heading strong{
  color:#0b2144;

  font-size:14px;
}

.forecast-board-heading > span{
  padding:6px 8px;

  border-radius:999px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
}

.forecast-chart{
  height:260px;

  margin-top:18px;
  padding:18px;

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      #f8fbff,
      #f2f7fd
    );
}

.forecast-bars{
  height:100%;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:12px;
}

.forecast-bars > div{
  flex:1;

  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;

  gap:8px;
}

.forecast-bars i{
  width:100%;

  max-width:38px;

  display:block;

  border-radius:8px 8px 3px 3px;

  background:
    linear-gradient(
      180deg,
      #69a4ff,
      #2d74eb
    );
}

.forecast-bars span{
  color:#71819a;

  font-size:7px;
}

.forecast-peak i{
  background:
    linear-gradient(
      180deg,
      #8b6ee8,
      #6244cb
    );
}

.forecast-peak span{
  color:#6244cb;

  font-weight:700;
}

.forecast-summary{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  margin-top:14px;
}

.forecast-summary > div{
  padding:13px;

  border-radius:9px;

  background:#f6f9fd;
}

.forecast-summary small{
  display:block;

  color:#8392a5;

  font-size:6px;
}

.forecast-summary strong{
  display:block;

  margin-top:5px;

  color:#0b2144;

  font-size:9px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.intelligence-final{
  padding:105px 0 115px;

  background:#ffffff;
}

.intelligence-final-card{
  max-width:920px;

  margin:0 auto;
  padding:52px 38px;

  border:1px solid #d7e4f3;
  border-radius:24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(45,116,235,.11),
      transparent 30%
    ),
    #f7faff;

  text-align:center;
}

.intelligence-final-card h2{
  margin:0;

  color:#0b2144;

  font-size:clamp(40px,4vw,54px);
  line-height:1.07;

  font-weight:700;
  letter-spacing:-.04em;
}

.intelligence-final-card h2 span{
  display:block;

  color:#2d74eb;
}

.intelligence-final-card p{
  max-width:630px;

  margin:18px auto 0;

  color:#71819a;

  font-size:13px;
  line-height:1.7;
}

.intelligence-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .intelligence-hero-layout,
  .intelligence-decision-layout,
  .intelligence-forecast-layout{
    grid-template-columns:1fr;
  }

  .executive-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .executive-dashboard-grid{
    grid-template-columns:1fr;
  }

  .dashboard-panel-sales{
    grid-row:auto;
  }

}


@media(max-width:760px){

  .intelligence-container{
    width:min(100% - 30px,1180px);
  }

  .intelligence-hero,
  .intelligence-dashboard-section,
  .intelligence-decision-section,
  .intelligence-report-section,
  .intelligence-forecast-section,
  .intelligence-final{
    padding:82px 0;
  }

  .intelligence-hero-content h1{
    font-size:42px;
  }

  .intelligence-mini-kpis,
  .executive-kpi-grid,
  .sales-report-summary,
  .forecast-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .decision-insight-grid{
    grid-template-columns:1fr;
  }

  .intelligence-feature-list{
    grid-template-columns:1fr;
  }

  .dashboard-donut-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .sales-report-row{
    grid-template-columns:1.1fr .7fr 1fr .7fr;
  }

  .sales-report-row > *:nth-child(4),
  .sales-report-row > *:nth-child(5){
    display:none;
  }

  .sales-report-insight{
    flex-direction:column;
    align-items:flex-start;
  }

  .sales-report-insight > span{
    text-align:left;
  }

}


@media(max-width:520px){

  .intelligence-mini-kpis,
  .executive-kpi-grid,
  .sales-report-summary,
  .forecast-summary{
    grid-template-columns:1fr;
  }

  .executive-dashboard-header,
  .sales-report-header,
  .forecast-board-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-chart-area{
    grid-template-columns:1fr;
  }

  .dashboard-chart-y{
    display:none;
  }

  .dashboard-location-bars > div{
    grid-template-columns:70px 1fr;
  }

  .dashboard-location-bars strong{
    grid-column:2;
    text-align:left;
  }

  .sales-report-row{
    grid-template-columns:1fr 1fr;
  }

  .sales-report-row > *:nth-child(n+3){
    display:none;
  }

  .forecast-chart{
    height:220px;
  }

  .intelligence-final-actions{
    flex-direction:column;
  }

  .intelligence-final-actions .btn{
    width:100%;
    justify-content:center;
  }

}

/* =========================================================
   CUSTOM SOLUTION PROCESS
========================================================= */

.custom-solution-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 0 28px;
}

.custom-solution-flow span {
    padding: 9px 13px;
    border: 1px solid #d7e3f5;
    border-radius: 8px;
    background: #f5f9ff;
    color: #123765;
    font-size: 12px;
    font-weight: 700;
}

.custom-solution-flow b {
    color: #2d74eb;
    font-size: 14px;
    font-weight: 500;
}

/* =========================================================
   ERP PLATFORM
========================================================= */

.erp-platform-page {
  background: #ffffff;
}

.erp-platform-container {
  width: min(1380px, calc(100% - 80px));
  margin: 0 auto;
}

.erp-platform-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #2d74eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}


/* =========================================================
   HERO
========================================================= */

.erp-platform-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;

  background:
    radial-gradient(circle at 82% 30%,
      rgba(45,116,235,.12),
      transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f3f8ff 100%);
}

.erp-platform-hero-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 85px;
  align-items: center;
}


/* HERO COPY */

.erp-platform-hero-content h1 {
  max-width: 670px;
  margin: 0;

  color: #071d40;

  font-size: clamp(52px,5vw,76px);
  line-height: .99;

  font-weight: 700;
  letter-spacing: -.055em;
}

.erp-platform-hero-content h1 span {
  display: block;
  color: #2d74eb;
}

.erp-platform-hero-lead {
  max-width: 650px;
  margin: 28px 0 0;

  color: #71809a;

  font-size: 17px;
  line-height: 1.75;
}


/* BUTTONS */

.erp-platform-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

.erp-platform-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 52px;
  padding: 0 22px;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition: .25s ease;
}

.erp-platform-btn svg {
  width: 17px;
  height: 17px;
}

.erp-platform-btn-primary {
  background: #2d74eb;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(45,116,235,.20);
}

.erp-platform-btn-primary:hover {
  transform: translateY(-2px);
  background: #1f64d7;
}

.erp-platform-btn-secondary {
  border: 1px solid #cadbf2;
  background: #ffffff;
  color: #123765;
}

.erp-platform-btn-secondary:hover {
  border-color: #2d74eb;
  color: #2d74eb;
}


/* HERO POINTS */

.erp-platform-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;

  margin-top: 34px;
}

.erp-platform-hero-points span {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #4f6481;

  font-size: 12px;
  font-weight: 600;
}

.erp-platform-hero-points svg {
  width: 17px;
  height: 17px;
  color: #2d74eb;
}


/* =========================================================
   HERO ERP WINDOW
========================================================= */

.erp-platform-hero-visual {
  position: relative;
}

.erp-hero-window {
  overflow: hidden;

  border: 1px solid #d5e2f3;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 35px 80px rgba(24,67,120,.14);
}

.erp-hero-window-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 14px 18px;

  border-bottom: 1px solid #e5edf7;
  background: #f8fbff;
}

.erp-hero-window-header > div {
  display: flex;
  gap: 6px;
}

.erp-hero-window-header > div span {
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #cad6e6;
}

.erp-hero-window-header small {
  color: #8090a6;
  font-size: 9px;
}

.erp-hero-window-header b {
  justify-self: end;

  padding: 5px 8px;

  border-radius: 20px;

  background: #e8f7ef;
  color: #20895a;

  font-size: 8px;
}


/* DASHBOARD */

.erp-hero-dashboard {
  padding: 22px;
}

.erp-hero-kpis {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.erp-hero-kpis article {
  padding: 17px;

  border: 1px solid #e0e9f5;
  border-radius: 12px;

  background: #ffffff;
}

.erp-hero-kpis span {
  display: block;
  margin-bottom: 8px;

  color: #8290a5;
  font-size: 9px;
}

.erp-hero-kpis strong {
  display: block;

  color: #0b2347;

  font-size: 20px;
}

.erp-hero-kpis small {
  display: block;
  margin-top: 7px;

  color: #2d74eb;
  font-size: 8px;
}


/* LIVE OPERATIONS */

.erp-hero-operations {
  margin-top: 12px;
  padding: 18px;

  border-radius: 14px;

  background: #0e315f;
}

.erp-hero-operation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;
}

.erp-hero-operation-title span {
  display: block;
  margin-bottom: 4px;

  color: #67a2ff;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.erp-hero-operation-title strong {
  color: #ffffff;
  font-size: 14px;
}

.erp-hero-operation-title small {
  color: #93aac8;
  font-size: 8px;
}


.erp-operation-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;

  padding: 11px 0;

  border-top: 1px solid rgba(255,255,255,.08);
}

.erp-operation-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 8px;

  background: rgba(83,148,247,.13);
  color: #72a9ff;
}

.erp-operation-icon svg {
  width: 16px;
  height: 16px;
}

.erp-operation-row strong {
  display: block;

  color: #ffffff;
  font-size: 10px;
}

.erp-operation-row small {
  display: block;
  margin-top: 3px;

  color: #91a7c3;
  font-size: 8px;
}

.erp-operation-row > b {
  padding: 5px 7px;

  border-radius: 20px;

  background: rgba(40,185,113,.13);
  color: #63d49b;

  font-size: 7px;
}

.erp-operation-alert > b {
  background: rgba(244,173,62,.13);
  color: #f3bd64;
}


/* HERO BOTTOM */

.erp-hero-bottom {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;

  margin-top: 12px;
}

.erp-hero-bottom article {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px;

  border: 1px solid #e0e9f5;
  border-radius: 10px;
}

.erp-hero-bottom svg {
  width: 18px;
  height: 18px;
  color: #2d74eb;
}

.erp-hero-bottom span {
  display: block;
  color: #8290a5;
  font-size: 8px;
}

.erp-hero-bottom strong {
  display: block;
  margin-top: 3px;

  color: #102c52;
  font-size: 11px;
}


/* =========================================================
   CONNECTED ARCHITECTURE
========================================================= */

.erp-architecture-section {
  padding: 120px 0;
  background: #ffffff;

  scroll-margin-top: 100px;
}

.erp-architecture-heading {
  max-width: 850px;
  margin: 0 auto 60px;
  text-align: center;
}

.erp-architecture-heading h2 {
  margin: 0;

  color: #071d40;

  font-size: clamp(42px,4vw,58px);
  line-height: 1.05;

  letter-spacing: -.045em;
}

.erp-architecture-heading h2 span {
  display: block;
  color: #2d74eb;
}

.erp-architecture-heading p {
  max-width: 730px;
  margin: 22px auto 0;

  color: #75849b;

  font-size: 15px;
  line-height: 1.75;
}


/* ARCHITECTURE BOARD */

.erp-architecture-board {
  position: relative;

  min-height: 620px;

  overflow: hidden;

  border: 1px solid #d9e5f5;
  border-radius: 28px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(45,116,235,.11),
      transparent 27%),
    linear-gradient(145deg,#f9fbff,#f2f7fd);
}


/* LINES */

.erp-architecture-lines {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
  pointer-events: none;
}

.erp-architecture-lines line {
  stroke: #b7d2f6;
  stroke-width: 1.3;
}


/* CORE */

.erp-architecture-core {
  position: absolute;
  left: 50%;
  top: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 210px;
  height: 210px;

  transform: translate(-50%,-50%);

  border: 8px solid rgba(255,255,255,.55);
  border-radius: 50%;

  background:
    linear-gradient(145deg,#4388f2,#1f64d7);

  box-shadow:
    0 25px 55px rgba(45,116,235,.28);

  color: #ffffff;

  z-index: 3;
}

.erp-core-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 12px;

  border-radius: 12px;

  background: rgba(255,255,255,.14);
}

.erp-core-icon svg {
  width: 22px;
  height: 22px;
}

.erp-architecture-core > strong {
  font-size: 27px;
}

.erp-architecture-core > small {
  margin-top: 5px;

  color: rgba(255,255,255,.75);

  font-size: 10px;
}

.erp-core-status {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 16px;
  padding: 6px 9px;

  border-radius: 20px;

  background: rgba(0,0,0,.12);

  font-size: 7px;
  font-weight: 700;
}

.erp-core-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #76e2a8;
}


/* NODES */

.erp-architecture-node {
  position: absolute;

  display: flex;
  align-items: center;
  gap: 13px;

  width: 220px;
  min-height: 74px;

  padding: 14px 16px;

  border: 1px solid #d3e1f3;
  border-radius: 14px;

  background: rgba(255,255,255,.96);

  box-shadow:
    0 12px 30px rgba(32,73,122,.07);

  text-decoration: none;

  z-index: 2;

  transition: .25s ease;
}

a.erp-architecture-node:hover {
  transform: translateY(-3px);
  border-color: #86b3f4;
}

.erp-architecture-node > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  border-radius: 10px;

  background: #eaf3ff;
  color: #2d74eb;
}

.erp-architecture-node svg {
  width: 19px;
  height: 19px;
}

.erp-architecture-node strong {
  display: block;

  color: #123765;

  font-size: 12px;
}

.erp-architecture-node small {
  display: block;
  margin-top: 4px;

  color: #8492a7;

  font-size: 8px;
}


/* NODE POSITIONS */

.erp-node-sales {
  left: 5%;
  top: 10%;
}

.erp-node-inventory {
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
}

.erp-node-purchasing {
  right: 5%;
  top: 10%;
}

.erp-node-crm {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.erp-node-warehouse {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.erp-node-finance {
  left: 5%;
  bottom: 10%;
}

.erp-node-operations {
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
}

.erp-node-intelligence {
  right: 5%;
  bottom: 10%;
}


/* ARCHITECTURE FOOT */

.erp-architecture-foot {
  display: grid;
  grid-template-columns: repeat(5,1fr);

  margin-top: 18px;

  overflow: hidden;

  border-radius: 13px;

  background: #0e315f;
}

.erp-architecture-foot span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 58px;

  color: #d8e6f7;

  font-size: 10px;
  font-weight: 600;
}

.erp-architecture-foot svg {
  width: 16px;
  height: 16px;

  color: #72a9ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

  .erp-platform-hero-layout {
    grid-template-columns: 1fr;
  }

  .erp-platform-hero-content {
    max-width: 760px;
  }

  .erp-architecture-board {
    min-height: auto;
    padding: 35px;
  }

  .erp-architecture-lines {
    display: none;
  }

  .erp-architecture-core,
  .erp-architecture-node {
    position: static;
    transform: none;
  }

  .erp-architecture-core {
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
  }

  .erp-architecture-board {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
  }

  .erp-architecture-core {
    grid-column: 1 / -1;
  }

  .erp-architecture-node {
    width: auto;
  }

  .erp-architecture-foot {
    grid-template-columns: repeat(2,1fr);
  }

}


@media (max-width: 650px) {

  .erp-platform-container {
    width: min(100% - 36px,1380px);
  }

  .erp-platform-hero {
    padding: 80px 0;
  }

  .erp-platform-hero-content h1 {
    font-size: 46px;
  }

  .erp-platform-hero-actions {
    flex-direction: column;
  }

  .erp-platform-btn {
    width: 100%;
  }

  .erp-hero-kpis,
  .erp-hero-bottom {
    grid-template-columns: 1fr;
  }

  .erp-architecture-section {
    padding: 80px 0;
  }

  .erp-architecture-board {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .erp-architecture-core {
    grid-column: auto;
  }

  .erp-architecture-foot {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   CONNECTED TRANSACTION ENGINE
========================================================= */

.erp-transaction-section{
  padding:120px 0;
  background:#f5f9ff;
}

.erp-transaction-heading{
  max-width:850px;
  margin:0 auto 58px;
  text-align:center;
}

.erp-transaction-heading h2{
  margin:12px 0 0;

  color:#071d43;

  font-size:clamp(38px,4vw,58px);
  line-height:1.04;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-transaction-heading h2 span{
  display:block;
  color:#2f76ed;
}

.erp-transaction-heading p{
  max-width:720px;
  margin:20px auto 0;

  color:#74839b;

  font-size:15px;
  line-height:1.75;
}


/* WORKSPACE */

.erp-transaction-workspace{
  display:grid;

  grid-template-columns:
    minmax(0,.82fr)
    80px
    minmax(0,1.18fr);

  align-items:center;

  max-width:1160px;
  margin:0 auto;

  padding:40px;

  border:1px solid #d7e4f5;
  border-radius:28px;

  background:#ffffff;

  box-shadow:
    0 28px 70px rgba(26,68,120,.08);
}


/* =========================================================
   SALE CARD
========================================================= */

.erp-sale-card{
  overflow:hidden;

  border:1px solid #d7e3f3;
  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 18px 45px rgba(24,63,112,.08);
}

.erp-sale-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:22px 24px;

  background:#123b70;
}

.erp-sale-top div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.erp-sale-top div span{
  color:#70a9ff;

  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.erp-sale-top strong{
  color:#ffffff;

  font-size:18px;
  font-weight:650;
}

.erp-live-status{
  padding:7px 10px;

  border-radius:999px;

  background:#dff6e9;

  color:#17834e;

  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}


/* CUSTOMER */

.erp-sale-customer{
  display:flex;
  align-items:center;

  gap:12px;

  margin:20px 22px 0;
  padding:13px;

  border-radius:12px;

  background:#f5f8fc;
}

.erp-sale-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border-radius:10px;

  background:#e8f1ff;
  color:#2f76ed;
}

.erp-sale-icon svg{
  width:18px;
}

.erp-sale-customer div:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.erp-sale-customer small{
  color:#8a98ab;
  font-size:9px;
}

.erp-sale-customer strong{
  color:#0c274d;
  font-size:12px;
}


/* LINES */

.erp-sale-lines{
  margin:18px 22px 0;

  border-top:1px solid #e6edf6;
  border-bottom:1px solid #e6edf6;
}

.erp-sale-lines div{
  display:flex;
  justify-content:space-between;

  padding:13px 2px;

  border-bottom:1px solid #edf2f8;

  color:#53657e;

  font-size:11px;
}

.erp-sale-lines div:last-child{
  border-bottom:none;
}

.erp-sale-lines strong{
  color:#102b51;
  font-weight:600;
}


/* TOTAL */

.erp-sale-total{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:18px 22px;

  padding:18px;

  border-radius:13px;

  background:#edf5ff;
}

.erp-sale-total span{
  color:#60728b;

  font-size:10px;
}

.erp-sale-total strong{
  color:#1264df;

  font-size:23px;
  font-weight:700;
}


/* META */

.erp-sale-meta{
  display:flex;
  justify-content:space-between;

  padding:14px 22px;

  border-top:1px solid #e7edf5;

  background:#fafcff;
}

.erp-sale-meta span{
  display:flex;
  align-items:center;
  gap:5px;

  color:#718199;

  font-size:8px;
}

.erp-sale-meta svg{
  width:12px;
  color:#2f76ed;
}


/* =========================================================
   CONNECTION
========================================================= */

.erp-transaction-trigger{
  display:flex;
  align-items:center;
  width:100%;
}

.erp-transaction-trigger span{
  flex:1;
  height:1px;

  background:#b9d4fa;
}

.erp-transaction-trigger div{
  display:flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  border-radius:50%;

  background:#2f76ed;

  color:#ffffff;

  box-shadow:
    0 8px 22px rgba(47,118,237,.25);
}

.erp-transaction-trigger svg{
  width:17px;
}


/* =========================================================
   UPDATE STACK
========================================================= */

.erp-update-stack{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.erp-update-card{
  position:relative;

  display:grid;

  grid-template-columns:48px 1fr auto;

  align-items:center;

  gap:14px;

  padding:15px 17px;

  border:1px solid #dce6f3;
  border-radius:15px;

  background:#ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.erp-update-card:hover{
  transform:translateX(5px);

  border-color:#b7d1f5;

  box-shadow:
    0 12px 30px rgba(31,74,126,.08);
}


/* ICON */

.erp-update-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:44px;
  height:44px;

  border-radius:12px;
}

.erp-update-icon svg{
  width:19px;
}


/* COLOURS */

.erp-update-icon.inventory{
  background:#e8f2ff;
  color:#2674ec;
}

.erp-update-icon.customer{
  background:#f0eaff;
  color:#7557d9;
}

.erp-update-icon.purchase{
  background:#fff2dd;
  color:#d88b16;
}

.erp-update-icon.finance{
  background:#e5f7ef;
  color:#18885b;
}

.erp-update-icon.intelligence{
  background:#e8efff;
  color:#315ed4;
}


/* COPY */

.erp-update-copy{
  min-width:0;
}

.erp-update-copy small{
  display:block;

  margin-bottom:3px;

  color:#2f76ed;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.erp-update-copy strong{
  display:block;

  color:#0b274e;

  font-size:12px;
  font-weight:650;
}

.erp-update-copy p{
  margin:4px 0 0;

  color:#7a899d;

  font-size:9px;
  line-height:1.45;
}


/* STATUS */

.erp-update-status{
  padding:6px 8px;

  border-radius:999px;

  background:#e8f7ef;

  color:#198653;

  font-size:7px;
  font-weight:700;
  letter-spacing:.06em;
}


/* =========================================================
   FOOTER STRIP
========================================================= */

.erp-transaction-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  max-width:1160px;

  margin:18px auto 0;

  overflow:hidden;

  border-radius:14px;

  background:#123b70;
}

.erp-transaction-footer div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:17px 10px;

  color:#dceaff;

  font-size:9px;
  font-weight:500;
}

.erp-transaction-footer svg{
  width:14px;
  color:#70a9ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .erp-transaction-section{
    padding:85px 0;
  }

  .erp-transaction-workspace{
    grid-template-columns:1fr;

    gap:25px;

    padding:24px;
  }

  .erp-transaction-trigger{
    flex-direction:column;

    height:65px;
  }

  .erp-transaction-trigger span{
    width:1px;
    height:auto;
  }

  .erp-transaction-footer{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:560px){

  .erp-transaction-heading{
    margin-bottom:38px;
  }

  .erp-transaction-workspace{
    padding:16px;
    border-radius:20px;
  }

  .erp-update-card{
    grid-template-columns:42px 1fr;
  }

  .erp-update-status{
    grid-column:2;
    justify-self:start;
  }

  .erp-transaction-footer{
    grid-template-columns:1fr;
  }

  .erp-transaction-footer div{
    justify-content:flex-start;
    padding-left:20px;
  }

}

/* =========================================================
   MULTI-LOCATION & ENTERPRISE CONTROL
========================================================= */

.erp-enterprise-section{
  padding:120px 0;
  background:#ffffff;
}

.erp-enterprise-heading{
  max-width:850px;
  margin:0 auto 58px;
  text-align:center;
}

.erp-enterprise-heading h2{
  margin:0;
  color:#071d40;

  font-size:clamp(40px,4vw,58px);
  line-height:1.05;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-enterprise-heading h2 span{
  display:block;
  color:#2d74eb;
}

.erp-enterprise-heading p{
  max-width:720px;
  margin:20px auto 0;

  color:#74839b;

  font-size:15px;
  line-height:1.75;
}


/* MAIN WORKSPACE */

.erp-enterprise-workspace{
  display:grid;

  grid-template-columns:
    minmax(0,.95fr)
    90px
    minmax(0,1.05fr);

  align-items:center;

  max-width:1180px;
  margin:0 auto;

  padding:38px;

  border:1px solid #d8e4f3;
  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      #f9fbff 0%,
      #f4f8fd 100%
    );

  box-shadow:
    0 26px 70px rgba(20,55,100,.07);
}


/* =========================================================
   HEAD OFFICE
========================================================= */

.erp-enterprise-hq{
  padding:24px;

  border:1px solid #d8e4f3;
  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 16px 38px rgba(20,55,100,.06);
}

.erp-enterprise-hq-top{
  display:grid;

  grid-template-columns:48px 1fr auto;

  align-items:center;

  gap:13px;

  padding-bottom:18px;

  border-bottom:1px solid #e7edf5;
}

.erp-enterprise-hq-icon{
  display:grid;
  place-items:center;

  width:46px;
  height:46px;

  border-radius:12px;

  background:#e9f2ff;
  color:#2d74eb;
}

.erp-enterprise-hq-icon svg{
  width:21px;
  height:21px;
}

.erp-enterprise-hq-top small{
  display:block;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.erp-enterprise-hq-top strong{
  display:block;

  margin-top:4px;

  color:#0b274e;

  font-size:14px;
}

.erp-enterprise-live{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;
}


/* HQ GRID */

.erp-enterprise-hq-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:10px;

  margin-top:18px;
}

.erp-enterprise-hq-grid article{
  min-height:108px;

  display:flex;
  flex-direction:column;

  padding:14px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#f9fbfe;
}

.erp-enterprise-hq-grid svg{
  width:18px;
  height:18px;

  margin-bottom:10px;

  color:#2d74eb;
}

.erp-enterprise-hq-grid span{
  color:#8291a5;

  font-size:7px;
}

.erp-enterprise-hq-grid strong{
  margin-top:5px;

  color:#0b2144;

  font-size:9px;
  line-height:1.4;
}


/* SUMMARY */

.erp-enterprise-hq-summary{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  margin-top:14px;
}

.erp-enterprise-hq-summary > div{
  padding:12px;

  border-radius:9px;

  background:#123b70;
}

.erp-enterprise-hq-summary small{
  display:block;

  color:#9bb7d8;

  font-size:6px;
}

.erp-enterprise-hq-summary strong{
  display:block;

  margin-top:4px;

  color:#ffffff;

  font-size:13px;
}


/* =========================================================
   NETWORK
========================================================= */

.erp-enterprise-network{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  height:100%;
}

.erp-enterprise-network-line{
  position:absolute;

  left:0;
  right:0;
  top:50%;

  height:1px;

  background:#bcd2ee;
}

.erp-enterprise-network-core{
  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  border-radius:50%;

  background:#2d74eb;

  color:#ffffff;

  box-shadow:
    0 10px 28px rgba(45,116,235,.25);
}

.erp-enterprise-network-core svg{
  width:19px;
  height:19px;
}

.erp-enterprise-network > span{
  position:relative;
  z-index:2;

  margin-top:12px;
  padding:5px 8px;

  border-radius:999px;

  background:#ffffff;

  color:#7890ad;

  font-size:6px;

  text-align:center;
}


/* =========================================================
   LOCATIONS
========================================================= */

.erp-enterprise-locations{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.erp-location-card{
  display:grid;

  grid-template-columns:44px 1fr auto;

  align-items:center;

  gap:13px;

  padding:14px 16px;

  border:1px solid #dce6f2;
  border-radius:13px;

  background:#ffffff;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.erp-location-card:hover{
  transform:translateX(4px);

  border-color:#b9d3f5;

  box-shadow:
    0 10px 28px rgba(20,55,100,.07);
}

.erp-location-icon{
  display:grid;
  place-items:center;

  width:40px;
  height:40px;

  border-radius:10px;

  background:#edf5ff;

  color:#2d74eb;
}

.erp-location-icon svg{
  width:18px;
  height:18px;
}

.erp-location-card small{
  display:block;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;

  letter-spacing:.1em;
}

.erp-location-card strong{
  display:block;

  margin-top:3px;

  color:#0b274e;

  font-size:10px;
}

.erp-location-card div > span{
  display:block;

  margin-top:3px;

  color:#8492a6;

  font-size:7px;
}

.erp-location-card > b{
  padding:5px 7px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:6px;
}


/* =========================================================
   CAPABILITIES STRIP
========================================================= */

.erp-enterprise-capabilities{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  max-width:1180px;

  margin:18px auto 0;

  overflow:hidden;

  border-radius:14px;

  background:#123b70;
}

.erp-enterprise-capabilities div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:58px;

  padding:10px;

  color:#dce9f8;

  font-size:8px;
  font-weight:600;

  text-align:center;
}

.erp-enterprise-capabilities svg{
  width:14px;
  height:14px;

  color:#72a9ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .erp-enterprise-workspace{
    grid-template-columns:1fr;

    gap:28px;

    padding:25px;
  }

  .erp-enterprise-network{
    height:70px;
  }

  .erp-enterprise-network-line{
    left:50%;
    right:auto;
    top:0;

    width:1px;
    height:100%;

    transform:translateX(-50%);
  }

  .erp-enterprise-capabilities{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:560px){

  .erp-enterprise-section{
    padding:85px 0;
  }

  .erp-enterprise-workspace{
    padding:16px;
  }

  .erp-enterprise-hq-grid,
  .erp-enterprise-hq-summary{
    grid-template-columns:1fr;
  }

  .erp-location-card{
    grid-template-columns:40px 1fr;
  }

  .erp-location-card > b{
    grid-column:2;
    justify-self:start;
  }

  .erp-enterprise-capabilities{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   INTEGRATION ARCHITECTURE
========================================================= */

.erp-integration-section{
  padding:120px 0;
  background:#f5f9ff;
}

.erp-integration-heading{
  max-width:860px;
  margin:0 auto 58px;
  text-align:center;
}

.erp-integration-heading h2{
  margin:0;

  color:#071d40;

  font-size:clamp(40px,4vw,58px);
  line-height:1.05;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-integration-heading h2 span{
  display:block;
  color:#2d74eb;
}

.erp-integration-heading p{
  max-width:720px;
  margin:20px auto 0;

  color:#74839b;

  font-size:15px;
  line-height:1.75;
}


/* BOARD */

.erp-integration-board{
  position:relative;

  min-height:620px;

  overflow:hidden;

  border:1px solid #d7e4f4;
  border-radius:28px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(45,116,235,.13),
      transparent 28%
    ),
    #ffffff;

  box-shadow:
    0 25px 65px rgba(20,55,100,.07);
}


/* CONNECTIONS */

.erp-integration-lines{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:0;
}

.erp-integration-lines line{
  stroke:#b7d1f3;
  stroke-width:1.2;
}


/* CORE */

.erp-integration-core{
  position:absolute;

  left:50%;
  top:50%;

  width:220px;
  height:220px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #123b70,
      #0b2850
    );

  color:#ffffff;

  box-shadow:
    0 26px 55px rgba(11,40,80,.23);

  z-index:3;
}

.erp-integration-core-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border-radius:12px;

  background:rgba(255,255,255,.10);

  color:#72a9ff;
}

.erp-integration-core-icon svg{
  width:21px;
  height:21px;
}

.erp-integration-core small{
  color:#72a9ff;

  font-size:7px;
  font-weight:700;
  letter-spacing:.13em;
}

.erp-integration-core strong{
  margin-top:7px;

  font-size:23px;
}

.erp-integration-core > span{
  margin-top:7px;

  color:#b3c7df;

  font-size:9px;
}


/* NODES */

.erp-integration-node{
  position:absolute;

  width:235px;
  min-height:92px;

  display:flex;
  align-items:center;

  gap:13px;

  padding:15px;

  border:1px solid #d9e5f3;
  border-radius:14px;

  background:rgba(255,255,255,.97);

  box-shadow:
    0 12px 32px rgba(30,70,120,.07);

  z-index:2;
}

.erp-integration-node-icon{
  flex:0 0 auto;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#eaf3ff;

  color:#2d74eb;
}

.erp-integration-node-icon svg{
  width:19px;
  height:19px;
}

.erp-integration-node small{
  display:block;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-integration-node strong{
  display:block;

  margin-top:4px;

  color:#0b274e;

  font-size:10px;
}

.erp-integration-node span{
  display:block;

  margin-top:4px;

  color:#8190a4;

  font-size:7px;
  line-height:1.4;
}


/* POSITIONS */

.integration-payments{
  left:5%;
  top:9%;
}

.integration-commerce{
  left:50%;
  top:5%;
  transform:translateX(-50%);
}

.integration-delivery{
  right:5%;
  top:9%;
}

.integration-accounting{
  left:3%;
  top:50%;
  transform:translateY(-50%);
}

.integration-external{
  right:3%;
  top:50%;
  transform:translateY(-50%);
}

.integration-mobile{
  left:5%;
  bottom:9%;
}

.integration-suppliers{
  left:50%;
  bottom:5%;
  transform:translateX(-50%);
}

.integration-api{
  right:5%;
  bottom:9%;
}


/* PRINCIPLES */

.erp-integration-principles{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:18px;
}

.erp-integration-principles > div{
  min-height:105px;

  padding:16px;

  border:1px solid #dce6f2;
  border-radius:12px;

  background:#ffffff;
}

.erp-integration-principles svg{
  width:18px;
  height:18px;

  margin-bottom:10px;

  color:#2d74eb;
}

.erp-integration-principles strong{
  display:block;

  color:#0b274e;

  font-size:10px;
}

.erp-integration-principles span{
  display:block;

  margin-top:5px;

  color:#8291a5;

  font-size:8px;
  line-height:1.45;
}


/* RESPONSIVE */

@media(max-width:1000px){

  .erp-integration-board{
    min-height:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding:30px;
  }

  .erp-integration-lines{
    display:none;
  }

  .erp-integration-core,
  .erp-integration-node{
    position:static;
    transform:none;
  }

  .erp-integration-core{
    grid-column:1/-1;

    margin:0 auto 20px;
  }

  .erp-integration-node{
    width:auto;
  }

  .erp-integration-principles{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:560px){

  .erp-integration-section{
    padding:85px 0;
  }

  .erp-integration-board{
    grid-template-columns:1fr;
    padding:18px;
  }

  .erp-integration-core{
    grid-column:auto;

    width:180px;
    height:180px;
  }

  .erp-integration-principles{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   LAYERED ERP ARCHITECTURE
========================================================= */

.erp-layered-architecture{
  max-width:1180px;
  margin:0 auto;

  padding:28px;

  border:1px solid #d8e4f3;
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f5f9ff 100%
    );

  box-shadow:
    0 24px 65px rgba(20,55,100,.07);
}


/* =========================================================
   LAYER ROW
========================================================= */

.erp-layer-row{
  display:grid;

  grid-template-columns:280px 1fr;

  gap:22px;

  align-items:center;

  padding:22px;

  border:1px solid #dce6f2;
  border-radius:18px;

  background:#ffffff;
}


/* LEFT LABEL */

.erp-layer-label{
  display:flex;
  align-items:center;

  gap:14px;
}

.erp-layer-label > span{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex:0 0 42px;

  border-radius:12px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:10px;
  font-weight:800;
}

.erp-layer-label small{
  display:block;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.erp-layer-label strong{
  display:block;

  margin-top:4px;

  color:#0b274e;

  font-size:15px;
}


/* =========================================================
   MODULES
========================================================= */

.erp-layer-modules{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:9px;
}

.erp-layer-modules > *{
  min-height:88px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:8px;

  padding:13px;

  border:1px solid #e1e9f3;
  border-radius:11px;

  background:#f9fbfe;

  color:#0b274e;

  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.erp-layer-modules > a:hover{
  transform:translateY(-2px);

  border-color:#bdd4f3;

  box-shadow:
    0 8px 22px rgba(20,55,100,.06);
}

.erp-layer-modules svg{
  width:17px;
  height:17px;

  color:#2d74eb;
}

.erp-layer-modules span{
  font-size:8px;
  font-weight:650;
}


/* =========================================================
   INDIVIDUAL LAYER ACCENTS
========================================================= */

.erp-layer-customer{
  border-left:4px solid #2d74eb;
}

.erp-layer-operations{
  border-left:4px solid #3c9b73;
}

.erp-layer-operations .erp-layer-label > span,
.erp-layer-operations .erp-layer-modules svg{
  color:#25835c;
}

.erp-layer-operations .erp-layer-label > span{
  background:#eaf7f0;
}

.erp-layer-finance{
  border-left:4px solid #7557d9;
}

.erp-layer-finance .erp-layer-label > span,
.erp-layer-finance .erp-layer-modules svg{
  color:#7557d9;
}

.erp-layer-finance .erp-layer-label > span{
  background:#f0ebff;
}

.erp-layer-intelligence{
  border-left:4px solid #e39b32;
}

.erp-layer-intelligence .erp-layer-label > span,
.erp-layer-intelligence .erp-layer-modules svg{
  color:#cf861c;
}

.erp-layer-intelligence .erp-layer-label > span{
  background:#fff3df;
}


/* =========================================================
   CONNECTOR
========================================================= */

.erp-layer-connector{
  min-height:58px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  color:#8a9bb1;

  font-size:7px;
}

.erp-layer-connector svg{
  width:15px;
  height:15px;

  color:#8ab2e8;
}


/* =========================================================
   CORE
========================================================= */

.erp-layer-core{
  margin-top:18px;

  overflow:hidden;

  border-radius:17px;

  background:#123b70;
}

.erp-layer-core-main{
  display:flex;
  align-items:center;

  gap:15px;

  padding:24px;
}

.erp-layer-core-icon{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  flex:0 0 52px;

  border-radius:13px;

  background:#2d74eb;

  color:#ffffff;
}

.erp-layer-core-icon svg{
  width:22px;
  height:22px;
}

.erp-layer-core-main small{
  display:block;

  color:#72a9ff;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.erp-layer-core-main strong{
  display:block;

  margin-top:4px;

  color:#ffffff;

  font-size:19px;
}

.erp-layer-core-main span{
  display:block;

  margin-top:5px;

  color:#a9bfd9;

  font-size:9px;
}


/* CORE FEATURES */

.erp-layer-core-features{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  border-top:1px solid rgba(255,255,255,.08);
}

.erp-layer-core-features span{
  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  color:#dce9f7;

  font-size:8px;
}

.erp-layer-core-features svg{
  width:14px;
  height:14px;

  color:#72a9ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .erp-layer-row{
    grid-template-columns:1fr;
  }

  .erp-layer-modules{
    grid-template-columns:repeat(2,1fr);
  }

  .erp-layer-core-features{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:560px){

  .erp-layered-architecture{
    padding:16px;
  }

  .erp-layer-row{
    padding:16px;
  }

  .erp-layer-modules{
    grid-template-columns:1fr;
  }

  .erp-layer-core-main{
    align-items:flex-start;
  }

  .erp-layer-core-features{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   TRANSACTION DRIVEN ERP
========================================================= */

.erp-transaction-flow{
  padding:120px 0;
  background:#ffffff;
}


/* HEADING */

.erp-transaction-heading{
  max-width:780px;
  margin:0 auto 55px;
  text-align:center;
}

.erp-transaction-heading .erp-eyebrow{
  display:block;
  margin-bottom:16px;

  color:#2d74eb;

  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}

.erp-transaction-heading h2{
  margin:0;

  color:#0b274e;

  font-size:clamp(38px,4vw,55px);
  line-height:1.06;

  font-weight:700;
  letter-spacing:-.04em;
}

.erp-transaction-heading h2 span{
  display:block;
  color:#2d74eb;
}

.erp-transaction-heading p{
  max-width:720px;

  margin:20px auto 0;

  color:#7c8ca3;

  font-size:14px;
  line-height:1.75;
}


/* =========================================================
   BOARD
========================================================= */

.erp-transaction-board{
  max-width:1180px;
  margin:0 auto;
}


/* =========================================================
   FLOW STEPS
========================================================= */

.erp-transaction-steps{
  display:grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  align-items:center;

  margin-bottom:25px;
}

.erp-transaction-step{
  min-height:145px;

  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:18px;

  border:1px solid #dce6f2;
  border-radius:16px;

  background:#ffffff;

  text-align:center;
}

.erp-transaction-step > span{
  position:absolute;

  top:12px;
  right:13px;

  color:#afbdd0;

  font-size:8px;
  font-weight:700;
}

.erp-transaction-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin-bottom:10px;

  border-radius:11px;

  background:#edf5ff;

  color:#2d74eb;
}

.erp-transaction-icon svg{
  width:19px;
  height:19px;
}

.erp-transaction-step strong{
  color:#0b274e;

  font-size:11px;
}

.erp-transaction-step small{
  margin-top:5px;

  color:#8a9bb1;

  font-size:8px;
}

.erp-transaction-step.is-active{
  border-color:#9fc4fa;

  box-shadow:
    0 14px 32px rgba(45,116,235,.10);
}

.erp-transaction-step.is-active
.erp-transaction-icon{
  background:#2d74eb;
  color:#ffffff;
}


/* ARROWS */

.erp-transaction-arrow{
  width:38px;

  display:flex;
  justify-content:center;

  color:#8ab2e8;
}

.erp-transaction-arrow svg{
  width:16px;
  height:16px;
}


/* =========================================================
   EVENT PANEL
========================================================= */

.erp-event-panel{
  overflow:hidden;

  border-radius:22px;

  background:#0e315d;

  box-shadow:
    0 25px 60px rgba(12,42,80,.16);
}


/* HEADER */

.erp-event-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:17px 24px;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  color:#ffffff;

  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}

.erp-event-header > div{
  display:flex;
  align-items:center;
  gap:8px;
}

.erp-event-header small{
  color:#7fa8d7;

  font-size:8px;
  letter-spacing:.06em;
}

.erp-live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#55d995;

  box-shadow:
    0 0 0 5px rgba(85,217,149,.10);
}


/* =========================================================
   EVENT CONTENT
========================================================= */

.erp-event-content{
  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:0;
}


/* LEFT */

.erp-event-primary{
  padding:30px;

  border-right:
    1px solid rgba(255,255,255,.08);
}

.erp-event-primary-top{
  display:flex;
  justify-content:space-between;

  gap:20px;
}

.erp-event-primary-top span{
  display:block;

  color:#72a9ff;

  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.erp-event-primary-top strong{
  display:block;

  margin-top:6px;

  color:#ffffff;

  font-size:17px;
}

.erp-event-primary-top b{
  color:#ffffff;

  font-size:26px;
  letter-spacing:-.03em;
}


/* PRODUCT */

.erp-event-product{
  display:grid;

  grid-template-columns:auto 1fr auto;

  gap:14px;
  align-items:center;

  margin-top:30px;

  padding:16px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:13px;

  background:
    rgba(255,255,255,.045);
}

.erp-event-product > div{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:
    rgba(45,116,235,.22);

  color:#72a9ff;
}

.erp-event-product svg{
  width:17px;
  height:17px;
}

.erp-event-product small{
  display:block;

  color:#7293b9;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-event-product strong{
  display:block;

  margin-top:4px;

  color:#e8f1fb;

  font-size:9px;
}


/* =========================================================
   EVENT STREAM
========================================================= */

.erp-event-stream{
  padding:20px 28px;
}

.erp-event-line{
  min-height:60px;

  display:grid;

  grid-template-columns:auto 1fr auto;

  gap:13px;
  align-items:center;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.erp-event-line:last-child{
  border-bottom:none;
}

.erp-event-status{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:50%;
}

.erp-event-status svg{
  width:13px;
  height:13px;
}

.erp-event-status.success{
  background:rgba(68,200,137,.13);
  color:#5bdd9a;
}

.erp-event-status.warning{
  background:rgba(237,173,68,.13);
  color:#f0b54e;
}

.erp-event-status.intelligence{
  background:rgba(126,104,230,.15);
  color:#a894ff;
}

.erp-event-line small{
  display:block;

  color:#6f91b8;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-event-line strong{
  display:block;

  margin-top:4px;

  color:#e8f1fb;

  font-size:9px;
  font-weight:600;
}

.erp-event-line time{
  color:#6f91b8;

  font-size:7px;
}


/* =========================================================
   RESULT BAR
========================================================= */

.erp-event-result{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  padding:18px 24px;

  border-top:
    1px solid rgba(255,255,255,.08);

  background:#0a294f;
}

.erp-event-result > div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  border-right:
    1px solid rgba(255,255,255,.08);
}

.erp-event-result > div:last-child{
  border-right:none;
}

.erp-event-result svg{
  width:16px;
  height:16px;

  color:#72a9ff;
}

.erp-event-result small{
  display:block;

  color:#6889af;

  font-size:6px;
  letter-spacing:.1em;
}

.erp-event-result strong{
  display:block;

  margin-top:3px;

  color:#dce9f7;

  font-size:8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .erp-transaction-steps{
    grid-template-columns:1fr;
    gap:8px;
  }

  .erp-transaction-arrow{
    width:auto;
    height:25px;

    margin:auto;

    transform:rotate(90deg);
  }

  .erp-event-content{
    grid-template-columns:1fr;
  }

  .erp-event-primary{
    border-right:none;

    border-bottom:
      1px solid rgba(255,255,255,.08);
  }

}


@media(max-width:600px){

  .erp-transaction-flow{
    padding:80px 0;
  }

  .erp-event-primary{
    padding:22px;
  }

  .erp-event-primary-top{
    flex-direction:column;
  }

  .erp-event-result{
    grid-template-columns:1fr;
    gap:15px;
  }

  .erp-event-result > div{
    justify-content:flex-start;

    border-right:none;
  }

}

.erp-transaction-step:nth-of-type(1) .erp-transaction-icon{
  background:#eaf3ff;
  color:#2d74eb;
}

.erp-transaction-step:nth-of-type(2) .erp-transaction-icon{
  background:#eaf8f2;
  color:#27845f;
}

.erp-transaction-step:nth-of-type(3) .erp-transaction-icon{
  background:#f0edff;
  color:#7058d5;
}

.erp-transaction-step:nth-of-type(4) .erp-transaction-icon{
  background:#fff4e4;
  color:#d58b24;
}

.erp-transaction-step:nth-of-type(5) .erp-transaction-icon{
  background:#edf1ff;
  color:#566fd8;
}

/* =========================================================
   INTELLIGENT OPERATIONS
========================================================= */

.erp-intelligence-section{
  padding:120px 0;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(45,116,235,.12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f5f9ff,
      #eef5ff
    );
}


.erp-intelligence-layout{
  display:grid;

  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);

  gap:70px;

  align-items:center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.erp-intelligence-content h2{
  margin:0;

  color:#071d40;

  font-size:clamp(40px,4vw,58px);
  line-height:1.03;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-intelligence-content h2 span{
  display:block;
  color:#2d74eb;
}

.erp-intelligence-content > p{
  max-width:560px;

  margin:22px 0 0;

  color:#71819a;

  font-size:14px;
  line-height:1.75;
}


/* POINTS */

.erp-intelligence-points{
  display:grid;

  gap:11px;

  margin:30px 0;
}

.erp-intelligence-points > div{
  display:flex;

  gap:12px;

  padding:13px;

  border:1px solid #dce6f3;
  border-radius:11px;

  background:rgba(255,255,255,.78);
}

.erp-intelligence-points svg{
  flex:0 0 auto;

  width:18px;
  height:18px;

  color:#2d74eb;
}

.erp-intelligence-points span{
  color:#7d8ba0;

  font-size:9px;
  line-height:1.5;
}

.erp-intelligence-points strong{
  display:block;

  margin-bottom:3px;

  color:#0b274e;

  font-size:10px;
}


/* =========================================================
   BOARD
========================================================= */

.erp-intelligence-board{
  overflow:hidden;

  border:1px solid #d7e4f4;
  border-radius:24px;

  background:#ffffff;

  box-shadow:
    0 28px 70px rgba(20,55,100,.10);
}


/* HEADER */

.erp-intelligence-board-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:22px 24px;

  border-bottom:1px solid #e7edf5;
}

.erp-intelligence-board-header small{
  display:block;

  margin-bottom:4px;

  color:#2d74eb;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}

.erp-intelligence-board-header strong{
  color:#0b274e;

  font-size:16px;
}

.erp-intelligence-board-header > span{
  padding:6px 9px;

  border-radius:999px;

  background:#e9f6ee;

  color:#258657;

  font-size:7px;
  font-weight:700;
}


/* =========================================================
   KPI ROW
========================================================= */

.erp-intelligence-kpis{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:9px;

  padding:18px 22px 0;
}

.erp-intelligence-kpis article{
  padding:15px;

  border:1px solid #e0e8f2;
  border-radius:11px;

  background:#f8fbff;
}

.erp-intelligence-kpis small{
  display:block;

  color:#8392a5;

  font-size:6px;
  font-weight:700;
}

.erp-intelligence-kpis strong{
  display:block;

  margin-top:6px;

  color:#0b274e;

  font-size:20px;
}

.erp-intelligence-kpis span{
  display:block;

  margin-top:5px;

  font-size:7px;
  font-weight:700;
}

.erp-signal-positive{
  color:#258657;
}

.erp-signal-warning{
  color:#cf861c;
}

.erp-signal-danger{
  color:#d65d5d;
}


/* =========================================================
   FORECAST
========================================================= */

.erp-intelligence-forecast{
  margin:13px 22px 0;
  padding:16px;

  border:1px solid #e0e8f2;
  border-radius:13px;

  background:#f9fbfe;
}

.erp-intelligence-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;
}

.erp-intelligence-panel-heading small{
  display:block;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-intelligence-panel-heading strong{
  display:block;

  margin-top:4px;

  color:#0b274e;

  font-size:11px;
}

.erp-intelligence-panel-heading > span{
  padding:5px 8px;

  border-radius:999px;

  background:#edf5ff;

  color:#2d74eb;

  font-size:6px;
  font-weight:700;
}


/* CHART */

.erp-intelligence-chart{
  height:150px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:9px;

  margin-top:17px;
}

.erp-intelligence-chart > div{
  flex:1;

  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;

  gap:6px;
}

.erp-intelligence-chart i{
  display:block;

  width:100%;
  max-width:27px;

  border-radius:6px 6px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #72a9ff,
      #2d74eb
    );
}

.erp-intelligence-chart span{
  color:#8a98aa;

  font-size:6px;
}

.erp-intelligence-chart
.erp-intelligence-peak i{
  background:
    linear-gradient(
      180deg,
      #9a7cf0,
      #7254d5
    );
}

.erp-intelligence-chart
.erp-intelligence-peak span{
  color:#7254d5;
  font-weight:700;
}


/* =========================================================
   INSIGHTS
========================================================= */

.erp-intelligence-insights{
  display:grid;

  gap:8px;

  padding:14px 22px 0;
}

.erp-insight-card{
  display:grid;

  grid-template-columns:38px 1fr auto;

  align-items:center;

  gap:12px;

  padding:12px;

  border-radius:10px;
}

.erp-insight-card > div{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:8px;
}

.erp-insight-card svg{
  width:15px;
  height:15px;
}

.erp-insight-card small{
  display:block;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-insight-card strong{
  display:block;

  margin-top:3px;

  color:#0b274e;

  font-size:9px;
}

.erp-insight-card p{
  margin:3px 0 0;

  color:#7f8fa3;

  font-size:7px;
}

.erp-insight-card > b{
  font-size:9px;
}


/* OPPORTUNITY */

.erp-insight-opportunity{
  background:#eef9f3;
}

.erp-insight-opportunity > div{
  background:#dcf3e7;
  color:#258657;
}

.erp-insight-opportunity small,
.erp-insight-opportunity > b{
  color:#258657;
}


/* RISK */

.erp-insight-risk{
  background:#fff8eb;
}

.erp-insight-risk > div{
  background:#ffedca;
  color:#cf861c;
}

.erp-insight-risk small,
.erp-insight-risk > b{
  color:#cf861c;
}


/* MARGIN */

.erp-insight-margin{
  background:#fff2f2;
}

.erp-insight-margin > div{
  background:#ffe1e1;
  color:#d65d5d;
}

.erp-insight-margin small,
.erp-insight-margin > b{
  color:#d65d5d;
}


/* =========================================================
   ACTION
========================================================= */

.erp-intelligence-action{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin:14px 22px 22px;
  padding:14px;

  border-radius:11px;

  background:#123b70;
}

.erp-intelligence-action > div{
  display:flex;
  align-items:center;

  gap:10px;
}

.erp-intelligence-action svg{
  width:18px;
  height:18px;

  color:#72a9ff;
}

.erp-intelligence-action small{
  display:block;

  color:#72a9ff;

  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
}

.erp-intelligence-action strong{
  display:block;

  margin-top:3px;

  color:#ffffff;

  font-size:8px;
}

.erp-intelligence-action > span{
  color:#a9bfd9;

  font-size:7px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .erp-intelligence-layout{
    grid-template-columns:1fr;
  }

}


@media(max-width:600px){

  .erp-intelligence-section{
    padding:85px 0;
  }

  .erp-intelligence-kpis{
    grid-template-columns:1fr;
  }

  .erp-intelligence-action{
    align-items:flex-start;
    flex-direction:column;
  }

}

/* =========================================================
   BUILT TO ADAPT
========================================================= */

.erp-adapt-section{
  padding:120px 0;
  background:#ffffff;
}


/* =========================================================
   HEADING
========================================================= */

.erp-adapt-heading{
  max-width:780px;

  margin:0 auto 55px;

  text-align:center;
}

.erp-adapt-heading h2{
  margin:0;

  color:#071d40;

  font-size:clamp(40px,4vw,56px);
  line-height:1.05;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-adapt-heading h2 span{
  display:block;
  color:#2d74eb;
}

.erp-adapt-heading p{
  max-width:700px;

  margin:20px auto 0;

  color:#78889f;

  font-size:14px;
  line-height:1.75;
}


/* =========================================================
   LAYOUT
========================================================= */

.erp-adapt-layout{
  display:grid;

  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);

  gap:25px;

  max-width:1180px;
  margin:0 auto;

  align-items:stretch;
}


/* =========================================================
   DARK FOUNDATION BOARD
========================================================= */

.erp-foundation-board{
  overflow:hidden;

  display:flex;
  flex-direction:column;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(61,129,235,.22),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      #0b294f,
      #123c70
    );

  box-shadow:
    0 25px 60px rgba(11,39,78,.16);
}


/* HEADER */

.erp-foundation-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:20px 22px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.erp-foundation-header > div{
  display:flex;
  align-items:center;

  gap:10px;
}

.erp-foundation-live{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#52d795;

  box-shadow:
    0 0 0 5px rgba(82,215,149,.1);
}

.erp-foundation-header small{
  display:block;

  color:#72a9ff;

  font-size:6px;
  font-weight:700;
  letter-spacing:.12em;
}

.erp-foundation-header strong{
  display:block;

  margin-top:3px;

  color:#ffffff;

  font-size:10px;
}

.erp-foundation-header > span{
  padding:6px 9px;

  border-radius:999px;

  background:rgba(255,255,255,.07);

  color:#9bc2f5;

  font-size:6px;
  font-weight:700;
}


/* CORE */

.erp-foundation-core{
  padding:42px 32px 35px;

  text-align:center;
}

.erp-foundation-core-icon{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  margin:0 auto 18px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;

  background:#2d74eb;

  box-shadow:
    0 12px 30px rgba(45,116,235,.30);
}

.erp-foundation-core-icon svg{
  width:24px;
  height:24px;

  color:#ffffff;
}

.erp-foundation-core small{
  display:block;

  color:#72a9ff;

  font-size:7px;
  font-weight:700;
  letter-spacing:.13em;
}

.erp-foundation-core strong{
  display:block;

  margin-top:10px;

  color:#ffffff;

  font-size:23px;
  line-height:1.18;
}

.erp-foundation-core p{
  max-width:340px;

  margin:13px auto 0;

  color:#9fb4ce;

  font-size:9px;
  line-height:1.65;
}


/* =========================================================
   PLATFORM LAYERS
========================================================= */

.erp-foundation-layers{
  display:grid;

  gap:8px;

  padding:0 22px 22px;
}

.erp-foundation-layer{
  padding:13px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;

  background:rgba(255,255,255,.045);
}

.erp-foundation-layer > span{
  display:block;

  margin-bottom:9px;

  color:#7197c4;

  font-size:6px;
  font-weight:700;
  letter-spacing:.12em;
}

.erp-foundation-layer > div{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:6px;
}

.erp-foundation-layer b{
  padding:8px 4px;

  border-radius:6px;

  background:rgba(255,255,255,.055);

  color:#dce9f7;

  font-size:7px;
  font-weight:600;

  text-align:center;
}


/* STATUS */

.erp-foundation-status{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-top:auto;

  padding:16px 22px;

  border-top:
    1px solid rgba(255,255,255,.08);

  background:rgba(4,25,52,.22);

  color:#91acd0;

  font-size:7px;
}

.erp-foundation-status > div{
  display:flex;
  align-items:center;

  gap:7px;
}

.erp-foundation-status div:first-child span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#52d795;
}


/* =========================================================
   CAPABILITY GRID
========================================================= */

.erp-adapt-capabilities{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.erp-adapt-capabilities article{
  position:relative;

  min-height:245px;

  padding:23px;

  border:1px solid #dce6f2;
  border-radius:17px;

  background:#ffffff;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.erp-adapt-capabilities article:hover{
  transform:translateY(-3px);

  border-color:#a9c9f4;

  box-shadow:
    0 15px 32px rgba(20,55,100,.07);
}

.erp-adapt-capabilities article > span{
  position:absolute;

  top:20px;
  right:20px;

  color:#b1bfd0;

  font-size:8px;
  font-weight:700;
}

.erp-adapt-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin-bottom:17px;

  border-radius:11px;

  background:#edf5ff;

  color:#2d74eb;
}

.erp-adapt-icon svg{
  width:19px;
  height:19px;
}

.erp-adapt-capabilities h3{
  margin:0;

  color:#0b274e;

  font-size:15px;
}

.erp-adapt-capabilities p{
  margin:9px 0 15px;

  color:#7b8ba0;

  font-size:9px;
  line-height:1.6;
}

.erp-adapt-capabilities ul{
  display:grid;

  gap:6px;

  margin:0;
  padding:0;

  list-style:none;
}

.erp-adapt-capabilities li{
  position:relative;

  padding-left:14px;

  color:#667a94;

  font-size:8px;
}

.erp-adapt-capabilities li::before{
  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:4px;
  height:4px;

  transform:translateY(-50%);

  border-radius:50%;

  background:#2d74eb;
}


/* =========================================================
   BOTTOM SCALABILITY STRIP
========================================================= */

.erp-adapt-strip{
  max-width:1180px;

  display:grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  align-items:center;

  margin:24px auto 0;

  padding:20px 28px;

  border:1px solid #dce6f2;
  border-radius:15px;

  background:#f6f9fd;
}

.erp-adapt-strip > div{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:11px;
}

.erp-adapt-strip strong{
  color:#2d74eb;

  font-size:18px;
}

.erp-adapt-strip span{
  color:#657993;

  font-size:8px;
  line-height:1.35;
}

.erp-adapt-strip > svg{
  width:15px;
  height:15px;

  color:#a1b6cf;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .erp-adapt-layout{
    grid-template-columns:1fr;
  }

}


@media(max-width:650px){

  .erp-adapt-section{
    padding:85px 0;
  }

  .erp-adapt-capabilities{
    grid-template-columns:1fr;
  }

  .erp-adapt-strip{
    grid-template-columns:1fr;

    gap:15px;
  }

  .erp-adapt-strip > svg{
    margin:auto;

    transform:rotate(90deg);
  }

  .erp-foundation-layer > div{
    grid-template-columns:repeat(2,1fr);
  }

}

/* =========================================================
   CUSTOM ERP CTA
========================================================= */

.erp-custom-cta{
  padding:115px 0 125px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5f9ff 100%
    );
}

.erp-custom-cta-panel{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  overflow:hidden;

  max-width:1180px;
  margin:0 auto;

  border:1px solid #d8e4f3;
  border-radius:26px;

  background:#ffffff;

  box-shadow:
    0 28px 70px rgba(20,55,100,.08);
}


/* LEFT */

.erp-custom-cta-content{
  padding:60px;
}

.erp-custom-cta-content h2{
  margin:0;

  color:#071d40;

  font-size:clamp(40px,4vw,56px);
  line-height:1.05;

  font-weight:700;
  letter-spacing:-.045em;
}

.erp-custom-cta-content h2 span{
  display:block;
  color:#2d74eb;
}

.erp-custom-cta-content > p{
  max-width:600px;

  margin:20px 0 0;

  color:#73839b;

  font-size:14px;
  line-height:1.75;
}


/* POINTS */

.erp-custom-points{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px;

  margin-top:30px;
}

.erp-custom-points > div{
  display:flex;
  align-items:center;

  gap:11px;

  min-height:62px;

  padding:14px;

  border:1px solid #dfe8f3;
  border-radius:11px;

  background:#f8fbff;
}

.erp-custom-points svg{
  width:18px;
  height:18px;

  color:#2d74eb;
}

.erp-custom-points span{
  color:#536b87;

  font-size:9px;
  font-weight:600;
}


/* RIGHT */

.erp-custom-cta-action{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:58px 50px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(75,145,245,.22),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0b294f,
      #123c70
    );

  color:#ffffff;
}

.erp-custom-action-label{
  margin-bottom:17px;

  color:#72a9ff;

  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.erp-custom-cta-action h3{
  max-width:420px;

  margin:0;

  color:#ffffff;

  font-size:34px;
  line-height:1.1;

  letter-spacing:-.03em;
}

.erp-custom-cta-action > p{
  margin:18px 0 0;

  color:#a9bdd6;

  font-size:12px;
  line-height:1.7;
}


/* FLOW */

.erp-custom-flow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin:28px 0;
}

.erp-custom-flow span{
  padding:8px 10px;

  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;

  background:rgba(255,255,255,.06);

  color:#ffffff;

  font-size:8px;
  font-weight:700;
}

.erp-custom-flow b{
  color:#72a9ff;

  font-size:12px;
}


/* BUTTON */

.erp-custom-button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  align-self:flex-start;

  min-width:270px;

  padding:14px 17px;

  border-radius:9px;

  background:#2d74eb;

  color:#ffffff;

  font-size:11px;
  font-weight:700;

  text-decoration:none;

  transition:.25s ease;
}

.erp-custom-button svg{
  width:16px;
  height:16px;
}

.erp-custom-button:hover{
  transform:translateY(-2px);

  background:#ffffff;

  color:#123c70;
}

.erp-custom-cta-action small{
  margin-top:13px;

  color:#819dbe;

  font-size:7px;
}


/* RESPONSIVE */

@media(max-width:900px){

  .erp-custom-cta-panel{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .erp-custom-cta{
    padding:80px 0;
  }

  .erp-custom-cta-content,
  .erp-custom-cta-action{
    padding:38px 26px;
  }

  .erp-custom-points{
    grid-template-columns:1fr;
  }

  .erp-custom-button{
    width:100%;
  }

}


/* =========================================================
   NAVIGATION DROPDOWN
========================================================= */

.nav-dropdown{
  position:relative;
}

.nav-dropdown-trigger{
  display:flex;
  align-items:center;
  gap:5px;
 font-size: 14px;
    font-weight: 500;
}

.nav-dropdown-trigger svg{
  width:13px;
  height:13px;

  transition:transform .2s ease;
}


/* DROPDOWN */

.nav-dropdown-menu{
  position:absolute;

  top:calc(100% + 18px);
  left:50%;

  width:300px;

  padding:8px;

  border:1px solid #dce6f2;
  border-radius:14px;

  background:#ffffff;

  box-shadow:
    0 18px 45px rgba(16,45,85,.13);

  opacity:0;
  visibility:hidden;

  transform:
    translateX(-50%)
    translateY(8px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;

  z-index:1000;
}


/* Invisible bridge prevents dropdown closing
   while mouse moves from menu to dropdown */

.nav-dropdown-menu::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:-20px;

  height:20px;
}


/* SHOW */

.nav-dropdown:hover .nav-dropdown-menu{
  opacity:1;
  visibility:visible;

  transform:
    translateX(-50%)
    translateY(0);
}

.nav-dropdown:hover .nav-dropdown-trigger svg{
  transform:rotate(180deg);
}


/* ITEMS */

.nav-dropdown-menu > a{
  display:block;

  padding:10px 14px;

  border-radius:9px;

  text-decoration:none;

  transition:
    background .18s ease,
    transform .18s ease;
}



.nav-dropdown-menu > a:hover{
  background:#f2f7ff;
}

.nav-dropdown-menu > a:hover strong{
  color:#2d74eb;
}

.nav-dropdown-menu > a.active{
  background:#f2f7ff;
}

.nav-dropdown-menu > a.active strong{
  color:#2d74eb;
}

.nav-dropdown-menu strong{
  display:block;

  margin-bottom:3px;

  color:#0b274e;

  font-size:13px;
  font-weight:500;
}

.nav-dropdown-menu span{
  display:block;

  color:#8291a5;

  font-size:10px;
  line-height:1.45;
}


.nav-dropdown-custom{
  position:relative;
  margin-top:12px !important;
  padding-top:18px !important;
}

.nav-dropdown-custom::before{
  content:"";
  position:absolute;

  top:0;
  left:14px;
  right:14px;

  height:1px;
  background:#dce6f2;
}

/* =========================================================
   SITE FOOTER
========================================================= */

.site-footer {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #0d294f 0%,
            #12365f 100%
        );

    color: #ffffff;

    padding: 54px 0 0;

    /* separation from final CTA */
    border-top: 5px solid #245fa8;
}


.footer-container {
    width: min(1500px, calc(100% - 90px));
    margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(300px, .95fr)
        minmax(650px, 1.65fr)
        minmax(300px, .85fr);

    gap: 54px;

    align-items: start;
}


/* =========================================================
   BRAND
========================================================= */

.footer-logo {
    display: inline-block;
}


.footer-logo img {
    display: block;

    width: 130px;
    max-width: 100%;
    height: auto;
}


.footer-description {
    max-width: 440px;

    margin: 16px 0 0;

    color: #aec2da;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-list {
    display: grid;

    gap: 12px;

    margin-top: 25px;
}


.footer-contact-list a,
.footer-contact-list > div {
    display: flex;
    align-items: center;

    gap: 11px;

    color: #e2edf9;

    font-size: 13px;
    line-height: 1.45;

    text-decoration: none;

    transition: color .2s ease;
}


.footer-contact-list a:hover {
    color: #ffffff;
}


.footer-contact-list svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    color: #91acc9;

    stroke-width: 1.7;
}


/* =========================================================
   SOCIAL + PODCAST
========================================================= */

.footer-social-row {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 24px;
}


.footer-social {
    display: flex;

    gap: 9px;
}


.footer-social a {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;

    background: rgba(255,255,255,.025);

    color: #dfeafb;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.footer-social a:hover {
    background: #2d74eb;

    border-color: #2d74eb;

    transform: translateY(-2px);
}


.footer-podcast-social {
    color: #72a9ff !important;
}


.footer-podcast-social svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}


.footer-social
.footer-podcast-social:hover {
    color: #ffffff !important;
}


.footer-podcast-label {
    color: #91aac7;

    font-size: 11px;
    line-height: 1.3;
}


/* =========================================================
   CENTRE
========================================================= */

.footer-links-section {
    min-width: 0;
}


/* =========================================================
   NAVIGATION
========================================================= */

.footer-links-area {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(125px, 1fr));

    gap: 29px;
}


.footer-column h3 {
    position: relative;

    margin: 0 0 21px;

    padding-bottom: 11px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .035em;

    text-transform: uppercase;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 29px;
    height: 2px;

    border-radius: 10px;

    background: #3a86ef;
}


/* readable but compact links */

.footer-column a {
    display: block;

    margin: 0 0 9px;

    color: #b2c6dd;

    font-size: 13px;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-column a:last-child {
    margin-bottom: 0;
}


.footer-column a:hover {
    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
   ACKNOWLEDGEMENT
========================================================= */

.footer-acknowledgement {
    margin-top: 30px;

    padding: 18px 0 0;

    border-top: 1px solid rgba(255,255,255,.09);

    text-align: left;
}


.footer-acknowledgement strong {
    display: block;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.footer-acknowledgement p {
    max-width: 780px;

    margin: 7px 0 0;

    color: #93acc7;

    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.footer-side {
    display: grid;

    gap: 21px;
}


/* =========================================================
   CTA
========================================================= */

.footer-cta-card {
    padding: 24px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.03)
        );
}


.footer-cta-label {
    display: block;

    margin-bottom: 11px;

    color: #72a9ff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .13em;
}


.footer-cta-card h3 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.17;

    letter-spacing: -.025em;
}


.footer-cta-card p {
    margin: 12px 0 18px;

    color: #afc2d8;

    font-size: 11px;
    line-height: 1.65;
}


.footer-cta-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    padding: 13px 15px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--blue-600, #246fdf),
            var(--blue-500, #3b82f6)
        );

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 24px rgba(36,111,223,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


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


.footer-cta-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px rgba(36,111,223,.28);
}


/* =========================================================
   GLOBAL NETWORK
========================================================= */

.footer-network {
    display: grid;

    gap: 8px;
}


.footer-network-title {
    display: block;

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .045em;
}


.footer-network a {
    display: block;

    padding: 13px 15px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;

    background: rgba(255,255,255,.03);

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.footer-network a:hover {
    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.20);

    transform: translateY(-1px);
}


.footer-network strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}


.footer-network small {
    display: block;

    margin-top: 4px;

    color: #96afca;

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   COMPANY DETAILS
========================================================= */

.footer-business {
    margin-top: 18px !important;
    padding: 12px 0 !important;

    border-top: 1px solid rgba(255,255,255,.10);
}


.footer-company-details {
    display: flex;
    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
    margin: 0 !important;
}


.footer-company-details strong {
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
}


.footer-company-details span {
    color: #86a2c0;

    font-size: 9px;
}


.footer-detail-divider {
    width: 1px;
    height: 13px;

    background: rgba(255,255,255,.15);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 !important;
    padding: 12px 0 14px !important;

    border-top: 1px solid rgba(255,255,255,.08);
}


.footer-bottom p {
    margin: 0;

    color: #7f9cbb;

    font-size: 9px;
    line-height: 1.4;
}


.footer-back-top {
    color: #7f9cbb;

    font-size: 9px;

    text-decoration: none;

    transition: color .2s ease;
}


.footer-back-top:hover {
    color: #ffffff;
}


/* =========================================================
   RESPONSIVE — MEDIUM
========================================================= */

@media (max-width: 1250px) {

    .footer-main {
        grid-template-columns:
            minmax(280px, .9fr)
            minmax(520px, 1.45fr);

        gap: 46px;
    }


    .footer-side {
        grid-column: 1 / -1;

        grid-template-columns:
            1.1fr
            .9fr;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

    .footer-container {
        width: min(100% - 50px, 1500px);
    }


    .footer-main {
        grid-template-columns: 1fr;
    }


    .footer-brand {
        max-width: 560px;
    }


    .footer-links-area {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 32px 50px;
    }


    .footer-side {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .site-footer {
        padding-top: 44px;

        border-top-width: 4px;
    }


    .footer-container {
        width: min(100% - 34px, 1500px);
    }


    .footer-main {
        gap: 38px;
    }


    .footer-logo img {
        width: 175px;
    }


    .footer-description {
        margin-top: 22px;

        font-size: 12px;
    }


    .footer-links-area {
        grid-template-columns:
            1fr 1fr;

        gap: 30px 24px;
    }


    .footer-side {
        grid-template-columns: 1fr;
    }


    .footer-social-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;
    }


    .footer-acknowledgement {
        margin-top: 26px;
    }


    .footer-company-details {
        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }


    .footer-detail-divider {
        display: none;
    }


    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .footer-links-area {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   CONTACT FORM SUCCESS MESSAGE
========================================= */

.contact-success {
    margin-top: 20px;
    padding: 24px 26px;

    background: #eefaf4;
    border: 1px solid #b8e4cc;
    border-radius: 10px;

    text-align: center;
    color: #26364f;
}

.contact-success-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 8px;

    font-size: 18px;
    color: #183b2b;
}

.contact-success-title svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.contact-success p {
    margin: 5px 0;
    line-height: 1.6;
    font-size: 14px;
}

.contact-success-help {
    color: #64748b;
}

.contact-success a {
    color: #2878e8;
    font-weight: 600;
    text-decoration: none;
}

.contact-success a:hover {
    text-decoration: underline;
}


/* =========================================================
   PRODUCT VIDEO SECTION
========================================================= */

.product-video-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(55, 125, 238, .10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}


/* subtle background detail */

.product-video-section::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -260px;
    top: -260px;

    border-radius: 50%;

    border: 1px solid rgba(45, 116, 235, .08);

    pointer-events: none;
}


.product-video-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, .85fr)
        minmax(540px, 1.3fr);

    gap: 78px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.product-video-content {
    max-width: 520px;
}


.product-video-content .eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #2878e8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.product-video-content h2 {
    margin: 0;

    color: #0d2346;

    font-size: clamp(42px, 4vw, 64px);
    font-weight: 700;

    line-height: .98;

    letter-spacing: -.045em;
}


.product-video-content h2 span {
    display: block;

    color: #2e76e7;
}


.product-video-intro {
    max-width: 500px;

    margin: 26px 0 0;

    color: #63718b;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   POINTS
========================================================= */

.product-video-points {
    display: grid;

    gap: 21px;

    margin-top: 32px;
}


.product-video-point {
    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 15px;

    align-items: start;
}


.product-video-point-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #edf5ff;

    color: #2878e8;
}


.product-video-point-icon svg {
    width: 19px;
    height: 19px;
}


.product-video-point strong {
    display: block;

    margin-top: 1px;

    color: #10264a;

    font-size: 15px;
    font-weight: 700;
}


.product-video-point p {
    margin: 5px 0 0;

    color: #78869e;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   ACTIONS
========================================================= */

.product-video-actions {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-top: 38px;
}


.product-video-actions .btn {
    gap: 10px;
}


.product-video-actions .btn svg {
    width: 16px;
    height: 16px;
}


.product-video-text-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #17477f;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.product-video-text-link svg {
    width: 15px;
    height: 15px;

    transition: transform .2s ease;
}


.product-video-text-link:hover svg {
    transform: translate(2px, -2px);
}


/* =========================================================
   VIDEO PANEL
========================================================= */

.product-video-panel {
    position: relative;
}


.product-video-browser {
    overflow: hidden;

    border: 1px solid #cedcec;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 35px 70px rgba(19, 52, 92, .16),
        0 8px 20px rgba(30, 72, 120, .08);
}


/* browser bar */

.product-video-browser-top {
    min-height: 52px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: 16px;

    align-items: center;

    padding: 0 17px;

    background: #f3f6f9;

    border-bottom: 1px solid #dce5ee;
}


.product-video-browser-dots {
    display: flex;

    gap: 7px;
}


.product-video-browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #cbd6e2;
}


.product-video-browser-address {
    overflow: hidden;

    padding: 7px 13px;

    border: 1px solid #d7e0e9;
    border-radius: 6px;

    background: #ffffff;

    color: #73839a;

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.product-video-status {
    padding: 4px 7px;

    border-radius: 20px;

    background: #eaf8f1;

    color: #199060;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}


/* video */

.product-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #071b38;
}


.product-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* bottom information */

.product-video-footer {
    min-height: 69px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 18px;

    border-top: 1px solid #e1e8ef;
}


.product-video-footer > div {
    display: flex;
    align-items: center;

    gap: 10px;
}


.product-video-live-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #19b875;

    box-shadow:
        0 0 0 5px rgba(25, 184, 117, .10);
}


.product-video-footer strong {
    display: block;

    color: #183354;

    font-size: 12px;
}


.product-video-footer small {
    display: block;

    margin-top: 2px;

    color: #8795a8;

    font-size: 9px;
}


.product-video-footer > a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    flex: 0 0 auto;

    color: #2878e8;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}


.product-video-footer > a svg {
    width: 13px;
    height: 13px;
}


/* =========================================================
   FLOATING INSIGHT
========================================================= */

.product-video-insight {
    position: absolute;

    right: -28px;
    bottom: -42px;

    width: 300px;

    display: grid;

    grid-template-columns: 36px 1fr;

    gap: 11px;

    align-items: center;

    padding: 16px;

    border: 1px solid #d5e0eb;
    border-radius: 13px;

    background: rgba(255, 255, 255, .96);

    box-shadow:
        0 20px 42px rgba(19, 52, 92, .14);

    backdrop-filter: blur(12px);
}


.product-video-insight > span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #edf4ff;

    color: #2878e8;
}


.product-video-insight svg {
    width: 17px;
    height: 17px;
}


.product-video-insight small {
    display: block;

    color: #8a9ab0;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .10em;
}


.product-video-insight strong {
    display: block;

    margin-top: 3px;

    color: #173354;

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .product-video-section {
        padding: 85px 0;
    }


    .product-video-grid {
        grid-template-columns: 1fr;

        gap: 52px;
    }


    .product-video-content {
        max-width: 680px;

        text-align: center;

        margin: 0 auto;
    }


    .product-video-intro {
        margin-left: auto;
        margin-right: auto;
    }


    .product-video-points {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    .product-video-actions {
        justify-content: center;
    }


    .product-video-panel {
        width: min(760px, 100%);

        margin: 0 auto;
    }

}


@media (max-width: 640px) {

    .product-video-section {
        padding: 70px 0;
    }


    .product-video-content h2 {
        font-size: clamp(38px, 11vw, 50px);
    }


    .product-video-intro {
        font-size: 14px;
    }


    .product-video-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 16px;
    }


    .product-video-actions .btn {
        width: 100%;

        justify-content: center;
    }


    .product-video-text-link {
        justify-content: center;
    }


    .product-video-browser {
        border-radius: 13px;
    }


    .product-video-browser-top {
        min-height: 43px;

        padding: 0 11px;

        gap: 10px;
    }


    .product-video-browser-address {
        font-size: 8px;
    }


    .product-video-status {
        display: none;
    }


    .product-video-footer {
        padding: 12px 13px;
    }


    .product-video-footer small {
        display: none;
    }


    .product-video-footer > a {
        font-size: 9px;
    }


    .product-video-insight {
        position: relative;

        right: auto;
        bottom: auto;

        width: calc(100% - 28px);

        margin: -8px auto 0;
    }

}




/* =========================================================
   24X7 RETAIL SALES ASSISTANT
========================================================= */
.retail-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.retail-chat-launcher {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff;
  box-shadow: 0 18px 42px rgba(36, 111, 223, .34);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.retail-chat-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(36, 111, 223, .42);
}

.retail-chat-launcher::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #29b36b;
}

.retail-chat-unread {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4c5a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(16, 33, 61, .2);
  transition: opacity .2s ease, transform .2s ease;
}
.retail-chat-unread.is-hidden { opacity: 0; transform: scale(.65); pointer-events: none; }

.retail-chat-launcher-icon {
  position: absolute;
  display: grid;
  place-items: center;
  transition: opacity .2s ease, transform .25s ease;
}

.retail-chat-launcher-icon svg,
.retail-chat-close svg,
.retail-chat-form button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.retail-chat-launcher-close { opacity: 0; transform: rotate(-70deg) scale(.7); }
.retail-chat.is-open .retail-chat-launcher-open { opacity: 0; transform: rotate(70deg) scale(.7); }
.retail-chat.is-open .retail-chat-launcher-close { opacity: 1; transform: rotate(0) scale(1); }

.retail-chat-teaser {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 285px;
  padding: 15px 34px 15px 16px;
  border: 1px solid #dce7f3;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(13, 56, 117, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.97);
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.retail-chat-teaser.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.retail-chat-teaser strong, .retail-chat-teaser span { display: block; }
.retail-chat-teaser strong { color: var(--ink); font-size: 11px; line-height: 1.45; }
.retail-chat-teaser span { margin-top: 4px; color: var(--text); font-size: 9px; line-height: 1.45; }
.retail-chat-teaser-close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #91a0b3;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.retail-chat-teaser-close:hover { background: #f1f6fc; color: var(--ink); }

.retail-chat-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 398px;
  height: min(650px, calc(100vh - 125px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 28px 80px rgba(13, 56, 117, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .22s ease, transform .25s ease, visibility .22s ease;
}
.retail-chat.is-open .retail-chat-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

.retail-chat-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  color: #fff;
  background: linear-gradient(135deg, #0a2552 0%, #1759b5 62%, #246fdf 100%);
}
.retail-chat-brandmark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.retail-chat-heading strong, .retail-chat-heading span { display: block; }
.retail-chat-heading strong { font-size: 14px; font-weight: 800; letter-spacing: -.015em; }
.retail-chat-heading span { margin-top: 4px; color: #d8e8ff; font-size: 10px; font-weight: 650; }
.retail-chat-heading i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: #5ee39c;
  box-shadow: 0 0 0 3px rgba(94, 227, 156, .13);
}
.retail-chat-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  cursor: pointer;
}
.retail-chat-close:hover { background: rgba(255, 255, 255, .17); }
.retail-chat-close svg { width: 18px; height: 18px; }

.retail-chat-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px 20px;
  background: linear-gradient(180deg, #f6faff 0%, #fff 34%);
  scrollbar-width: thin;
  scrollbar-color: #c9daee transparent;
}
.retail-chat-message { display: flex; align-items: flex-end; gap: 9px; }
.retail-chat-message + .retail-chat-message { margin-top: 13px; }
.retail-chat-avatar {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #2369cf, #438cf3);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.retail-chat-message-content { min-width: 0; max-width: 303px; }
.retail-chat-bubble {
  max-width: 303px;
  padding: 13px 14px;
  border: 1px solid #dfe8f4;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(13, 56, 117, .055);
}
.retail-chat-welcome { padding: 15px; }
.retail-chat-bubble strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.5; }
.retail-chat-bubble p { margin: 5px 0 0; color: var(--text); font-size: 11px; line-height: 1.58; }
.retail-chat-message-user { justify-content: flex-end; }
.retail-chat-message-user .retail-chat-bubble {
  border-color: transparent;
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff;
  box-shadow: 0 8px 22px rgba(36, 111, 223, .17);
  font-size: 11px;
  line-height: 1.5;
}

.retail-chat-section-label {
  margin: 18px 0 9px 38px;
  color: #8798af;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.retail-chat-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 5px 38px;
}
.retail-chat-quick-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #cfdced;
  border-radius: 11px;
  background: #fff;
  color: var(--blue-800);
  font: inherit;
  font-size: 8.7px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.retail-chat-quick-actions button:hover { transform: translateY(-2px); border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.retail-chat-quick-actions .retail-chat-quick-primary {
  grid-column: 1 / -1;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff;
  box-shadow: 0 8px 20px rgba(36, 111, 223, .18);
}
.retail-chat-response { padding-top: 8px; }

.retail-chat-follow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.retail-chat-follow-actions a {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #d2dfef;
  border-radius: 9px;
  background: #fff;
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.retail-chat-follow-actions a:hover { transform: translateY(-1px); border-color: #9fc2ef; background: #f7fbff; }
.retail-chat-follow-actions a.is-primary { border-color: transparent; background: var(--blue-600); color: #fff; }

.retail-chat-typing { min-width: 54px; display: flex; align-items: center; gap: 4px; padding: 13px 15px; }
.retail-chat-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7d91aa;
  animation: retailChatTyping 1.05s infinite ease-in-out;
}
.retail-chat-typing i:nth-child(2) { animation-delay: .14s; }
.retail-chat-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes retailChatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.retail-chat-footer { padding: 13px 14px 12px; border-top: 1px solid #e3ebf5; background: #fff; }
.retail-chat-form {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 39px;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 14px;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: #fbfdff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.retail-chat-form:focus-within { border-color: #8ab7f4; box-shadow: 0 0 0 4px rgba(66, 136, 245, .08); }
.retail-chat-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.retail-chat-form input::placeholder { color: #8a9ab0; }
.retail-chat-form button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(36, 111, 223, .20);
}
.retail-chat-form button:hover { transform: translateY(-1px); }
.retail-chat-form button svg { width: 18px; height: 18px; }
.retail-chat-human-link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
  color: #8797ad;
  font-size: 8px;
}
.retail-chat-human-link a { color: var(--blue-700); font-weight: 800; }

@media (max-width: 640px) {
  .retail-chat { right: 14px; bottom: 14px; }
  .retail-chat-launcher { width: 56px; height: 56px; border-radius: 17px; }
  .retail-chat-teaser { right: 0; bottom: 70px; width: min(285px, calc(100vw - 28px)); }
  .retail-chat-panel {
    position: fixed;
    right: 12px;
    bottom: 82px;
    width: calc(100vw - 24px);
    height: min(620px, calc(100dvh - 100px));
    border-radius: 20px;
  }
  .retail-chat-header { min-height: 78px; padding: 14px 15px; }
  .retail-chat-body { padding: 17px 14px; }
  .retail-chat-section-label, .retail-chat-quick-actions { margin-left: 38px; }
  .retail-chat-bubble, .retail-chat-message-content { max-width: calc(100vw - 100px); }
}

@media (max-width: 390px) {
  .retail-chat-quick-actions { grid-template-columns: 1fr; }
  .retail-chat-quick-actions .retail-chat-quick-primary { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .retail-chat-panel,
  .retail-chat-launcher,
  .retail-chat-launcher-icon,
  .retail-chat-teaser,
  .retail-chat-quick-actions button,
  .retail-chat-follow-actions a { transition: none; }
  .retail-chat-typing i { animation: none; }
}


/* =========================================================
   HEADER / NAVIGATION — CROSS-PAGE POSITION STABILITY
   Added 23 Aug 2026

   Purpose:
   - reserve space for Lucide chevrons before JS replaces <i>
   - keep desktop menu items in identical slots on every page
   - prevent the small left/right "jump" during page navigation
   - leave mobile navigation behaviour unchanged
========================================================= */

/* Reserve the chevron footprint BEFORE lucide.createIcons() runs.
   This is important because the HTML initially contains an empty
   <i data-lucide="chevron-down"> element. */
.nav-dropdown-trigger > i[data-lucide="chevron-down"],
.nav-dropdown-trigger > svg {
  display: block;
  width: 13px;
  min-width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

/* Keep labels from reflowing while fonts/icons initialise. */
.primary-nav > a,
.nav-dropdown-trigger {
  white-space: nowrap;
}

/* Stable desktop menu slots.
   Each page can still use .active without changing geometry. */
@media (min-width: 1181px) {

  .site-header .nav-wrap {
    min-height: 88px;
  }

  .site-header .brand {
    flex: 0 0 170px;
    width: 170px;
  }

  .site-header .brand img {
    width: 140px;
    height: auto;
  }

  .primary-nav {
    flex: 0 0 auto;
  }

  .primary-nav > a,
  .primary-nav > .nav-dropdown {
    flex: 0 0 auto;
  }

  .primary-nav > a {
    text-align: center;
  }

  /* Exact top-level navigation slots */
  .primary-nav > a[href="index.html"] {
    width: 46px;
  }

  .primary-nav > .nav-dropdown:nth-of-type(1) {
    width: 84px; /* Solutions */
  }

  .primary-nav > .nav-dropdown:nth-of-type(2) {
    width: 78px; /* Modules */
  }

  .primary-nav > a[href="pricing.html"] {
    width: 54px;
  }

  .primary-nav > a[href="about.html"] {
    width: 50px;
  }

  .primary-nav > .nav-dropdown:nth-of-type(3) {
    width: 94px; /* Resources */
  }

  .primary-nav > a[href="contact.html"] {
    width: 62px;
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: center;
  }

  /* Keep the right-side actions from shrinking differently by page. */
  .nav-actions {
    flex: 0 0 auto;
    align-items: center;
  }

  .nav-phone,
  .nav-demo-btn,
  .nav-podcast {
    flex: 0 0 auto;
  }
}

/* At compact desktop/tablet widths, don't force the slot widths,
   but still keep the icon space reserved to prevent a load-time jump. */
@media (min-width: 992px) and (max-width: 1180px) {
  .nav-dropdown-trigger > i[data-lucide="chevron-down"],
  .nav-dropdown-trigger > svg {
    width: 12px;
    min-width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
}