/* =========================================================
   BPS POS — HOME REDESIGN (2026)
   Loaded AFTER styles.css / responsive.css so it overrides.
   Keep functionality intact; this file only restyles.
   ========================================================= */

:root {
    --bps-primary: #E11D2A;
    --bps-primary-dark: #B0121C;
    --bps-primary-soft: #FFE9EC;
    --bps-ink: #0B0B0F;
    --bps-ink-2: #1B1B22;
    --bps-muted: #6B7280;
    --bps-surface: #FFFFFF;
    --bps-surface-2: #FFF7F4;
    --bps-surface-3: #F7F8FB;
    --bps-accent: #FFB800;
    --bps-border: #ECECF1;
    --bps-shadow-sm: 0 2px 8px rgba(17, 24, 39, .06);
    --bps-shadow-md: 0 8px 24px rgba(17, 24, 39, .08);
    --bps-shadow-lg: 0 20px 60px rgba(17, 24, 39, .10);
    --bps-radius-sm: 12px;
    --bps-radius-md: 16px;
    --bps-radius-lg: 24px;
    --bps-radius-pill: 999px;
    --bps-font-heading: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    --bps-font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- Global typography overrides ---------- */
body {
    font-family: var(--bps-font-body);
    color: var(--bps-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title h2 {
    font-family: var(--bps-font-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bps-ink);
}

.section-title h2 {
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
}
.section-description {
    color: var(--bps-muted);
    font-size: 16px;
    max-width: 640px;
    margin-inline: auto;
}

/* ---------- Container spacing ---------- */
section {
    scroll-margin-top: 90px;
}

/* ============================================================
   HEADER — Sticky glass
   ============================================================ */
.header-section.home-header,
.header-section {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
    background: transparent;
}
body.bps-scrolled .header-section,
.header-section.bps-scrolled,
.header-section:not(.home-header) {
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    border-bottom: 1px solid var(--bps-border);
}
body.bps-scrolled .header-section .nav-link,
.header-section:not(.home-header) .nav-link {
    color: var(--bps-ink) !important;
}
body.bps-scrolled .header-section .nav-link:hover,
body.bps-scrolled .header-section .nav-link.active,
.header-section:not(.home-header) .nav-link.active,
.header-section:not(.home-header) .nav-link:hover {
    color: var(--bps-primary) !important;
}

.header-section .nav-link {
    font-weight: 600;
    font-size: 15px;
    padding: 8px 14px !important;
    transition: color .2s ease;
}

.get-app-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--bps-primary) !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: var(--bps-radius-pill) !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(225,29,42,.28);
    transition: transform .2s ease, box-shadow .2s ease;
    border: 0;
}
.get-app-btn:hover {
    transform: translateY(-2px);
    background: var(--bps-primary-dark) !important;
    box-shadow: 0 12px 28px rgba(225,29,42,.34);
}

/* Space body for fixed header */
body { padding-top: 0; }

/* ============================================================
   HERO — New layout
   ============================================================ */
.home-banner-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 10% 0%, #2a0a10 0%, var(--bps-ink) 55%, #000 100%) !important;
    padding: 140px 0 80px !important;
    color: #fff;
}
.home-banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 320px at 80% 30%, rgba(225,29,42,.25), transparent 60%),
        radial-gradient(500px 260px at 20% 90%, rgba(255,184,0,.10), transparent 60%);
    pointer-events: none;
}
.home-banner-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    pointer-events: none;
}
.home-banner-section .container { position: relative; z-index: 2; }

.home-banner-section .banner-content h1 {
    color: #fff;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.home-banner-section .banner-content h1 span { color: var(--bps-primary); }
.home-banner-section .banner-content p {
    color: rgba(255,255,255,.78);
    font-size: 17px;
    max-width: 560px;
    margin-bottom: 28px;
}

.home-banner-section .custom-btn.custom-primary-btn {
    background: var(--bps-primary);
    border: 0;
    color: #fff;
    border-radius: var(--bps-radius-pill);
    padding: 14px 28px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(225,29,42,.40);
    transition: transform .2s ease, box-shadow .2s ease;
}
.home-banner-section .custom-btn.custom-primary-btn:hover {
    transform: translateY(-2px);
    background: var(--bps-primary-dark);
}
.home-banner-section .video-button .play-button {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 0 0 rgba(255,255,255,.6);
    animation: bps-pulse 2s infinite;
}
.home-banner-section .video-button .play-button::after {
    content: "";
    width: 0; height: 0;
    border-left: 12px solid var(--bps-primary);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
}
@keyframes bps-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
    70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.home-banner-section .banner-scan {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px 14px;
    border-radius: var(--bps-radius-md);
    backdrop-filter: blur(10px);
}
.home-banner-section .banner-scan img { width: 56px; height: 56px; border-radius: 8px; background: #fff; padding: 4px; }
.home-banner-section .banner-scan p { color: #fff; margin: 0; font-size: 13px; line-height: 1.4; }

.home-banner-section .play-store a img {
    height: 46px;
    transition: transform .2s ease;
}
.home-banner-section .play-store a:hover img { transform: translateY(-2px); }

.home-banner-section .banner-img {
    position: relative;
}
.home-banner-section .banner-img::before {
    content: "";
    position: absolute;
    inset: -20px;
    background: radial-gradient(closest-side, rgba(225,29,42,.35), transparent 70%);
    filter: blur(30px);
    z-index: 0;
}
.home-banner-section .banner-img img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
    animation: bps-float 6s ease-in-out infinite;
}
@keyframes bps-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Hero floating stat cards (absolute over banner-img) */
.bps-hero-stat {
    position: absolute;
    background: rgba(255,255,255,.96);
    color: var(--bps-ink);
    border-radius: var(--bps-radius-md);
    padding: 12px 16px;
    box-shadow: var(--bps-shadow-lg);
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bps-hero-stat .icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--bps-primary-soft);
    color: var(--bps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.bps-hero-stat.one { top: 10%; left: -10px; animation: bps-float 5s ease-in-out infinite; }
.bps-hero-stat.two { bottom: 18%; right: -10px; animation: bps-float 7s ease-in-out infinite 1s; }

/* ============================================================
   STATS STRIP (NEW)
   ============================================================ */
.bps-stats-section {
    padding: 60px 0;
    background: var(--bps-surface);
    border-bottom: 1px solid var(--bps-border);
}
.bps-stats-section .bps-stat {
    text-align: center;
    padding: 20px 10px;
}
.bps-stats-section .bps-stat .num {
    font-family: var(--bps-font-heading);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    color: var(--bps-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}
.bps-stats-section .bps-stat .label {
    margin-top: 8px;
    color: var(--bps-muted);
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================
   FEATURES — Bento grid
   ============================================================ */
.service-section {
    padding: 96px 0 !important;
    background: var(--bps-surface);
}
.service-section .service-card {
    background: var(--bps-surface-2) !important;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg) !important;
    padding: 22px 16px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.service-section .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(225,29,42,.06), transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
}
.service-section .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bps-shadow-md);
    border-color: rgba(225,29,42,.25);
}
.service-section .service-card:hover::before { opacity: 1; }
.service-section .service-card .image {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: var(--bps-shadow-sm);
    position: relative;
    z-index: 1;
}
.service-section .service-card .image img { width: 32px; height: 32px; object-fit: contain; }
.service-section .service-card h6 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--bps-ink);
    position: relative;
    z-index: 1;
}

/* ============================================================
   HOW IT WORKS (NEW)
   ============================================================ */
.bps-how-section {
    padding: 96px 0;
    background: var(--bps-surface-3);
    position: relative;
}
.bps-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
    position: relative;
}
.bps-how-grid::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--bps-primary) 0 8px, transparent 8px 16px);
    opacity: .35;
    z-index: 0;
}
.bps-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.bps-step .num {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bps-primary);
    color: var(--bps-primary);
    font-family: var(--bps-font-heading);
    font-weight: 800;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: var(--bps-shadow-md);
}
.bps-step h5 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.bps-step p { color: var(--bps-muted); font-size: 15px; max-width: 280px; margin: 0 auto; }

@media (max-width: 768px) {
    .bps-how-grid { grid-template-columns: 1fr; gap: 24px; }
    .bps-how-grid::before { display: none; }
}

/* ============================================================
   INTERFACE SLIDER (existing) — refined
   ============================================================ */
.slick-slider-section.bg-pos {
    background: var(--bps-surface-2) !important;
    padding: 96px 0;
}
.slick-slider-section .image img {
    max-height: 520px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.12));
    border-radius: 30px;
}

/* ============================================================
   VIDEO DEMO
   ============================================================ */
.watch-demo-section.bg-FFFFFF {
    background: #fff !important;
    padding: 96px 0;
}
.watch-demo-section .video-wrapper {
    border-radius: var(--bps-radius-lg);
    overflow: hidden;
    position: relative;
    max-width: 880px;
    margin: 40px auto 0;
    box-shadow: var(--bps-shadow-lg) !important;
}
.watch-demo-section .video-wrapper img {
    width: 100%;
    display: block;
}
.watch-demo-section .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--bps-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 0 0 rgba(225,29,42,.6);
    animation: bps-pulse-red 2s infinite;
    cursor: pointer;
    text-decoration: none;
}
@keyframes bps-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(225,29,42,.5); }
    70%  { box-shadow: 0 0 0 22px rgba(225,29,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.pricing-plan-section {
    padding: 96px 0 !important;
    background: var(--bps-surface) !important;
}
.pricing-plan-section .card {
    border: 1px solid var(--bps-border) !important;
    border-radius: var(--bps-radius-lg) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    background: #fff;
}
.pricing-plan-section .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bps-shadow-lg);
}
.pricing-plan-section .card-header {
    background: var(--bps-surface-2) !important;
    text-align: center;
    padding: 28px 20px !important;
}
.pricing-plan-section .card-header p {
    font-weight: 700;
    color: var(--bps-ink);
    font-size: 18px;
    margin-bottom: 6px;
}
.pricing-plan-section .card-header h4 {
    font-size: 40px;
    font-weight: 800;
    color: var(--bps-primary);
    margin: 0;
}
.pricing-plan-section .card-header .price-span {
    color: var(--bps-muted);
    font-size: 14px;
    font-weight: 500;
}
.pricing-plan-section .card-body {
    padding: 24px !important;
}
.pricing-plan-section .card-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.pricing-plan-section .card-body ul li {
    padding: 8px 0;
    color: var(--bps-ink-2);
    font-size: 14.5px;
    border-bottom: 1px dashed var(--bps-border);
}
.pricing-plan-section .card-body ul li:last-child { border-bottom: 0; }
.pricing-plan-section .subscribe-plan {
    background: var(--bps-primary) !important;
    color: #fff !important;
    border-radius: var(--bps-radius-pill) !important;
    padding: 12px 20px !important;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(225,29,42,.28);
    text-align: center;
    transition: transform .2s ease, background .2s ease;
}
.pricing-plan-section .subscribe-plan:hover {
    background: var(--bps-primary-dark) !important;
    transform: translateY(-2px);
}

/* Highlighted middle plan */
.pricing-plan-section .col-lg-4:nth-child(2) .card {
    border: 2px solid var(--bps-primary) !important;
    box-shadow: 0 20px 50px rgba(225,29,42,.15);
    position: relative;
}
.pricing-plan-section .col-lg-4:nth-child(2) .card::before {
    content: "Most Popular";
    position: absolute;
    top: 14px; right: -34px;
    background: var(--bps-primary);
    color: #fff;
    padding: 6px 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    transform: rotate(35deg);
    box-shadow: 0 6px 14px rgba(225,29,42,.30);
    z-index: 2;
    text-transform: uppercase;
}

/* Billing toggle (monthly/yearly) */
.bps-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 18px auto 32px;
    background: var(--bps-surface-3);
    padding: 6px;
    border-radius: var(--bps-radius-pill);
    border: 1px solid var(--bps-border);
}
.bps-billing-toggle button {
    border: 0;
    background: transparent;
    padding: 10px 20px;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
    font-size: 14px;
    color: var(--bps-muted);
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}
.bps-billing-toggle button.active {
    background: var(--bps-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(225,29,42,.25);
}
.bps-billing-toggle .save-chip {
    font-size: 10px;
    background: var(--bps-accent);
    color: var(--bps-ink);
    padding: 2px 8px;
    border-radius: var(--bps-radius-pill);
    margin-left: 6px;
    font-weight: 700;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.customer-section.bg-pos {
    padding: 96px 0 !important;
    background: var(--bps-surface-2) !important;
}
.customer-section .customer-card {
    background: #fff;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--bps-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    margin: 8px;
}
.customer-section .customer-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bps-shadow-md);
}
.customer-section .customer-card img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    border: 3px solid var(--bps-primary-soft);
}
.customer-section .customer-card p {
    color: var(--bps-ink-2);
    font-size: 15px;
    font-style: italic;
    min-height: 80px;
}
.customer-section .customer-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
}
.customer-section .customer-card small { color: var(--bps-muted); }
.customer-section .customer-card ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    color: var(--bps-accent);
}

/* Client logos marquee */
.bps-logos-strip {
    background: #fff;
    padding: 32px 0;
    border-top: 1px solid var(--bps-border);
    overflow: hidden;
}
.bps-logos-strip .track {
    display: flex;
    gap: 60px;
    animation: bps-marquee 28s linear infinite;
    align-items: center;
}
.bps-logos-strip img {
    height: 38px;
    opacity: .55;
    filter: grayscale(100%);
    transition: all .2s ease;
}
.bps-logos-strip img:hover { opacity: 1; filter: grayscale(0%); }
@keyframes bps-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   FAQ (NEW)
   ============================================================ */
.bps-faq-section {
    padding: 96px 0;
    background: var(--bps-surface);
}
.bps-faq-wrap {
    max-width: 820px;
    margin: 40px auto 0;
}
.bps-faq-item {
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-md);
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.bps-faq-item.open { box-shadow: var(--bps-shadow-md); border-color: var(--bps-primary-soft); }
.bps-faq-q {
    width: 100%;
    text-align: start;
    background: transparent;
    border: 0;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 16px;
    color: var(--bps-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 16px;
}
.bps-faq-q::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    color: var(--bps-primary);
    transition: transform .3s ease;
    flex-shrink: 0;
}
.bps-faq-item.open .bps-faq-q::after { content: "−"; transform: rotate(180deg); }
.bps-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 22px;
    color: var(--bps-muted);
    font-size: 15px;
    line-height: 1.7;
}
.bps-faq-item.open .bps-faq-a { max-height: 500px; padding: 0 22px 18px; }

/* ============================================================
   FINAL CTA BANNER
   ============================================================ */
.bps-cta-banner {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bps-primary), var(--bps-primary-dark));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.bps-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 20% 50%, rgba(255,255,255,.15), transparent 60%);
}
.bps-cta-banner .wrap {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.bps-cta-banner h2 {
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    margin-bottom: 12px;
}
.bps-cta-banner p {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    margin-bottom: 28px;
}
.bps-cta-banner .actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.bps-cta-banner .btn-primary-light {
    background: #fff;
    color: var(--bps-primary);
    padding: 14px 28px;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease;
    text-decoration: none;
}
.bps-cta-banner .btn-primary-light:hover { transform: translateY(-2px); background: var(--bps-ink); color: #fff; }
.bps-cta-banner .btn-ghost-light {
    background: transparent;
    color: #fff;
    padding: 13px 26px;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.6);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease;
    text-decoration: none;
}
.bps-cta-banner .btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ============================================================
   BLOG — 3 column grid
   ============================================================ */
.blogs-section {
    padding: 96px 0 60px !important;
    background: var(--bps-surface);
}
.blog-section {
    padding: 0 !important;
    background: var(--bps-surface);
}
.blog-shadow {
    background: #fff;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}
.blog-shadow:hover {
    transform: translateY(-6px);
    box-shadow: var(--bps-shadow-md);
}
.blog-shadow .blog-image img {
    border-radius: 0 !important;
    height: 220px;
    object-fit: cover;
}
.blog-shadow h6 {
    font-size: 17px;
    font-weight: 700;
    color: var(--bps-ink);
}
.blog-shadow p { color: var(--bps-muted); font-size: 14.5px; }
.blog-shadow .custom-clr-primary {
    color: var(--bps-primary);
    font-weight: 700;
    text-decoration: none;
}

.home-blog-small-image {
    width: 100px; height: 80px;
    border-radius: var(--bps-radius-sm) !important;
}

/* ============================================================
   FOOTER — restructured
   ============================================================ */
.footer-section {
    background: var(--bps-ink) !important;
    color: rgba(255,255,255,.75);
    padding: 80px 0 24px !important;
    margin-top: 0;
}
.footer-section h6 {
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px !important;
}
.footer-section a {
    color: rgba(255,255,255,.70);
    text-decoration: none;
    transition: color .2s ease;
}
.footer-section a:hover { color: var(--bps-primary); }
.footer-section .footer-details { color: rgba(255,255,255,.65); font-size: 14.5px; }

.footer-section .banner-scan img { background: #fff; padding: 4px; border-radius: 8px; }
.footer-section .banner-scan p { color: rgba(255,255,255,.7); font-size: 13px; margin: 0; }

.footer-section .social-link {
    list-style: none;
    padding: 0;
    margin-top: 18px;
    display: flex;
    gap: 10px;
}
.footer-section .social-link li a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.footer-section .social-link li a:hover { background: var(--bps-primary); transform: translateY(-2px); }
.footer-section .social-link li a img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

.footer-section hr { border-color: rgba(255,255,255,.12) !important; }

/* Newsletter form in footer */
.bps-newsletter-form {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px;
    border-radius: var(--bps-radius-pill);
    max-width: 420px;
}
.bps-newsletter-form input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
}
.bps-newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.bps-newsletter-form button {
    background: var(--bps-primary);
    color: #fff;
    border: 0;
    padding: 10px 22px;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.bps-newsletter-form button:hover { background: var(--bps-primary-dark); transform: translateY(-1px); }

/* ============================================================
   INNER PAGE HERO (About, Pricing, Blog, Contact)
   ============================================================ */
.bps-page-hero {
    padding: 140px 0 60px;
    background: radial-gradient(900px 380px at 10% 0%, #2a0a10 0%, var(--bps-ink) 60%, #000 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bps-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(500px 260px at 80% 40%, rgba(225,29,42,.25), transparent 60%);
}
.bps-page-hero h1 {
    color: #fff;
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}
.bps-page-hero p {
    color: rgba(255,255,255,.75);
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.bps-page-hero .breadcrumb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    padding: 6px 14px;
    border-radius: var(--bps-radius-pill);
    font-size: 13px;
    color: rgba(255,255,255,.8);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.bps-page-hero .breadcrumb-chip a { color: inherit; text-decoration: none; }
.bps-page-hero .breadcrumb-chip .sep { opacity: .5; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.bps-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bps-primary-soft);
    color: var(--bps-primary);
    border-radius: var(--bps-radius-pill);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}
.bps-about-shell {
    padding: 96px 0;
    background: var(--bps-surface);
}
.bps-about-shell h2 {
    font-size: clamp(30px, 3.1vw, 44px);
    margin-bottom: 16px;
}
.bps-about-shell .lead {
    font-size: 18px;
    color: var(--bps-ink-2);
}
.bps-about-shell p {
    color: var(--bps-muted);
    font-size: 15.5px;
}
.bps-check-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.bps-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--bps-ink-2);
    font-weight: 500;
}
.bps-check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--bps-primary);
    margin-top: 1px;
}
.bps-about-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}
.bps-about-kpis .kpi {
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-md);
    padding: 14px;
    text-align: center;
    background: #fff;
}
.bps-about-kpis .kpi h5 {
    font-size: 24px;
    margin: 0 0 4px;
    color: var(--bps-primary);
}
.bps-about-kpis .kpi p {
    margin: 0;
    font-size: 13px;
    color: var(--bps-muted);
}
.bps-about-image-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--bps-shadow-lg);
    min-height: 460px;
}
.bps-about-float-card {
    position: absolute;
    right: 18px;
    bottom: 18px;
    background: rgba(11, 11, 15, .86);
    color: #fff;
    border-radius: var(--bps-radius-pill);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.bps-pricing-perks {
    padding: 20px 0 96px;
    background: var(--bps-surface);
}
.bps-pricing-perks .perk-card {
    height: 100%;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 26px 22px;
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease;
}
.bps-pricing-perks .perk-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bps-shadow-md);
}
.bps-pricing-perks .perk-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bps-primary-soft);
    color: var(--bps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.bps-pricing-perks .perk-card h5 {
    font-size: 20px;
    margin-bottom: 8px;
}
.bps-pricing-perks .perk-card p {
    margin: 0;
    color: var(--bps-muted);
    font-size: 15px;
}

/* ============================================================
   BLOG INDEX + SHOW PAGES
   ============================================================ */
.bps-blog-index-wrap,
.bps-blog-show-wrap {
    padding: 96px 0;
    background: var(--bps-surface);
}
.bps-blog-card {
    background: #fff;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bps-blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(225, 29, 42, .18);
    box-shadow: var(--bps-shadow-md);
}
.bps-blog-card .cover {
    display: block;
    height: 220px;
}
.bps-blog-card .body {
    padding: 18px 18px 20px;
}
.bps-blog-card .meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bps-muted);
    margin-bottom: 12px;
}
.bps-blog-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.35;
}
.bps-blog-card h3 a {
    color: var(--bps-ink);
    text-decoration: none;
}
.bps-blog-card p {
    color: var(--bps-muted);
    margin-bottom: 14px;
    line-height: 1.65;
}
.bps-blog-card .read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bps-primary);
    font-weight: 700;
    text-decoration: none;
}
.bps-empty-state {
    border: 1px dashed var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 34px;
    text-align: center;
}
.bps-empty-state h4 {
    margin-bottom: 6px;
}
.bps-empty-state p {
    margin: 0;
    color: var(--bps-muted);
}
.bps-side-card {
    background: #fff;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 22px;
}
.bps-side-card h4 {
    font-size: 20px;
    margin-bottom: 12px;
}
.bps-side-card > p {
    color: var(--bps-muted);
    font-size: 14.5px;
    margin-bottom: 14px;
}
.bps-post-mini {
    display: flex;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bps-border);
}
.bps-post-mini:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.bps-post-mini img {
    width: 88px;
    height: 72px;
    border-radius: 12px;
}
.bps-post-mini span {
    display: block;
    font-size: 12px;
    color: var(--bps-muted);
    margin-bottom: 3px;
}
.bps-post-mini p {
    margin: 0;
    color: var(--bps-ink-2);
    font-weight: 600;
    line-height: 1.45;
    font-size: 14px;
}
.bps-blog-pagination .pagination {
    margin-bottom: 0;
}
.bps-blog-pagination .page-link {
    color: var(--bps-ink-2);
    border-color: var(--bps-border);
}
.bps-blog-pagination .active > .page-link,
.bps-blog-pagination .page-link.active {
    background: var(--bps-primary);
    border-color: var(--bps-primary);
}
.bps-side-newsletter .bps-newsletter-form {
    background: var(--bps-surface-3);
    border-color: var(--bps-border);
}
.bps-side-newsletter .bps-newsletter-form input {
    color: var(--bps-ink);
}
.bps-side-newsletter .bps-newsletter-form input::placeholder {
    color: #8b92a0;
}

.bps-page-hero-blog h1 {
    max-width: 920px;
    margin-inline: auto;
}
.bps-article-card {
    border: 1px solid var(--bps-border);
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
}
.bps-article-cover {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}
.bps-article-body {
    padding: 28px;
}
.bps-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.bps-article-meta span {
    font-size: 13px;
    color: var(--bps-muted);
    background: var(--bps-surface-3);
    border: 1px solid var(--bps-border);
    padding: 6px 10px;
    border-radius: var(--bps-radius-pill);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.bps-prose {
    color: var(--bps-ink-2);
    line-height: 1.8;
}
.bps-prose p {
    color: inherit;
}
.bps-prose img,
.bps-prose iframe {
    max-width: 100%;
}
.bps-comments-card,
.bps-comment-form {
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    background: #fff;
    padding: 24px;
}
.bps-comments-card h4,
.bps-comment-form h4 {
    margin-bottom: 6px;
}
.bps-comment-form > p {
    color: var(--bps-muted);
    margin-bottom: 18px;
}
.bps-comment-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--bps-border);
}
.bps-comment-item:first-of-type {
    border-top: 0;
    padding-top: 6px;
}
.bps-comment-item .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bps-primary-soft);
    color: var(--bps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.bps-comment-item .content h6 {
    margin: 0;
    font-size: 15px;
}
.bps-comment-item .content span {
    display: block;
    margin: 1px 0 6px;
    color: var(--bps-muted);
    font-size: 12px;
}
.bps-comment-item .content p {
    margin: 0;
    color: var(--bps-ink-2);
    line-height: 1.6;
}
.bps-comment-form .form-label {
    font-weight: 600;
    font-size: 14px;
}
.bps-comment-form .form-control {
    border: 1px solid var(--bps-border);
    padding: 11px 14px;
    border-radius: 12px;
}
.bps-comment-form .form-control:focus {
    border-color: rgba(225, 29, 42, .4);
    box-shadow: 0 0 0 .2rem rgba(225, 29, 42, .12);
}
.bps-comment-form .submit-btn {
    background: var(--bps-primary);
    color: #fff;
    border: 0;
    border-radius: var(--bps-radius-pill);
    padding: 11px 22px;
    font-weight: 700;
}
.bps-comment-form .submit-btn:hover {
    background: var(--bps-primary-dark);
}
.bps-side-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bps-side-links li + li {
    margin-top: 10px;
}
.bps-side-links a {
    color: var(--bps-ink-2);
    text-decoration: none;
}
.bps-side-links a:hover {
    color: var(--bps-primary);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.bps-contact-wrap {
    padding: 96px 0;
    background: var(--bps-surface);
}
.bps-contact-panel {
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 14px;
    background: #fff;
}
.bps-contact-panel .info-grid {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}
.bps-contact-panel .info-card {
    border: 1px solid var(--bps-border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bps-contact-panel .info-card i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bps-primary-soft);
    color: var(--bps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bps-contact-panel .info-card h6 {
    margin: 0;
    font-size: 14px;
}
.bps-contact-panel .info-card p {
    margin: 2px 0 0;
    color: var(--bps-muted);
    font-size: 13px;
}
.bps-contact-form-card {
    background: #fff;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 30px;
}
.bps-contact-form-card h2 {
    margin-bottom: 8px;
}
.bps-contact-form-card > p {
    color: var(--bps-muted);
    margin-bottom: 20px;
}
.bps-contact-form-card .form-label {
    font-weight: 600;
    font-size: 14px;
}
.bps-contact-form-card .form-control {
    border-radius: 12px;
    border: 1px solid var(--bps-border);
    padding: 12px 14px;
}
.bps-contact-form-card .form-control:focus {
    border-color: rgba(225, 29, 42, .4);
    box-shadow: 0 0 0 .2rem rgba(225, 29, 42, .12);
}
.bps-contact-form-card .submit-btn {
    background: var(--bps-primary);
    color: #fff;
    border: 0;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
    padding: 12px 24px;
}
.bps-contact-form-card .submit-btn:hover {
    background: var(--bps-primary-dark);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.bps-legal-wrap {
    padding: 96px 0;
    background: var(--bps-surface);
}
.bps-legal-card {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--bps-border);
    border-radius: var(--bps-radius-lg);
    padding: 34px;
    background: #fff;
}
.bps-legal-card h2 {
    font-size: clamp(26px, 3vw, 34px);
    margin-bottom: 14px;
}
.bps-legal-card p {
    color: var(--bps-ink-2);
    line-height: 1.8;
}
.bps-legal-list {
    margin: 20px 0 0;
    padding-left: 20px;
}
.bps-legal-list li {
    margin-bottom: 10px;
    color: var(--bps-ink-2);
}
.bps-legal-steps {
    margin: 18px 0 0;
    padding-left: 22px;
}
.bps-legal-steps li {
    margin-bottom: 12px;
    color: var(--bps-ink-2);
    line-height: 1.7;
}
.bps-legal-note {
    margin-top: 20px;
    background: var(--bps-surface-3);
    border: 1px solid var(--bps-border);
    border-radius: 14px;
    padding: 16px;
}
.bps-legal-note h5 {
    margin-bottom: 6px;
}
.bps-legal-note p {
    margin: 0;
    color: var(--bps-muted);
}
.bps-legal-cta {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    background: var(--bps-primary);
    padding: 11px 20px;
    border-radius: var(--bps-radius-pill);
    font-weight: 700;
}
.bps-legal-cta:hover {
    background: var(--bps-primary-dark);
    color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .home-banner-section { padding: 120px 0 60px !important; }
    .bps-hero-stat { display: none; }
    .service-section, .bps-how-section, .watch-demo-section.bg-FFFFFF,
    .pricing-plan-section, .customer-section.bg-pos, .blogs-section, .bps-faq-section { padding: 64px 0 !important; }
    .bps-about-shell,
    .bps-blog-index-wrap,
    .bps-blog-show-wrap,
    .bps-contact-wrap,
    .bps-legal-wrap {
        padding: 68px 0;
    }
    .bps-about-image-card { min-height: 360px; }
    .bps-contact-form-card { padding: 24px; }
}
@media (max-width: 767px) {
    .home-banner-section .play-store { display: flex; gap: 8px; }
    .home-banner-section .play-store a img { height: 40px; }
    .pricing-plan-section .col-lg-4:nth-child(2) .card::before { display: none; }
    .bps-cta-banner { padding: 60px 0; }
    .bps-page-hero { padding: 120px 0 52px; }
    .bps-page-hero h1 { font-size: clamp(28px, 9vw, 36px); }
    .bps-about-kpis { grid-template-columns: 1fr; }
    .bps-blog-card .cover { height: 200px; }
    .bps-article-body,
    .bps-comments-card,
    .bps-comment-form,
    .bps-side-card,
    .bps-legal-card,
    .bps-contact-form-card {
        padding: 18px;
    }
    .bps-post-mini img { width: 80px; height: 68px; }
    .bps-pricing-perks { padding-bottom: 70px; }
    .bps-about-float-card { right: 12px; bottom: 12px; font-size: 12px; }
    .bps-side-newsletter .bps-newsletter-form {
        flex-direction: column;
        border-radius: var(--bps-radius-md);
    }
    .bps-side-newsletter .bps-newsletter-form button {
        width: 100%;
    }
}

/* ============================================================
   RTL adjustments
   ============================================================ */
[dir="rtl"] .bps-page-hero .breadcrumb-chip {
    flex-direction: row-reverse;
}
[dir="rtl"] .bps-check-list {
    padding-right: 0;
}
[dir="rtl"] .bps-legal-list,
[dir="rtl"] .bps-legal-steps {
    padding-left: 0;
    padding-right: 22px;
}
[dir="rtl"] .bps-post-mini,
[dir="rtl"] .bps-comment-item {
    flex-direction: row-reverse;
}
[dir="rtl"] .bps-post-mini p,
[dir="rtl"] .bps-post-mini span,
[dir="rtl"] .bps-comment-item .content,
[dir="rtl"] .bps-article-meta {
    text-align: right;
}
[dir="rtl"] .bps-article-meta {
    justify-content: flex-end;
}
[dir="rtl"] .bps-side-links,
[dir="rtl"] .bps-side-card h4,
[dir="rtl"] .bps-side-card > p {
    text-align: right;
}
[dir="rtl"] .bps-side-newsletter .bps-newsletter-form {
    flex-direction: row-reverse;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* AOS fallback: if AOS is not loaded, show content */
[data-aos]:not(.aos-animate) {
    opacity: 1;
    transform: none;
}