* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background: #f5f7fb;
 }

 /* =========================
   HERO SECTION
========================= */

 /* .retail-hero {
      position: relative;
     overflow: hidden;
     padding: 67px 0px;
     background: #f5f7fb;
     line-height: 110.00000000000001%;
 } */

 /* .hero-container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px;
 } */

 /* =========================
   BACKGROUND SHAPES
========================= */

 .shape-left {
     position: absolute;
     width: 400px;
     height: 400px;
     background: var(--primary-color);
     bottom: -250px;
     left: -200px;
     border-radius: 50%;
     opacity: 0.08;
 }

 .shape-right {
     position: absolute;
     width: 500px;
     height: 500px;
     background: var(--primary-color);
     top: -250px;
     right: -250px;
     transform: rotate(45deg);
     opacity: 0.08;
 }

 /* =========================
   LEFT CONTENT
========================= */

 .hero-left {
     flex: 1;
     z-index: 2;
 }

 .top-badge {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     padding: 12px 24px;
     border: 1px solid #d7dff0;
     border-radius: 30px;
     background: #fff;
     font-size: 12px;
     font-weight: 400;
     line-height: 16px;
     letter-spacing: .3px;
     margin-bottom: 30px;
     flex-wrap: wrap;
 }

 .hero-left h1 {
     font-family: var(--heading-bold-font-family);
     font-size: clamp(2.2rem, 5vw, 3vw);
     line-height: 1.2;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 20px;
     max-width: 760px;
 }

 .hero-left h1 span {
     color: var(--primary-color);
 }

 .hero-left p {
     font-size: 16px;
     line-height: 175%;
     color: var(--text-primary);
     max-width: 600px;
     margin-bottom: 32px;
     letter-spacing: 5%;
 }

 .sub-text {
     margin-bottom: 40px;
 }

 /* =========================
   BUTTONS
========================= */

 .hero-buttons {
     display: flex;
     gap: 18px;
     margin-bottom: 32px;
     flex-wrap: wrap;
 }

 .btn-primary {
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--primary-color);
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     line-height: 110.00000000000001%;
     letter-spacing: 5%;
     text-decoration: none;
     padding: 12px 20px;
     border-radius: 8px;


 }

 .btn-primary:hover {
     transform: translateY(-3px);
     background: var(--primary-dark);
 }

 .btn-outline {
     border: 1.8px solid var(--primary-color);
     color: var(--primary-color);
     text-decoration: none;
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     line-height: 110.00000000000001%;
     letter-spacing: 5%;
     background: #fff;
 }

 .btn-outline:hover {
     background: var(--bg-dark);
     color: #fff;
     border: 1.8px solid var(--bg-dark);
 }

 /* =========================
   BOTTOM LINE
========================= */

 .bottom-line {
     display: flex;
     gap: 12px;
     font-size: 16px;
     flex-wrap: wrap;
     color: var(--text-primary);
     font-weight: 400;
 }

 /* =========================
   RIGHT CARD
========================= */

 .hero-right {
     max-width: 560px;
     z-index: 2;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(15px);
     border: 2px solid #fff;
     border-radius: 30px;
     padding: 32px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
     /* margin-top: -48px; */
 }

 .feature-card h2 {
     line-height: 120%;
     font-size: 24px;
     font-weight: 700;
     color: va(--text-primary);
     margin-bottom: 16px;
 }

 .feature-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     background: #fff;
     padding: 16px;
     border-radius: 22px;
     margin-bottom: 12px;
     border: 1px solid #eef2f7;
 }

 .number-box {
     font-family: var(--heading-font-family);
     padding: 12px;
     border-radius: 8px;
     background: var(--text-primary);
     color: var(--bg-main);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 18px;
 }

 .feature-content {
     flex: 1;
 }

 .feature-content h3 {
     font-size: 16px;
     font-weight: 600;
     line-height: 110.00000000000001%;
     margin-bottom: 8px;
     color: var(--text-primary);
 }

 .feature-content p {
     font-size: 15px;
     line-height: 1.6;
     color: var(--text-primary);
 }

 .open-link {
     display: flex;
     align-items: center;
     gap: 4px;
     color: var(--primary-color);
     font-weight: 500;
     text-decoration: none;
     white-space: nowrap;
 }

 @media (max-width: 1023px) {

     .hero-left {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .hero-left h1 {
         text-align: center;
     }

     .hero-left p {
         text-align: center;
     }



 }






 /* =========================
   WHY CHOOSE SECTION
========================= */

 .why-choose-section {
     padding: 85px 0px;
     background: #ffffff;
     position: relative;
     overflow: hidden;
 }

 .why-container {
     display: flex;
     flex-direction: row-reverse;
     align-items: flex-start;
     justify-content: space-between;
     gap: 60px;
 }

 /* =========================
   LEFT CONTENT
========================= */

 .why-left {
     flex: 1;
 }



 .why-left h2 {
     font-family: var(--heading-font-family);
     font-size: 40px;
     line-height: 1.2;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 20px;
     max-width: 540px;
 }

 .section-description {
     font-size: 16px;
     line-height: 175%;
     color: var(--text-primary);
     max-width: 760px;
     margin-bottom: 32px;
     letter-spacing: 5%;
 }

 /* =========================
   FEATURE BOX
========================= */

 .feature-box {
     display: flex;
     gap: 18px;
     padding: 16px;
     border-radius: 16px;
     margin-bottom: 20px;
     background: #fff;
     border: 2px solid #fff;
     transition: 0.3s;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);

 }

 .feature-box:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
 }

 .feature-icon {
     font-family: var(--heading-font-family);
     border-radius: 8px;
     padding: 12px;
     background: var(--text-primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     font-weight: 700;
 }

 .feature-text h3 {
     font-size: 16px;
     font-weight: 600;
     line-height: 110.00000000000001%;
     margin-bottom: 8px;
     color: var(--text-primary);
 }

 .feature-text p {
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-primary);
 }

 .highlight {
     color: var(--primary-color);
 }

 /* =========================
   RIGHT CARD
========================= */

 .why-right {
     width: 470px;
 }

 .stats-card {
     max-width: 520px;
     background: linear-gradient(135deg, #0d6efd, #1d4ed8);
     padding: 32px;
     border-radius: 32px;
     color: #fff;
     position: sticky;
     top: 40px;
     border: 1px solid #fff;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);

 }

 .card-badge {
     display: inline-block;
     background: rgba(255, 255, 255, 0.15);
     padding: 10px 18px;
     border-radius: 50px;
     font-size: 14px;
     margin-bottom: 32px;
     border: 1px solid #fff;
     letter-spacing: 5%;
 }

 .stats-card h3 {
     font-family: var(--heading-font-family);
     font-size: 32px;
     line-height: 1.2;
     margin-bottom: 20px;
     letter-spacing: 2%;
     margin-top: 20px;
 }

 .stats-card p {
     font-size: 16px;
     line-height: 1.8;
     color: var(--text-primary);
     margin-bottom: 32px;
 }

 .img-box {
     background-color: white;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* =========================
   BUTTON
========================= */

 .demo-btn {
     display: inline-block;
     background: #fff;
     color: var(--primary-color);
     padding: 12px 20px;
     border-radius: 16px;
     letter-spacing: 5%;
     text-decoration: none;
     font-weight: 600;
     transition: 0.3s;
 }

 .demo-btn:hover {
     transform: translateY(-3px);
 }

 /* =========================
   RESET
========================= */

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background: #f5f7fb;
 }

 /* =========================
   HERO SECTION
========================= */

 .retail-hero {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     height: calc(100vh - 80px);
     /* padding: 67px 0px; */
     background: var(--bg-light);
     line-height: 110%;
 }

 .hero-container {
    width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 60px;
 }

 /* =========================
   BACKGROUND SHAPES
========================= */

 .shape-left {
     position: absolute;
     width: 400px;
     height: 400px;
     background: var(--primary-color);
     bottom: -250px;
     left: -200px;
     border-radius: 50%;
     opacity: 0.08;
 }

 .shape-right {
     position: absolute;
     width: 500px;
     height: 500px;
     background: var(--primary-color);
     top: -250px;
     right: -250px;
     transform: rotate(45deg);
     opacity: 0.08;
 }

 /* =========================
   LEFT CONTENT
========================= */

 .hero-left {
     flex: 1;
     z-index: 2;
 }

 .top-badge {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     padding: 12px 24px;
     border: 1px solid #d7dff0;
     border-radius: 30px;
     background: #fff;
     font-size: 14px;
     font-weight: 400;
     line-height: 16px;
     letter-spacing: .3px;
     margin-bottom: 30px;
     flex-wrap: wrap;
 }


 .hero-left h1 span {
     color: var(--primary-color);
 }

 .hero-left p {
     font-size: 16px;
     line-height: 175%;
     color: var(--text-primary);
     max-width: 620px;
     margin-bottom: 32px;
     letter-spacing: 5%;
 }

 .sub-text {
     margin-bottom: 40px;
 }

 /* =========================
   BUTTONS
========================= */

 .hero-buttons {
     display: flex;
     gap: 18px;
     margin-bottom: 32px;
     flex-wrap: wrap;
 }

 .btn-primary {
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--primary-color);
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     line-height: 110%;
     letter-spacing: 5%;
     text-decoration: none;
     padding: 12px 20px;
     border-radius: 8px;
 }

 .btn-primary:hover {
     transform: translateY(-3px);
 }


 /* =========================
   BOTTOM LINE
========================= */

 .bottom-line {
     display: flex;
     gap: 12px;
     font-size: 14px;
     flex-wrap: wrap;
     color: var(--text-primary);
     font-weight: 400;
 }

 /* =========================
   RIGHT CARD
========================= */

 .hero-right {
     width: 520px;
     z-index: 2;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(15px);
     border: 2px solid #fff;
     border-radius: 30px;
     padding: 32px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
 }

 .feature-card h2 {
     line-height: 120%;
     font-size: 28px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 16px;
 }

 .feature-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     background: #fff;
     padding: 16px;
     border-radius: 22px;
     margin-bottom: 12px;
     border: 1px solid #eef2f7;
 }

 .number-box {
     font-family: var(--heading-font-family);
     padding: 12px;
     border-radius: 8px;
     background: var(--text-primary);
     color: var(--bg-main);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 18px;
 }

 .feature-content {
     flex: 1;
 }

 .feature-content h3 {
     font-size: 16px;
     font-weight: 600;
     line-height: 110%;
     margin-bottom: 8px;
     color: var(--text-primary);
 }

 .feature-content p {
     font-size: 14px;
     line-height: 1.6;
     color: var(--text-primary);
 }

 .open-link {
     display: flex;
     align-items: center;
     gap: 4px;
     color: var(--primary-color);
     font-weight: 500;
     text-decoration: none;
     white-space: nowrap;
 }

 /* =========================
   WHY CHOOSE SECTION
========================= */

 .why-choose-section {
     padding: 85px 0px;
     background: #ffffff;
     position: relative;
     overflow: hidden;
 }

 .why-container {
     display: flex;
     flex-direction: row-reverse;
     align-items: flex-start;
     justify-content: space-between;
     gap: 60px;
 }

 .why-left {
     flex: 1;
 }


 .section-description {
     font-size: 16px;
     line-height: 175%;
     color: var(--text-primary);
     max-width: 760px;
     margin-bottom: 32px;
     letter-spacing: 5%;
 }

 /* =========================
   FEATURE BOX
========================= */

 .feature-box {
     display: flex;
     gap: 18px;
     padding: 16px;
     border-radius: 16px;
     margin-bottom: 20px;
     background: #fff;
     border: 2px solid #fff;
     transition: 0.3s;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
 }

 .feature-box:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
 }

 .feature-icon {
     /* font-family: var(--heading-font-family); */
     border-radius: 8px;
     padding: 12px;
     background: var(--text-primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     font-weight: 700;
     flex-shrink: 0;
 }

 .feature-text h3 {
     font-size: 16px;
     font-weight: 600;
     line-height: 110%;
     margin-bottom: 8px;
     color: var(--text-primary);
 }

 .feature-text p {
     font-size: 14px;
     line-height: 1.6;
     color: var(--text-primary);
 }

 .highlight {
     color: var(--primary-color);
 }

 /* =========================
   RIGHT CARD
========================= */

 .why-right {
     width: 470px;
     flex-shrink: 0;
 }

 .stats-card {
     background: linear-gradient(135deg, var(--primary-color));
     padding: 32px;
     border-radius: 16px;
     color: #fff;
     position: sticky;
     top: 40px;
     border: 1px solid #fff;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
 }

 .card-badge {
     display: inline-block;
     background: rgba(255, 255, 255, 0.15);
     padding: 10px 18px;
     border-radius: 50px;
     font-size: 14px;
     margin-bottom: 32px;
     border: 1px solid #fff;
     letter-spacing: 5%;
 }

 

 .stats-card p {
     font-size: 16px;
     line-height: 1.8;
     color: var(--bg-main);
     margin-bottom: 32px;
 }

 .img-box {
     background-color: white;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .demo-btn {
     display: inline-block;
     background: #fff;
     color: var(--primary-color);
     padding: 12px 20px;
     border-radius: 8px;
     letter-spacing: 5%;
     text-decoration: none;
     font-weight: 600;
     transition: 0.3s;
 }

 .demo-btn:hover {
     transform: translateY(-3px);
 }

 .tag {
     text-transform: uppercase;
     display: inline-block;
     padding: 8px 16px;
     border-radius: 50px;
     border: 1.5px solid var(--primary-color);
     background: rgba(0, 101, 242, 0.08);
     color: var(--primary-color);
     letter-spacing: 5%;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 20px;
 }



 /* ── 1. Large Desktop (1400px+) ──────────────────── */
 @media (min-width: 1400px) {
     .hero-right {
         max-width: 560px;
     }

     .why-right {
         width: 500px;
     }
 }


 /* ── 2. Desktop (1200px – 1399px) ───────────────── */
 @media (min-width: 1200px) and (max-width: 1399px) {
     .retail-hero {
         padding: 60px 0;
     }

     .hero-right {
         width: 480px;
     }

     .why-right {
         width: 440px;
     }

     .why-left h2 {
         font-size: 38px;
     }
 }


 /* ── 3. Laptop (1024px – 1199px) ────────────────── */
 @media (min-width: 1024px) and (max-width: 1199px) {
     .retail-hero {
         padding: 50px 0;
     }

     .hero-container {
         gap: 40px;
     }

     .hero-right {
         width: 440px;
     }

     .feature-card {
         padding: 24px;
     }

     .feature-card h2 {
         font-size: 22px;
         margin-bottom: 20px;
     }

     .feature-content h3 {
         font-size: 14px;
     }

     .feature-content p {
         font-size: 13px;
     }

     .why-container {
         gap: 40px;
     }

     .why-right {
         width: 400px;
     }

     .why-left h2 {
         font-size: 36px;
     }

     .stats-card h3 {
         font-size: 26px;
     }

     .retail-hero {
         height: auto;
     }
 }


 /* ── 4. Tablet (768px – 1023px) ─────────────────── */
 @media (max-width: 1023px) {

     /* Hero */
     .hero-container {
         flex-direction: column;
         gap: 36px;
         height: auto;
     }

     .hero-right {
         width: 100%;
     }

     .hero-left h1 {
         max-width: 100%;
     }

     .feature-card {
         padding: 24px;
         border-radius: 24px;
     }

     .feature-card h2 {
         font-size: 22px;
         margin-bottom: 20px;
     }

     /* Why Choose */
     .why-container {
         flex-direction: column-reverse;
         gap: 85px;
     }

     .why-right {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
     }

     .stats-card {
         position: static;
     }

     .why-left h2 {
         font-size: 36px;
         max-width: 100%;
     }

     .retail-hero {
         height: auto;
         padding: 65px 0;
     }
 }


 /* ── 5. Mobile Large (480px – 767px) ────────────── */
 @media (max-width: 767px) {

     /* Hero */
     .retail-hero {
         padding: 48px 0;
     }

     .hero-container {
         gap: 28px;
     }

     .hero-left p {
         font-size: 15px;
     }

     .feature-card {
         padding: 20px;
         border-radius: 20px;
     }

     .feature-card h2 {
         font-size: 20px;
         margin-bottom: 16px;
     }

     .feature-item {
         flex-wrap: wrap;
         gap: 12px;
     }

     .number-box {
         font-size: 15px;
         padding: 10px;
     }

     .feature-content h3 {
         font-size: 14px;
     }

     /* Why Choose */
     .why-choose-section {
         padding: 60px 0;
     }

     .why-left h2 {
         font-size: 30px;
     }

     .section-description {
         font-size: 15px;
     }

     .feature-box {
         padding: 14px;
     }

     .feature-icon {
         font-size: 18px;
         padding: 10px;
     }

     .stats-card {
         padding: 24px;
         border-radius: 24px;
     }

     .stats-card h3 {
         font-size: 26px;
     }

     .stats-card p {
         font-size: 15px;
     }
 }


 /* ── 6. Mobile Small (360px – 479px) ────────────── */
 @media (max-width: 479px) {

     /* Hero */
     .retail-hero {
         padding: 40px 0;
     }

     .top-badge {
         display: inline-flex;
         font-size: 11px;
         padding: 9px 14px;
         gap: 6px;
     }

     .hero-buttons {
         gap: 12px;
     }

     .btn-primary,
     .btn-outline {
         width: 100%;
         text-align: center;
         justify-content: center;
     }

     .feature-card {
         padding: 16px;
         border-radius: 18px;
     }

     .feature-card h2 {
         font-size: 18px;
     }

     .feature-item {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
         padding: 12px;
         border-radius: 16px;
     }

     .bottom-line {
         font-size: 12px;
         gap: 8px;
     }

     /* Why Choose */
     .why-choose-section {
         padding: 48px 0;
     }

     .why-left h2 {
         font-size: 26px;
     }

     .feature-box {
         flex-direction: column;
         gap: 32px;
         padding: 14px;
     }

     .feature-icon {
         display: inline-block;
         max-width: 42px;
         font-size: 16px;
         padding: 9px 11px;
     }

     .stats-card {
         padding: 20px;
         border-radius: 20px;
     }

     .stats-card h3 {
         font-size: 22px;
     }

     .stats-card p {
         font-size: 14px;
     }

     .demo-btn {
         width: 100%;
         text-align: center;
     }

     .security-badge-item span {
         font-size: 11px;
     }
 }


 /* ── 7. Mobile XSmall (359px aur neeche) ─────────── */
 @media (max-width: 359px) {

     .top-badge {
         font-size: 10px;
         padding: 8px 12px;
     }

     .hero-left h1 {
         font-size: 1.7rem;
     }

     .hero-left p {
         font-size: 13px;
     }

     .feature-card h2 {
         font-size: 16px;
     }

     .feature-content h3 {
         font-size: 13px;
     }

     .feature-content p {
         font-size: 12px;
     }

     .why-left h2 {
         font-size: 22px;
     }

     .section-description {
         font-size: 13px;
     }

     .feature-text h3 {
         font-size: 14px;
     }

     .feature-text p {
         font-size: 12px;
     }

     .stats-card h3 {
         font-size: 20px;
     }

     .card-badge {
         font-size: 12px;
         padding: 8px 14px;
     }

     .security-badge-item span {
         font-size: 11px;
     }
 }


















 /* ============================================
   SECTION WRAPPER
   ============================================ */
 .bbp-section {
     padding: 85px 0px;
     background-color: var(--bg-light);
 }





 /* ============================================
   HEADING & SUBTEXT
   ============================================ */
 .bbp-heading {
     font-family: var(--heading-font-family);
     font-size: 40px;
     font-weight: 800;
     color: var(--text-primary);
     line-height: 1.2;
     margin-bottom: 14px;
 }

 .bbp-subtext {
     font-size: 16px;
     color: var(--text-primary);
     max-width: 600px;
     line-height: 1.75;
     margin-bottom: 48px;
 }

 /* ============================================
   GRID
   ============================================ */
 .bbp-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* border-top: 1px solid #e5e7eb;
     border-left: 1px solid #e5e7eb; */
 }

 /* ============================================
   CARD
   ============================================ */
 .bbp-card {
     padding: 32px 28px 28px;
     /* border-right: 1px solid #e5e7eb;
     border-bottom: 1px solid #e5e7eb; */
     display: flex;
     flex-direction: column;
     gap: 12px;
     transition: background-color 0.2s ease;
 }



 /* ============================================
   ICON TILE
   ============================================ */
 .bbp-icon {
    display: none;
     width: 44px;
     height: 44px;
     border-radius: 10px;
     /* display: flex; */
     align-items: center;
     justify-content: center;
     margin-bottom: 6px;
     flex-shrink: 0;
 }

 .bbp-icon i {
     font-size: 22px;
     line-height: 1;
 }

 .icon-blue {
     background-color: #dbeafe;
     color: var(--primary-color);
 }

 .icon-green {
     background-color: #dcfce7;
     color: #15803d;
 }

 .icon-amber {
     background-color: #fef9c3;
     color: #a16207;
 }

 .icon-teal {
     background-color: #ccfbf1;
     color: #0f766e;
 }

 .icon-purple {
     background-color: #ede9fe;
     color: #6d28d9;
 }

 .icon-coral {
     background-color: #ffe4e6;
     color: #be123c;
 }

 /* ============================================
   CARD TEXT
   ============================================ */
 .bbp-card-title {
     height: 36px;
     font-size: 20px;
     font-weight: 600;
     color: var(--text-primary);
     line-height: 110.00000000000001%;
 }

 .bbp-card-desc {
     font-size: 16px;
     font-weight: 400;
     color: var(--text-primary);
     line-height: 140%;
     flex: 1;
 }

 .bbp-card-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 16px;
     font-weight: 500;
     line-height: 110.00000000000001%;
     color: var(--primary-color);
     margin-top: 4px;
     transition: gap 0.2s ease, color 0.2s ease;
 }

 .bbp-card-link i {
     font-size: 14px;
     transition: transform 0.2s ease;
 }

 .bbp-card-link:hover {
     color: var(--primary-color);
 }

 .bbp-card-link:hover i {
     transform: translate(2px, -2px);
 }

 /* ============================================
   FOOTER CTA
   ============================================ */
 .bbp-footer {
     margin-top: 40px;
 }

 .bbp-cta {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 16px;
     font-weight: 500;
     color: var(--primary-color);
     padding-bottom: 2px;
     transition: color 0.2s ease, border-color 0.2s ease;
 }

 .bbp-cta i {
     font-size: 15px;
     transition: transform 0.2s ease;
 }

 .bbp-cta:hover {
     color: #1558a8;
     border-color: #1558a8;
 }

 .bbp-cta:hover i {
     transform: translate(2px, -2px);
 }

 /* ============================================
   RESPONSIVE — LAPTOP (≤ 1100px)  →  3 columns
   ============================================ */
 @media (max-width: 1100px) {
     .bbp-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* ============================================
   RESPONSIVE — TABLET (≤ 768px)  →  2 columns
   ============================================ */
 @media (max-width: 768px) {
     .bbp-section {
         padding: 56px 0px;
     }

     .bbp-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .bbp-card {
         padding: 24px 20px 22px;
     }

     .bbp-subtext {
         margin-bottom: 36px;
     }
 }

 /* ============================================
   RESPONSIVE — MOBILE (≤ 480px)  →  1 column
   ============================================ */
 @media (max-width: 480px) {
     .bbp-section {
         padding: 44px 0px;
     }

     .bbp-grid {
         grid-template-columns: 1fr;
     }

     .bbp-card {
         padding: 22px 18px 20px;
     }

     .bbp-heading {
         margin-bottom: 20px;
         font-size: 1.65rem;
     }

     .bbp-subtext {
         font-size: 14px;
         margin-bottom: 28px;
     }
 }








 .retail-section {
     margin: auto;
     background: var(--bg-main);
     border-radius: 35px;
     padding: 85px 0px;
     /* display: flex;
     align-items: center;
     justify-content: space-between; */
     gap: 60px;
     overflow: hidden;
 }

 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 40px;
 }

 /* LEFT CONTENT */
 .left-content {
     flex: 1;
     min-width: 320px;
 }





 .title {
     font-family: var(--heading-font-family);
     font-size: 40px;
     line-height: 1.2;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 32px;
     max-width: 650px;
 }

 .description {
     font-size: 16px;
     line-height: 195%;
     letter-spacing: 5%;
     color: var(--text-primary);
     max-width: 720px;
     margin-bottom: 50px;
 }

 .btn-group {
     display: flex;
     gap: 25px;
     flex-wrap: wrap;
 }

 .btn {
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s ease;
     display: inline-block;
 }


 /* RIGHT CARD */
 .right-card {
     max-width: 520px;
     background: #fff;
     border-radius: 32px;
     border: 2px solid #EFF0F6;
     padding: 32px;
     box-shadow: 0px 5px 14px 0px #080F340A;
     flex-shrink: 0;
 }

 .category-item {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
     padding: 22px 0;
     border-bottom: 1px solid #e8e8e8;
 }

 .category-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .left-side {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     flex: 1;
 }

 /* 
 .check {
     min-width: 26px;
     height: 26px;
     border: 2px solid #2563ff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #2563ff;
     font-size: 16px;
     font-weight: 700;
 } */

 .category-name {
     font-size: 18px;
     font-weight: 500;
     color: var(--text-primary);
     line-height: 1.4;
 }

 .status {
     color: var(--text-grey);
     font-size: 16px;
     white-space: nowrap;
     margin-top: 4px;
 }

 /* RESPONSIVE */

 @media (max-width:1200px) {

     .retail-section {
         /* padding: 50px; */
         gap: 40px;
     }

     .title {
         font-size: 58px;
     }

     .description {
         font-size: 20px;
     }

     .right-card {
         width: 460px;
     }

     .security-container {
         align-items: flex-start;
     }


 }

 @media (max-width:992px) {

     .retail-section {
         flex-direction: column;
         align-items: flex-start;
     }

     .right-card {
         width: 100%;
     }

     .title {
         font-size: 50px;
     }
 }

 @media (max-width:768px) {



     .retail-section {

         border-radius: 25px;
     }

     .tag {
         font-size: 16px;
         padding: 10px 22px;
     }

     .title {
         font-size: 40px;
         margin-bottom: 25px;
     }

     .description {
         font-size: 17px;
         line-height: 1.8;
     }

     .btn-group {
         width: 100%;
         flex-direction: column;
     }

     .btn {
         width: 100%;
         text-align: center;
         font-size: 18px;
         padding: 18px 25px;
     }

     .right-card {
         padding: 25px;
         border-radius: 22px;
     }

     .category-item {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }

     .category-name {
         font-size: 18px;
     }

     .status {
         /* margin-left: 64px; */
         font-size: 16px;
     }
 }

 @media (max-width:480px) {

     .title {
         font-size: 26px;
         margin-bottom: 20px;
     }

     .description {
         font-size: 16px;
     }

     .check {
         width: 40px;
         height: 40px;
         min-width: 40px;
         font-size: 16px;
     }

     .category-name {
         font-size: 16px;
     }


 }










 /* =========================
   SECURITY & BACKUPS SECTION
========================= */

 .security-section {
     padding: 85px 0;
     background: var(--bg-light);
     overflow: hidden;
 }

 .security-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
 }

 /* LEFT */
 .security-left {
     flex: 1;
 }

 .security-heading {
     font-family: var(--heading-font-family);
     font-size: 40px;
     font-weight: 800;
     color: var(--text-primary);
     line-height: 1.2;
     margin-bottom: 40px;
 }

 .security-desc {
     font-size: 16px;
     line-height: 175%;
     color: var(--text-primary);
     max-width: 480px;
     margin-bottom: 65px;
     letter-spacing: 5%;
 }

 /* BADGES */
 .security-badges {
     display: flex;
     gap: 32px;
     flex-wrap: wrap;

 }

 .security-badge-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     font-size: 18px;
     color: var(--text-primary);
     font-weight: 400;
 }

 .security-badge-item span {
     font-size: 12px;
     letter-spacing: 5%;
 }

 .badge-icon {
     width: 60px;
     height: 60px;
     border-radius: 50px;
     background: #fff;
     border: 1px solid #e5eaf3;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-primary);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
 }

 .badge-icon svg {
     color: var(--primary-color);
 }

 /* RIGHT ILLUSTRATION */
 .security-right {
     flex-shrink: 0;
     max-width: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
.security-right img{
    width: 100%;
    height: auto;
    object-fit: contain;
}




 /* =========================
   CTA BANNER SECTION
========================= */

 .cta-banner-section {
     padding: 40px 0 85px;
     background: var(--bg-light);
 }

 .cta-banner {
     background: linear-gradient(135deg, var(--primary-color));
     border-radius: 16px;
     padding: 40px 48px;
     display: flex;
     align-items: center;
     gap: 32px;
 }

 /* ICON */
 .cta-icon-wrap {
     flex-shrink: 0;
 }

 .cta-icon {
     width: 80px;
     height: 80px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .cta-icon svg {
     stroke-width: 1.5;
 }

 /* TEXT */
 .cta-text {
     flex: 1;
 }

 .cta-text h3 {
     font-size: 32px;
     font-weight: 700;
     color: #fff;
     line-height: 1.4;
     margin-bottom: 8px;
 }

 .cta-text p {
     font-size: 18px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.75);
 }

 /* BUTTONS */
 .cta-actions {
     display: flex;
     gap: 16px;
     flex-shrink: 0;
     flex-wrap: wrap;
 }

 .cta-btn-primary {
     background: #fff;
     color: var(--primary-color);
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     letter-spacing: 5%;
     white-space: nowrap;
     transition: 0.3s;
     border: 2px solid #fff;
 }

 .cta-btn-primary:hover {
     background: transparent;
     color: #fff;
 }

 .cta-btn-outline {
     background: transparent;
     color: #fff;
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 16px;
     letter-spacing: 5%;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     transition: 0.3s;
     border: 2px solid #fff;
 }

 .cta-btn-outline:hover {
     background: #fff;
     color: var(--primary-color);
 }


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

 /* Laptop (1024px – 1199px) */
 @media (max-width: 1199px) {
     .security-right {
         width: 380px;
     }

     .security-illustration {
         width: 320px;
         height: 190px;
     }

     .illus-shield svg {
         width: 110px;
         height: 130px;
     }

     .illus-db svg {
         width: 65px;
         height: 95px;
     }

     .cta-text h3 {
         font-size: 22px;
     }
 }

 /* Tablet (768px – 1023px) */
 @media (max-width: 1023px) {
     .security-container {
         flex-direction: column;
         gap: 40px;
     }

     .security-right {
         width: 100%;
     }

     .security-illustration {
         width: 100%;
         max-width: 440px;
         margin: 0 auto;
     }

     .security-heading {
         font-size: 34px;
     }

     .cta-banner {
         flex-direction: column;
         text-align: center;
         padding: 36px 32px;
         gap: 24px;
     }

     .cta-actions {
         justify-content: center;
     }

     .cta-text h3 {
         font-size: 22px;
     }

     .container {
         flex-direction: column;
     }
 }

 /* Mobile Large (max 767px) */
 @media (max-width: 767px) {
     .security-section {
         padding: 60px 0;
     }

     .security-heading {
         font-size: 28px;
     }

     .security-desc {
         font-size: 15px;
     }

     .security-badges {
         gap: 16px;
     }

     .badge-icon {
         width: 52px;
         height: 52px;
     }

     .security-badge-item {
         font-size: 13px;
     }

     .cta-banner-section {
         padding: 0 0 60px;
     }

     .cta-banner {
         padding: 28px 24px;
         border-radius: 20px;
     }

     .cta-text h3 {
         font-size: 20px;
     }

     .cta-text p {
         font-size: 14px;
     }
 }

 /* Mobile Small (max 479px) */
 @media (max-width: 479px) {
     .security-heading {
         font-size: 26px;
         margin-bottom: 20px;
     }

     .security-badges {
         gap: 12px;
     }

     .cta-btn-primary,
     .cta-btn-outline {
         width: 100%;
         text-align: center;
         justify-content: center;
     }

     .cta-actions {
         width: 100%;
         flex-direction: column;
     }

     .cta-text h3 {
         font-size: 18px;
     }

     .cta-icon {
         width: 64px;
         height: 64px;
     }

     .cta-icon svg {
         width: 30px;
         height: 30px;
     }
 }
/* =========================================================
   RETAIL CATEGORIES DIRECTORY — 2 COLUMNS / 15 ROWS
   ========================================================= */
.retail-directory-section{background:var(--bg-main);padding:85px 0;overflow:visible}
.retail-directory-wrap{display:block}
.retail-directory-header{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);gap:72px;align-items:end;margin-bottom:46px}
.retail-directory-heading .title{font-family:var(--heading-font-family);color:var(--text-primary);max-width:760px;margin-bottom:0}
.retail-directory-intro{max-width:620px;margin:0 0 4px auto}
.retail-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px}
.retail-directory-column{min-width:0;border-top:1px solid rgba(15,23,42,.12)}
.retail-directory-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:start;min-height:122px;padding:20px 8px;border-bottom:1px solid rgba(15,23,42,.12);transition:background-color .22s ease,padding-left .22s ease,padding-right .22s ease}
.retail-directory-item:hover{background:rgba(255,255,255,.55);padding-left:14px;padding-right:14px}
.retail-directory-item.featured{background:rgba(0,101,242,.055)}
.retail-directory-number{padding-top:2px;font-family:var(--heading-font-family);color:var(--primary-color);font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none}
.retail-directory-content{min-width:0}
.retail-directory-content h3{margin:0 0 7px;font-family:var(--heading-font-family);color:var(--text-primary);font-size:17px;line-height:1.3;font-weight:700}
.retail-directory-content h3 a,.retail-directory-content p a{color:inherit;text-decoration:none}
.retail-directory-content h3 a:hover{color:var(--primary-color)}
.retail-directory-content p{margin:0;color:var(--text-primary);font-size:14px;line-height:1.6;font-weight:400}
.retail-directory-actions{display:flex;align-items:center;gap:8px;padding-top:1px}
.retail-directory-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:50px;background:rgba(0,101,242,.10);color:var(--primary-color);border:1px solid rgba(0,101,242,.16);font-size:11px;font-weight:700;text-decoration:none}
.retail-directory-arrow{color:var(--primary-color);font-size:20px;line-height:1;text-decoration:none;transition:transform .2s ease}
.retail-directory-item:hover .retail-directory-arrow{transform:translateX(4px)}
.retail-directory-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:42px;align-items:center;padding-top:36px}
.retail-directory-footer .description{max-width:800px;margin-bottom:0}
.retail-directory-footer .btn-group{justify-content:flex-end}

/* =========================================================
   EVERYDAY RETAIL OPERATIONS
   ========================================================= */
.retail-ops-section{padding:85px 0;background:#fff}
.retail-ops-header{max-width:760px;margin-bottom:46px}
.retail-ops-header .title{font-family:var(--heading-font-family);color:var(--text-primary);margin-bottom:18px}
.retail-ops-header .description{margin-bottom:0}
.retail-ops-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(15,23,42,.12);border-left:1px solid rgba(15,23,42,.12)}
.retail-op-item{min-height:235px;padding:28px 24px;background:#fff;border-right:1px solid rgba(15,23,42,.12);border-bottom:1px solid rgba(15,23,42,.12);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.retail-op-item:hover{transform:translateY(-3px);background:#fbfcff;box-shadow:0 12px 30px rgba(0,0,0,.05);position:relative;z-index:1}
.retail-op-number{display:block;margin-bottom:34px;font-family:var(--heading-font-family);color:var(--primary-color);font-size:13px;font-weight:700;letter-spacing:.04em}
.retail-op-item h3{font-family:var(--heading-font-family);color:var(--text-primary);font-size:18px;line-height:1.3;margin-bottom:10px}
.retail-op-item p{color:var(--text-primary);font-size:14px;line-height:1.65;margin-bottom:0}

/* =========================================================
   CONNECTED RETAIL ACCOUNTING
   ========================================================= */
.connected-accounting-section{padding:85px 0;background:var(--bg-light)}
.connected-accounting-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.connected-accounting-heading{position:sticky;top:40px}
.connected-accounting-heading .title{font-family:var(--heading-font-family);color:var(--text-primary);margin-bottom:18px}
.connected-accounting-heading .description{margin-bottom:0}
.connected-accounting-list{border-top:1px solid rgba(15,23,42,.12)}
.connected-accounting-item{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:24px 0;border-bottom:1px solid rgba(15,23,42,.12)}
.connected-accounting-item>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--text-primary);color:var(--bg-main);font-family:var(--heading-font-family);font-size:13px;font-weight:700}
.connected-accounting-item h3{font-family:var(--heading-font-family);color:var(--text-primary);font-size:17px;line-height:1.3;margin-bottom:6px}
.connected-accounting-item p{color:var(--text-primary);font-size:14px;line-height:1.65;margin-bottom:0}

/* =========================================================
   CONNECTED WORKFLOW
   ========================================================= */
.retail-workflow-section{padding:85px 0;background:var(--bg-main)}
.retail-workflow-header{max-width:760px;margin-bottom:46px}
.retail-workflow-header .title{font-family:var(--heading-font-family);color:var(--text-primary);margin-bottom:18px}
.retail-workflow-header .description{margin-bottom:0}
.retail-workflow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.retail-workflow-step{position:relative;padding-top:22px;border-top:3px solid rgba(15,23,42,.16)}
.retail-workflow-step:before{content:"";position:absolute;top:-7px;left:0;width:11px;height:11px;border-radius:50%;background:var(--primary-color)}
.retail-workflow-step>span{display:block;margin-bottom:12px;color:var(--primary-color);font-size:12px;font-weight:700;letter-spacing:.04em}
.retail-workflow-step h3{font-family:var(--heading-font-family);color:var(--text-primary);font-size:17px;margin-bottom:7px}
.retail-workflow-step p{color:var(--text-primary);font-size:14px;line-height:1.6;margin-bottom:0}

@media(max-width:1023px){
 .retail-directory-header{grid-template-columns:1fr;gap:18px}.retail-directory-intro{max-width:760px;margin-left:0}.retail-directory-grid{grid-template-columns:1fr;gap:0}.retail-directory-column+.retail-directory-column{border-top:0}.retail-directory-footer{grid-template-columns:1fr;gap:24px}.retail-directory-footer .btn-group{justify-content:flex-start}
 .retail-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.connected-accounting-layout{grid-template-columns:1fr;gap:42px}.connected-accounting-heading{position:static}.retail-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .retail-directory-section,.retail-ops-section,.connected-accounting-section,.retail-workflow-section{padding:60px 0}.retail-directory-item{grid-template-columns:34px minmax(0,1fr) auto;gap:11px;min-height:108px;padding:18px 4px}.retail-directory-content h3{font-size:16px}.retail-directory-content p{font-size:13px}.retail-directory-badge{display:none}
 .retail-ops-grid{grid-template-columns:1fr}.retail-op-item{min-height:auto}.retail-workflow-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:479px){
 .retail-directory-section,.retail-ops-section,.connected-accounting-section,.retail-workflow-section{padding:48px 0}.retail-directory-header{margin-bottom:30px}.retail-directory-item{grid-template-columns:30px minmax(0,1fr) 20px;gap:9px}.retail-directory-content h3{font-size:15px}.retail-directory-content p{font-size:12px}.retail-directory-footer .btn-group{width:100%}.retail-directory-footer .btn-group a{width:100%;text-align:center;justify-content:center}
 .retail-op-item{padding:22px 18px}.connected-accounting-item{grid-template-columns:38px minmax(0,1fr);gap:12px}.connected-accounting-item>span{width:34px;height:34px;font-size:12px}
}



/* =========================================================
   RETAIL PAGE REFINEMENTS
   ========================================================= */

.retail-directory-item {
    min-height: 100px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.retail-directory-content h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.retail-directory-content p {
    font-size: 13px;
    line-height: 1.52;
}

.retail-directory-actions:empty {
    display: none;
}

.retail-financial-section {
    padding: 85px 0;
    background: #ffffff;
}

.retail-financial-layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 80px;
    align-items: start;
}

.retail-financial-copy {
    position: sticky;
    top: 40px;
}

.retail-financial-copy .title {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    margin-bottom: 18px;
    max-width: 560px;
}

.retail-financial-copy .description {
    max-width: 570px;
    margin-bottom: 26px;
}

.retail-financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(15, 23, 42, .12);
    border-left: 1px solid rgba(15, 23, 42, .12);
}

.retail-financial-item {
    min-height: 190px;
    padding: 24px;
    border-right: 1px solid rgba(15, 23, 42, .12);
    border-bottom: 1px solid rgba(15, 23, 42, .12);
    background: #ffffff;
    transition: background-color .2s ease, transform .2s ease;
}

.retail-financial-item:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
}

.retail-financial-item > span {
    display: block;
    margin-bottom: 28px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.retail-financial-item h3 {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 8px;
}

.retail-financial-item p {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.62;
    margin-bottom: 0;
}

@media (max-width: 1023px) {
    .retail-financial-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }
    .retail-financial-copy {
        position: static;
    }
}

@media (max-width: 767px) {
    .retail-financial-section {
        padding: 60px 0;
    }
    .retail-financial-grid {
        grid-template-columns: 1fr;
    }
    .retail-financial-item {
        min-height: auto;
    }
}

@media (max-width: 479px) {
    .retail-financial-section {
        padding: 48px 0;
    }
    .retail-financial-item {
        padding: 20px 18px;
    }
}



/* =========================================================
   SIMPLIFIED RETAIL PAGE
   ========================================================= */

/* Slightly tighter section rhythm */
.retail-ops-section,
.connected-accounting-section,
.retail-workflow-section,
.why-choose-section,
.retail-directory-section,
.retail-financial-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

/* Connected accounting as four meaningful flows */
.connected-flow-list {
    border-top: 1px solid rgba(15, 23, 42, .12);
}

.connected-flow-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.connected-flow-item .flow-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--text-primary);
    color: var(--bg-main);
    font-family: var(--heading-font-family);
    font-size: 13px;
    font-weight: 700;
}

.connected-flow-item h3 {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.connected-flow-item p {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Directory is intentionally compact */
.retail-directory-item {
    min-height: 92px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.retail-directory-content h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

.retail-directory-content p {
    font-size: 12.5px;
    line-height: 1.48;
}

.retail-directory-header {
    margin-bottom: 36px;
}

.retail-directory-footer {
    padding-top: 28px;
}

/* Keep differentiator cards lighter */
.why-left .feature-box {
    margin-bottom: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
}

@media (max-width: 1023px) {
    .retail-ops-section,
    .connected-accounting-section,
    .retail-workflow-section,
    .why-choose-section,
    .retail-directory-section,
    .retail-financial-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .connected-flow-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 22px 0;
    }

    .connected-flow-item .flow-number {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .connected-flow-item h3 {
        font-size: 16px;
    }

    .retail-directory-item {
        min-height: auto;
    }
}



/* =========================================================
   REFINED CONNECTED FLOWS
   ========================================================= */

.connected-flow-visual {
    border-top: 1px solid rgba(15, 23, 42, .12);
}

.connected-flow-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.connected-flow-row .flow-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--text-primary);
    color: var(--bg-main);
    font-family: var(--heading-font-family);
    font-size: 12px;
    font-weight: 700;
}

.flow-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

.flow-track span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(0, 101, 242, .14);
    border-radius: 8px;
    background: rgba(0, 101, 242, .055);
    color: var(--text-primary);
    font-family: var(--heading-font-family);
    font-size: 13px;
    font-weight: 600;
}

.flow-track b {
    color: var(--primary-color);
    font-size: 16px;
}

.connected-flow-row p {
    grid-column: 2;
    margin: -2px 0 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   REFINED FINANCIAL CONTROL
   ========================================================= */

.retail-financial-header {
    max-width: 780px;
    margin-bottom: 42px;
}

.retail-financial-header .title {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    margin-bottom: 18px;
}

.retail-financial-header .description {
    margin-bottom: 0;
}

.retail-financial-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
}

.retail-financial-group {
    border-top: 1px solid rgba(15, 23, 42, .12);
}

.financial-group-label {
    padding: 18px 0 4px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.retail-financial-line {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.retail-financial-line > span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}

.retail-financial-line h3 {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 5px;
}

.retail-financial-line p {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
}

.retail-financial-footer {
    margin-top: 28px;
}


/* =========================================================
   RETAIL FAQ
   ========================================================= */

.retail-faq-section {
    padding: 72px 0;
    background: var(--bg-light);
}

.retail-faq-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 72px;
    align-items: start;
}

.retail-faq-heading .title {
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    margin-bottom: 18px;
}

.retail-faq-heading .description {
    margin-bottom: 0;
}

.retail-faq-list {
    border-top: 1px solid rgba(15, 23, 42, .12);
}

.retail-faq-list details {
    border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.retail-faq-list summary {
    position: relative;
    padding: 20px 38px 20px 0;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary);
    font-family: var(--heading-font-family);
    font-size: 15px;
    font-weight: 600;
}

.retail-faq-list summary::-webkit-details-marker {
    display: none;
}

.retail-faq-list summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 17px;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 400;
}

.retail-faq-list details[open] summary::after {
    content: "−";
}

.retail-faq-list details p {
    padding: 0 38px 20px 0;
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 1023px) {
    .retail-financial-groups,
    .retail-faq-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 767px) {
    .retail-faq-section {
        padding: 60px 0;
    }

    .flow-track {
        gap: 6px;
    }

    .flow-track span {
        font-size: 12px;
        padding: 6px 9px;
    }
}

@media (max-width: 479px) {
    .connected-flow-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .connected-flow-row .flow-number {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .connected-flow-row p {
        grid-column: 2;
        font-size: 13px;
    }

    .retail-financial-line {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }
}



/* =========================================================
   HERO — RETAIL BUSINESS SNAPSHOT
   ========================================================= */

.retail-snapshot-card {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    padding: 28px;
    border: 1px solid rgba(0, 101, 242, .10);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(0, 101, 242, .10), transparent 34%),
        rgba(255, 255, 255, .78);
    box-shadow: 0 18px 50px rgba(21, 37, 74, .09);
    backdrop-filter: blur(14px);
}

.retail-snapshot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.snapshot-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.retail-snapshot-header h2 {
    margin: 0;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.25;
}

.snapshot-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 50px;
    background: #edf9f2;
    color: #17683c;
    font-size: 11px;
    font-weight: 700;
}

.snapshot-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1f9d5a;
}

.retail-snapshot-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.snapshot-metric {
    min-height: 128px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #ffffff;
}

.snapshot-label {
    display: block;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.snapshot-metric strong {
    display: block;
    margin: 11px 0 3px;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.15;
}

.snapshot-metric small {
    display: block;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.45;
    opacity: .72;
}

.retail-snapshot-activity {
    border-top: 1px solid rgba(15, 23, 42, .10);
    border-bottom: 1px solid rgba(15, 23, 42, .10);
}

.snapshot-activity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    font-size: 12px;
}

.snapshot-activity-row:last-child {
    border-bottom: 0;
}

.snapshot-activity-row span {
    color: var(--text-primary);
}

.snapshot-activity-row strong {
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

.snapshot-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
}

.snapshot-footer i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .30);
}

@media (max-width: 1023px) {
    .retail-snapshot-card {
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .retail-snapshot-card {
        padding: 22px;
        border-radius: 20px;
    }

    .retail-snapshot-header h2 {
        font-size: 20px;
    }

    .snapshot-metric {
        min-height: 118px;
    }
}

@media (max-width: 479px) {
    .retail-snapshot-card {
        padding: 16px;
        border-radius: 18px;
    }

    .retail-snapshot-header {
        gap: 12px;
    }

    .retail-snapshot-header h2 {
        font-size: 18px;
    }

    .retail-snapshot-metrics {
        grid-template-columns: 1fr;
    }

    .snapshot-metric {
        min-height: auto;
    }

    .snapshot-footer {
        gap: 6px;
    }
}



/* =========================================================
   LAYOUT TUNING — HERO METRICS / OPERATIONS / FINAL CTA
   ========================================================= */

/* 1. Compact hero snapshot metrics */
.snapshot-compact .retail-snapshot-metrics {
    gap: 10px;
    margin-bottom: 16px;
}

.snapshot-compact .snapshot-metric {
    min-height: 94px;
    padding: 12px 14px;
    border-radius: 12px;
}

.snapshot-compact .snapshot-label {
    font-size: 11px;
}

.snapshot-compact .snapshot-metric strong {
    margin: 6px 0 2px;
    font-size: 20px;
}

.snapshot-compact .snapshot-metric small {
    font-size: 10.5px;
    line-height: 1.35;
}

.snapshot-compact .retail-snapshot-card {
    padding: 24px;
}

.snapshot-compact .retail-snapshot-header {
    margin-bottom: 17px;
}


/* 2. Everyday Retail Operations — editorial two-column layout */
.retail-ops-section {
    padding: 72px 0;
    background: #ffffff;
}

.retail-ops-header-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 70px;
    align-items: end;
    max-width: none;
    margin-bottom: 38px;
}

.retail-ops-header-split .title {
    margin-bottom: 0;
}

.retail-ops-header-split .description {
    max-width: 570px;
    margin: 0 0 4px auto;
}

.retail-ops-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
}

.retail-ops-group {
    border-top: 1px solid rgba(15, 23, 42, .13);
}

.retail-ops-group-label {
    padding: 18px 0 4px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.retail-op-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 19px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .11);
    transition: padding-left .2s ease, background-color .2s ease;
}

.retail-op-row:hover {
    padding-left: 8px;
    background: linear-gradient(90deg, rgba(0,101,242,.035), transparent);
}

.retail-op-row .retail-op-number {
    margin: 0;
    padding-top: 2px;
    color: var(--primary-color);
    font-family: var(--heading-font-family);
    font-size: 12px;
    font-weight: 700;
}

.retail-op-row h3 {
    margin: 0 0 5px;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.3;
}

.retail-op-row p {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.58;
}


/* 3. Full-width, lighter final CTA */
.cta-banner-section.retail-final-cta {
    width: 100%;
    padding: 72px 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(0,101,242,.12), transparent 26%),
        linear-gradient(135deg, #eef5ff 0%, #f7faff 55%, #eef8ff 100%);
}

.retail-final-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
    align-items: center;
}

.retail-final-cta-copy {
    max-width: 760px;
}

.retail-final-cta-copy h2 {
    margin: 0 0 14px;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 36px;
    line-height: 1.2;
}

.retail-final-cta-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.7;
}

.retail-final-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.retail-final-cta-actions .btn-primary,
.retail-final-cta-actions .btn-outline {
    min-width: 132px;
}


/* Responsive */
@media (max-width: 1023px) {
    .retail-ops-header-split,
    .retail-final-cta-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .retail-ops-header-split .description {
        margin-left: 0;
    }

    .retail-final-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .snapshot-compact .snapshot-metric {
        min-height: 88px;
    }

    .retail-ops-groups {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .retail-final-cta {
        padding: 60px 0;
    }

    .retail-final-cta-copy h2 {
        font-size: 30px;
    }
}

@media (max-width: 479px) {
    .snapshot-compact .retail-snapshot-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .snapshot-compact .snapshot-metric {
        min-height: 86px;
        padding: 11px;
    }

    .snapshot-compact .snapshot-metric strong {
        font-size: 18px;
    }

    .snapshot-compact .snapshot-metric small {
        font-size: 9.5px;
    }

    .retail-op-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .retail-final-cta-copy h2 {
        font-size: 26px;
    }

    .retail-final-cta-actions {
        width: 100%;
    }

    .retail-final-cta-actions .btn-primary,
    .retail-final-cta-actions .btn-outline {
        width: 100%;
    }
}



/* =========================================================
   EVERYDAY RETAIL OPERATIONS — OPERATING CYCLE
   ========================================================= */

.retail-ops-cycle-section {
    padding: 76px 0;
    background: #ffffff;
}

.retail-ops-cycle-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 72px;
    align-items: end;
    margin-bottom: 42px;
}

.retail-ops-cycle-header .title {
    margin-bottom: 0;
    max-width: 680px;
}

.retail-ops-cycle-header .description {
    max-width: 560px;
    margin: 0 0 4px auto;
}

.retail-cycle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(15, 23, 42, .13);
    border-bottom: 1px solid rgba(15, 23, 42, .13);
}

.retail-cycle-stage {
    position: relative;
    min-width: 0;
    padding: 28px 24px 26px;
    border-right: 1px solid rgba(15, 23, 42, .11);
}

.retail-cycle-stage:first-child {
    padding-left: 0;
}

.retail-cycle-stage:last-child {
    padding-right: 0;
    border-right: 0;
}

.cycle-stage-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.cycle-stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-family: var(--heading-font-family);
    font-size: 11px;
    font-weight: 700;
}

.cycle-stage-label {
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
}

.retail-cycle-stage h3 {
    margin: 0 0 8px;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 19px;
    line-height: 1.3;
}

.cycle-stage-intro {
    min-height: 66px;
    margin: 0 0 22px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.58;
    opacity: .82;
}

.cycle-actions {
    border-top: 1px solid rgba(15, 23, 42, .10);
}

.cycle-action {
    padding: 14px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .09);
}

.cycle-action:last-child {
    border-bottom: 0;
}

.cycle-action strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-family: var(--heading-font-family);
    font-size: 13px;
    line-height: 1.35;
}

.cycle-action span {
    display: block;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.5;
    opacity: .76;
}

.retail-cycle-stage::after {
    content: "→";
    position: absolute;
    top: 34px;
    right: -10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 14px;
}

.retail-cycle-stage:last-child::after {
    display: none;
}

.retail-cycle-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.retail-cycle-summary span {
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--bg-light);
}

.retail-cycle-summary b {
    color: var(--primary-color);
    font-weight: 600;
}

@media (max-width: 1100px) {
    .retail-cycle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-cycle-stage {
        padding: 26px 24px;
        border-bottom: 1px solid rgba(15, 23, 42, .11);
    }

    .retail-cycle-stage:nth-child(2) {
        border-right: 0;
    }

    .retail-cycle-stage:nth-child(3),
    .retail-cycle-stage:nth-child(4) {
        border-bottom: 0;
    }

    .retail-cycle-stage:first-child {
        padding-left: 24px;
    }

    .retail-cycle-stage:last-child {
        padding-right: 24px;
    }

    .retail-cycle-stage:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .retail-ops-cycle-section {
        padding: 60px 0;
    }

    .retail-ops-cycle-header {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 32px;
    }

    .retail-ops-cycle-header .description {
        margin-left: 0;
    }

    .retail-cycle {
        grid-template-columns: 1fr;
    }

    .retail-cycle-stage {
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(15, 23, 42, .11);
    }

    .retail-cycle-stage:first-child,
    .retail-cycle-stage:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .retail-cycle-stage:nth-child(3) {
        border-bottom: 1px solid rgba(15, 23, 42, .11);
    }

    .retail-cycle-stage:last-child {
        border-bottom: 0;
    }

    .retail-cycle-stage::after {
        content: "↓";
        top: auto;
        right: auto;
        left: 4px;
        bottom: -11px;
    }

    .retail-cycle-stage:nth-child(2)::after {
        display: flex;
    }

    .cycle-stage-intro {
        min-height: auto;
    }

    .retail-cycle-summary {
        justify-content: flex-start;
    }
}


/* Wholesale page uses the same retail design system intentionally. */



/* =========================================================
   WHOLESALE VISUAL DIFFERENTIATION
   Keeps the BusinessBook Plus design system while giving the
   wholesale page its own warmer indigo / teal identity.
   ========================================================= */

:root {
    --wholesale-primary: #3157c8;
    --wholesale-primary-dark: #213d94;
    --wholesale-teal: #16857a;
    --wholesale-ink: #16213b;
    --wholesale-soft: #f4f6ff;
    --wholesale-soft-2: #eef8f6;
    --wholesale-border: rgba(49, 87, 200, .14);
}

/* HERO: subtle indigo / teal wash instead of the retail blue-only feel */
.retail-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(22, 133, 122, .10), transparent 28%),
        radial-gradient(circle at 12% 0%, rgba(49, 87, 200, .08), transparent 30%),
        linear-gradient(180deg, #f8f9ff 0%, #f4f7ff 100%);
}

.retail-hero .highlight,
.retail-hero .tag,
.snapshot-kicker {
    color: var(--wholesale-primary);
}

/* Wholesale dashboard has a slightly more operational / data-led treatment */
.retail-snapshot-card {
    border-color: var(--wholesale-border);
    background:
        radial-gradient(circle at top right, rgba(22, 133, 122, .10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,247,255,.92));
    box-shadow: 0 20px 52px rgba(36, 55, 105, .11);
}

.snapshot-metric {
    border-color: rgba(49, 87, 200, .10);
    background: rgba(255,255,255,.94);
}

.snapshot-metric:nth-child(2),
.snapshot-metric:nth-child(3) {
    background: #f8faff;
}

.snapshot-activity-row strong {
    color: var(--wholesale-teal);
}

.snapshot-status {
    background: #e9f7f4;
    color: #11695f;
}

.snapshot-dot {
    background: var(--wholesale-teal);
}


/* OPERATING CYCLE: soft teal-tinted section differentiates it from retail */
.retail-ops-cycle-section {
    background:
        linear-gradient(180deg, #f4faf8 0%, #f8fbfa 100%);
}

.cycle-stage-number {
    background: var(--wholesale-primary);
}

.cycle-stage-label,
.retail-cycle-stage::after,
.retail-cycle-summary b {
    color: var(--wholesale-teal);
}

.retail-cycle-summary span {
    background: #eaf5f2;
}


/* CONNECTED ACCOUNTING: indigo-tinted band */
.connected-accounting-section {
    background: var(--wholesale-soft);
}

.connected-accounting-heading .tag,
.flow-track b {
    color: var(--wholesale-primary);
}

.flow-track span {
    border-color: rgba(49, 87, 200, .16);
    background: rgba(49, 87, 200, .055);
}

.connected-flow-row .flow-number {
    background: var(--wholesale-ink);
    color: #ffffff;
}


/* WORKFLOW remains white so the page breathes between tinted sections */
.retail-workflow-section {
    background: #ffffff;
}

.retail-workflow-step {
    border-color: rgba(22, 133, 122, .14);
}

.retail-workflow-step:hover {
    background: #f6fbfa;
}


/* WHY WHOLESALE: warmer neutral background */
.why-choose-section {
    background: #faf9f6;
}

.why-choose-section .highlight,
.why-choose-section .tag {
    color: var(--wholesale-primary);
}


/* WHOLESALE CATEGORIES: slightly cooler gray/indigo background */
.retail-directory-section {
    background: #f5f7fb;
}

.retail-directory-heading .tag,
.retail-directory-number {
    color: var(--wholesale-primary);
}

.retail-directory-item:hover {
    background: rgba(49, 87, 200, .035);
}


/* FINANCIAL CONTROL: clear white financial section */
.retail-financial-section {
    background: #ffffff;
}

.retail-financial-header .tag,
.financial-group-label,
.retail-financial-line > span {
    color: var(--wholesale-teal);
}


/* FAQ: alternate indigo-light background */
.retail-faq-section {
    background: #f4f6ff;
}

.retail-faq-heading .tag,
.retail-faq-list summary::after {
    color: var(--wholesale-primary);
}


/* Final CTA: wholesale-specific light indigo/teal treatment */
.cta-banner-section.retail-final-cta {
    background:
        radial-gradient(circle at 88% 18%, rgba(22, 133, 122, .13), transparent 28%),
        radial-gradient(circle at 8% 100%, rgba(49, 87, 200, .10), transparent 32%),
        linear-gradient(135deg, #edf1ff 0%, #f5f8ff 50%, #edf8f5 100%);
}

.retail-final-cta-copy .tag {
    color: var(--wholesale-teal);
}

.retail-final-cta-actions .btn-primary {
    background: var(--wholesale-primary);
    border-color: var(--wholesale-primary);
}

.retail-final-cta-actions .btn-primary:hover {
    background: var(--wholesale-primary-dark);
    border-color: var(--wholesale-primary-dark);
}

.retail-final-cta-actions .btn-outline {
    color: var(--wholesale-primary);
    border-color: rgba(49, 87, 200, .45);
    background: rgba(255,255,255,.55);
}

.retail-final-cta-actions .btn-outline:hover {
    background: #ffffff;
    border-color: var(--wholesale-primary);
}


/* Wholesale section rhythm: slightly more compact and operational */
@media (min-width: 1024px) {
    .connected-accounting-section,
    .retail-directory-section {
        padding-top: 78px;
        padding-bottom: 78px;
    }
}



/* =========================================================
   DISTRIBUTOR PAGE — DISTINCT VISUAL SYSTEM
   ========================================================= */

:root {
    --dist-primary: #245b78;
    --dist-primary-dark: #163d54;
    --dist-cyan: #2c8fa3;
    --dist-slate: #253746;
    --dist-soft: #eef7f9;
    --dist-soft-2: #f3f6f8;
    --dist-border: rgba(36, 91, 120, .14);
}

/* Hero */
.retail-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(44,143,163,.12), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(36,91,120,.08), transparent 30%),
        linear-gradient(180deg, #f7fbfc 0%, #eef7f9 100%);
}

.retail-hero .highlight,
.snapshot-kicker {
    color: var(--dist-primary);
}

.retail-snapshot-card {
    border-color: var(--dist-border);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,248,250,.94));
    box-shadow: 0 18px 48px rgba(25,67,83,.11);
}

.snapshot-activity-row strong {
    color: var(--dist-cyan);
}

.snapshot-status {
    background: #e5f5f7;
    color: #176578;
}

.snapshot-dot {
    background: var(--dist-cyan);
}


/* Distribution network */
.distribution-network-section {
    padding: 84px 0;
    background: #fff;
}

.distribution-network-head {
    display: grid;
    grid-template-columns: 1fr .76fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 42px;
}

.distribution-network-head .description {
    max-width: 590px;
    margin: 0 0 4px auto;
}

.distribution-network-main {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr;
    align-items: stretch;
}

.distribution-node {
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--dist-border);
    border-radius: 12px;
    background: #f8fbfc;
}

.node-warehouse,
.node-dispatch {
    background: var(--dist-soft);
}

.distribution-node-label {
    display: block;
    margin-bottom: 24px;
    color: var(--dist-cyan);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.distribution-node h3 {
    margin: 0 0 8px;
    font-family: var(--heading-font-family);
    color: var(--text-primary);
    font-size: 18px;
}

.distribution-node p {
    margin: 0;
    font-size: 13px;
    line-height: 1.58;
}

.distribution-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dist-cyan);
    font-size: 20px;
}

.distribution-network-bottom {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 14px;
}

.distribution-network-bottom article {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 12px;
    padding: 18px 20px;
    border-left: 3px solid var(--dist-cyan);
    background: var(--dist-soft-2);
}

.distribution-network-bottom article > span {
    color: var(--dist-primary);
    font-size: 11px;
    font-weight: 700;
}

.distribution-network-bottom strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text-primary);
}

.distribution-network-bottom p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}


/* Distribution control matrix */
.distribution-control-section {
    padding: 84px 0;
    background: var(--dist-soft);
}

.distribution-control-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 76px;
    align-items: start;
}

.distribution-control-lead {
    position: sticky;
    top: 40px;
}

.distribution-control-matrix {
    border-top: 1px solid rgba(37,55,70,.15);
}

.distribution-control-head,
.distribution-control-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(37,55,70,.12);
}

.distribution-control-head {
    color: var(--dist-cyan);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.distribution-control-row strong {
    color: var(--dist-primary-dark);
    font-size: 13px;
}

.distribution-control-row span {
    font-size: 12.5px;
    line-height: 1.5;
}


/* Why */
.distribution-why-section {
    padding: 84px 0;
    background: #f7f8f9;
}

.distribution-why-head {
    display: grid;
    grid-template-columns: 1fr .78fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 38px;
}

.distribution-why-head .description {
    margin: 0 0 4px auto;
    max-width: 600px;
}

.distribution-why-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
}

.distribution-why-primary {
    padding: 34px;
    border-radius: 16px;
    background:
        linear-gradient(145deg, var(--dist-primary-dark), var(--dist-primary));
    color: #fff;
}

.distribution-why-eyebrow {
    display: block;
    margin-bottom: 46px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .78;
}

.distribution-why-primary h3 {
    max-width: 560px;
    margin: 0 0 14px;
    font-family: var(--heading-font-family);
    font-size: 28px;
    line-height: 1.25;
    color: #fff;
}

.distribution-why-primary p {
    max-width: 600px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.84);
    line-height: 1.65;
}

.distribution-why-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.distribution-why-signals span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    font-size: 11px;
}

.distribution-why-secondary {
    border-top: 1px solid rgba(37,55,70,.13);
}

.distribution-why-secondary article {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 14px;
    padding: 21px 0;
    border-bottom: 1px solid rgba(37,55,70,.13);
}

.distribution-why-secondary article > span {
    color: var(--dist-cyan);
    font-size: 11px;
    font-weight: 700;
}

.distribution-why-secondary h3 {
    margin: 0 0 5px;
    font-family: var(--heading-font-family);
    font-size: 16px;
    color: var(--text-primary);
}

.distribution-why-secondary p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}


/* Distribution models */
.distribution-models-section {
    padding: 84px 0;
    background: #fff;
}

.distribution-models-head {
    max-width: 800px;
    margin-bottom: 36px;
}

.distribution-models-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.distribution-model-card {
    min-height: 245px;
    padding: 22px;
    border: 1px solid var(--dist-border);
    border-radius: 12px;
    background: #f9fbfc;
}

.distribution-model-card:nth-child(2n) {
    background: var(--dist-soft);
}

.distribution-model-card > span {
    display: block;
    margin-bottom: 28px;
    color: var(--dist-cyan);
    font-size: 11px;
    font-weight: 700;
}

.distribution-model-card h3 {
    margin: 0 0 8px;
    font-family: var(--heading-font-family);
    font-size: 17px;
    color: var(--text-primary);
}

.distribution-model-card p {
    min-height: 82px;
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.55;
}

.distribution-model-card div {
    padding-top: 14px;
    border-top: 1px solid rgba(37,55,70,.10);
    color: var(--dist-primary);
    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 600;
}

.distribution-models-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding-top: 30px;
}

.distribution-models-footer p {
    max-width: 760px;
    margin: 0;
}

.distribution-models-footer > div {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}


/* Shared distributor tint */
.retail-workflow-section {
    background: #f4f7f8;
}

.retail-financial-section {
    background: #fff;
}

.financial-group-label,
.retail-financial-line > span {
    color: var(--dist-cyan);
}

.retail-faq-section {
    background: var(--dist-soft-2);
}

.retail-faq-heading .tag,
.retail-faq-list summary::after {
    color: var(--dist-primary);
}

.cta-banner-section.retail-final-cta {
    background:
        radial-gradient(circle at 88% 18%, rgba(44,143,163,.14), transparent 28%),
        linear-gradient(135deg, #eaf5f7 0%, #f5fafb 55%, #eaf2f5 100%);
}

.retail-final-cta-copy .tag {
    color: var(--dist-cyan);
}

.retail-final-cta-actions .btn-primary {
    background: var(--dist-primary);
    border-color: var(--dist-primary);
}


/* Responsive */
@media (max-width: 1100px) {
    .distribution-network-main {
        grid-template-columns: repeat(2,1fr);
        gap: 14px;
    }

    .distribution-connector {
        display: none;
    }

    .distribution-models-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 900px) {
    .distribution-network-head,
    .distribution-control-layout,
    .distribution-why-head,
    .distribution-why-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .distribution-control-lead {
        position: static;
    }

    .distribution-network-head .description,
    .distribution-why-head .description {
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    .distribution-network-main,
    .distribution-network-bottom,
    .distribution-models-grid {
        grid-template-columns: 1fr;
    }

    .distribution-control-head {
        display: none;
    }

    .distribution-control-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 0;
    }

    .distribution-models-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}