:root {
    --brand-navy: #172d5d;
    --brand-navy-dark: #0b1b3d;
    --brand-red: #df252b;
    --brand-red-dark: #b91f25;
    --brand-white: #ffffff;
    --brand-ink: #172033;
    --brand-muted: #64748b;
    --brand-border: #dbe2ec;
    --brand-surface: #f6f8fb;
}

body {
    color: var(--brand-ink);
}

.pay-navbar,
.bg-pay-dark {
    background: var(--brand-navy-dark) !important;
}

footer.bg-pay-dark {
    background: linear-gradient(115deg, #ffffff 0%, #f4f7fc 68%, #fff1f1 100%) !important;
    color: var(--brand-ink) !important;
    border-top-color: var(--brand-red) !important;
    box-shadow: 0 -10px 30px rgba(23, 45, 93, 0.05);
}
}

footer.bg-pay-dark .text-white,
footer.bg-pay-dark .text-white-50 {
    color: var(--brand-muted) !important;
}

footer.bg-pay-dark h6,
footer.bg-pay-dark strong {
    color: var(--brand-navy) !important;
}

footer.bg-pay-dark a.text-white-50,
footer.bg-pay-dark a:not(.text-pay-cyan) {
    color: var(--brand-muted) !important;
}

footer.bg-pay-dark a.text-white-50:hover,
footer.bg-pay-dark a:not(.text-pay-cyan):hover {
    color: var(--brand-red) !important;
}

footer.bg-pay-dark .text-pay-cyan {
    color: var(--brand-red) !important;
}

footer.bg-pay-dark .border-secondary {
    border-color: var(--brand-border) !important;
}

.bg-pay-gradient,
.bg-pay-gradient::before {
    background: linear-gradient(120deg, #ffffff 0%, #f7f9fc 48%, #e4ebf7 100%) !important;
    color: var(--brand-ink) !important;
}

.bg-pay-gradient {
    background-image: radial-gradient(circle at 88% 14%, rgba(223, 37, 43, 0.14) 0, transparent 25%), linear-gradient(120deg, #ffffff 0%, #f7f9fc 48%, #e4ebf7 100%) !important;
}

.bg-pay-gradient::before {
    background: transparent !important;
}

.bg-pay-gradient .text-white,
.bg-pay-gradient .text-white-50 {
    color: var(--brand-ink) !important;
}

.bg-pay-gradient .text-pay-cyan {
    color: var(--brand-red) !important;
}

.bg-pay-gradient .btn-pay-outline {
    border-color: var(--brand-navy) !important;
    color: var(--brand-navy) !important;
}

.text-pay-cyan {
    color: var(--brand-red) !important;
}

.btn-pay-cyan {
    background: var(--brand-white) !important;
    border-color: var(--brand-white) !important;
    color: var(--brand-navy-dark) !important;
}

.btn-pay-cyan:hover,
.btn-pay-cyan:focus {
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
}

.btn-pay-outline {
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: var(--brand-white) !important;
}

.btn-pay-outline:hover,
.btn-pay-outline:focus {
    background: var(--brand-white) !important;
    border-color: var(--brand-white) !important;
    color: var(--brand-navy-dark) !important;
}

.btn-pay-primary {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: var(--brand-white) !important;
}

.btn-pay-primary:hover,
.btn-pay-primary:focus {
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
}

.text-pay-primary,
.text-pay-secondary {
    color: var(--brand-navy) !important;
}

.bg-pay-soft {
    background-color: var(--brand-white) !important;
}

.pay-badge {
    background: rgba(223, 37, 43, 0.16) !important;
    border-color: rgba(223, 37, 43, 0.55) !important;
    color: #ff8588 !important;
}

.text-pay-cyan.fs-4,
.text-pay-cyan i {
    color: var(--brand-red) !important;
}

.login-page-wrapper {
    background: var(--brand-white) !important;
}

.left-branding-panel {
    background: var(--brand-white) !important;
    color: var(--brand-ink) !important;
}

.left-branding-panel .text-white,
.left-branding-panel .text-white-50 {
    color: var(--brand-ink) !important;
}

.left-branding-panel .stat-card {
    background: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
}

.left-branding-panel .stat-card .text-white,
.left-branding-panel .stat-card .text-white-50 {
    color: var(--brand-ink) !important;
}

.pill-badge {
    background: rgba(223, 37, 43, 0.16) !important;
    border-color: rgba(223, 37, 43, 0.5) !important;
    color: #ff8588 !important;
}

.accent-bar {
    background: var(--brand-red) !important;
}

.feature-icon-box {
    color: #ff8588 !important;
}

.form-input-group .form-control:focus,
.form-input-group:focus-within .input-group-text,
.form-input-group:focus-within .btn-toggle-password {
    border-color: var(--brand-red) !important;
}

.form-input-group:focus-within .input-group-text,
.form-input-group:focus-within .btn-toggle-password {
    color: var(--brand-red) !important;
}

.btn-secure-login {
    background: var(--brand-navy) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 10px 22px -5px rgba(23, 45, 93, 0.4) !important;
}

.btn-secure-login:hover,
.btn-secure-login:focus {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 14px 28px -5px rgba(223, 37, 43, 0.35) !important;
}

.legal-page {
    background: #f4f6fa !important;
    background-image: radial-gradient(at 0% 0%, rgba(23, 45, 93, 0.08) 0, transparent 50%), radial-gradient(at 100% 100%, rgba(223, 37, 43, 0.06) 0, transparent 50%) !important;
}

.legal-sidebar,
.legal-content-wrapper {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--brand-border) !important;
}

.legal-sidebar h3,
.legal-header h1,
.legal-content h2,
.legal-content h3,
.legal-content strong,
.legal-content a,
.legal-sidebar a.active,
.legal-sidebar a:hover {
    color: var(--brand-navy) !important;
}

.legal-sidebar a:hover,
.legal-sidebar a.active {
    background: rgba(23, 45, 93, 0.08) !important;
}

.legal-sidebar a.active {
    border-left-color: var(--brand-red) !important;
}

.legal-content ul li::marker {
    color: var(--brand-red) !important;
}

.legal-header,
.legal-sidebar h3 {
    border-color: var(--brand-border) !important;
}

.legal-header p,
.last-updated,
.legal-content p,
.legal-content ul li,
.legal-sidebar a {
    color: var(--brand-muted) !important;
}

.last-updated {
    background: #eef2f7 !important;
}

@media (max-width: 992px) {
    .legal-sidebar a.active {
        border-left-color: transparent !important;
        border-bottom-color: var(--brand-red) !important;
    }
}

/* Keep legacy inline accents aligned with the new brand palette. */
[style*="#091C3C"],
[style*="#091c3c"] {
    background: var(--brand-navy-dark) !important;
}

[style*="#224C71"],
[style*="#224c71"],
[style*="#314276"],
[style*="#314276"] {
    background: var(--brand-navy) !important;
}

[style*="#3b82f6"] {
    color: var(--brand-red) !important;
}

[style*="#0f172a"] {
    color: var(--brand-ink) !important;
}

/* Shared UI polish and responsive behavior. */
body {
    background: #f7f9fc;
}

.pay-navbar {
    min-height: 76px;
    box-shadow: 0 8px 24px rgba(11, 27, 61, 0.12);
}

.pay-navbar .navbar-brand img {
    height: 44px !important;
    width: auto;
    object-fit: contain;
}

.pay-navbar .nav-link {
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}

.pay-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--brand-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.pay-navbar .nav-link:hover::after,
.pay-navbar .nav-link.active::after {
    transform: scaleX(1);
}

#hero {
    min-height: 560px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--brand-border);
}

#hero h1 {
    max-width: 760px;
    letter-spacing: -0.03em;
}

#hero .lead {
    color: #52627b !important;
    line-height: 1.7;
}

#hero .border-top {
    border-color: rgba(23, 45, 93, 0.14) !important;
}

.pay-badge {
    box-shadow: 0 6px 18px rgba(223, 37, 43, 0.1);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btn-pay-cyan,
.btn-pay-outline,
.btn-pay-primary,
.btn-secure-login {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-pay-cyan:hover,
.btn-pay-outline:hover,
.btn-pay-primary:hover,
.btn-secure-login:hover {
    transform: translateY(-2px);
}

#android-pos-section,
#digital-gprs-pos-section,
#paper-gprs-pos-section,
#soundbox-section,
#services,
#onboarding {
    background: #ffffff;
}

#android-pos-section,
#digital-gprs-pos-section,
#paper-gprs-pos-section,
#soundbox-section {
    padding-top: clamp(4rem, 7vw, 6.5rem) !important;
    padding-bottom: clamp(4rem, 7vw, 6.5rem) !important;
}

#android-pos-section img,
#digital-gprs-pos-section img,
#paper-gprs-pos-section img,
#soundbox-section img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 28px rgba(23, 45, 93, 0.16));
    transition: transform 0.3s ease;
}

#android-pos-section img:hover,
#digital-gprs-pos-section img:hover,
#paper-gprs-pos-section img:hover,
#soundbox-section img:hover {
    transform: translateY(-5px);
}

.pay-card {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(23, 45, 93, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pay-card:hover {
    border-color: rgba(223, 37, 43, 0.38);
    box-shadow: 0 18px 34px rgba(23, 45, 93, 0.12);
    transform: translateY(-6px);
}

.pay-icon-wrapper {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(23, 45, 93, 0.1), rgba(223, 37, 43, 0.12));
    color: var(--brand-red);
    font-size: 1.35rem;
}

.pay-card p {
    line-height: 1.7;
}

.pay-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.pay-stat-card {
    height: 100%;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.hardware-glow {
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 24px;
    background: linear-gradient(120deg, var(--brand-navy-dark), var(--brand-navy) 62%, #8f252c);
    box-shadow: 0 20px 42px rgba(11, 27, 61, 0.18);
}

.hardware-glow .bg-white.bg-opacity-10 {
    background: rgba(255, 255, 255, 0.1) !important;
}

#onboarding .rounded-4 {
    border-color: var(--brand-border) !important;
    box-shadow: 0 12px 26px rgba(23, 45, 93, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#onboarding .rounded-4:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(23, 45, 93, 0.11) !important;
}

footer.bg-pay-dark {
    padding-top: clamp(3.5rem, 6vw, 5rem) !important;
}

footer.bg-pay-dark .container > .row {
    row-gap: 2.5rem !important;
}

footer.bg-pay-dark h6 {
    letter-spacing: 0.08em;
}

footer.bg-pay-dark .text-pay-cyan a,
footer.bg-pay-dark .text-pay-cyan {
    transition: color 0.2s ease, transform 0.2s ease;
}

footer.bg-pay-dark .text-pay-cyan a:hover,
footer.bg-pay-dark .text-pay-cyan:hover {
    color: var(--brand-red-dark) !important;
}

.legal-page {
    padding: clamp(2rem, 5vw, 4rem) 1rem !important;
}

.legal-sidebar,
.legal-content-wrapper {
    box-shadow: 0 14px 34px rgba(23, 45, 93, 0.07) !important;
}

.login-main-card {
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(23, 45, 93, 0.14) !important;
}

@media (max-width: 991.98px) {
    .pay-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        background: rgba(11, 27, 61, 0.98);
    }

    .pay-navbar .navbar-nav {
        gap: 0.2rem;
    }

    .pay-navbar .nav-link {
        padding: 0.7rem 0.75rem;
        border-radius: 8px;
    }

    .pay-navbar .nav-link:hover,
    .pay-navbar .nav-link.active {
        background: rgba(255, 255, 255, 0.08);
    }

    .pay-navbar .nav-link::after {
        display: none;
    }

    .pay-navbar .navbar-collapse .d-flex {
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    #hero {
        min-height: auto;
    }

    #hero .container {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .hardware-glow {
        border-radius: 18px;
    }
}

@media (max-width: 575.98px) {
    .pay-navbar {
        min-height: 68px;
    }

    .pay-navbar .navbar-brand img {
        height: 36px !important;
    }

    #hero .container {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

    #hero h1 {
        font-size: clamp(2.25rem, 11vw, 3.1rem);
        line-height: 1.06;
    }

    #hero .lead {
        font-size: 1rem !important;
    }

    #hero .d-flex.flex-wrap.gap-3 {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    #hero .d-flex.flex-wrap.gap-3 .btn {
        width: 100%;
    }

    #hero .d-flex.align-items-center.gap-4 {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.7rem !important;
    }

    .pay-card {
        padding: 1.35rem;
        border-radius: 15px;
    }

    .hardware-glow {
        padding: 1.25rem;
    }

    footer.bg-pay-dark .d-flex.flex-column.flex-md-row {
        align-items: flex-start !important;
    }

    footer.bg-pay-dark .d-flex.flex-column.flex-md-row > .d-flex {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .legal-container {
        gap: 1rem !important;
    }

    .legal-content-wrapper {
        padding: 1.25rem !important;
        border-radius: 15px !important;
    }

    .legal-sidebar {
        padding: 1rem !important;
        border-radius: 15px !important;
    }

    .login-page-wrapper {
        padding: 1rem 0.75rem !important;
    }

    .login-main-card {
        border-radius: 16px;
    }
}

/* Use the logo colors as a soft gradient for prominent red content and icons. */
.text-pay-cyan,
.text-pay-cyan i,
i.text-pay-cyan,
.pay-icon-wrapper i,
.feature-icon-box i,
.hardware-glow .text-pay-cyan {
    background-image: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.pay-badge {
    background: linear-gradient(135deg, rgba(23, 45, 93, 0.1), rgba(223, 37, 43, 0.16)) !important;
    border-color: rgba(223, 37, 43, 0.35) !important;
}

.accent-bar {
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-red)) !important;
}

.pay-icon-wrapper {
    background: linear-gradient(135deg, rgba(23, 45, 93, 0.12), rgba(223, 37, 43, 0.16));
}

.btn-pay-cyan:hover,
.btn-pay-cyan:focus,
.btn-pay-primary:hover,
.btn-pay-primary:focus,
.btn-secure-login:hover,
.btn-secure-login:focus {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-red)) !important;
    border-color: transparent !important;
}

[style*="#3b82f6"] {
    background-image: linear-gradient(135deg, var(--brand-navy), var(--brand-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.pay-navbar {
    background: linear-gradient(110deg, #ffffff 0%, #f3f6fc 58%, #fff0f1 100%) !important;
    border-bottom: 1px solid rgba(23, 45, 93, 0.12);
}

.pay-navbar .navbar-brand,
.pay-navbar .nav-link,
.pay-navbar .navbar-toggler {
    color: var(--brand-navy-dark) !important;
}

.pay-navbar .nav-link:hover,
.pay-navbar .nav-link.active {
    color: var(--brand-navy-dark) !important;
}

.pay-navbar .btn-pay-outline {
    border-color: var(--brand-navy) !important;
    color: var(--brand-navy) !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

.pay-navbar .btn-pay-outline:hover,
.pay-navbar .btn-pay-outline:focus {
    background: var(--brand-navy) !important;
    color: var(--brand-white) !important;
}

.pay-navbar .btn-pay-cyan {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-red)) !important;
    border-color: transparent !important;
    color: var(--brand-white) !important;
    box-shadow: 0 8px 18px rgba(23, 45, 93, 0.16);
}

#hero h1 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -0.045em;
    background-image: linear-gradient(110deg, var(--brand-navy-dark) 0%, var(--brand-navy) 38%, #536fa8 72%, #8ca7d5 100%);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 10px 24px rgba(23, 45, 93, 0.08);
    animation: hero-title-in 0.8s ease-out both, hero-gradient-flow 8s ease-in-out 0.8s infinite alternate;
}

#hero h1 .text-pay-cyan {
    background-image: linear-gradient(110deg, var(--brand-navy-dark), var(--brand-navy) 52%, #6d8fc9 100%);
    background-size: 180% 180%;
}

@keyframes hero-title-in {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes hero-gradient-flow {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero h1 {
        animation: none;
    }
}

#hardware .hardware-glow h2 {
    background-image: linear-gradient(110deg, #ffffff 0%, #dce9ff 55%, #ffffff 100%) !important;
    color: transparent !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

footer.bg-pay-dark p.text-white-50 {
    color: #3f4f68 !important;
    font-size: 0.88rem;
    line-height: 1.75;
    opacity: 1 !important;
}

footer.bg-pay-dark .col-lg-4 ul li span,
footer.bg-pay-dark .col-lg-4 ul li a.text-white-50 {
    color: #3f4f68 !important;
    opacity: 1 !important;
}

footer.bg-pay-dark .col-lg-4 ul li strong {
    color: var(--brand-navy-dark) !important;
}

footer.bg-pay-dark a:not(.text-pay-cyan):hover,
footer.bg-pay-dark a:not(.text-pay-cyan):focus,
footer.bg-pay-dark a.text-white-50:hover,
footer.bg-pay-dark a.text-white-50:focus {
    color: var(--brand-navy) !important;
}

footer.bg-pay-dark a.text-pay-cyan:hover,
footer.bg-pay-dark a.text-pay-cyan:focus,
footer.bg-pay-dark .text-pay-cyan:hover,
footer.bg-pay-dark .text-pay-cyan:focus {
    background-image: linear-gradient(135deg, var(--brand-navy-dark), #6d8fc9) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

#hero .btn-pay-outline:hover,
#hero .btn-pay-outline:focus {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-red)) !important;
    border-color: transparent !important;
    color: var(--brand-white) !important;
    box-shadow: 0 10px 22px rgba(23, 45, 93, 0.18);
}

.hardware-glow .row.g-3 > .col-sm-6 > div {
    min-height: 142px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 252, 0.94)) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 12px 24px rgba(11, 27, 61, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hardware-glow .row.g-3 > .col-sm-6 > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(11, 27, 61, 0.22);
}

.hardware-glow .row.g-3 h5 {
    background-image: linear-gradient(110deg, var(--brand-navy-dark), var(--brand-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    line-height: 1.25;
}

.hardware-glow .row.g-3 h5 i {
    color: var(--brand-red) !important;
}

.hardware-glow .row.g-3 p {
    color: #52627b !important;
    line-height: 1.55;
}

#hardware .hardware-glow h2 {
    background-image: linear-gradient(110deg, #ffffff 0%, #dce9ff 55%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

#hero .pay-badge i {
    background-image: linear-gradient(135deg, var(--brand-navy), var(--brand-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

@media (max-width: 991.98px) {
    .pay-navbar .navbar-collapse {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 12px 24px rgba(23, 45, 93, 0.1);
        border-color: rgba(23, 45, 93, 0.12) !important;
    }

    .pay-navbar .navbar-collapse .d-flex {
        border-top-color: rgba(23, 45, 93, 0.12) !important;
    }
}

#android-pos-section > .container > .text-center h2,
#paper-gprs-pos-section > .container > .text-center h2,
#digital-gprs-pos-section > .container > .text-center h2,
#soundbox-section > .container > .text-center h2,
#services > .container > .text-center h2,
#onboarding > .container > .text-center h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    background-image: linear-gradient(110deg, var(--brand-navy-dark) 0%, var(--brand-navy) 38%, #536fa8 72%, #8ca7d5 100%);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: section-heading-in 0.75s ease-out both;
}

#android-pos-section h3,
#paper-gprs-pos-section h3,
#digital-gprs-pos-section h3,
#soundbox-section h3,
#services .pay-card h4,
#onboarding .rounded-4 h4,
#hardware .hardware-glow h2,
#hardware .hardware-glow h4 {
    background-image: linear-gradient(110deg, var(--brand-navy-dark) 0%, var(--brand-navy) 48%, #6d8fc9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

#android-pos-section h6,
#paper-gprs-pos-section h6,
#digital-gprs-pos-section h6,
#soundbox-section h6 {
    color: var(--brand-navy) !important;
}

@keyframes section-heading-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #android-pos-section > .container > .text-center h2,
    #paper-gprs-pos-section > .container > .text-center h2,
    #digital-gprs-pos-section > .container > .text-center h2,
    #soundbox-section > .container > .text-center h2,
    #services > .container > .text-center h2,
    #onboarding > .container > .text-center h2 {
        animation: none;
    }
}