/* =====================
           ABOUT SECTION WRAPPER
        ===================== */
     .about {
       background: #101928;
       margin: 0;
       padding: 0;
       position: relative;
       overflow: hidden;
       color: #fff;
     }

     /* =====================
           HERO / TOP SECTION
        ===================== */
     .about-hero {
       /* background: linear-gradient(156deg, #001B35 -62%, #010920 37.36%, #2563EB 87.71%); */
       padding: 80px 40px 60px;
       text-align: center;
       position: relative;
     }

     /* .about-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
       pointer-events: none;
     } */

     .about-hero h1 {
       font-size: 45px;
       font-weight: 700;
       color: #fff;
       margin-bottom: 10px;
       line-height: 1.15;
     }

     .about-hero h1 span {
       color: #60A5FA;
     }

     .about-hero .subtitle {
       font-size: 16px;
       color: #CBD5E1;
       max-width: 550px;
       margin: 0 auto 32px;
       line-height: 1.6;
     }

     .about-hero .hero-btns {
       display: flex;
       justify-content: center;
       gap: 16px;
       flex-wrap: wrap;
     }

     .btn-dark-hero {
       background: #010920;
       color: #fff;
       border: 1px solid #374151;
       padding: 12px 28px;
       border-radius: 8px;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       text-decoration: none;
       transition: background 0.2s;
     }

     .btn-dark-hero:hover {
       background: #1f2937;
       color: #fff;
     }

     .btn-orange-hero {
       background: linear-gradient(135deg, #f97316, #FF9B00);
       color: #fff;
       border: none;
       padding: 12px 28px;
       border-radius: 8px;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       text-decoration: none;
       display: flex;
       align-items: center;
       gap: 8px;
       transition: opacity 0.2s;
     }

     .btn-orange-hero:hover {
       opacity: 0.9;
       color: #fff;
     }

     /* =====================
           STATS BAR
        ===================== */
     .stats-bar {
       padding: 32px 40px;
       display: flex;
       justify-content: center;
       gap: 24px;
       flex-wrap: wrap;
     }

     .stat-card {
       background: #1D2739;
       border-radius: 16px;
       padding: 24px 40px;
       text-align: center;
       min-width: 180px;
       flex: 1;
       max-width: 240px;
     }

     .stat-card .stat-value {
       font-size: 32px;
       font-weight: 800;
       color: #FFFFFF;
       display: block;
     }

     .stat-card .stat-label {
       font-size: 13px;
       color: #CBD5E1;
       margin-top: 10px;
       display: block;
     }

     /* =====================
           WHO WE ARE
        ===================== */
     .who-we-are {
       padding: 86px 40px;
     }

     .who-we-are .inner {
       max-width: 1100px;
       margin: 0 auto;
       display: flex;
       gap: 44px;
       align-items: center;
       flex-wrap: wrap;
     }

     .who-we-are.who-we-are--reverse .inner {
       flex-direction: row-reverse;
     }

     .who-we-are .wwa-image {
       flex: 1;
       min-width: 280px;
     }

     .who-we-are .wwa-image img {
       width: 100%;
       border-radius: 14px;
       object-fit: cover;
       height: 360px;
       display: block;
     }

     .who-we-are .wwa-text {
       flex: 1;
       min-width: 280px;
     }

     .section-label {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: #06B6D4;
       margin-bottom: 12px;
       display: block;
     }

     .who-we-are .wwa-text h2 {
       font-size: clamp(28px, 3.6vw, 31px);
       font-weight: 800;
       color: #fff;
       margin-bottom: 16px;
       line-height: 1.2;
     }

     .who-we-are .wwa-text p {
       font-size: 14px;
       color: #94a3b8;
       line-height: 1.7;
       margin-bottom: 14px;
     }

     .feature-list {
       list-style: none;
       padding: 0;
       margin: 18px 0 0;
       display: grid;
       grid-template-columns: repeat(2, minmax(220px, 1fr));
       gap: 10px 12px;
     }

     .feature-list li {
       display: flex;
       /* align-items: center; */
       gap: 10px;
       font-size: 14px;
       color: #cbd5e1;
       margin-bottom: 0;
       background: #1D2739;
       border: 1px solid rgba(255, 255, 255, 0.04);
       border-radius: 10px;
       min-height: 44px;
       padding: 10px 14px;
     }

     .feature-list li .feature-icon {
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #06B6D4;
       color: #0b2234;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       font-size: 10px;
       line-height: 1;
     }

     .feature-list li i {
       color: inherit;
       font-size: 10px;
     }

     /* =====================
           MISSION & VISION
        ===================== */
     .mission-vision {
       padding: 80px 40px;
       text-align: center;
     }

     .mission-vision .mv-inner {
       max-width: 900px;
       margin: 0 auto;
     }

     .mission-vision h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       margin-bottom: 8px;
     }

     .mission-vision .mv-cards {
       display: flex;
       gap: 24px;
       margin-top: 48px;
       flex-wrap: wrap;
     }

     .mv-card {
       background: #1D2739;
       border: 1px solid #1E293B;
       border-radius: 12px;
       padding: 28px;
       flex: 1;
       min-width: 260px;
       text-align: left;
     }

     .mv-card .mv-card-header {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 14px;
     }

     .mv-card .mv-icon {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
     }

     .mv-card .mv-icon.mission-icon {
       background: rgba(239, 68, 68, 0.15);
       color: #ef4444;
     }

     .mv-card .mv-icon.vision-icon {
       background: rgba(251, 191, 36, 0.15);
       color: #fbbf24;
     }

     .mv-card h3 {
       font-size: 20px;
       font-weight: 700;
       color: #fff;
       margin: 0;
     }

     .mv-card p {
       font-size: 14px;
       color: #94a3b8;
       line-height: 1.7;
       margin: 0;
     }

     /* =====================
           OUR PRINCIPLES
        ===================== */
     .our-principles {
       padding: 86px 40px;
       text-align: center;
     }

     .our-principles .principles-inner {
       max-width: 900px;
       margin: 0 auto;
     }

     .our-principles h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       margin-bottom: 48px;
     }

     .principles-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(280px, 1fr));
       gap: 24px;
     }

     .principle-card {
       background: #1D2739;
       border: 1px solid #23324B;
       border-radius: 14px;
       min-height: 208px;
       padding: 30px 26px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
     }

     .principle-icon {
       width: 64px;
       height: 64px;
       border-radius: 12px;
       background: #31425E;
       color: #7DD3FC;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin-bottom: 18px;
     }

     .principle-card h3 {
       font-size: 20px;
       font-weight: 700;
       color: #fff;
       margin: 0 0 10px;
     }

     .principle-card p {
       font-size: 14px;
       color: #94a3b8;
       line-height: 1.7;
       margin: 0;
     }

     /* =====================
           COMMITMENT
        ===================== */
     .commitment {
       padding: 80px 40px;
       text-align: center;
     }

     .commitment .commit-inner {
       max-width: 1000px;
       margin: 0 auto;
     }

     .commitment h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       margin-bottom: 10px;
     }

     .commitment .commit-desc {
       font-size: 15px;
       color: #94a3b8;
       max-width: 540px;
       margin: 0 auto 48px;
       line-height: 1.7;
     }

     .commit-cards {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
     }

     @media (max-width: 640px) {
       .commit-cards {
         grid-template-columns: 1fr;
       }
     }

     .commit-card {
       border-radius: 12px;
       padding: 32px 24px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 14px;
     }

     /* .commit-card.card-blue {
       background: linear-gradient(160deg, #eff6ff, #eef2ff);
     }

     .commit-card.card-teal {
       background: linear-gradient(160deg, #f0fdf4, #ecfdf5);
     }

     .commit-card.card-purple {
       background: linear-gradient(160deg, #faf5ff, #f5f3ff);
     } */

     .commit-card .commit-icon {
       width: 52px;
       height: 52px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       background: #06B6D433;
     }

     .commit-card.card-blue .commit-icon {
       color: #FF9B00;
     }

     .commit-card.card-teal .commit-icon {
       color: #06B6D4;
     }

     .commit-card.card-purple .commit-icon {
       color: #ffffff;
     }

     .commit-card h4 {
       font-size: 17px;
       font-weight: 700;
       color: #ffffff;
       margin: 0;
     }

     .commit-card p {
       font-size: 14px;
       color: #94A3B8;
       line-height: 1.6;
       margin: 0;
       text-align: center;
     }

     /* =====================
           DIFFERENCE BANNER
        ===================== */
     .difference-banner {
       padding: 86px 40px;
       text-align: center;
     }

     .difference-inner {
       max-width: 1120px;
       margin: 0 auto;
     }

     .difference-banner h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       margin-bottom: 16px;
     }

     .difference-inner>p {
       font-size: 14px;
       color: #cbd5e1;
       margin: 0 auto 46px;
       max-width: 760px;
       line-height: 1.7;
     }

     .difference-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(280px, 1fr));
       gap: 22px;
       align-items: stretch;
     }

     .difference-card {
       border-radius: 14px;
       padding: 34px 38px;
       text-align: left;
       border: 1px solid rgba(255, 255, 255, 0.08);
     }

     .difference-card--other {
       background: #1D2739;
     }

     .difference-card--qcss {
       background: #0071BC3D;
       border-color: #80CCFF;
     }

     .difference-card h3 {
       font-size: clamp(28px, 3.6vw, 31px);
       font-weight: 700;
       color: #fff;
       margin: 0 0 18px;
     }

     .difference-card ul {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
     }

     .difference-card li {
       font-size: 14px;
       color: #e2e8f0;
       line-height: 1.65;
       display: flex;
       align-items: flex-start;
       gap: 12px;
     }

     .diff-icon {
       width: 20px;
       height: 20px;
       border-radius: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       margin-top: 2px;
       font-size: 10px;
     }

     .diff-icon--x {
       background: #b6c0ce;
       color: #1D2739;
     }

     .diff-icon--check {
       background: #dbeafe;
       color: #0D71B8;
     }

     /* =====================
           THIRD-PARTY EXPOSURE
        ===================== */
     .third-party-exposure {
       padding: 86px 40px;
     }

     .tpe-inner {
       max-width: 1120px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1.15fr;
       gap: 40px;
       align-items: center;
     }

     .tpe-left {
       display: flex;
       flex-direction: column;
       gap: 18px;
     }

     .tpe-step-card {
       background: #1D2739;
       border: 1px solid #31425E;
       border-radius: 14px;
       padding: 18px 22px;
       display: flex;
       align-items: center;
       gap: 14px;
     }

     .tpe-step-index {
       width: 40px;
       height: 40px;
       border-radius: 6px;
       background: #134472;
       color: #8BD6FF;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       font-weight: 700;
       flex-shrink: 0;
     }

     .tpe-step-card h3 {
       font-size: 20px;
       font-weight: 700;
       color: #fff;
       line-height: 1.25;
       margin: 0;
     }

     .tpe-right h2 {
       font-size: clamp(28px, 3.6vw, 31px);
       font-weight: 800;
       color: #fff;
       line-height: 1.2;
       margin: 1px 0 5px;
     }

     .tpe-right p {
       font-size: 14px;
       color: #cbd5e1;
       line-height: 1.7;
       margin: 0 0 20px;
       max-width: 560px;
     }

     .tpe-tags {
       display: grid;
       grid-template-columns: repeat(3, minmax(110px, 1fr));
       gap: 12px;
     }

     .tpe-tag {
       background: #0071BC3D;
       border: 1px solid #31425E;
       border-radius: 4px;
      padding: 5px;
     }

      .tpe-tag i {
       color: #79c9f5;
       font-size: 14px;
     }

     /* =====================
           EXPOSURE FABRIC
        ===================== */
     .exposure-fabric {
       padding: 86px 40px;
       text-align: center;
     }

     .fabric-inner {
       max-width: 1220px;
       margin: 0 auto;
     }

     .fabric-inner h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       margin-bottom: 14px;
     }

     .fabric-inner p {
       font-size: 14px;
       color: #cbd5e1;
       line-height: 1.7;
       margin: 0 auto 34px;
       max-width: 620px;
     }

     .fabric-grid {
       display: grid;
       grid-template-columns: repeat(5, minmax(180px, 1fr));
       gap: 22px;
     }

     .fabric-card {
       background: #1D2739;
       border: 1px solid #31425E;
       border-radius: 12px;
       min-height: 124px;
       padding: 16px 14px 18px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 12px;
     }

     .fabric-index {
       min-width: 24px;
       height: 24px;
       border-radius: 5px;
       background: #134472;
       color: #8BD6FF;
       border: 1px solid rgba(139, 214, 255, 0.45);
       font-size: 13px;
       font-weight: 700;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       line-height: 1;
       padding: 0 6px;
     }

     .fabric-card h3 {
       font-size: 16px;
       font-weight: 700;
       color: #fff;
       line-height: 1.25;
       margin: 0;
     }

     /* =====================
           TRUST & FOUNDATION
        ===================== */
     .trust-foundation {
       padding: 86px 40px;
       text-align: center;
     }

     .trust-inner {
       max-width: 1220px;
       margin: 0 auto;
     }

     .trust-inner h2 {
       font-size: 36px;
       font-weight: 800;
       color: #fff;
       line-height: 1.2;
       margin: 10px 0 34px;
     }

     .trust-grid {
       display: grid;
       grid-template-columns: repeat(4, minmax(220px, 1fr));
       gap: 22px;
     }

     .trust-card {
       background: #1D2739;
       border: 1px solid #31425E;
       border-radius: 12px;
       min-height: 132px;
       padding: 18px 22px;
       text-align: left;
     }

     .trust-card-label {
       display: block;
       font-size: 14px;
       font-weight: 500;
       color: #66c6ff;
       margin-bottom: 8px;
     }

     .trust-card p {
       margin: 0;
       font-size: 16px;
       font-weight: 700;
       line-height: 1.35;
       color: #f8fafc;
     }

     /* EXPOSURE CTA (UNDER THIRD-PARTY) */
.homepage-exposure-cta {
  border-bottom: 1px solid var(--border);
}

.homepage-exposure-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}

.homepage-exposure-cta-left {
  display: grid;
  gap: 24px;
}

.homepage-exposure-cta-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background: #1f2d44;
  border: 1px solid rgba(89, 116, 151, 0.35);
  border-radius: 12px;
  padding: 16px 18px;
}

.homepage-exposure-cta-step-num {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #134b77;
  border: 1px solid rgba(70, 167, 231, 0.2);
  color: #7bd0ff;
  font-size: 14px;
  font-weight: 700;
}

 .homepage-exposure-cta-step-num::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #80CCFF;
    border-radius: 2px;
}

.homepage-exposure-cta-step small {
  display: block;
  color: #b8c0ce;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.homepage-exposure-cta-step p {
  margin: 0;
  color: #f3f4f6;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.homepage-exposure-cta-badge {
  color: #0ea5e9;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.homepage-exposure-cta-title {
  margin: 0 0 14px;
  color: #f8fafc;
  font-family: var(--font-head);
  font-size: clamp(28px, 3.6vw, 31px);
  font-weight: 700;
  line-height: 1.15;
}

.homepage-exposure-cta-desc {
  margin: 0 0 10px;
  color: #d3d8e2;
  font-size: 14px;
  line-height: 1.45;
}

.homepage-exposure-cta-actions {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.homepage-exposure-cta-actions .homepage-btn {
  min-height: 54px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.homepage-exposure-cta-primary {
  background: #0071bc;
  color: #fff;
  border: 1px solid #0071bc;
}

.homepage-exposure-cta-primary:hover {
  background: #0064a7;
  border-color: #0064a7;
  color: #fff;
}

.homepage-exposure-cta-secondary {
  background: #344054;
  color: #fff;
  border: 1px solid #344054;
}

.homepage-exposure-cta-secondary:hover {
  background: #293241;
  border-color: #293241;
  color: #fff;
}

@media (max-width: 991px) {
  .homepage-exposure-cta-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .homepage-exposure-cta-step {
    padding: 14px;
    gap: 12px;
  }

  .homepage-exposure-cta-step-num {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }


  .homepage-exposure-cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .homepage-exposure-cta-actions .homepage-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}



     /* =====================
           RESPONSIVE
        ===================== */
     @media (max-width: 768px) {
       .about-hero h1 {
         font-size: 34px;
       }

       .who-we-are .inner {
         flex-direction: column;
       }

       .who-we-are.who-we-are--reverse .inner {
         flex-direction: column;
       }

       .feature-list {
         grid-template-columns: 1fr;
       }

       .mission-vision .mv-cards {
         flex-direction: column;
       }

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

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

       .difference-card {
         padding: 24px 20px;
       }

       .difference-card h3 {
         font-size: clamp(25px, 3.6vw,28px);
       }
       .difference-card--other h3 {
         font-size: clamp(25px, 3.6vw,28px);
       }

       .tpe-inner {
         grid-template-columns: 1fr;
         gap: 26px;
       }

       .tpe-step-card h3 {
         font-size: 18px;
       }

       .tpe-right h2 {
         font-size: 32px;
       }

       .tpe-tags {
         grid-template-columns: 1fr;
       }

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

       .fabric-card {
         min-height: 106px;
       }

       .fabric-card h3 {
         font-size: 18px;
       }

       .trust-inner h2 {
         font-size: 32px;
       }

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

       .trust-card-label {
         font-size: 13px;
       }

       .trust-card p {
         font-size: 18px;
       }

       .stats-bar {
         flex-direction: column;
         align-items: center;
       }

       .stat-card {
         max-width: 100%;
         width: 100%;
       }
     }