.mtpos-products-alt1 {
    --mtp-products-radius: 1.5rem;
    --mtp-products-radius-sm: 1rem;
}

.mtpos-products-alt1 .py-lg-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mtpos-products-alt1 .display-4 {
    letter-spacing: -.035em;
}
.brands-logo {
    max-height: 60px;
    width: auto;
}
.mtp-products-section-lead {
    max-width: 49rem;
}

.mtp-products-final-lead {
    max-width: 53rem;
}


/* HERO */

.mtpos-products-hero {
    background:
        radial-gradient(circle at 80% 18%, rgba(var(--bs-primary-rgb), .13), transparent 31rem),
        radial-gradient(circle at 8% 12%, rgba(34, 197, 94, .09), transparent 23rem),
        linear-gradient(180deg, var(--bs-body-bg) 0%, var(--bs-tertiary-bg) 100%);
}

.mtpos-products-hero .lead {
    max-width: 43rem;
}


/* CARDS */

.mtpos-products-alt1 .card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mtp-products-radius);
    overflow: hidden;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.mtpos-products-alt1 .card:hover,
.mtpos-products-alt1 .card:focus-within {
    transform: translateY(-.2rem);
    border-color: rgba(var(--bs-primary-rgb), .28);
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .10);
}

.mtpos-products-alt1 .card-img-top {
    height: 16rem;
    object-fit: cover;
    background: var(--bs-tertiary-bg);
}

.mtpos-products-alt1 .badge.text-bg-light {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}


/* IMAGE SHELL */

.mtp-product-visual-shell {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mtp-product-visual-shell img {
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, .10);
}

.mtp-product-float-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .13);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.mtp-product-float-badge i {
    color: var(--bs-primary);
}

.mtp-product-badge-top {
    top: 1.25rem;
    left: 1.25rem;
}

.mtp-product-badge-right {
    top: 45%;
    right: -.65rem;
}

.mtp-product-badge-bottom {
    bottom: 1.25rem;
    left: 2rem;
}


/* CARD ICONS */

.mtp-product-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 1.4rem;
}


/* FEATURE TILES */

.mtp-product-icon-tile {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mtp-products-radius-sm);
    background: var(--bs-body-bg);
}

.mtp-product-icon-tile > i {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
    font-size: 1.2rem;
}


/* DEVICE PANEL */

.mtp-products-device-panel {
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mtp-products-radius);
    background: var(--bs-body-bg);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, .10);
}

.mtp-products-device-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: .6rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    font-size: .875rem;
    font-weight: 600;
}

.mtp-products-device-badge i {
    color: var(--bs-primary);
}


/* CHECK LIST */

.mtp-products-check-list {
    padding-left: 0;
    margin-bottom: 1.5rem;
    list-style: none;
}

.mtp-products-check-list li {
    position: relative;
    margin-bottom: .8rem;
    padding-left: 1.8rem;
}

.mtp-products-check-list li::before {
    position: absolute;
    top: .02rem;
    left: 0;
    color: var(--bs-success);
    content: "✓";
    font-weight: 700;
}


/* PRIMARY BAND */

.mtp-products-dark-feature {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    height: 100%;
    padding: 1.1rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--mtp-products-radius-sm);
    background: rgba(255, 255, 255, .10);
}

.mtp-products-dark-feature > i {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 1.25rem;
}


/* ENTERPRISE HANDOFF */

.mtp-products-enterprise-panel {
    border: 1px solid rgba(var(--bs-primary-rgb), .20);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(var(--bs-primary-rgb), .10),
            transparent 18rem
        ),
        var(--bs-body-bg);
}


/* FINAL CTA */

.mtp-products-final-cta {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 255, 255, .18),
            transparent 18rem
        ),
        linear-gradient(
            135deg,
            #052c65 0%,
            #0d6efd 100%
        );
}


/* DARK MODE */

[data-bs-theme="dark"] .mtpos-products-hero {
    background:
        radial-gradient(circle at 80% 18%, rgba(96, 165, 250, .13), transparent 31rem),
        radial-gradient(circle at 8% 12%, rgba(34, 197, 94, .10), transparent 23rem),
        linear-gradient(180deg, var(--bs-body-bg) 0%, var(--bs-tertiary-bg) 100%);
}

[data-bs-theme="dark"] .mtpos-products-alt1 .card:hover,
[data-bs-theme="dark"] .mtpos-products-alt1 .card:focus-within {
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25);
}

[data-bs-theme="dark"] .mtp-product-visual-shell,
[data-bs-theme="dark"] .mtp-products-device-panel {
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28);
}


/* RESPONSIVE */

@media (max-width: 991.98px) {
    .mtpos-products-alt1 .py-lg-6 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .mtp-product-badge-right {
        right: .75rem;
    }
}

@media (max-width: 767.98px) {
    .mtp-product-float-badge {
        position: static;
        margin-top: .5rem;
        margin-right: .35rem;
    }

    .mtp-product-visual-shell {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .mtp-product-visual-shell img {
        flex-basis: 100%;
    }
}

@media (max-width: 575.98px) {
    .mtpos-products-alt1 .display-4 {
        font-size: 2.4rem;
    }

    .mtpos-products-alt1 .py-lg-6 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .mtpos-products-alt1 .card-img-top {
        height: 12rem;
    }

    .mtp-products-final-cta,
    .mtp-products-enterprise-panel {
        border-radius: 1.25rem !important;
    }
}

/* Hero Image */
.mtpp-hero-image {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 43rem;
    overflow: hidden;
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 8, 24, .96) 0%,
            rgba(3, 8, 24, .89) 28%,
            rgba(3, 8, 24, .55) 48%,
            rgba(3, 8, 24, .08) 70%
        ),
        url("/res/30MKLH/mtpos-retail-pos-inventory-platform-hero.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.mtpp-hero-image::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 8rem;
    pointer-events: none;
    content: "";
    background: linear-gradient(
        180deg,
        rgba(3, 8, 24, 0) 0%,
        rgba(3, 8, 24, .18) 100%
    );
}

.mtpp-hero-image > .container {
    z-index: 1;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mtpp-hero-badge {
    border: 1px solid rgba(147, 197, 253, .32);
    background: rgba(30, 64, 175, .28);
    color: #dbeafe;
    backdrop-filter: blur(.4rem);
}

.mtpp-hero-image .display-3 {
    max-width: 42rem;
    font-size: clamp(2.75rem, 5vw, 4.9rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    text-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .28);
}

.mtpp-hero-accent {
    background: linear-gradient(90deg, #a78bfa 0%, #60a5fa 48%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-white-75 {
    color: rgba(255, 255, 255, .76);
}

.mtpp-hero-image .lead {
    max-width: 39rem;
}

.mtpp-hero-image .btn-primary {
    border-color: transparent;
    background: linear-gradient(90deg, #7c3aed 0%, #2563eb 55%, #0ea5e9 100%);
    box-shadow: 0 .8rem 2rem rgba(37, 99, 235, .28);
}

.mtpp-hero-image .btn-primary:hover,
.mtpp-hero-image .btn-primary:focus {
    border-color: transparent;
    background: linear-gradient(90deg, #6d28d9 0%, #1d4ed8 55%, #0284c7 100%);
    box-shadow: 0 1rem 2.25rem rgba(37, 99, 235, .38);
}

.mtpp-hero-image .btn-outline-light {
    border-color: rgba(255, 255, 255, .58);
    background: rgba(3, 8, 24, .18);
    backdrop-filter: blur(.35rem);
}

.mtpp-hero-image .btn-outline-light:hover,
.mtpp-hero-image .btn-outline-light:focus {
    border-color: #fff;
    background: #fff;
    color: #0f172a;
}

.mtpp-hero-benefits {
    max-width: 42rem;
}

.mtpp-benefit-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(147, 197, 253, .28);
    border-radius: .75rem;
    background: rgba(37, 99, 235, .20);
    color: #93c5fd;
    font-size: 1rem;
    backdrop-filter: blur(.35rem);
}

@media (max-width: 991.98px) {
    .mtpp-hero-image {
        min-height: 40rem;
        background-position: 65% center;
    }

    .mtpp-hero-image {
        background-image:
            linear-gradient(
                90deg,
                rgba(3, 8, 24, .97) 0%,
                rgba(3, 8, 24, .88) 48%,
                rgba(3, 8, 24, .42) 100%
            ),
            url("/images/pages/mtpos-products-alt1/mtpos-products-hero.webp");
    }
}

@media (max-width: 767.98px) {
    .mtpp-hero-image {
        min-height: auto;
        background-position: 68% center;
        background-image:
            linear-gradient(
                90deg,
                rgba(3, 8, 24, .97) 0%,
                rgba(3, 8, 24, .91) 58%,
                rgba(3, 8, 24, .68) 100%
            ),
            url("/res/30MKLH/mtpos-retail-pos-inventory-platform-hero.webp");
    }

    .mtpp-hero-image > .container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .mtpp-hero-benefits {
        max-width: 34rem;
    }
}

@media (max-width: 575.98px) {
    .mtpp-hero-image {
        background-position: 72% center;
    }

    .mtpp-hero-image .display-3 {
        font-size: 2.65rem;
    }

    .mtpp-hero-benefits > [class*="col-"] {
        width: 100%;
    }
}


/* Merge Hero */
.mtpp-platform-badge {
    display: inline-flex;
    align-items: center;
    padding: .5rem .75rem;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    background: rgba(3, 8, 24, .38);
    color: rgba(255, 255, 255, .88);
    font-size: .8rem;
    font-weight: 600;
    backdrop-filter: blur(.35rem);
}

.mtpp-platform-badge i {
    color: #93c5fd;
}

@media (max-width: 575.98px) {
    .mtpp-platform-badge {
        font-size: .75rem;
    }
}



/* New Hero */
/* overlay container (anchored to the image) */
.hero-overlay {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: clamp(300px, 42vw, 460px);
  z-index: 5;
  padding: 1rem;
  display: block; /* d-none d-lg-flex still controls visibility; use block so child grid works */
  pointer-events: auto;
  border-radius: 8px;
}

/* backdrop for better contrast */
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  border-radius: 8px;
  z-index: -1;
}

/* make header text bright and readable */
.hero-overlay header span,
.hero-overlay header h2,
.hero-overlay header p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* cards: solid, opaque, compact */
.hero-overlay .card {
  background: rgba(255,255,255,0.98);
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  border-radius: 6px;
}

/* ensure card text is dark and readable */
.hero-overlay .card .text-dark { color: #1f2937 !important; }

/* grid spacing tweaks */
.hero-overlay .row.g-2 { margin: 0; }
.hero-overlay .row.g-2 > .col-6 { padding: .25rem; }

/* limit vertical overflow so overlay stays within the image */
@media (min-width: 992px) {
  .hero-overlay {
    max-height: calc(70vh - 3rem);
    overflow-y: auto;
  }
  .hero-overlay::-webkit-scrollbar { width: 8px; }
  .hero-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
}

/* ensure overlay uses Bootstrap visibility utilities: hide on small */
@media (max-width: 991.98px) {
  .hero-overlay { display: none; }
}