@import 'tailwindcss';

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Ninetea';
  src: url('../fonts/Ninetea-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ninetea';
  src: url('../fonts/Ninetea-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Ninetea';
  src: url('../fonts/Ninetea-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Ninetea';
  src: url('../fonts/Ninetea-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Ninetea';
  src: url('../fonts/Ninetea-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@theme {
  --color-brand-dark: #141621;
  --color-brand-blue: #005baa;
  --color-brand-yellow: #fff200;
  --color-brand-secondary: #fff873;
  --color-text-muted: #585858;
  --color-text-darker: #474747;

  --font-brand: 'Ninetea', sans-serif;
}

@layer base {
  body {
    font-family: var(--font-brand);
    @apply text-brand-dark;
  }

  button {
    font-family: var(--font-brand);
  }
}

@layer components {
  /* buttons, hero, cards */
  .btn-primary {
    @apply flex items-center justify-between rounded-full bg-brand-blue pl-4 md:pl-5 pr-1.5 py-1.5 text-[15px] font-medium text-white transition-all shadow-sm font-brand;
  }

  .btn-primary-icon {
    @apply flex h-8 w-8 md:h-10 md:w-10 items-center justify-center rounded-full bg-brand-yellow transition-transform hover:scale-105;
  }

  .btn-primary-icon-sm {
    @apply flex h-8 w-8 items-center justify-center rounded-full bg-brand-yellow transition-transform hover:scale-105 scale-90;
  }

  .btn-text {
    @apply mr-3 ml-2;
  }

  .btn-icon {
    @apply h-4 w-4 text-brand-blue;
  }

  .btn-outline {
    @apply border-2 border-white/40 text-white rounded-full px-8 py-3 text-[15px] font-medium transition-all hover:border-brand-yellow hover:text-brand-yellow font-brand;
  }

  .hero-badge {
    @apply inline-block px-3 py-1 bg-brand-yellow/10 border border-brand-yellow/30 text-brand-yellow text-xs font-semibold tracking-wider uppercase rounded mb-4;
  }

  .hero-title-accent {
    @apply text-brand-yellow;
  }

  /* Discover Section Styling */
  .discover-section {
    @apply relative w-full bg-white py-12;
  }

  .section-heading {
    @apply text-center mb-12;
  }

  .section-heading :is(h1, h2, h3) {
    @apply text-black text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .section-heading-size-uniform {
    @apply text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .mission-title,
  .solutions-video-heading,
  .receive-money-heading,
  .advantages-title,
  .benefits-main-heading {
    @apply text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .heading-accent {
    @apply text-brand-blue inline-flex items-center gap-2;
  }
  .dollar-badge {
    @apply inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-full bg-brand-secondary text-brand-blue font-bold ml-1 align-middle;
    box-shadow: 0 4px 12px rgba(255, 242, 0, 0.3);
  }
  .dollar-badge:hover,
  .hero-money-icon:hover {
    box-shadow: none;
  }
  .dollar-badge .hero-money-icon-text {
    @apply text-2xl md:text-4xl font-semibold leading-none text-brand-blue;
  }

  @media (max-width: 39.999rem) {
    .section-heading h2 {
      @apply text-2xl leading-10;
    }
    .heading-accent {
      @apply inline-flex items-center gap-2 flex-wrap;
      align-items: baseline;
    }
    .dollar-badge {
      @apply w-8 h-8;
    }
    .dollar-badge .hero-money-icon-text {
      @apply text-lg;
    }
  }

  .discover-viewport {
    @apply relative w-full overflow-hidden;
  }

  .discover-cards-grid {
    @apply flex gap-6 mt-12 mb-12 px-4 md:px-6 lg:px-16 xl:px-20;
    width: max-content;
    will-change: transform;
  }

  .discover-card {
    @apply rounded-[20px] p-6 pb-10 md:p-8 md:pb-12 flex flex-col justify-between transition-transform duration-700 ease-out h-[300px] md:h-[360px] w-[260px] sm:w-[320px] md:w-[360px] lg:w-[420px] shrink-0 relative overflow-hidden;
    transform-origin: left top;
    will-change: transform, opacity;
  }
  .discover-card[data-discover-index='0'] {
    transform: translateX(0) translateY(0);
    z-index: 4;
  }
  .discover-card[data-discover-index='1'] {
    transform: translateX(-80%) translateY(0);
    z-index: 3;
  }
  .discover-card[data-discover-index='2'] {
    transform: translateX(-160%) translateY(0);
    z-index: 2;
  }
  .discover-card[data-discover-index='3'] {
    transform: translateX(-240%) translateY(0);
    z-index: 1;
  }

  /* Receive Money Section Carousel */
  .receive-money-section {
    @apply bg-[#F3F6FF];
  }

  .receive-money-viewport {
    @apply relative w-full overflow-hidden pb-16 lg:pb-24;
  }

  .receive-money-container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-8 lg:pt-12 pb-4;
  }

  .receive-money-heading-wrap {
    @apply max-w-3xl mb-4 lg:mb-6;
  }

  .receive-money-heading {
    @apply font-normal mb-4 text-[#151515] font-brand;
  }

  .receive-money-heading span {
    @apply text-brand-blue;
  }

  .receive-money-heading br,
  .receive-money-subtext br {
    @apply hidden md:block;
  }

  .receive-money-subtext {
    @apply text-[#5F5F5F] text-base lg:text-lg leading-relaxed font-brand;
  }

  .receive-money-cards-grid {
    @apply flex gap-6 mt-6 mb-8 px-4 md:px-6 lg:px-16 xl:px-20;
    width: max-content;
    will-change: transform;
  }

  .receive-money-card {
    @apply rounded-[10px] p-6 pb-10 md:p-8 md:pb-12 flex flex-col transition-transform duration-700 ease-out h-[300px] md:h-[360px] xl:h-[420px] w-[260px] sm:w-[320px] md:w-[360px] lg:w-[380px] shrink-0 relative overflow-hidden;
    transform-origin: left top;
    will-change: transform, opacity;
  }
  .receive-money-card[data-receive-index='0'] {
    transform: translateX(0) translateY(0);
    z-index: 9;
  }
  .receive-money-card[data-receive-index='1'] {
    transform: translateX(-80%) translateY(0);
    z-index: 8;
  }
  .receive-money-card[data-receive-index='2'] {
    transform: translateX(-160%) translateY(0);
    z-index: 7;
  }
  .receive-money-card[data-receive-index='3'] {
    transform: translateX(-240%) translateY(0);
    z-index: 6;
  }
  .receive-money-card[data-receive-index='4'] {
    transform: translateX(-320%) translateY(0);
    z-index: 5;
  }
  .receive-money-card[data-receive-index='5'] {
    transform: translateX(-400%) translateY(0);
    z-index: 4;
  }
  .receive-money-card[data-receive-index='6'] {
    transform: translateX(-480%) translateY(0);
    z-index: 3;
  }
  .receive-money-card[data-receive-index='7'] {
    transform: translateX(-560%) translateY(0);
    z-index: 2;
  }
  .receive-money-card[data-receive-index='8'] {
    transform: translateX(-640%) translateY(0);
    z-index: 1;
  }

  .receive-money-card-media {
    @apply p-0 border-none bg-gray-200;
  }

  .receive-money-card-blue {
    @apply bg-brand-blue text-white;
  }

  .receive-money-card-star {
    @apply absolute bottom-0 right-0  pointer-events-none;
  }

  .receive-money-card-inner {
    @apply w-full h-full relative;
  }

  .receive-money-card-inner img {
    @apply w-full h-full object-cover;
  }

  .receive-money-card-inner video {
    @apply absolute inset-0 w-full h-full object-cover;
  }

  .receive-money-overlay {
    @apply absolute bottom-6 left-6 right-6 bg-gradient-to-r from-black/60 to-transparent backdrop-blur-sm rounded-[10px] p-5 border border-white/20 text-white;
  }

  .receive-money-card[data-receive-index='0'] .receive-money-overlay {
    background: rgba(0, 91, 170, 0.59);
    backdrop-filter: blur(11.5px);
    border-radius: 10px;
    border: none;
  }

  .receive-money-overlay-title {
    @apply text-3xl lg:text-4xl xl:text-5xl font-bold font-brand mb-1 text-white;
  }

  .receive-money-overlay-text {
    @apply text-sm lg:text-base font-medium opacity-90 font-brand;
  }

  .receive-money-card-icon {
    @apply mb-6 opacity-90;
  }

  .receive-money-card-body {
    @apply flex-1 flex flex-col justify-start;
  }

  .receive-money-card-title {
    @apply text-[30px] font-bold leading-[38px] mb-6 font-brand text-white/95;
  }

  .receive-money-card-list {
    @apply space-y-4 font-brand text-base lg:text-lg;
  }

  .receive-money-card-item {
    @apply flex items-center gap-3;
  }

  .receive-money-card-bullet {
    @apply rounded-full  flex  items-center justify-center text-brand-blue font-bold text-[10px] shrink-0;
  }
  .discover-card-rates {
    @apply bg-brand-yellow text-brand-blue;
  }
  .discover-card-7x {
    @apply bg-[#F8FAFD] text-brand-dark;
  }
  .discover-card-support {
    @apply bg-brand-blue text-white relative;
    background-image: url('../img/global-reach-bg.png');
    background-size: cover;
    background-position: center;
  }
  .discover-card-transfer {
    @apply bg-white border border-[#D4E0FF] text-brand-dark shadow-sm;
  }
  .discover-card-support::before {
    content: '';
    @apply absolute inset-0 bg-transparent z-10;
  }
  .discover-card-support .discover-card-body,
  .discover-card-support .discover-card-icon {
    @apply relative z-20;
  }

  .discover-card-icon {
    @apply w-12 h-12 md:w-16 md:h-16 mb-4 md:mb-6;
  }
  .discover-card svg {
    @apply mb-4 md:mb-6;
  }

  .btn-estimate {
    @apply flex items-center gap-2 bg-brand-blue text-white border-none rounded-full px-5 py-3 font-brand text-base font-normal cursor-pointer transition-all;
  }

  .btn-estimate:hover {
    @apply -translate-y-0.5;
  }

  .btn-icon {
    @apply flex items-center justify-center bg-brand-yellow rounded-full text-xs text-gray-800 shadow-sm;
    width: 30px;
    height: 30px;
  }
  /* ////// */

  .rates-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="94" height="57" viewBox="0 0 94 57" fill="none"><path d="M90.4609 28.0907L34.9072 53.3523L48.3947 28.0907L34.9072 2.8291L90.4609 28.0907Z" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M48.3945 28.0908H54.7737" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M67.4229 28.0908H81.7851" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4028 10.2654H16.7173" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4027 22.1489H2.82886" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4028 34.0325H12.0879" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4029 45.9524H21.3469" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
  }
  .transfer-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="94" height="57" viewBox="0 0 94 57" fill="none"><path d="M90.4609 28.0907L34.9072 53.3523L48.3947 28.0907L34.9072 2.8291L90.4609 28.0907Z" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M48.3945 28.0908H54.7737" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M67.4229 28.0908H81.7851" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4028 10.2654H16.7173" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4027 22.1489H2.82886" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4028 34.0325H12.0879" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.4029 45.9524H21.3469" stroke="%23005BAA" stroke-width="5.6578" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
  }

  .discover-card-title {
    @apply text-[18px] md:text-[22px] font-medium leading-tight mb-1 md:mb-1 text-brand-dark;
    @apply min-h-[48px] md:min-h-[44px];
    font-family: var(--font-brand);
  }
  .discover-card-support .discover-card-title {
    @apply text-white;
  }

  .discover-card-text {
    @apply text-[14px] md:text-[18px] font-normal leading-normal text-[#5F5F5F];
    @apply min-h-[40px] md:min-h-[54px];
    font-family: var(--font-brand);
  }
  .discover-card-support .discover-card-text {
    @apply text-white;
  }
  .discover-card-rates .discover-card-title,
  .discover-card-rates .discover-card-text {
    @apply text-brand-blue;
  }

  .badge-7x-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="67" height="57" viewBox="0 0 67 57" fill="none"><path d="M33.1777 1L35.5116 5.70445L40.802 6.43761L36.9431 10.0423L37.8767 15.205L33.1777 12.7306L28.4786 15.205L29.4122 10.0423L25.5845 6.43761L30.8437 5.70445L33.1777 1Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.21552 9.12598L12.9499 11.692L17.2133 10.1035L15.844 14.3803L18.707 17.8323L14.1635 17.9239L11.674 21.6508L10.2114 17.4351L5.82349 16.2743L9.46448 13.586L9.21552 9.12598Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M57.1397 9.12598L53.4053 11.692L49.1731 10.1035L50.5112 14.3803L47.6482 17.8323L52.1917 17.9239L54.6812 21.6508L56.1438 17.4351L60.5628 16.2743L56.9218 13.586L57.1397 9.12598Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M39.8995 20.7954C37.7211 20.3372 35.4805 20.0928 33.1777 20.0928C27.3272 20.0928 21.819 21.6202 17.0888 24.3084C12.2031 27.0884 8.12639 31.0902 5.29451 35.8863C2.55598 40.5296 1 45.9367 1 51.6798" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M65.3864 51.7104C65.3864 45.9673 63.8304 40.5602 61.0919 35.9169C58.26 31.1208 54.1833 27.1189 49.2975 24.339C47.4615 23.3004 45.5321 22.445 43.5093 21.7729" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.2445 38.8799C16.5287 39.7352 15.9063 40.6517 15.3151 41.5987C13.5724 44.5924 12.5454 48.0444 12.5454 51.7102" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M53.81 51.7104C53.81 48.014 52.8142 44.562 51.0404 41.5988C49.2354 38.5135 46.6214 35.9779 43.4783 34.1756C40.4286 32.4649 36.9121 31.4568 33.1777 31.4568C29.4122 31.4568 25.8957 32.4343 22.8771 34.1756C21.9746 34.6949 21.1033 35.2753 20.2942 35.9168" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M39.4327 40.2852C37.5655 39.3077 35.4494 38.7578 33.1776 38.7578C30.7814 38.7578 28.5097 39.3993 26.5803 40.4991C24.5886 41.6294 22.9082 43.279 21.7567 45.2341C20.6364 47.1281 19.9829 49.3581 19.9829 51.7103" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.5765 51.7102H1" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.3149 41.5988L5.29443 35.9167" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.8769 34.1754L17.0886 24.3389" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.1775 31.4873V20.1233" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M49.2975 24.3389L43.5093 34.1754" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M61.0606 35.9167L51.04 41.5988" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M65.3863 51.7102H53.8098" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.3274 52.3835C37.7009 50.1355 36.1473 48.0158 33.8572 47.6491C31.5671 47.2824 29.4079 48.8075 29.0343 51.0556C28.6607 53.3036 30.2144 55.4232 32.5044 55.7899C34.7945 56.1566 36.9538 54.6315 37.3274 52.3835Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.1338 48.8081L50.1999 35.0002" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
  }
  .badge-globe-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="67" height="57" viewBox="20 22 66 56" fill="none"><path d="M60.2479 75.117C51.241 78.6218 41.3572 76.7346 34.3069 70.8708" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M74.6519 40.7432C76.2711 44.4502 76.912 48.3256 76.7433 52.1" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.1215 61.2664C21.4543 48.1572 27.4926 32.9585 40.6149 27.2969C50.0602 23.2193 60.585 25.2075 67.8714 31.5094" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.5339 60.3902L27.7963 62.7829L29.6517 57.3235" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M79.3408 42.8663L74.4495 40.5073L72.4592 45.5286" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M72.7967 65.681H70.3342C69.5921 65.681 68.9849 65.0744 68.9849 64.333V62.0414C68.9849 61.2326 69.6595 60.5586 70.4691 60.5586H72.7967C73.5051 60.5586 74.1123 61.1315 74.1123 61.8729V62.0077" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M70.3342 65.6812H72.7967C73.5388 65.6812 74.146 66.2878 74.146 67.0291V69.3207C74.146 70.1295 73.4714 70.8035 72.6618 70.8035H70.3342C69.6258 70.8035 69.0186 70.2306 69.0186 69.4892V69.1859" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.5823 58.9749V60.5587" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.5823 70.8372V72.4211" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.5823 76.8694C77.7676 76.8694 82.7818 71.8602 82.7818 65.681C82.7818 59.5019 77.7676 54.4927 71.5823 54.4927C65.397 54.4927 60.3828 59.5019 60.3828 65.681C60.3828 71.8602 65.397 76.8694 71.5823 76.8694Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M56.6721 66.8942C54.8167 67.6019 52.7927 67.9726 50.6675 67.9726C41.3234 67.9726 33.7671 60.4238 33.7671 51.089C33.7671 41.7541 41.3234 34.2053 50.6675 34.2053C60.0117 34.2053 67.5679 41.7541 67.5679 51.089C67.5679 51.3586 67.5679 51.6282 67.5342 51.8978" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M50.7012 67.9726C54.39 67.9726 57.3804 60.4136 57.3804 51.089C57.3804 41.7644 54.39 34.2053 50.7012 34.2053C47.0124 34.2053 44.022 41.7644 44.022 51.089C44.022 60.4136 47.0124 67.9726 50.7012 67.9726Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.4778 61.6371C37.4778 60.2554 43.4149 59.1433 50.7013 59.1433C53.4337 59.1433 55.9974 59.3118 58.0889 59.5814" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M63.9248 40.7095C63.9248 42.0912 57.9877 43.2033 50.7013 43.2033C43.3811 43.2033 37.4778 42.0912 37.4778 40.7095" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.8008 51.0891H67.6016" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
  }
  .badge-ways-to-receive-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="67" height="57" viewBox="0 0 53 60" fill="none"><path d="M26.5043 54.3023C31.4436 54.3023 35.4478 50.297 35.4478 45.3562C35.4478 40.4155 31.4436 36.4102 26.5043 36.4102C21.5649 36.4102 17.5608 40.4155 17.5608 45.3562C17.5608 50.297 21.5649 54.3023 26.5043 54.3023Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.9238 31.9883H51.9745V58.7245H1V31.9883H35.9238Z" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.2033 36.3762H9.77345C9.77345 38.7913 7.80112 40.7642 5.38672 40.7642V49.9484C7.80112 49.9484 9.77345 51.9213 9.77345 54.3364H43.235C43.235 51.9213 45.2073 49.9484 47.6217 49.9484V48.1796" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.7711 54.3364H43.201C43.201 51.9213 45.1733 49.9484 47.5877 49.9484V40.7642C45.1733 40.7642 43.201 38.7913 43.201 36.3762H9.77345C9.77345 38.7913 7.80112 40.7642 5.38672 40.7642V42.533" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.6817 28.3144V24.0285C23.6817 18.62 19.2949 14.232 13.888 14.232H11.2356V10.4563L3.41431 16.9533L11.2016 23.4502V19.6745H13.786C16.2344 19.6745 18.2068 21.6474 18.2068 24.0965V28.3144" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.6816 24.0286V28.3145" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.1567 28.3145V8.78955H32.9653L26.4362 1L19.9412 8.78955H23.6818V14.7083" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.1565 25.9333V28.3144" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.6316 28.3145V28.1104C34.6316 26.1375 36.2298 24.5388 38.2022 24.5388H41.7728V28.3145L49.5601 21.8175L41.7728 15.3206V19.0623H36.5699C35.1417 19.0623 33.7814 19.4705 32.6252 20.1848" stroke="%23005BAA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@layer utilities {
  .main-header {
    @apply fixed top-6 z-100 inset-x-0 mx-auto px-4 sm:px-8  lg:px-12 xl:px-16 w-full;
  }

  .header-container {
    @apply mx-auto max-w-7xl flex justify-center w-full relative;
  }

  .header-inner {
    @apply rounded-[40px] bg-white/56 backdrop-blur-[14px] shadow-sm border border-white/20 flex h-16 justify-between items-center w-full;
  }

  .header-logo {
    @apply block;
  }

  .header-logo img {
    width: 151px;
    height: auto;
  }

  .header-logo-wrap {
    @apply shrink-0 flex items-center absolute z-10 left-5 lg:left-10 top-1/2 translate-y-[-50%];
  }

  .header-nav {
    @apply hidden lg:flex space-x-6 xl:space-x-8 mx-auto;
  }

  .header-actions {
    @apply absolute z-10 right-3 top-1/2 translate-y-[-50%] flex items-center gap-2 lg:gap-0;
  }

  .nav-link {
    @apply text-black hover:text-brand-blue py-2 text-base font-medium transition-colors font-brand;
  }

  .nav-link.active {
    @apply text-brand-blue;
  }

  .menu-toggle-btn {
    @apply lg:hidden;
  }

  .menu-toggle-btn > svg {
    @apply shrink-0 size-7;
  }

  .side-drawer {
    @apply fixed top-0 left-0 w-full bg-white shadow-lg lg:hidden z-999;
    transform: translateY(-100%);
    visibility: hidden;
  }

  .side-drawer-close-btn {
    @apply absolute top-4 right-4 inline-flex items-center justify-center w-11 h-11 border-none bg-transparent text-black cursor-pointer z-[1000];
  }

  .side-drawer-close-btn svg {
    @apply w-5 h-5 text-black;
    stroke: currentColor;
  }

  .side-drawer-overlay {
    @apply fixed inset-0 bg-black/50 opacity-0 pointer-events-none lg:hidden z-998;
  }

  .mobile-nav {
    @apply space-y-1 py-4 px-4;
  }

  .mobile-nav-link {
    @apply block rounded-xl px-4 py-3 text-base font-medium text-black hover:text-brand-blue transition-colors font-brand;
  }

  .mobile-nav-link.active {
    @apply text-brand-blue;
  }

  .mobile-nav-cta {
    @apply mt-4 flex items-center justify-between rounded-full bg-brand-blue px-4 py-3 text-base font-medium text-white transition-colors;
  }

  @media (max-width: 767px) {
    .header-inner {
      @apply h-14 rounded-[28px];
    }
    .header-logo {
      max-width: 96px;
    }
    .header-logo img {
      width: 96px;
      height: auto;
    }

    .header-cta-wrap .btn-primary-icon {
      @apply h-7 w-7;
    }
    .header-cta-wrap .btn-primary-icon svg {
      width: 14px;
      height: 14px;
    }

    .mobile-nav-cta {
      @apply mt-auto rounded-[18px] px-4 py-4 text-base;
      justify-content: center;
    }
  }

  @media (min-width: 1024px) {
    .header-logo {
      max-width: 110px;
    }
    .header-logo svg {
      width: 110px;
      height: auto;
    }
    .header-cta-wrap .btn-primary-icon {
      @apply h-9 w-9;
    }
    .header-cta-wrap .btn-primary-icon svg {
      width: 18px;
      height: 18px;
    }
  }

  @media (max-width: 640px) {
    .header-inner {
      @apply h-12 rounded-[24px];
    }
    .header-logo {
      max-width: 90px;
    }
    .header-logo svg {
      width: 90px;
      height: auto;
    }
    .header-cta-wrap {
      @apply gap-1.5;
    }
    .header-cta-wrap .btn-primary {
      @apply px-2 py-2 text-[12px] gap-1.5;
      min-height: 2.2rem;
    }
    .header-cta-wrap .btn-text {
      @apply ml-1 mr-1 text-[11px];
      display: inline;
    }
    .header-cta-wrap .btn-primary-icon {
      @apply h-6 w-6;
    }
    .header-cta-wrap .btn-primary-icon svg {
      width: 12px;
      height: 12px;
    }
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Hero Utilities */
  .hero-section {
    @apply relative h-screen min-h-screen  w-full overflow-hidden bg-brand-dark;
  }

  .hero-slider {
    @apply relative h-full w-full;
  }

  .hero-slide {
    @apply absolute inset-0 h-full w-full opacity-0 pointer-events-none transition-opacity duration-1000 ease-in-out;
  }

  .hero-slide.active {
    @apply opacity-100 pointer-events-auto;
  }

  .hero-video-bg {
    @apply absolute inset-0 h-full w-full object-cover;
  }

  .hero-overlay {
    @apply absolute inset-x-0  z-10;
  }

  .hero-bottom-mask {
    @apply absolute bottom-0 left-0 w-full h-[60vh] bg-linear-to-t from-black/80 via-black/30 to-transparent pointer-events-none z-20;
  }

  .hero-container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-full flex flex-col items-center justify-end relative z-30 w-full pb-32 lg:pb-24 xl:pb-20;
  }

  .hero-content {
    @apply pt-24;
  }

  .hero-title {
    @apply text-2xl sm:text-3xl md:text-5xl lg:text-[62px] font-normal leading-tight lg:leading-16 mb-2 text-white relative text-center;
  }

  .hero-title-row-1 {
    @apply inline-flex items-center justify-center flex-wrap gap-3;
  }

  .hero-title-row-2 {
    @apply inline-flex items-center justify-center flex-wrap gap-3 mt-4;
  }

  .hero-title-part {
    @apply inline-block;
  }

  .hero-title-part-2 {
    @apply inline-block;
  }

  .hero-title-part-3 {
    @apply inline-block;
  }

  .hero-money-icon {
    @apply inline-flex items-center justify-center w-8 h-8 md:w-16 md:h-16 bg-[#FFF873] rounded-full text-brand-blue;
  }

  .hero-money-icon-text {
    @apply text-lg md:text-4xl font-semibold leading-none text-brand-blue;
  }

  .hero-money-icon-row1,
  .hero-money-icon-row2 {
    @apply hidden;
  }

  .hero-subtitle {
    @apply text-sm sm:text-base md:text-lg lg:text-[20px] text-white leading-normal font-normal text-center lg:max-w-2xl mx-auto pt-4;
  }

  .hero-money-icon svg,
  .dollar-badge svg {
    @apply w-6 h-6 md:w-8 md:h-8 text-brand-blue;
  }

  .hero-money-icon-svg path {
    fill: #005baa;
  }

  /* Money icon — force brand blue (overrides inherited heading colors) */
  .dollar-badge,
  .hero-money-icon,
  .dollar-badge .hero-money-icon-text,
  .hero-money-icon .hero-money-icon-text {
    color: #005baa !important;
  }

  .dollar-badge .hero-money-icon-svg path,
  .hero-money-icon .hero-money-icon-svg path,
  .hero-money-icon-svg path,
  .dollar-badge:hover .hero-money-icon-svg path,
  .hero-money-icon:hover .hero-money-icon-svg path,
  .dollar-badge:hover svg path,
  .hero-money-icon:hover svg path {
    fill: #005baa !important;
  }

  .dollar-badge:hover,
  .hero-money-icon:hover,
  .dollar-badge:hover .hero-money-icon-text,
  .hero-money-icon:hover .hero-money-icon-text {
    color: #005baa !important;
  }

  .hero-btns {
    @apply flex flex-wrap gap-4 items-center justify-center;
  }

  .hero-nav-dots {
    @apply absolute bottom-12 left-1/2 -translate-x-1/2 flex gap-3 z-20;
  }

  .nav-dot {
    @apply w-12 h-1 bg-white/20 rounded-full cursor-pointer transition-all duration-300;
  }

  .nav-dot.active {
    @apply bg-brand-yellow w-16;
  }

  .scroll-indicator {
    @apply absolute bottom-12 right-12 flex flex-col items-center gap-3 z-20;
  }

  .scroll-mouse {
    @apply w-6 h-10 border-2 border-white/30 rounded-full relative;
  }

  .scroll-wheel {
    @apply absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-brand-yellow rounded-full;
    animation: scrollMouse 2s infinite ease-in-out;
  }

  .scroll-text {
    @apply text-[10px] text-white/50 uppercase tracking-[0.2em] font-semibold;
    writing-mode: vertical-rl;
  }

  @keyframes scrollMouse {
    0% {
      transform: translate(-50%, 0);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      transform: translate(-50%, 15px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  .collage {
    @apply relative w-full h-[100dvh] flex items-center justify-center overflow-hidden bg-[#F8FAFD];
  }

  .collage-inner {
    @apply relative w-full h-full flex items-center justify-center;
  }

  .shape {
    @apply absolute bg-transparent;
    overflow: visible !important;
  }

  .shape-media {
    @apply w-full h-full overflow-hidden bg-gray-300 rounded-[inherit];
    /* Fix for iPad/Safari clipping bug during animations */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }

  .s1 {
    @apply w-60 h-32 rounded-[80px] top-7.5 left-20;
  }
  .s2 {
    @apply w-28 h-28.75 rounded-full top-30 left-77.5;
  }
  .s3 {
    @apply w-48 h-48 rounded-full top-5 left-110;
  }
  .s4 {
    @apply w-60 h-32.5 rounded-[80px] top-7.5 left-165;
  }
  .s5 {
    @apply w-37.5 h-37.5 rounded-full top-60 left-25;
  }
  .s6 {
    @apply w-28.75 h-28.75 rounded-full top-63.75 left-72.5;
  }
  .s7 {
    @apply w-60 h-32.5 rounded-[80px] top-63.75 left-115;
  }

  .slide-track {
    @apply flex w-full h-full;
  }

  .slide {
    @apply block shrink-0 w-full h-full overflow-hidden bg-gray-200;
  }
  .slide:nth-child(1) {
    @apply bg-[#b5c8e8];
  }
  .slide:nth-child(2) {
    @apply bg-[#e8c4b5];
  }
  .slide:nth-child(3) {
    @apply bg-[#b5e8c4];
  }
  .slide:nth-child(4) {
    @apply bg-[#e8e0b5];
  }

  .badge {
    @apply absolute flex items-center justify-center rounded-full w-12 h-12 text-[18px] z-40;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }

  .badge-star {
    @apply bg-[#fcd79c] -bottom-1.5 -right-1.5 bg-no-repeat bg-center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
  }
  .badge-thumb {
    @apply bg-[#cdccfd] -top-2 -left-0.5 bg-no-repeat bg-center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'%3E%3C/path%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'%3E%3C/path%3E%3C/svg%3E");
  }
  .badge-heart {
    @apply bg-[#dbbee7] -top-2 -left-1.25 bg-no-repeat bg-center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'%3E%3C/path%3E%3C/svg%3E");
  }

  @media (max-width: 40rem) {
    .badge {
      width: 2rem;
      height: 2rem;
      font-size: 0.85rem;
      background-size: 0.75rem 0.75rem;
    }
  }

  #heroContent {
    @apply relative text-center z-20 w-full max-w-4xl px-4 opacity-0;
  }

  #heroContent h1 {
    @apply text-black text-center text-[56px] font-normal leading-16.25 mb-12;
  }

  #heroContent h1 span {
    @apply text-brand-blue;
  }

  #heroContent .user-stats {
    @apply flex flex-col items-center gap-4;
  }

  #heroContent .stats-top {
    @apply flex items-center justify-center gap-4;
  }

  #heroContent .avatar-group {
    @apply flex -space-x-3;
  }

  #heroContent .avatar {
    @apply w-12 h-12 rounded-full border-2 border-white object-cover shadow-sm bg-gray-200;
  }

  #heroContent .count {
    @apply text-black text-[40px] font-normal leading-normal;
  }

  #heroContent p {
    @apply text-[#808080] text-center text-[13px] font-normal leading-normal max-w-64 mx-auto;
    font-family: 'DM Sans', sans-serif;
  }

  @media (max-width: 1280px) {
    #heroContent h1 {
      @apply text-[42px] leading-13 mb-10;
    }
    #heroContent .count {
      @apply text-[34px];
    }
  }

  @media (max-width: 768px) {
    #heroContent h1 {
      @apply text-[32px] leading-10 mb-8;
    }
    #heroContent .avatar {
      @apply w-10 h-10;
    }
    #heroContent .count {
      @apply text-[28px];
    }
    #heroContent p {
      @apply text-[12px];
    }
    .s3,
    .s5 {
      @apply hidden!;
    }
  }

  /* Contact Section */
  .contact-section,
  .send-money-contact-section {
    @apply relative flex   items-center overflow-hidden bg-cover bg-center py-12  px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  .contact-wrapper,
  .send-money-contact-wrapper {
    @apply relative z-10 w-full mx-auto max-w-7xl flex flex-col md:flex-row items-center justify-between gap-12 md:gap-24;
  }

  .contact-title,
  .send-money-contact-title {
    @apply font-brand font-extrabold text-brand-dark leading-tight text-center md:text-left;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
  }

  .contact-title-styled,
  .send-money-contact-title-styled {
    @apply text-black text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .contact-highlight,
  .send-money-contact-highlight {
    @apply text-brand-blue;
  }

  .contact-coin,
  .send-money-contact-coin {
    @apply inline-flex items-center justify-center w-10 h-10 bg-brand-yellow rounded-full text-xl align-middle shadow-md;
    margin: 0 4px;
  }

  .contact-badges,
  .send-money-contact-badges {
    @apply flex items-center justify-center md:justify-start gap-1.5 mt-5;
  }

  .contact-flags-img,
  .send-money-contact-flags-img {
    @apply h-7 lg:h-11 w-auto object-contain;
  }

  .contact-badge,
  .send-money-contact-badge {
    @apply w-8 h-8 rounded-full border-2 border-white flex items-center justify-center text-lg bg-white shadow-sm hover:scale-110 transition-transform;
  }

  .contact-badge-plus,
  .send-money-contact-badge-plus {
    @apply bg-brand-blue text-white font-bold text-xs;
  }

  @keyframes formSlideUp {
    from {
      opacity: 0;
      transform: translateY(32px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .contact-copy,
  .send-money-contact-copy {
    @apply flex-1 flex flex-col items-center md:items-start;
  }
  .contact-nav,
  .send-money-contact-nav {
    @apply flex gap-8 mb-6;
  }

  .contact-nav-btn,
  .send-money-contact-nav-btn {
    @apply bg-none border-none font-brand text-xl font-bold text-gray-300 cursor-pointer p-0 relative transition-colors;
  }

  .contact-nav-btn.active,
  .send-money-contact-nav-btn.active {
    @apply text-brand-blue;
  }

  .form-group {
    @apply mb-5;
  }

  .form-label {
    @apply block text-sm text-gray-500 mb-2 font-brand font-medium;
  }

  .form-select,
  .form-input {
    @apply flex items-center gap-4 border-2 border-gray-100 rounded-2xl p-4 bg-white transition-all;
  }

  .form-select:focus-within,
  .form-input:focus-within {
    @apply border-brand-blue/30;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, 0.05);
  }

  .form-select select,
  .form-input input,
  .mbsc-country-picker {
    @apply flex-1 border-none outline-none font-brand text-lg font-bold text-brand-dark bg-transparent cursor-pointer appearance-none uppercase;
  }

  .form-flag {
    @apply text-2xl;
  }

  .form-arrow {
    @apply text-gray-300 text-lg pointer-events-none;
  }

  .form-currency {
    @apply flex items-center gap-2;
  }

  .form-divider {
    @apply w-px h-8 bg-gray-100;
  }

  .form-currency select {
    @apply font-brand text-sm font-semibold text-gray-400 bg-transparent border-none outline-none cursor-pointer appearance-none;
  }

  .form-actions {
    @apply flex items-center justify-center mt-6;
  }

  .btn-estimate {
    @apply flex items-center justify-between gap-6 bg-brand-blue text-white border-none rounded-full pl-8 pr-1.5 py-1.5 font-brand text-base font-bold cursor-pointer transition-all hover:bg-blue-900;
  }

  .btn-icon-circle {
    @apply flex items-center justify-center w-11 h-11 bg-brand-yellow rounded-full text-brand-blue text-xl;
  }

  .result-row {
    @apply flex justify-between text-xs text-brand-dark mb-1;
  }

  .result-total {
    @apply text-sm text-brand-blue font-bold border-t-2 border-gray-200 pt-2 mt-1;
  }

  @media (max-width: 767px) {
    .contact-wrapper,
    .send-money-contact-wrapper {
      @apply flex-col items-start gap-6;
    }
    .contact-copy,
    .send-money-contact-copy {
      @apply w-full;
    }
    .contact-form,
    .send-money-contact-form {
      @apply w-full;
    }
    .contact-deco,
    .send-money-contact-deco {
      @apply hidden;
    }
  }

  @media (min-width: 768px) {
    .contact-copy,
    .send-money-contact-copy {
      @apply text-left items-start;
    }
  }

  @media (max-width: 420px) {
    .contact-form,
    .send-money-contact-form {
      @apply p-6;
    }
    .btn-estimate {
      @apply w-full justify-between;
    }
  }

  .contact-form,
  .send-money-contact-form {
    @apply w-full md:flex-1 xl:flex-none xl:max-w-[500px] bg-white rounded-[32px] sm:rounded-[40px] p-6 sm:p-8 xl:p-8;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    animation: formSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .track-panel {
    @apply text-left w-full;
  }

  .track-title {
    @apply text-[#005BAA] font-bold text-xl sm:text-[22px] mb-5 sm:mb-6 font-brand;
  }

  .track-group {
    @apply mb-4 sm:mb-5;
  }

  .track-group-lg {
    @apply mb-5 sm:mb-6;
  }

  .track-label {
    @apply block text-[#9CA3AF] text-[13px] sm:text-sm font-brand font-medium mb-2;
  }

  .track-input {
    @apply w-full border border-gray-200/80 rounded-[14px] px-4 py-3 sm:py-3.5 text-base sm:text-lg text-gray-800 font-brand focus:outline-none focus:border-gray-300 transition-all bg-white;
  }

  .track-btn-container {
    @apply flex justify-center mt-2 sm:mt-5;
  }

  .btn-track {
    @apply inline-flex items-center justify-between gap-0 bg-[#005BAA] text-white rounded-full py-1.5 pl-6 pr-1.5 border-none cursor-pointer;
  }

  .btn-track-text {
    @apply font-brand font-medium text-sm sm:text-base;
  }

  .btn-track-icon-wrapper {
    @apply flex items-center justify-center w-10 h-10 rounded-full bg-[#005BAA] ml-2;
  }

  .btn-track-icon-inner {
    @apply flex items-center justify-center w-8 h-8 rounded-full bg-[#FFF200] shadow-sm;
  }

  .btn-track-icon-inner svg {
    @apply w-4 h-4;
  }

  .track-status-box {
    @apply mt-6 bg-[#F3F8FF] rounded-[20px] p-6 text-left border border-white/40;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  }

  .status-box-title {
    @apply text-black font-bold text-lg mb-6 font-brand;
  }

  .status-box-content {
    @apply flex flex-col gap-3;
  }

  .status-row {
    @apply flex items-center gap-2;
  }

  .status-label {
    @apply text-gray-500 font-medium text-sm sm:text-base font-brand;
  }

  .status-value {
    @apply text-black font-bold text-sm sm:text-base font-brand;
  }

  .status-processing {
    @apply text-[#F59E0B]; /* Orange/Yellow */
  }

  .form-ref {
    @apply w-full border-2 border-gray-200 rounded-xl px-3.5 py-2.5 font-brand text-sm text-brand-dark outline-none my-2.5 transition-colors;
  }

  .form-ref:focus {
    @apply border-brand-blue;
  }

  .form-select-placeholder {
    @apply flex-1 font-brand text-base font-normal text-white;
  }

  .form-currency-symbol {
    @apply text-base font-bold text-brand-dark;
  }

  .contact-result-box,
  .send-money-contact-result-box {
    @apply mt-4 p-4 bg-gray-50 rounded-2xl;
  }

  .contact-result-label,
  .send-money-contact-result-label {
    @apply text-xs text-gray-500 mb-1.5 uppercase font-bold tracking-wider;
  }

  .track-result {
    @apply mt-3 p-3 bg-blue-50 rounded-xl text-xs text-brand-dark;
  }

  /* Send Money — send & receive feature cards (below hero) */
  .send-receive-section {
    @apply bg-[#F3F6FF] px-4 sm:px-8 lg:px-12 xl:px-16 py-10 md:py-14 lg:py-16;
  }

  .send-receive-container {
    @apply mx-auto w-full max-w-7xl font-brand;
  }

  .send-receive-heading {
    @apply text-brand-dark font-normal text-left mb-8 md:mb-10 lg:mb-12;
    @apply text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] leading-tight md:leading-tight lg:leading-tight xl:leading-16;
    letter-spacing: -0.01em;
  }

  .send-receive-cards {
    @apply flex flex-col gap-5 md:gap-6 lg:gap-8;
  }

  .send-receive-card {
    @apply relative overflow-hidden rounded-[10px] min-h-[220px] sm:min-h-[260px] md:min-h-[280px] lg:min-h-[300px];
  }

  /* Layered bg per Figma: blue overlay + photo (lightgray fallback, center / cover) */
  .send-receive-card--send {
    @apply bg-no-repeat;
    background:
      linear-gradient(0deg, rgba(0, 91, 170, 0.7) 0%, rgba(0, 91, 170, 0.7) 100%),
      url('../img/send-money-bg.jpeg') lightgray 50% / cover no-repeat;
  }

  .send-receive-card--receive {
    @apply bg-no-repeat;
    background:
      linear-gradient(0deg, rgba(0, 91, 170, 0.7) 0%, rgba(0, 91, 170, 0.7) 100%),
      url('../img/recieve-money-bg.jpeg') lightgray 50% / cover no-repeat;
  }

  .send-receive-card-content {
    @apply relative z-10 flex min-h-[inherit] flex-col p-6 md:p-8 lg:p-10;
  }

  .send-receive-card-icon {
    @apply mb-4 flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-yellow text-brand-dark md:mb-5 md:h-12 md:w-12;
  }

  .send-receive-card-icon svg {
    @apply h-6 w-6 md:h-7 md:w-7;
  }

  .send-receive-card-copy {
    @apply flex-1;
  }

  .send-receive-card-title {
    @apply mb-3 text-2xl  text-white md:mb-4 md:text-3xl lg:text-4xl;
  }

  .send-receive-card-title span {
    @apply text-brand-yellow;
  }

  .send-receive-card-desc {
    @apply max-w-3xl text-sm font-medium leading-relaxed text-white/90 md:text-base;
  }

  .send-receive-watch-link {
    @apply mt-6 inline-flex items-center gap-3 text-sm  text-white no-underline transition-opacity hover:opacity-90 md:mt-8 md:text-base;
  }

  .send-receive-watch-play {
    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-[3px] border-white bg-brand-blue text-brand-yellow md:h-11 md:w-11;
  }

  .send-receive-watch-play svg {
    @apply ml-0.5 h-3.5 w-3.5;
  }

  /* Send Money — destination countries: same horizontal padding + max-width shell as inner-hero / contact */
  .send-money-destinations-section {
    @apply bg-white px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  .send-money-destinations-shell {
    @apply mx-auto w-full max-w-7xl;
  }

  .send-money-destinations-inner {
    @apply mx-auto w-full  py-12 md:py-16 lg:py-20 font-brand;
  }

  .send-money-destinations-heading.section-heading {
    @apply text-left mb-10 md:mb-14;
  }

  /* Flex row(s): full width of shell, space-between on each line; ~3/4/4 flags per row by width */
  .send-money-destinations-grid {
    @apply flex w-full max-w-full flex-wrap  list-none m-0 p-0 justify-between gap-y-10 gap-x-0 sm:gap-y-11 lg:gap-y-12;
  }

  .send-money-destination-item {
    @apply flex min-w-0 shrink-0 basis-auto;
    @apply w-[30%] sm:w-[30%] md:w-[30%] lg:w-[22%];
  }

  .send-money-destination-link {
    @apply flex w-full flex-col items-center gap-2.5 text-center text-inherit no-underline rounded-2xl py-1 px-1 transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue focus-visible:ring-offset-2;
  }

  .send-money-destination-flag-wrap {
    @apply relative w-14 h-14 sm:w-16 sm:h-16 lg:w-[4.75rem] lg:h-[4.75rem] rounded-full overflow-hidden border border-black/6 shadow-sm ring-1 ring-black/4 shrink-0 bg-gray-50;
  }

  .send-money-destination-flag {
    @apply w-full h-full object-cover;
  }

  .send-money-destination-name {
    @apply text-[11px] sm:text-xs font-semibold uppercase tracking-[0.14em] text-[#151515] font-brand leading-tight;
  }

  /* Send Money — country detail page */
  .send-money-detail-intro {
    @apply bg-white border-t border-gray-100;
  }

  .send-money-detail-intro-inner {
    @apply mx-auto w-full max-w-7xl px-4 py-14 text-center sm:px-6 md:py-20 md:px-8 lg:px-12 xl:px-16;
  }

  .send-money-detail-intro-flag-wrap {
    @apply mx-auto mb-8 flex h-24 w-24 items-center justify-center sm:h-28 sm:w-28;
  }

  .send-money-detail-intro-flag {
    @apply h-full w-full rounded-full border border-black/8 object-cover shadow-md ring-2 ring-black/5;
  }

  .send-money-detail-intro-title {
    @apply mb-6 text-left sm:text-center font-normal;
  }

  .send-money-detail-intro-body {
    @apply mx-auto mb-0 max-w-4xl text-left text-base leading-loose text-[#5F5F5F] font-brand sm:text-center sm:text-lg sm:leading-[1.85];
  }

  .send-money-detail-features {
    @apply mt-12 w-full max-w-none mx-auto;
  }

  /* Single white card; three columns; light vertical rules (short on desktop) */
  .send-money-detail-features-board {
    @apply rounded-[14px] bg-white;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.06);
  }

  .send-money-detail-features-row {
    @apply grid grid-cols-1 md:grid-cols-3;
  }

  .send-money-detail-feature-col {
    @apply relative flex flex-col items-center px-7 py-11 text-center sm:px-10 sm:py-14 md:px-10 md:py-12 lg:px-14 xl:px-16;
    @apply border-b border-gray-200 md:border-b-0;
  }

  .send-money-detail-feature-col:last-child {
    @apply border-b-0;
  }

  .send-money-detail-feature-col:not(:last-child)::after {
    content: '';
    display: none;
  }

  @media (min-width: 768px) {
    .send-money-detail-feature-col:not(:last-child)::after {
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 68%;
      background-color: #e5e7eb;
    }
  }

  .send-money-detail-feature-icon-wrap {
    @apply mb-5 flex h-16 w-16 shrink-0 items-center justify-center rounded-full;
  }

  .send-money-detail-feature-icon-wrap--a {
    @apply bg-sky-50 text-[#2563eb];
  }

  .send-money-detail-feature-icon-wrap--b {
    @apply bg-emerald-50 text-emerald-600;
  }

  .send-money-detail-feature-icon-wrap--c {
    @apply bg-fuchsia-50 text-fuchsia-600;
  }

  .send-money-detail-feature-icon-combo {
    @apply relative flex items-center justify-center;
  }

  .send-money-detail-feature-icon-combo .send-money-detail-feature-fa {
    @apply text-[1.65rem] leading-none;
  }

  .send-money-detail-feature-fa-arrows {
    @apply absolute -right-0.5 top-1/2 -translate-y-1/2 text-[0.55rem] leading-none opacity-90;
  }

  .send-money-detail-feature-fa {
    @apply text-[1.65rem] leading-none;
  }

  .send-money-detail-feature-title {
    @apply mb-2.5 font-brand text-lg font-bold tracking-tight text-[#151515] md:text-xl;
  }

  .send-money-detail-feature-text {
    @apply max-w-[220px] font-brand text-sm leading-relaxed text-[#6b7280] md:text-[15px] md:max-w-[280px] xl:max-w-[320px];
  }

  /* Type Of Service — standard feature cards (matches protect / safe patterns) */
  .send-money-detail-services {
    @apply bg-white px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  .send-money-detail-services.sm-services--empty,
  .send-money-detail-services.is-hidden,
  .send-money-detail-partners.is-hidden,
  [data-sm-services-section][hidden],
  [data-sm-partners-section][hidden] {
    display: none !important;
  }

  .sm-services-shell {
    @apply mx-auto w-full max-w-7xl py-12 md:py-16 lg:py-20 font-brand;
  }

  .sm-services-header {
    @apply mx-auto mb-8 max-w-3xl text-center md:mb-10 lg:mb-12;
  }

  .send-money-detail-services-title,
  .sm-services-title {
    @apply mb-4 font-normal md:mb-5;
  }

  .send-money-detail-services-lead,
  .sm-services-lead {
    @apply text-base leading-relaxed text-[#6b7280] md:text-lg;
  }

  .sm-services-list-wrap {
    @apply w-full;
  }

  .sm-services-list {
    @apply grid w-full list-none gap-5 p-0 md:gap-6;
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 1024px) {
    .sm-services:not(.sm-services--stacked) .sm-services-list {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }

  .sm-services--stacked .sm-services-list,
  .sm-services--one .sm-services-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sm-services--one .sm-services-list {
    max-width: 52rem;
    margin-inline: auto;
  }

  .sm-service-card {
    @apply flex w-full min-w-0 items-start gap-4 rounded-[10px] border border-[rgba(0,91,170,0.09)] bg-white p-6 shadow-[0_1px_3px_rgba(15,23,42,0.06)] transition-[border-color,box-shadow] duration-200 md:gap-5 md:p-8;
  }

  .sm-service-card:hover {
    @apply border-[rgba(0,91,170,0.18)] shadow-[0_8px_24px_rgba(0,91,170,0.08)];
  }

  /* Legacy carousel / image markup — never show */
  .sm-service-card-media,
  .sm-service-card-img,
  .sm-services-carousel,
  .sm-services-viewport,
  .sm-services-track,
  .sm-services-arrow,
  .sm-service-card-top {
    display: none !important;
  }

  .sm-service-card-icon {
    @apply flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#E8F2FC] text-brand-blue md:h-14 md:w-14;
  }

  .sm-service-card-icon i {
    @apply text-xl leading-none md:text-2xl;
  }

  .sm-service-card-icon-svg {
    @apply block h-6 w-6 md:h-7 md:w-7;
  }

  .sm-service-card-body {
    @apply flex min-w-0 flex-1 flex-col gap-3 pt-0.5 md:gap-3.5;
  }

  .sm-service-card-title {
    @apply font-brand text-lg font-bold leading-snug text-[#1E1E1E] md:text-xl;
  }

  .sm-service-card-title-accent {
    @apply text-brand-blue;
  }

  .sm-service-card-desc {
    @apply -mt-1 font-brand text-sm leading-relaxed text-[#5F5F5F] md:text-base;
  }

  .sm-service-card-extras,
  .sm-service-card-points {
    @apply m-0 flex list-none flex-col gap-3.5 p-0 md:gap-4;
  }

  .sm-service-card-point {
    @apply flex items-start gap-3 md:gap-3.5;
  }

  .sm-service-card-point-icon {
    @apply mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-[15px] text-brand-blue md:h-[22px] md:w-[22px] md:text-base;
  }

  .sm-service-card-point-text {
    @apply min-w-0 flex-1 font-brand text-sm leading-relaxed text-[#4B5563] md:text-[15px];
  }

  /* Legacy */
  .sm-service-card-details {
    @apply m-0 flex list-none flex-col gap-3.5 p-0;
  }

  .sm-service-card-details li {
    @apply flex items-start gap-3;
  }

  .send-money-detail-partners {
    @apply border-t border-gray-100 bg-[#F3F6FF];
  }

  .send-money-detail-partners-inner {
    @apply mx-auto w-full max-w-7xl px-4 py-14 sm:px-8 lg:py-20 lg:px-12 xl:px-16;
  }

  /* Partner cards/logos: reuse .agent-locations-partners-* (see agent-locations section) */

  /* Country Dropdown Styles */
  .dropdown-overlay {
    @apply fixed inset-0 z-998 opacity-0 pointer-events-none;
  }
  .dropdown-overlay.active {
    @apply pointer-events-auto;
  }

  .country-dropdown {
    @apply fixed z-999 bg-white rounded-2xl shadow-2xl opacity-0 scale-95 pointer-events-none transition-all duration-200 ease-out flex flex-col overflow-hidden;
    max-height: 400px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform-origin: top left;
  }
  .country-dropdown.active {
    @apply opacity-100 scale-100 pointer-events-auto;
  }

  .dropdown-search {
    @apply p-3 bg-gray-50/50 border-b border-gray-100;
  }
  .dropdown-search input {
    @apply w-full bg-white border border-gray-200 rounded-xl px-4 py-2 font-brand text-sm outline-none transition-all;
  }
  .dropdown-search input:focus {
    @apply border-brand-blue/30 ring-4 ring-brand-blue/5;
  }

  .dropdown-content {
    @apply flex-1 overflow-y-auto;
  }

  .dropdown-item {
    @apply flex items-center gap-3 p-3 px-4 cursor-pointer hover:bg-gray-50 transition-colors;
  }
  .dropdown-item-flag {
    @apply text-2xl filter drop-shadow-sm;
  }
  .dropdown-item-name {
    @apply font-brand text-sm font-medium text-gray-700;
  }

  /* Location Section Styles */
  .location-section {
    @apply bg-white overflow-hidden;
  }

  .location-wrapper {
    @apply relative z-10 w-full mx-auto max-w-7xl px-4 sm:px-8 lg:px-12 xl:px-0 my-12 lg:my-16;
  }

  .location-card {
    @apply bg-[#F8FAFD] rounded-[3rem] px-4 lg:px-20 overflow-hidden relative;
    will-change: transform, opacity;
  }

  .location-grid {
    @apply flex flex-col lg:flex-row items-center gap-12 lg:gap-20 py-6;
  }

  .location-globe-wrap {
    @apply relative w-full max-w-lg;
    aspect-ratio: 1 / 1;
    min-height: 300px;
  }

  #globe-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
  }

  #globe-canvas:active {
    cursor: grabbing;
  }

  .location-avatar-stack {
    @apply inline-flex -space-x-3 items-center align-middle ml-2;
  }

  .location-avatar {
    @apply w-10 h-10 rounded-full border-2 border-white shadow-sm ring-1 ring-gray-100;
  }
  .location-title {
    @apply font-brand font-extrabold text-brand-dark leading-tight text-center md:text-left;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
  }
  .location-highlight {
    @apply text-brand-blue;
  }
  .location-title-styled {
    @apply text-black text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }
  .location-btn {
    @apply inline-flex items-center gap-4 bg-brand-blue text-white justify-center rounded-full pl-4 md:pl-5 pr-1.5 py-1.5 font-brand text-sm md:text-base font-normal;
  }

  .location-btn-icon {
    @apply w-8 h-8 md:w-10 md:h-10 rounded-full bg-brand-yellow flex items-center justify-center;
  }

  .location-globe-container {
    @apply w-full lg:w-1/2 flex justify-center;
  }

  .location-video {
    @apply w-full h-full object-contain mix-blend-multiply;
  }

  .location-video-alt {
    @apply w-full h-full object-contain;
  }

  .location-content {
    @apply w-full lg:w-1/2;
  }

  .location-title-wrap {
    @apply mb-6;
  }

  .location-title-align {
    @apply text-left;
  }

  .location-desc {
    @apply font-brand text-base lg:text-lg text-gray-500 mb-10 leading-relaxed;
  }

  .location-btn-text {
    @apply font-normal;
  }

  /* Solution Section Styles */

  .solution-container {
    @apply bg-brand-dark rounded-b-[40px] lg:rounded-b-[70px] overflow-hidden py-20 px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  .solution-grid {
    @apply flex flex-col lg:flex-row items-start  lg:items-center gap-16 mx-auto max-w-7xl px-0;
  }

  .solution-content {
    @apply flex-1 text-left;
  }

  .solution-badge {
    @apply text-white/60 text-sm font-medium mb-6 uppercase tracking-widest;
  }

  .solution-title {
    @apply text-white text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16 mb-8;
  }

  .solution-highlight {
    @apply text-brand-yellow;
  }

  .solution-description {
    @apply text-white/70 text-base md:text-lg mb-12 max-w-lg leading-relaxed font-brand;
  }

  .solution-btn {
    @apply inline-flex items-center gap-4 md:gap-6 bg-brand-yellow text-brand-blue rounded-full pl-4 md:pl-5 pr-1.5 py-1.5 font-brand text-sm md:text-base font-normal;
  }

  .solution-btn-icon {
    @apply w-8 h-8 md:w-10 md:h-10 rounded-full bg-brand-blue flex items-center justify-center;
  }

  .solution-btn-icon svg path {
    stroke: #fff200;
  }

  .solution-graphic {
    @apply flex-1 w-full;
    position: relative;
    min-height: calc(var(--spacing) * 84);
  }

  .code-window {
    @apply w-[92%] sm:w-[88%] lg:w-full mx-auto lg:mx-0;
  }

  .code-window-foreground {
    @apply relative z-10;
  }

  .code-window-backdrop {
    @apply absolute inset-0 pointer-events-none;
    transform: translate(-35px, -50px) scale(0.96);
    opacity: 0.65;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease,
      filter 0.8s ease;
  }

  .solution-graphic.code-scrolled .code-window-backdrop {
    transform: translate(35px, 30px) scale(0.98);
    opacity: 0.9;
  }

  .code-window-backdrop .code-window-inner {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  }

  .code-window-backdrop .code-window-body {
    min-height: 1px;
    background: transparent;
  }

  .code-window-backdrop .code-window-footer {
    background: rgba(20, 22, 33, 0.85);
  }

  .code-window-inner {
    @apply w-full rounded-3xl overflow-hidden flex flex-col;
    @apply h-96 sm:h-[420px] lg:h-135;
    position: relative;
    background: #141621;
    border: 1px solid #43454d;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }

  .code-window-header {
    @apply h-12 px-4 flex items-center;
    background: #141621;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .code-window-controls {
    @apply flex items-center gap-3;
  }

  .code-window-dot {
    @apply w-3 h-3 rounded-full bg-white/40;
  }

  .code-window-header-line {
    width: 3.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    margin-left: 0.75rem;
  }

  .code-window-body {
    @apply flex flex-1 overflow-auto overscroll-contain;
    position: relative;
    z-index: 1;
    padding-bottom: 4rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .code-window-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0.75rem;
    z-index: 2;
    padding: 0.75rem 1rem;
    background: #141621;
    border-radius: 0;
  }

  .code-window-icon {
    @apply inline-flex items-center justify-center p-2 text-white;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .code-window-body::-webkit-scrollbar {
    display: none;
  }

  .code-pre {
    @apply flex-1 px-0 py-0 min-w-0;
    font-family: var(--font-code);
    font-size: 14px;
    line-height: 12px;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre;
  }

  .code-pre code {
    display: block;
    padding: 16px 20px;
    counter-reset: codeLine;
  }

  .code-line {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
  }

  .code-line::before {
    counter-increment: codeLine;
    content: counter(codeLine);
    padding-right: 20px;
    text-align: right;
    user-select: none;
    color: rgba(255, 255, 255, 0.4);
  }

  .code-line-content {
    padding-left: 16px;
    min-width: 0;
  }

  .code-line-content:empty {
    display: block;
    height: 20px;
  }

  .code-indent1 {
    padding-left: 16px;
  }
  .code-indent2 {
    padding-left: 32px;
  }
  .code-indent3 {
    padding-left: 48px;
  }
  .code-indent4 {
    padding-left: 64px;
  }

  .code-comment {
    color: rgba(255, 255, 255, 0.5);
  }

  .code-ident {
    color: #ffac60;
  }
  .code-ident-white {
    color: #ffffff;
  }
  .code-ident-green {
    color: #1ac69c;
  }
  .code-string {
    color: #3fa4ff;
  }
  .code-kw {
    color: #ff32c6;
    font-weight: 600;
  }
  .code-pink {
    color: #ff32c6;
    font-weight: 600;
  }
  .code-purple {
    color: #c478ff;
    font-weight: 600;
  }
  .code-fn {
    color: #c478ff;
  }
  .code-number {
    color: #c478ff;
  }
  .code-op {
    color: rgba(255, 255, 255, 0.85);
  }
  .code-punc {
    color: rgba(255, 255, 255, 0.85);
  }

  /* ////////////////////
     Footer Section
     //////////////////// */
  .main-footer {
    @apply bg-white py-4 lg:py-8 px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  #main-content {
    @apply relative z-10 bg-white;
  }

  #footer {
    @apply relative z-10 lg:fixed lg:bottom-0 lg:left-0 lg:w-full lg:z-[-1];
  }

  .footer-container {
    @apply mx-auto max-w-7xl px-0 relative;
  }

  .footer-top {
    @apply flex flex-col lg:flex-row justify-between gap-12 mb-8 lg:mb-12;
  }

  .footer-brand {
    @apply shrink-0;
  }

  .footer-logo {
    @apply h-10 w-auto mb-10;
  }
  .footer-info {
    @apply text-text-muted text-sm md:text-base leading-relaxed font-brand;
  }
  .footer-contact-link {
    @apply text-text-muted hover:text-brand-blue transition-colors;
  }
  .footer-phone {
    @apply text-text-muted font-brand;
  }

  .footer-links-grid {
    @apply grid grid-cols-1 sm:grid-cols-3 gap-12 lg:gap-24;
  }

  .footer-heading {
    @apply text-brand-dark font-bold text-lg mb-6;
    font-family: var(--font-brand);
  }

  .footer-list {
    @apply space-y-4;
  }

  .footer-link {
    @apply text-text-muted hover:text-brand-blue transition-colors text-base font-medium font-brand;
  }

  .footer-middle {
    @apply flex items-center justify-end pb-8 border-b border-gray-100;
  }

  @media (max-width: 1023px) {
    .footer-scroll-top {
      @apply absolute top-12 right-4 sm:right-8 w-auto;
    }
  }

  .footer-scroll-top {
    @apply absolute right-4 bottom-20 lg:right-0 lg:bottom-auto lg:top-[180px] z-20;
  }

  .scroll-top-btn {
    @apply w-[68px] h-[68px] rounded-full border border-[#E2E2E2] flex items-center justify-center bg-transparent transition-all cursor-pointer;
  }

  .scroll-top-inner {
    @apply w-[48px] h-[48px] rounded-full bg-brand-blue flex items-center justify-center;
  }

  .scroll-top-icon {
    @apply w-5 h-5;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='4'%3E%3C/line%3E%3Cpolyline points='6 10 12 4 18 10'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .footer-bottom {
    @apply flex flex-col md:grid md:grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-x-8 gap-y-6 pt-10 border-t border-gray-50;
  }

  .footer-copyright {
    @apply text-text-muted text-sm font-brand text-center md:col-span-2 lg:w-auto lg:text-left;
    order: 3;
    @apply lg:order-1;
  }

  .footer-legal {
    @apply flex gap-8 items-center justify-center md:justify-start;
    order: 1;
    @apply lg:order-2;
  }

  .footer-legal-link {
    @apply text-text-muted hover:text-brand-blue transition-colors text-sm font-brand;
  }

  .social-links {
    @apply flex items-center gap-6 justify-center md:justify-end;
    order: 2;
    @apply lg:order-3;
  }

  .social-icon {
    @apply w-10 h-10 rounded-full border border-[#E3EBF7] flex items-center justify-center text-black transition-all hover:border-brand-blue/30 text-lg;
  }

  @media (max-width: 767px) {
    .main-footer {
      @apply bg-white py-8 border-none;
    }
    .footer-container {
      @apply flex flex-col;
    }
    .footer-top {
      @apply flex flex-col justify-start gap-0 w-full mb-0;
    }
    .footer-brand {
      @apply mb-8 mt-2 justify-start block w-full;
    }
    .footer-links-grid {
      @apply flex flex-col gap-8 w-full mb-10;
    }
    .footer-column {
      @apply flex flex-col gap-4;
    }
    .footer-heading {
      @apply text-lg font-bold mb-1;
    }
    .footer-list {
      @apply flex flex-col gap-3;
    }
    .footer-bottom {
      @apply flex flex-col gap-0 border-none pt-0;
    }
    .footer-legal {
      order: 1;
      @apply flex justify-between gap-4 w-full mb-8 flex-row flex-wrap;
    }
    .social-links {
      order: 2;
      @apply flex gap-4 w-full justify-start pt-8 pb-8 border-t border-[#E8E8E8];
    }
    .footer-copyright {
      order: 3;
      @apply block w-full m-0 text-sm text-text-muted border-none pt-0;
    }
  }

  /* Inner Hero Section (Reusable across pages like About Us, Become Partner) */
  .inner-hero-section {
    @apply pt-32 py-16 lg:pt-32 lg:pb-32 px-4 sm:px-8 lg:px-12 xl:px-16;
    background: linear-gradient(90deg, #eff3ff 15.03%, rgba(183, 201, 255, 0.46) 110.09%);
  }

  @media (prefers-reduced-motion: reduce) {
    .inner-hero-section .inner-hero-badge,
    .inner-hero-section .inner-hero-title,
    .inner-hero-section .inner-hero-desc,
    .inner-hero-section .inner-hero-visual,
    .inner-hero-section .inner-hero-stats-overlay,
    .inner-hero-section .btn-inner-contact-float {
      opacity: 1 !important;
      transform: none !important;
      visibility: visible !important;
    }
  }

  .inner-hero-container {
    @apply mx-auto max-w-7xl;
  }

  .inner-hero-grid {
    @apply flex flex-col md:flex-row items-center gap-16 lg:gap-24;
  }

  .inner-hero-content {
    @apply flex-1 order-2 md:order-1;
  }

  .inner-hero-badge {
    @apply text-[#484848] font-medium mb-6 uppercase tracking-widest text-sm;
  }

  .inner-hero-title {
    @apply text-brand-dark font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16 mb-8;
    @apply text-2xl md:text-3xl lg:text-[42px] xl:text-[56px];
    letter-spacing: -0.01em;
  }

  .inner-hero-title .hero-money-icon {
    @apply inline-flex !w-10 !h-10 md:!w-12 md:!h-12 lg:!w-14 lg:!h-14 xl:!w-16 xl:!h-16 ml-2;
  }

  .inner-hero-title .hero-money-icon-text {
    @apply !text-lg md:!text-xl lg:!text-2xl xl:!text-4xl;
  }

  .inner-hero-desc {
    @apply text-[#5F5F5F] text-lg md:text-xl mb-12 max-w-lg leading-relaxed font-brand;
  }

  .inner-hero-visual {
    @apply flex-1 order-1 lg:order-2 w-full relative;
  }

  .inner-hero-image-wrapper {
    @apply relative w-full;
    background: transparent;
  }

  .inner-hero-img {
    @apply w-full h-auto object-contain rounded-[40px] md:rounded-[60px] lg:rounded-[80px];
  }

  .inner-hero-stats-overlay {
    @apply absolute bottom-12 right-0;
    max-width: 320px;
  }

  .inner-hero-avatar-group {
    @apply flex items-center gap-0 mb-4;
  }

  .inner-hero-avatar-group img {
    @apply w-8 h-8 lg:w-12 lg:h-12 rounded-full  shadow-sm -ml-4 first:ml-0;
  }

  .inner-hero-stats-text {
    @apply text-white text-center;
  }

  .inner-hero-stats-number {
    @apply text-white text-2xl md:text-3xl lg:text-5xl pl-3 font-normal;
    font-family: var(--font-brand);
  }

  .inner-hero-stats-label {
    @apply text-[#F8FAFDB2] text-sm lg:text-lg  opacity-90 leading-tight block w-full lg:w-4/5;
  }

  /* Floating Contact Button */
  .btn-inner-contact-float {
    @apply absolute bottom-0 left-0 inline-flex items-center gap-1 gap-2 xl:gap-3 bg-brand-blue text-white rounded-[40px] px-2 py-1 lg:px-3 lg:py-1.5 font-brand text-xs lg:text-base font-bold transition-all;
  }
  .btn-inner-contact-float .btn-text {
    @apply mr-0 ml-0 xl:ml-1 xl:mr-2;
  }
  .btn-inner-contact-float .btn-icon {
    @apply flex items-center justify-center w-6.5 h-6.5 lg:w-8 lg:h-8 xl:w-10 xl:h-10 bg-brand-yellow rounded-full;
  }

  /* Send Money — same hero layout as About / Become Partner; only background differs */
  .inner-hero-section--send-money {
    background: linear-gradient(90deg, #eff3ff 15.03%, rgba(183, 201, 255, 0.46) 110.09%);
  }

  /*
   * Inner hero — curved vector mask frame (608×572 path).
   * Swap only the <img src>; the clip shape stays the same.
   */
  .inner-hero-section--vector-frame {
    --inner-hero-vector-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 608 572'%3E%3Cpath d='M0 44C0 19.6995 19.6995 0 44 0H564C588.301 0 608 19.6995 608 44V528C608 552.301 588.301 572 564 572H251.285C233.379 572 217.259 561.149 210.52 544.559L205.671 532.622C198.932 516.033 182.812 505.182 164.906 505.182H44C19.6994 505.182 0 485.482 0 461.182V44Z' fill='black'/%3E%3C/svg%3E");
  }

  .inner-hero-vector-frame {
    @apply relative mx-auto w-full max-w-[608px];
    aspect-ratio: 608 / 572;
    max-height: min(32rem, 72vh);
  }

  .inner-hero-vector-frame .btn-inner-contact-float {
    z-index: 2;
  }

  @media (min-width: 768px) {
    .inner-hero-section--vector-frame .inner-hero-vector-frame {
      @apply md:ml-auto md:mr-0;
      max-height: min(36rem, 75vh);
    }
  }

  .inner-hero-vector-frame__media {
    @apply absolute inset-0 overflow-hidden;
    -webkit-mask-image: var(--inner-hero-vector-mask);
    mask-image: var(--inner-hero-vector-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: drop-shadow(0 24px 60px rgba(15, 23, 42, 0.12));
  }

  .inner-hero-vector-frame__img {
    @apply block h-full w-full rounded-none object-cover object-center;
    box-shadow: none;
  }

  .inner-hero-section--vector-frame .inner-hero-vector-frame__img.inner-hero-img {
    border-radius: 0;
  }

  /* Partner Page Specific Sections */
  .partner-stats-section {
    @apply py-16 px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }

  .partner-stats-grid {
    @apply mx-auto max-w-7xl grid grid-cols-2 md:grid-cols-4 gap-8 items-stretch;
  }

  .stat-item-number {
    @apply text-brand-blue font-medium text-4xl md:text-5xl lg:text-6xl mb-2 font-brand;
  }

  .stat-item-label {
    @apply text-[#5C5C5C] text-sm md:text-base font-medium font-brand;
  }

  .partner-advantages-section {
    @apply pb-24 px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }
  .advantages-title {
    @apply text-black text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .advantages-container {
    @apply mx-auto max-w-7xl;
  }

  .advantages-tabs {
    @apply flex flex-wrap gap-4;
  }

  .advantage-tab-btn {
    @apply flex items-center gap-3 px-6 py-3 rounded-full border border-gray-100 bg-[#F8F9FA] text-[#5F5F5F] font-medium transition-all hover:bg-gray-50 cursor-pointer;
  }

  .advantage-tab-btn.active {
    @apply bg-brand-blue text-white border-brand-blue shadow-lg shadow-brand-blue/20;
  }

  .advantage-tab-btn.active svg path {
    fill: var(--color-brand-yellow);
  }

  .advantage-tab-btn i {
    @apply text-lg;
  }

  .advantage-tab-btn.active i {
    @apply text-brand-yellow;
  }

  .advantages-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-10 lg:gap-y-16 items-stretch;
  }

  .tab-panel.hidden {
    display: none !important;
  }

  .advantage-item {
    @apply flex flex-col;
  }

  .advantage-item-title {
    @apply text-xl font-bold text-[#151515] font-brand mb-2  min-h-[2.4rem];
  }

  .advantage-item-desc {
    @apply text-[#5F5F5F] text-base leading-relaxed font-brand md:min-h-[5rem] lg:min-h-[6rem];
  }

  .info-cta-box {
    @apply bg-[#EFF3FF] rounded-3xl p-4 md:p-6 flex flex-col md:flex-row items-center justify-between gap-8 h-full;
  }

  .info-cta-content {
    @apply flex-1 space-y-4;
  }

  .info-cta-title {
    @apply text-xl lg:text-2xl font-medium text-[#1E1E1E] font-brand;
  }

  .info-cta-text {
    @apply text-[#5F5F5F] text-base lg:text-lg font-brand max-w-2xl;
  }

  @media (max-width: 1023px) {
    .inner-hero-stats-overlay {
      @apply bottom-4 right-4 p-4;
      max-width: 240px;
    }
  }

  /* Mission Section */
  .mission-section {
    @apply py-16 px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }

  .mission-container {
    @apply mx-auto max-w-7xl;
  }

  .mission-header {
    @apply mb-8 lg:mb-16;
  }

  .mission-title {
    @apply text-brand-blue font-normal font-brand;
  }

  .mission-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-stretch;
  }

  .mission-visual {
    @apply relative w-full h-[300px] lg:h-auto;
  }

  .mission-image-wrapper {
    @apply lg:absolute lg:inset-0 rounded-md overflow-hidden shadow-lg w-full h-full;
  }

  .mission-img {
    @apply w-full h-full object-cover block;
  }

  .mission-content {
    @apply space-y-8;
  }

  .mission-heading {
    @apply text-xl lg:text-2xl font-bold text-[#151515] leading-tight font-brand;
  }

  .mission-text {
    @apply space-y-6 text-[#5F5F5F] text-base lg:text-lg leading-relaxed font-brand;
  }

  /* Company Stats Section */
  .company-stats-section {
    @apply pb-16 lg:pb-24 px-4 sm:px-8 lg:px-12 xl:px-16 bg-white pt-10;
  }

  .company-stats-container {
    @apply mx-auto max-w-7xl;
  }

  .company-stats-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6;
  }

  .stats-card {
    @apply relative rounded-3xl overflow-hidden h-[280px] md:h-[360px] lg:h-[380px] flex items-start px-8 md:px-10 pt-8;
  }

  .stats-card-bg {
    @apply absolute inset-0 bg-cover bg-center;
  }

  .stats-card-content {
    @apply relative z-10 w-full flex flex-col gap-4;
  }

  .stats-card-title {
    @apply text-white text-xl lg:text-2xl font-medium leading-tight font-brand;
  }

  /* Solutions Video Section */
  .solutions-video-section {
    @apply pb-16 lg:pb-24 px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }

  .solutions-video-container {
    @apply mx-auto max-w-7xl flex flex-col items-center text-center;
  }

  .solutions-video-heading {
    @apply text-brand-dark font-normal mb-8;
    letter-spacing: -0.01em;
  }

  .solutions-video-wrapper {
    @apply relative w-full aspect-[16/9] md:aspect-[16/5] rounded-[20px] md:rounded-[20px] overflow-hidden bg-[#f3f6ff];
  }

  .solutions-preview-video {
    @apply pointer-events-none object-cover;
    object-position: center 42%;
  }

  .solutions-video-thumb {
    @apply absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105;
  }

  .solutions-video-thumb::after {
    content: '';
    @apply absolute inset-0 bg-black/20 transition-opacity duration-300 group-hover:bg-black/10;
  }

  .solutions-play-btn {
    @apply absolute top-1/2 left-1/2 z-10 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-white/95  text-white shadow-lg transition-transform duration-300 hover:scale-110  md:h-20 md:w-20;
  }

  .solutions-play-btn:focus-visible {
    @apply outline-2 outline-offset-4;
  }

  .solutions-play-btn svg {
    @apply ml-0.5 h-8 w-8 md:h-10 md:w-10;
  }

  /* Modal state */
  body.modal-open {
    @apply overflow-hidden;
  }

  .video-modal {
    @apply fixed inset-0 z-[1000] flex items-center justify-center bg-black/90 opacity-0 pointer-events-none transition-opacity duration-300;
  }

  .video-modal.active {
    @apply opacity-100 pointer-events-auto;
  }

  .video-modal-close {
    @apply absolute top-6 right-6 text-white hover:text-brand-yellow transition-colors z-50 cursor-pointer;
  }

  .video-modal-content {
    @apply w-full max-w-5xl px-4 md:px-8 aspect-video relative;
  }

  .video-modal-player {
    @apply w-full h-full rounded-xl shadow-2xl;
  }

  /* Partner Benefits Section */
  .partner-benefits-section {
    @apply px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }

  .benefits-container {
    @apply mx-auto max-w-7xl;
  }

  .benefits-main-heading {
    @apply text-black text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] font-normal leading-tight md:leading-tight lg:leading-tight xl:leading-16 text-left mb-12 lg:mb-16;
    @apply lg:max-w-5xl;
  }

  .benefits-grid {
    @apply grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8;
  }

  .benefit-card {
    @apply rounded-[32px] md:rounded-[40px] overflow-hidden flex flex-col h-[350px] md:h-[400px] lg:h-[450px] relative transition-transform hover:scale-[1.01] duration-500;
  }

  .benefit-card-light {
    background: linear-gradient(180deg, #eff3ff 0%, #dbeaff 100%);
  }

  .benefit-card-dark {
    @apply bg-brand-blue text-white;
  }

  .benefit-card-excellence {
    @apply relative overflow-hidden bg-[#F4F8FF] flex flex-col;
  }

  .benefit-card-excellence .benefit-card-content {
    @apply p-8 lg:p-16 z-10 w-full;
  }

  .benefit-card-excellence .benefit-card-title {
    @apply mb-4 font-brand;
  }

  .benefit-card-excellence .benefit-card-text {
    @apply text-[#5F5F5F]  leading-relaxed;
  }
  .benefit-card-light .benefit-card-text {
    @apply text-[#5F5F5F]  leading-relaxed;
  }

  .benefit-card-excellence .benefit-card-image {
    @apply absolute bottom-0 right-0 w-[70%] md:w-[50%] lg:w-[70%] pointer-events-none z-0;
    @apply transform translate-x-[3%] translate-y-[3%];
  }

  .excellence-graphic {
    @apply w-full h-auto object-contain block;
  }

  .benefit-card-expansion {
    @apply relative overflow-hidden bg-[#F4F8FF] flex flex-col justify-center;
  }

  .benefit-card-expansion .benefit-card-content {
    @apply p-8 lg:p-16 z-10 w-full md:w-[60%];
  }

  .benefit-card-expansion .benefit-card-title {
    @apply mb-4 font-brand text-brand-blue font-semibold;
  }

  .benefit-card-expansion .benefit-card-text {
    @apply text-[#5F5F5F]  max-w-sm leading-relaxed;
  }

  .benefit-card-expansion .benefit-card-image {
    @apply absolute bottom-0 right-0 w-[70%] md:w-[50%] lg:w-[48%] pointer-events-none z-0;
    @apply transform translate-x-[3%] translate-y-[3%];
  }

  .expansion-graphic {
    @apply w-full h-auto object-contain block;
  }

  .benefit-card-monetize {
    @apply relative overflow-hidden flex flex-col justify-end text-white;
    background-image: url('../img/become-monatize.png');
    background-size: cover;
    background-position: center;
  }

  .benefit-card-monetize .benefit-card-content {
    @apply p-8 lg:p-16 relative z-10;
  }

  .mini-globe-canvas,
  .globe-canvas {
    @apply block w-full h-full;
  }

  .benefit-card-globe-wrap {
    @apply absolute -bottom-[50%] left-[50%] -translate-x-1/2 w-[340px] h-[340px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] pointer-events-none z-0;
  }

  .hero-money-icon-svg {
    @apply h-[0.8em] w-auto inline-block align-middle;
  }

  .collage-img {
    @apply w-full h-full object-cover block;
  }

  .badge-svg {
    @apply h-[0.22em] w-auto inline-block align-middle;
  }

  .stats-card-bg-1 {
    background-image: url('../img/about-card1.png');
  }

  .stats-card-bg-2 {
    background-image: url('../img/about-card2.png');
  }

  .stats-card-bg-3 {
    background-image: url('../img/about-card3.png');
  }

  .benefit-card-shorter {
    @apply h-[280px] md:h-[330px] lg:h-[380px];
  }

  .benefit-card-content {
    @apply p-8 lg:p-16 relative z-10;
  }

  .benefit-card-title {
    @apply text-2xl lg:text-3xl  mb-3 font-brand;
  }

  .benefit-card-text {
    @apply text-base lg:text-lg  font-brand;
  }

  .benefit-img {
    @apply absolute inset-0 w-full h-full object-cover;
  }

  /* Mini Code Window Styling */
  .mini-code-window {
    @apply w-[90%] md:w-[85%] lg:w-[80%] bg-[#0B1120] rounded-xl shadow-2xl overflow-hidden border border-white/10 transform rotate-[-2deg] transition-transform hover:rotate-0 duration-500;
  }

  .mini-code-window .code-window-header {
    @apply bg-white/5 px-4 py-3 flex items-center border-b border-white/10;
  }

  .mini-code-window .code-window-dot {
    @apply w-2.5 h-2.5 rounded-full mr-2;
  }

  .mini-code-window .code-window-dot:nth-child(1) {
    @apply bg-[#FF5F56];
  }
  .mini-code-window .code-window-dot:nth-child(2) {
    @apply bg-[#FFBD2E];
  }
  .mini-code-window .code-window-dot:nth-child(3) {
    @apply bg-[#27C93F];
  }

  .mini-code-window .code-window-body {
    @apply p-5 font-mono text-sm leading-relaxed;
  }

  .code-line {
    @apply whitespace-nowrap overflow-hidden;
  }

  .code-keyword {
    @apply text-[#C678DD];
  }
  .code-func {
    @apply text-[#61AFEF];
  }
  .code-string {
    @apply text-[#98C379];
  }
  .code-comment {
    @apply text-[#5C6370] italic;
  }

  /* Mini Globe Wrapper */
  .mini-globe-wrap {
    @apply w-full h-full flex items-center justify-center;
  }

  @media (max-width: 768px) {
    .benefit-card {
      @apply h-[380px];
    }
  }

  /* Testimonials Section */
  .testimonial-section {
    @apply relative w-full py-16 lg:py-20 overflow-hidden px-4 sm:px-8 lg:px-12 xl:px-16 bg-white;
  }

  .testimonial-heading {
    @apply text-left mb-4 text-2xl md:text-3xl lg:text-[42px] xl:text-[56px] leading-tight md:leading-tight lg:leading-tight xl:leading-16;
  }

  .testimonial-heading-container {
    @apply mx-auto max-w-7xl;
  }

  .testimonial-viewport {
    @apply relative -mx-4 sm:-mx-8 lg:-mx-12 xl:-mx-16 overflow-hidden;
  }

  .testimonial-cards-grid {
    @apply flex items-stretch gap-4 md:gap-6 mt-8 mb-12 px-4 sm:px-8 lg:px-12 xl:px-16;
    width: max-content;
    will-change: transform;
  }

  .testimonial-card {
    @apply rounded-2xl px-5 py-6 md:px-6 md:py-7 flex flex-col transition-transform duration-700 ease-out h-auto min-h-[420px] md:min-h-[440px] w-[300px] sm:w-[320px] md:w-[340px] lg:w-[360px] shrink-0 relative overflow-hidden;
    background: linear-gradient(44deg, #f4f8ff 17.58%, #f9fafc 96.71%);
    transform-origin: left top;
    will-change: transform, opacity;
  }

  /* Initial Stacking for GSAP */
  .testimonial-card[data-testimonial-index='0'] {
    z-index: 4;
  }
  .testimonial-card[data-testimonial-index='1'] {
    z-index: 3;
  }
  .testimonial-card[data-testimonial-index='2'] {
    z-index: 2;
  }
  .testimonial-card[data-testimonial-index='3'] {
    z-index: 1;
  }

  .testimonial-card-body {
    @apply flex-1 flex flex-col gap-5;
  }

  .testimonial-text {
    @apply text-[#5F5F5F] text-[12px] md:text-[16px]  font-normal leading-normal font-brand;
  }

  .testimonial-card-footer {
    @apply mt-auto pt-6;
  }

  .testimonial-avatar {
    @apply w-14 h-14 rounded-full overflow-hidden bg-[#E5E7EB] shrink-0;
  }

  .avatar-img {
    @apply w-full h-full object-cover;
  }

  .testimonial-info {
    @apply flex flex-col;
  }

  .testimonial-name {
    @apply text-[#2A2A2A] font-medium text-xl md:text-2xl leading-none font-brand;
  }

  .testimonial-role {
    @apply text-[#5F5F5F] text-[12px] md:text-[14px] font-normal leading-normal font-brand mt-3;
  }

  .testimonial-company {
    @apply text-[#5F5F5F] text-[12px] md:text-[14px]  font-normal leading-normal font-brand mt-2;
  }

  #main-content.contact-page-main {
    background: linear-gradient(180deg, #fffafe 0%, #eff7fd 100%);
  }

  .contact-page-main {
    @apply pt-24 md:pt-28 min-h-screen w-full;
  }

  .contact-page-section {
    @apply px-4 sm:px-8 lg:px-12 xl:px-16 py-10 lg:py-0 min-h-[calc(100vh-7rem)] w-full;
  }

  .contact-page-content-container {
    @apply mx-auto max-w-7xl;
  }

  .contact-page-grid {
    @apply grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-start;
  }

  .contact-page-form-wrap {
    @apply lg:col-span-7;
  }

  .contact-page-title {
    @apply text-brand-dark text-4xl md:text-5xl font-normal leading-tight mb-20 font-brand;
  }

  .contact-page-form {
    @apply w-full;
  }

  .contact-page-input-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-6;
  }

  .contact-page-field {
    @apply flex min-w-0 flex-col gap-1.5;
  }

  .contact-page-field--message {
    @apply sm:col-span-2;
  }

  .contact-page-field--hp {
    @apply absolute overflow-hidden;
    height: 1px;
    left: -9999px;
    margin: 0;
    padding: 0;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .contact-page-field--turnstile {
    @apply mt-10;
  }

  .contact-page-turnstile {
    @apply min-h-[65px];
  }

  .contact-page-field--privacy {
    @apply mt-8;
  }

  .contact-page-field--privacy .contact-page-checkbox {
    @apply mt-0;
  }

  .contact-page-field--privacy .contact-page-field-error {
    @apply pl-7;
  }

  .contact-page-field-error {
    @apply m-0 min-h-[1.125rem] font-brand text-xs leading-snug text-[#DC2626];
  }

  .contact-page-field-error:empty {
    @apply min-h-0;
  }

  .contact-page-input-wrap.is-invalid {
    @apply border-[#DC2626];
  }

  .contact-page-input-wrap.is-invalid input,
  .contact-page-input-wrap.is-invalid textarea {
    @apply text-[#1E1E1E];
  }

  .contact-page-form-status {
    @apply mb-6 rounded-[10px] border px-4 py-3 font-brand text-sm leading-relaxed;
  }

  .contact-page-form-status--success {
    @apply border-[#BBF7D0] bg-[#F0FDF4] text-[#15803D];
  }

  .contact-page-form-status--error {
    @apply border-[#FECACA] bg-[#FFF7F7] text-[#B91C1C];
  }

  .contact-page-submit.is-loading {
    @apply pointer-events-none opacity-80;
  }

  .contact-page-input-wrap {
    @apply flex items-center gap-3 bg-white border border-[#DFE3EB] rounded-[10px] px-4 h-12 text-[#767676];
  }

  .contact-page-input-wrap i {
    @apply text-[#3D3D3D] text-[18px];
  }

  .contact-page-input-wrap input {
    @apply w-full bg-transparent border-none outline-none text-[#373737] font-normal font-brand;
  }
  .contact-page-input-wrap textarea {
    @apply w-full bg-transparent border-none outline-none text-[#373737] font-normal font-brand;
  }

  .contact-page-input-wrap-message {
    @apply items-start h-auto py-3;
  }

  .contact-page-input-wrap-message textarea {
    @apply min-h-20 resize-none pt-1;
  }

  .contact-page-checkbox {
    @apply flex items-center gap-3 text-[16px] text-[#3D3D3D] font-normal font-brand;
  }

  .contact-page-checkbox input {
    @apply accent-brand-blue w-4 h-4;
  }

  .contact-page-submit {
    @apply mt-6 mb-8 md:mb-12 flex items-center gap-3 rounded-full bg-brand-blue text-white pl-4 pr-1.5 py-1.5 text-sm font-normal font-brand;
  }

  .contact-page-submit-icon {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-yellow;
  }

  .contact-page-visual {
    @apply lg:col-span-5;
  }

  .contact-page-note {
    @apply text-[#5F5F5F] text-base leading-relaxed font-brand max-w-xs ml-auto mr-0;
  }

  .contact-page-globe-wrap {
    @apply mt-6 w-full max-w-md h-[300px] sm:h-[340px] md:h-[380px] mx-auto lg:mx-0 lg:ml-auto;
  }

  @media (max-width: 1023px) {
    .contact-page-note {
      @apply max-w-none mr-auto;
    }
  }

  @media (min-width: 1024px) {
    .contact-page-section {
      @apply flex items-center;
    }

    .contact-page-content-container {
      @apply w-full;
    }

    .contact-page-grid {
      @apply items-start;
    }
  }

  /* Resources page */
  .inner-hero-badge--resources {
    text-transform: none;
    letter-spacing: 0.02em;
    @apply text-lg font-medium text-brand-blue md:text-xl;
  }

  .resources-tabs-section {
    @apply relative py-10 px-4 sm:px-8;
    background: linear-gradient(180deg, #f3f6ff 0%, #ffffff 40%);
  }

  .resources-tabs-inner {
    @apply relative mx-auto flex max-w-7xl justify-center py-2;
  }

  .resources-tabs {
    @apply relative flex flex-wrap items-center justify-center gap-3;
  }

  .resources-tab-btn {
    @apply cursor-pointer rounded-full border border-slate-200 bg-white px-8 py-2.5 font-brand text-base font-medium text-slate-500 transition-colors;
  }

  .resources-tab-btn:hover {
    @apply border-slate-300 text-brand-blue;
  }

  .resources-tab-btn.active {
    @apply border-brand-blue bg-brand-blue text-white;
  }

  .resources-grid-section {
    @apply bg-white px-4 pb-20 sm:px-8 lg:px-12;
  }

  .resources-grid-container {
    @apply mx-auto max-w-7xl;
  }

  .resources-grid-panel.hidden {
    display: none;
  }

  .resources-card-grid {
    @apply grid grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-10;
  }

  /* WP paginate_links() puts class "page-numbers" on the <ul> — only style links/spans inside <li> */
  .resources-pagination {
    @apply mt-12 flex w-full justify-center pt-2;
  }

  .resources-pagination > ul.page-numbers {
    @apply m-0 flex list-none flex-wrap items-center justify-center gap-2 p-0;
    border: none;
    background: transparent;
    min-height: 0;
    min-width: 0;
  }

  .resources-pagination li {
    @apply m-0 flex list-none p-0;
  }

  .resources-pagination a.page-numbers,
  .resources-pagination span.page-numbers {
    @apply inline-flex min-h-10 min-w-10 items-center justify-center rounded border border-slate-200 bg-white px-3 font-brand text-sm font-bold leading-none text-[#151515] no-underline transition-colors;
    box-sizing: border-box;
  }

  .resources-pagination a.page-numbers:hover {
    @apply border-slate-300 bg-gray-50 text-brand-blue;
  }

  .resources-pagination span.page-numbers.current {
    @apply border-2 border-brand-blue bg-[#e8f4fc] text-brand-blue;
  }

  .resources-pagination span.page-numbers.dots,
  .resources-pagination a.page-numbers.dots {
    @apply min-w-0 border-0 bg-transparent px-1 font-bold text-[#151515];
  }

  .resources-pagination a.prev.page-numbers,
  .resources-pagination a.next.page-numbers {
    @apply min-w-0 px-4;
  }

  a.resources-tab-btn {
    @apply no-underline;
  }

  .resource-card {
    @apply h-full;
  }

  .resource-card-link {
    @apply flex h-full flex-col overflow-hidden rounded-3xl bg-white no-underline shadow-md transition-transform sm:rounded-[32px];
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  }

  .resource-card-link:hover {
    @apply -translate-y-1;
    box-shadow: 0 12px 40px rgba(0, 91, 170, 0.12);
  }

  .resource-card-media {
    @apply relative overflow-hidden bg-slate-100 aspect-[16/9] sm:aspect-[2/1] lg:aspect-[21/9];
  }

  .resource-card-img {
    @apply h-full w-full object-cover;
  }

  .resource-card-body {
    @apply relative flex-1 p-6 pb-10;
  }

  .resource-card-title {
    @apply mb-3 font-brand text-xl font-semibold leading-tight text-[#010102] sm:text-[1.35rem];
  }

  .resource-card-excerpt {
    @apply font-brand text-sm leading-relaxed text-slate-500 sm:text-base;
  }

  .resource-card-arrow {
    @apply absolute bottom-5 right-5 flex items-center justify-center;
  }

  .resource-detail-section {
    @apply pb-12 pt-28 sm:pt-32 lg:pt-36;
  }

  .resource-detail-container {
    @apply mx-auto max-w-7xl px-4 sm:px-8 lg:px-0;
  }

  .resource-detail-card {
    @apply mx-auto w-full rounded-3xl bg-[#F8FAFD] p-6 md:p-10;
  }

  .resource-detail-title {
    @apply font-brand text-3xl md:text-5xl leading-tight text-[#151515] mb-4;
  }

  .resource-detail-meta {
    @apply flex items-center gap-2 text-[#666] text-sm md:text-base mb-6;
  }

  .resource-detail-image-wrap {
    @apply overflow-hidden rounded-2xl md:rounded-3xl mb-8;
  }

  .resource-detail-image {
    @apply block w-full h-auto object-cover aspect-[16/7] md:aspect-[16/6];
  }

  /* Intro excerpt only — block editor body uses .resource-detail-body below */
  .resource-detail-intro {
    @apply mb-6 text-[#5F5F5F] font-brand font-normal;
    font-size: 16px;
    line-height: 24px;
  }

  @media (min-width: 768px) {
    .resource-detail-intro {
      font-size: 18px;
      line-height: 26px;
    }
  }

  /* WordPress block editor output (Tailwind preflight resets headings/lists otherwise) */
  .resource-detail-body.entry-content {
    @apply font-brand text-[#5F5F5F];
    font-size: 16px;
    line-height: 1.6;
  }

  @media (min-width: 768px) {
    .resource-detail-body.entry-content {
      font-size: 18px;
      line-height: 1.55;
    }
  }

  .resource-detail-body.entry-content > * + * {
    margin-top: 1.25em;
  }

  .resource-detail-body.entry-content :is(h1, h2, h3, h4, h5, h6) {
    color: #151515;
    font-family: var(--font-brand);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  .resource-detail-body.entry-content h2 {
    font-size: 1.75rem;
  }

  .resource-detail-body.entry-content h3 {
    font-size: 1.375rem;
  }

  .resource-detail-body.entry-content h4 {
    font-size: 1.125rem;
  }

  .resource-detail-body.entry-content :is(ul, ol) {
    list-style: revert;
    margin: 1em 0;
    padding-left: 1.5em;
  }

  .resource-detail-body.entry-content li + li {
    margin-top: 0.35em;
  }

  .resource-detail-body.entry-content a {
    color: #005baa;
    text-decoration: underline;
  }

  .resource-detail-body.entry-content a:hover {
    color: #004080;
  }

  .resource-detail-body.entry-content blockquote,
  .resource-detail-body.entry-content .wp-block-quote {
    border-left: 4px solid #005baa;
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.25em;
    color: #151515;
    font-style: italic;
  }

  .resource-detail-body.entry-content .wp-block-image img,
  .resource-detail-body.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
  }

  .resource-detail-body.entry-content .alignwide {
    max-width: min(100%, 72rem);
  }

  .resource-detail-body.entry-content .alignfull {
    max-width: none;
    width: 100%;
  }

  .resource-detail-body.entry-content .wp-block-button__link {
    @apply inline-flex items-center justify-center rounded-full bg-brand-blue px-6 py-3 font-brand text-base font-medium text-white no-underline;
  }

  .resource-detail-body.entry-content .wp-block-separator {
    border-color: #e2e8f0;
    margin: 2em 0;
  }

  .resource-detail-back {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
  }

  @media (min-width: 768px) {
    .resource-detail-back {
      margin-top: 3.5rem;
      padding-top: 2.5rem;
    }
  }

  .resource-detail-card .resource-detail-back-link {
    color: #005baa;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
  }

  .resource-detail-card .resource-detail-back-link:hover {
    color: #005baa;
    text-decoration: underline;
  }

  /* Location / Our Presence — shell/inner mirror .main-header + .header-container; title left-aligned to content edge */
  .presence-section {
    @apply w-full pb-16 pt-28 sm:pt-24 lg:pt-28 xl:pt-32;
  }

  .presence-shell {
    @apply w-full px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  .presence-inner {
    @apply mx-auto w-full max-w-7xl;
  }

  .presence-layout {
    @apply flex flex-col items-stretch gap-6 lg:flex-row lg:items-center lg:gap-6 xl:gap-10;
  }

  .presence-heading-wrap {
    @apply flex w-full shrink-0 flex-col items-center justify-center text-center sm:items-start sm:text-left lg:w-[30%] lg:basis-[30%] lg:items-start lg:justify-start lg:text-left xl:w-[28%] xl:basis-[28%];
  }

  .presence-title {
    @apply text-center font-brand text-3xl font-normal leading-tight text-[#151515] sm:text-left md:text-4xl lg:text-5xl;
  }

  .presence-title-part {
    @apply text-[#151515];
  }

  .presence-title-accent {
    @apply text-brand-blue;
  }

  .presence-map-wrap {
    @apply relative isolate w-full min-w-0 flex-1;
  }

  .presence-map-img {
    @apply mx-auto block h-auto w-full max-w-full lg:mx-0;
    max-height: clamp(240px, 58vw, 520px);
    object-fit: contain;
    object-position: center;
  }

  @media (min-width: 1024px) {
    .presence-map-img {
      max-height: clamp(340px, 54vh, 640px);
    }
  }

  @media (min-width: 1280px) {
    .presence-map-img {
      max-height: min(680px, 58vh);
    }
  }

  .presence-badges {
    @apply pointer-events-none absolute inset-0;
  }

  .presence-badge {
    pointer-events: auto;
    @apply absolute z-10 min-w-[92px] -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-xl border border-slate-200/90 bg-white px-2.5 py-2 text-left font-brand shadow-md transition-[box-shadow,transform] duration-200 md:min-w-[118px] md:px-3.5 md:py-2.5;
  }

  .presence-badge:hover {
    @apply shadow-lg;
  }

  .presence-badge:focus-visible {
    @apply outline-2 outline-offset-2 outline-brand-blue;
  }

  .presence-badge-name {
    @apply block text-xs font-semibold text-brand-blue md:text-sm;
  }

  .presence-badge-count {
    @apply mt-0.5 block text-[11px] font-normal text-[#5F5F5F] md:text-xs;
    line-height: 1.35;
  }

  .presence-badge.is-active {
    @apply border-brand-blue bg-brand-blue shadow-lg;
  }

  .presence-badge.is-active .presence-badge-name {
    @apply text-white;
  }

  .presence-badge.is-active .presence-badge-count {
    color: #d8f0a8;
  }

  .presence-badge--america {
    left: 16%;
    top: 36%;
  }

  .presence-badge--europe {
    left: 49%;
    top: 26%;
  }

  .presence-badge--africa {
    left: 52%;
    top: 50%;
  }

  .presence-badge--asia {
    left: 72%;
    top: 40%;
  }

  .presence-badge--australia {
    left: 78%;
    top: 66%;
  }

  @media (max-width: 767px) {
    .presence-badge--america {
      left: 20%;
      top: 34%;
    }

    .presence-badge--europe {
      left: 46%;
      top: 22%;
    }

    .presence-badge--africa {
      left: 48%;
      top: 46%;
    }

    .presence-badge--asia {
      left: 68%;
      top: 36%;
    }

    .presence-badge--australia {
      left: 74%;
      top: 62%;
    }
  }

  /*
   * Location page: network-card__panel is position:absolute and paints past the grid row.
   * On lg+, #footer uses z-[-1] so panels sit above the footer. Below lg, #footer is z-10
   * (same as #main-content) and stacks later in the DOM, so it covered the panel.
   */
  @media (max-width: 1023px) {
    #main-content.presence-page-main {
      position: relative;
      z-index: 11;
      overflow-x: visible;
      overflow-y: visible;
    }
  }

  @media (min-width: 1024px) {
    #main-content.presence-page-main {
      overflow-x: visible;
      overflow-y: visible;
    }
  }

  /* Agent Locations — hero only in stack; Our Network + partners one flow section (no absolute) */
  .agent-locations-hero-stack {
    @apply relative isolate;
  }

  .agent-locations-hero {
    @apply pb-10 sm:pb-12 lg:pb-32;
  }

  .agent-locations-hero .presence-heading-wrap {
    @apply w-full shrink-0 lg:min-w-[17.5rem] xl:min-w-[19rem];
  }

  .agent-locations-map-block {
    @apply relative isolate w-full min-w-0 flex-1;
  }

  @media (max-width: 1023px) {
    .agent-locations-hero .presence-layout {
      gap: 0.875rem;
    }

    .agent-locations-map-block {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .agent-locations-flat-map-wrap {
      aspect-ratio: 360 / 148;
      max-height: clamp(160px, 38vw, 420px);
    }

    .agent-locations-flat-map-wrap .flat-map-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .agent-locations-flat-map-wrap .agent-locations-flat-map-img {
      min-height: 0;
    }

    .agent-locations-map-block .flat-map-legend {
      position: static;
      transform: none;
      padding: 0.25rem 0 0.375rem;
      align-items: flex-start;
    }
  }

  .agent-locations-flat-map-wrap {
    @apply relative isolate w-full;
    aspect-ratio: 360 / 148;
    max-height: clamp(240px, 58vw, 520px);
  }

  .flat-map-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .agent-locations-flat-map-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(200px, 42vw, 480px);
    object-fit: contain;
    object-position: center;
  }

  @media (min-width: 1024px) {
    .agent-locations-flat-map-wrap .flat-map-stage {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .agent-locations-map-block .flat-map-legend {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 20;
      padding: 0.75rem 0.85rem 0.75rem 0;
      transform: translateX(-0.35rem);
    }
  }

  .flat-map-legend {
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    pointer-events: none;
  }

  .flat-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .flat-map-legend-swatch {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: currentColor;
  }

  .flat-map-legend-label {
    font-family: var(--font-brand, inherit);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: currentColor;
  }

  .flat-map-legend-item--send {
    color: #005baa;
  }

  .flat-map-legend-item--receive {
    color: #c9b800;
  }

  .flat-map-legend-item--receive .flat-map-legend-swatch {
    background: #fff200;
  }

  .flat-map-legend-item--both {
    color: #8a8f96;
  }

  .flat-map-legend-item--both .flat-map-legend-swatch {
    background: rgb(196, 196, 196);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    .flat-map-legend-swatch {
      width: 0.6875rem;
      height: 0.6875rem;
    }

    .flat-map-legend-label {
      font-size: 0.875rem;
    }
  }

  @media (min-width: 1024px) {
    .agent-locations-flat-map-wrap {
      max-height: clamp(340px, 54vh, 640px);
    }
  }

  @media (min-width: 1280px) {
    .agent-locations-map-block .flat-map-legend {
      padding: 1rem 1rem 1rem 0;
      transform: translateX(-0.5rem);
      gap: 0.5rem;
    }
  }

  @media (min-width: 1280px) {
    .agent-locations-flat-map-wrap {
      max-height: min(680px, 58vh);
    }
  }

  /* Hero + Our Network: one row, same split title as Our Presence page */
  .agent-locations-page-title {
    @apply text-nowrap text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
  }

  .agent-locations-page-title .presence-title-part,
  .agent-locations-page-title .presence-title-accent {
    @apply inline;
  }

  .agent-locations-network-partners-section {
    @apply relative z-10 w-full border-t border-gray-100/80 bg-[#F8FAFD] pb-12 pt-0 sm:pb-16 lg:pb-20;
  }

  .agent-locations-network-partners-inner {
    @apply flex flex-col gap-8 sm:gap-10 lg:gap-12;
  }

  /* Panel overlaps hero via negative margin; wrap height follows panel (no min-height gap) */
  .agent-locations-search-panel-wrap {
    @apply relative z-20 w-full;
  }

  .agent-locations-search-panel {
    @apply relative mt-6 w-full rounded-[10px] border border-[#EBEBEB] px-5 py-8 shadow-sm sm:-mt-10 sm:px-8 sm:py-10 lg:-mt-12 lg:px-10 lg:py-12;
    background: linear-gradient(90deg, rgba(233, 240, 255, 0.5) 0%, rgba(219, 234, 255, 0.38) 100%);
  }

  .agent-locations-search-panel.is-loading .agent-locations-search-fields,
  .agent-locations-search-panel.is-loading .agent-locations-search-actions {
    @apply pointer-events-none opacity-60;
  }

  .agent-locations-api-loader {
    @apply absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-[10px] bg-white/75 backdrop-blur-[2px];
  }

  .agent-locations-api-loader[hidden] {
    display: none !important;
  }

  .agent-locations-api-loader-spinner {
    @apply block h-10 w-10 rounded-full border-[3px] border-[#E8EDF5] border-t-[#005BAA];
    animation: agent-locations-spin 0.75s linear infinite;
  }

  .agent-locations-api-loader-text {
    @apply font-brand text-sm font-medium text-[#005BAA];
  }

  @keyframes agent-locations-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .agent-locations-select:disabled {
    @apply cursor-wait opacity-70;
  }

  .agent-locations-search-title.agent-locations-page-title {
    @apply mb-8 text-left text-2xl md:text-3xl lg:text-4xl;
  }

  .agent-locations-search-fields {
    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6;
  }

  .agent-locations-field {
    @apply flex flex-col gap-2;
  }

  .agent-locations-field-label {
    @apply font-brand text-xs font-semibold uppercase tracking-wide text-[#6b7280];
  }

  .agent-locations-select {
    @apply w-full cursor-pointer appearance-none rounded-[5px] border border-[#EAEAEA] bg-white px-4 py-3.5 pr-10 font-brand text-sm font-medium text-brand-dark shadow-sm transition-colors focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20 sm:text-base;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem;
  }

  .agent-locations-input {
    @apply w-full rounded-[5px] border border-[#EAEAEA] bg-white px-4 py-3.5 font-brand text-sm font-medium text-brand-dark shadow-sm transition-colors placeholder:text-[#9ca3af] focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20 sm:text-base;
  }

  .agent-locations-search-actions.track-btn-container {
    @apply mt-8 flex justify-end sm:mt-10;
  }

  .agent-locations-search-btn .btn-track-icon-inner i {
    @apply text-sm text-brand-blue sm:text-base;
  }

  .agent-locations-partners-block {
    @apply flex flex-col items-stretch;
  }

  .agent-locations-partners-title {
    @apply mb-8 font-normal md:mb-10;
  }

  .agent-locations-partners-list {
    @apply m-0 flex list-none flex-wrap items-stretch justify-center gap-5 p-0 sm:gap-6 lg:gap-8;
  }

  .agent-locations-partner-item {
    @apply list-none;
  }

  .agent-locations-partner-card {
    @apply flex h-[5.5rem] w-[10.25rem] flex-none items-center justify-center rounded-2xl border border-gray-200/80 bg-white px-4 text-center shadow-sm sm:h-[5.75rem] sm:w-[11rem] sm:px-5 md:h-24 md:w-[12.5rem] lg:h-28 lg:w-[14.5rem] lg:px-6 xl:h-32 xl:w-64;
  }

  .agent-locations-partner-logo {
    @apply mx-auto block h-9 w-[8.5rem] shrink-0 object-contain object-center sm:h-10 sm:w-36 md:h-11 md:w-40 lg:h-12 lg:w-48 xl:h-14 xl:w-56;
  }

  .agent-locations-overview-section.is-hidden,
  .agent-locations-find-section.is-hidden,
  .agent-locations-partners-block.is-hidden,
  [data-agent-locations-overview][hidden],
  [data-agent-locations-find][hidden],
  [data-agent-locations-partners][hidden] {
    display: none !important;
  }

  .agent-locations-overview-section {
    @apply w-full bg-[#F8FAFD] pb-14 pt-0 sm:pb-20;
  }

  .agent-locations-overview-card {
    @apply rounded-[10px] border border-gray-200/80 bg-white px-6 py-8 shadow-sm sm:px-10 sm:py-10;
  }

  .agent-locations-overview-title {
    @apply mb-6 border-b border-gray-200 pb-4 font-brand text-xl font-semibold text-brand-blue sm:mb-8 sm:pb-5 sm:text-2xl;
  }

  .agent-locations-overview-dl {
    @apply m-0 space-y-0;
  }

  .agent-locations-overview-row {
    @apply grid grid-cols-1 gap-1 py-4 font-brand lg:flex lg:flex-row lg:items-start lg:justify-between lg:gap-8 lg:py-5;
  }

  .agent-locations-overview-row dt {
    @apply m-0 text-sm font-semibold text-[#5F5F5F] sm:text-base lg:shrink-0 lg:font-medium;
  }

  .agent-locations-overview-row dd {
    @apply m-0 text-base leading-relaxed text-brand-dark sm:text-lg lg:max-w-[min(58%,28rem)] lg:flex-1 lg:text-right;
  }

  .agent-locations-overview-row--delivery dd {
    @apply m-0 text-sm font-medium leading-[25px] text-[#111] lg:text-right;
  }

  .agent-locations-overview-highlight {
    @apply font-bold text-brand-blue text-lg lg:text-2xl;
  }

  .agent-locations-overview-card .agent-locations-overview-status {
    @apply inline-block rounded-md bg-emerald-50 px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide text-emerald-700 sm:text-sm lg:bg-transparent lg:px-0 lg:py-0 lg:text-base lg:font-semibold lg:normal-case lg:tracking-normal lg:text-emerald-600;
  }

  .agent-locations-overview-status {
    @apply inline-block rounded-md bg-emerald-50 px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide text-emerald-700 sm:text-sm;
  }

  .agent-locations-find-section {
    @apply w-full bg-[#F8FAFD] pb-20 pt-2 sm:pb-28;
  }

  .agent-locations-find-title {
    @apply mb-8 text-left font-brand text-2xl font-semibold text-brand-blue md:mb-10 md:text-3xl;
  }

  .agent-locations-find-grid {
    @apply grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8;
  }

  .agent-locations-find-grid > .agent-location-card {
    @apply h-full;
  }

  .agent-location-card {
    @apply flex min-h-[20rem] flex-col overflow-hidden rounded-lg border border-gray-200/70 bg-white shadow-sm sm:min-h-[21.5rem] lg:min-h-[22rem];
  }

  .agent-location-card-head {
    @apply shrink-0 bg-brand-blue px-5 py-4 text-center font-brand text-base font-bold uppercase leading-snug tracking-wide text-white sm:px-6 sm:py-5 sm:text-lg;
  }

  .agent-location-card-body {
    @apply m-0 flex flex-1 flex-col justify-start px-4 py-3 sm:px-5 sm:py-4;
  }

  .agent-location-card-row {
    @apply flex flex-row items-start justify-between gap-3 py-3.5 sm:gap-4 sm:py-4;
  }

  .agent-location-card-row dt {
    @apply m-0 shrink-0 font-brand text-sm font-medium text-[#5F5F5F] sm:text-base;
  }

  .agent-location-card-row dd {
    @apply m-0 max-w-[58%] text-right font-brand text-base font-normal leading-[25px] text-[#111];
  }

  .agent-location-card-row--address dd {
    @apply max-w-[62%] sm:max-w-[58%];
  }

  .agent-location-card-body-fill {
    @apply min-h-[3.25rem] flex-1 sm:min-h-[3.5rem];
  }

  .agent-location-card-service {
    @apply font-semibold text-emerald-600;
  }

  .agent-location-card-foot {
    @apply mt-auto h-1 shrink-0 bg-brand-blue;
  }

  .agent-locations-find-empty {
    @apply col-span-full py-10 text-center;
  }

  .agent-locations-pagination {
    @apply mt-12 flex flex-wrap items-center justify-center gap-2;
  }

  .agent-locations-pagination.is-hidden {
    @apply hidden;
  }

  .agent-locations-page-btn,
  .agent-locations-page-num {
    @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded border border-gray-200 bg-white font-brand text-sm font-bold leading-none text-[#151515] transition-colors;
  }

  .agent-locations-page-btn {
    @apply text-base;
  }

  .agent-locations-page-btn:disabled {
    @apply cursor-not-allowed border-gray-200 bg-white text-gray-300;
  }

  .agent-locations-page-btn:not(:disabled):hover {
    @apply border-gray-300 bg-gray-50;
  }

  .agent-locations-page-num:not(.is-current):hover {
    @apply border-gray-300 bg-gray-50;
  }

  .agent-locations-page-num.is-current {
    @apply border-2 border-brand-blue bg-[#e8f4fc] text-brand-blue;
  }

  .agent-locations-page-ellipsis {
    @apply min-w-0 border-0 bg-transparent px-1 font-brand text-sm font-bold text-[#151515];
  }

  /* Location — Explore our Network (country grid + services) */
  .network-explore-section {
    @apply w-full overflow-x-visible overflow-y-visible bg-[#F8FAFD] pb-12 pt-10 sm:pb-28 sm:pt-12;
  }

  .network-explore-section .presence-shell,
  .network-explore-section .presence-inner {
    @apply overflow-x-visible overflow-y-visible;
  }

  .network-explore-header {
    @apply mb-10 text-left sm:mb-12;
  }

  .network-explore-title {
    @apply font-brand text-3xl font-normal leading-tight text-[#151515] md:text-4xl lg:text-[2.5rem];
  }

  .network-explore-title-dark {
    @apply text-[#151515];
  }

  .network-explore-title-accent {
    @apply text-brand-blue;
  }

  .network-explore-kicker {
    @apply mt-2 font-brand text-sm font-medium text-[#5F5F5F] md:text-base;
  }

  .network-explore-grid {
    @apply grid gap-x-3 gap-y-8 md:gap-x-8 md:gap-y-10 lg:gap-x-10 lg:gap-y-12;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  @media (min-width: 768px) {
    .network-explore-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .network-explore-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .network-card {
    @apply relative z-0 min-w-0 overflow-visible;
  }

  .network-card:hover,
  .network-card:focus-within,
  .network-card.is-expanded {
    @apply z-30;
  }

  .network-card__row {
    @apply flex items-center gap-2 md:gap-3;
  }

  /* Flag frame sizing — see assets/css/our-network.css (loaded on Our Network page). */
  .network-card__flag-wrap {
    @apply inline-flex shrink-0 items-center justify-center rounded-md border border-slate-200/80 bg-white p-0.5 shadow-sm;
    width: 3rem;
    aspect-ratio: 3 / 2;
  }

  .network-card__flag-wrap--panel {
    width: 4.5rem;
  }

  @media (min-width: 40rem) {
    .network-card__flag-wrap {
      width: 3.375rem;
    }
  }

  @media (min-width: 48rem) {
    .network-card__flag-wrap {
      width: 3.75rem;
    }

    .network-card__flag-wrap--panel {
      width: 4.75rem;
    }
  }

  .network-card__flag {
    @apply block max-h-full max-w-full border-0 shadow-none;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .network-card__meta {
    @apply min-w-0 flex-1;
  }

  .network-card__name {
    @apply block font-brand text-sm font-bold leading-tight text-[#151515] md:text-base;
  }

  .network-card__toggle {
    @apply mt-0.5 block w-max cursor-pointer border-0 bg-transparent p-0 text-left font-brand text-xs font-normal text-[#5F5F5F] underline decoration-transparent underline-offset-2 transition-colors hover:text-brand-blue hover:decoration-brand-blue md:text-sm;
  }

  .network-card__toggle:focus-visible {
    @apply rounded outline-2 outline-offset-2 outline-brand-blue;
  }

  .network-card__panel {
    @apply absolute left-0 right-0 top-full z-20 mt-1.5 box-border w-full min-w-0 max-w-full rounded-xl border border-slate-200/80 bg-white p-3 shadow-[0_10px_40px_rgba(15,23,42,0.1)] sm:mt-2 sm:rounded-2xl sm:p-4 md:p-5;
    display: none;
    overflow: visible;
  }

  @media (min-width: 1024px) {
    .network-card__panel {
      min-width: min(17.5rem, 100%);
    }
  }

  .network-card.is-expanded .network-card__panel,
  .network-card.is-hover-open .network-card__panel {
    display: block;
  }

  .network-card__panel-head {
    @apply flex items-start gap-2 pb-3 sm:gap-3.5 sm:pb-4;
  }

  .network-card__panel-meta {
    @apply flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5;
  }

  .network-card__name--panel {
    @apply font-brand text-sm font-bold leading-tight text-[#151515] sm:text-base md:text-lg;
  }

  .network-card__panel-view {
    @apply font-brand text-xs font-normal text-[#5F5F5F] md:text-sm;
  }

  .network-service-list {
    @apply m-0 list-none space-y-2.5 p-0 pt-3 font-brand text-xs font-normal leading-snug text-[#5F5F5F] sm:space-y-3.5 sm:pt-4 sm:text-sm;
  }

  .network-service-list li {
    @apply flex min-w-0 items-start gap-2 sm:items-center sm:gap-3;
  }

  .network-service-list li > span:last-child {
    @apply min-w-0 wrap-break-word;
  }

  .network-service-icon {
    @apply mt-0.5 flex w-4 shrink-0 items-center justify-center text-[#8E8E8E] sm:mt-0 sm:w-5;
  }

  .network-service-icon i {
    @apply text-[13px] font-light sm:text-[15px];
  }

  /* Privacy Policy page */
  .visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
  }

  .legal-page,
  .pp-page {
    @apply font-brand;
  }

  /* Privacy / Terms — single white content panel (matches other inner pages) */
  .legal-content-section {
    @apply pb-16 pt-8 sm:pt-10 lg:pb-20 lg:pt-12;
  }

  .legal-content-inner {
    @apply mx-auto w-full max-w-7xl;
  }

  .legal-content-panel {
    @apply rounded-2xl border border-slate-200/80 bg-white p-6 shadow-md sm:p-8 lg:p-10 xl:p-12;
  }

  .legal-block {
    @apply mt-8 border-0 bg-transparent p-0 shadow-none first:mt-0;
  }

  .legal-block--intro {
    @apply mt-0;
  }

  .legal-block--intro .pp-intro-text {
    @apply m-0 text-left text-base leading-relaxed text-[#3d4550] sm:text-lg;
  }

  .legal-block--contact {
    @apply mt-10 rounded-xl border-0 bg-gradient-to-br from-[#005baa] to-[#003d7a] p-6 text-white shadow-lg sm:p-8;
  }

  .legal-block--contact .pp-section-heading,
  .legal-block--contact .pp-section-lead,
  .legal-block--contact .pp-footnote {
    @apply text-white;
  }

  .legal-block--contact .pp-section-lead {
    @apply text-white/90;
  }

  .legal-block--contact .btn-primary {
    @apply w-fit max-w-full shrink-0 border-0 shadow-lg;
  }

  .legal-block--contact .btn-primary .btn-text {
    @apply ml-0 mr-2 whitespace-nowrap md:mr-3;
  }

  .pp-hero {
    @apply relative isolate overflow-hidden text-white;
    min-height: clamp(24rem, 58vh, 38rem);
    padding-top: clamp(5.75rem, 14vw, 9rem);
    padding-bottom: clamp(4rem, 11vw, 7rem);
    background: linear-gradient(155deg, #001f3d 0%, #003566 28%, var(--color-brand-blue) 58%, #004d94 100%);
    @apply px-4 sm:px-8 lg:px-12 xl:px-16;
  }

  @media (min-width: 768px) {
    .pp-hero {
      min-height: clamp(26rem, 56vh, 40rem);
      padding-bottom: clamp(4.25rem, 9vw, 6.5rem);
    }
  }

  .pp-hero-glow {
    @apply absolute rounded-full opacity-45 blur-3xl pointer-events-none;
  }

  .pp-hero-glow--1 {
    @apply w-[min(88vw,480px)] h-[min(88vw,480px)] -top-24 -right-[12%];
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--color-brand-yellow) 45%, transparent) 0%,
      transparent 65%
    );
  }

  .pp-hero-glow--2 {
    @apply w-[min(75vw,420px)] h-[min(75vw,420px)] bottom-[-18%] left-[-12%];
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%);
  }

  .pp-hero-pattern {
    @apply absolute inset-0 opacity-[0.08] pointer-events-none;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='white'/%3E%3C/svg%3E");
    background-size: 42px 42px;
  }

  .pp-hero-inner {
    @apply relative z-[1] mx-auto flex w-full max-w-7xl flex-col items-start gap-10 md:flex-row md:items-center md:justify-between md:gap-12 lg:gap-16;
  }

  .pp-hero-copy {
    @apply max-w-7xl shrink-0 text-left;
  }

  .pp-hero-visual {
    @apply flex w-full justify-center md:w-auto md:flex-1 md:justify-end;
  }

  .pp-hero-guard-wrap {
    @apply relative flex w-full max-w-[min(92vw,17rem)] items-end justify-center sm:max-w-[18rem] md:max-w-[22rem] lg:max-w-[26rem];
  }

  .pp-hero-guard-img {
    @apply h-auto w-full object-contain object-bottom;
    max-height: min(42vw, 21rem);
    mix-blend-mode: soft-light;
    opacity: 0.94;
    filter: saturate(1.08) brightness(1.05) contrast(1.02);
  }

  @media (min-width: 768px) {
    .pp-hero-guard-img {
      max-height: min(38vh, 24rem);
    }
  }

  .pp-hero-title {
    @apply text-3xl font-normal leading-tight tracking-tight sm:text-4xl lg:text-5xl;
  }

  .pp-hero-title-accent {
    @apply text-brand-yellow;
  }

  .pp-content {
    @apply relative z-[1] -mt-6 px-4 pb-16 sm:px-8 lg:px-12 xl:px-16 lg:pb-24;
  }

  .pp-content-shell {
    @apply mx-auto w-full max-w-7xl;
  }

  .pp-content-inner {
    @apply mx-auto max-w-7xl;
  }

  .pp-intro {
    @apply rounded-2xl border border-slate-200/80 bg-white p-6 shadow-md sm:p-8;
  }

  .pp-intro-text {
    @apply m-0 text-left text-base leading-relaxed text-[#3d4550] sm:text-lg;
  }

  .legal-content-panel .pp-intro-text {
    @apply m-0;
  }

  .pp-inline-link {
    @apply font-semibold text-brand-blue underline decoration-brand-blue/35 underline-offset-[3px] transition-colors hover:decoration-brand-blue;
  }

  /* Legacy section cards (unused on legal pages; kept for reference markup) */
  .pp-section {
    @apply mt-8 rounded-2xl border border-slate-200/70 bg-white p-6 shadow-sm sm:mt-10 sm:p-8;
  }

  .pp-section--highlight {
    @apply border-brand-blue/20 bg-gradient-to-br from-[#f8fbff] to-white;
  }

  .pp-section--cta {
    @apply border-brand-blue/25 bg-gradient-to-br from-[#005baa] to-[#003d7a] text-white shadow-lg;
  }

  .pp-section--cta .pp-section-heading,
  .pp-section--cta .pp-section-lead,
  .pp-section--cta .pp-footnote {
    @apply text-white;
  }

  .pp-section--cta .pp-section-lead {
    @apply text-white/90;
  }

  .pp-section-heading {
    @apply m-0 text-xl font-semibold text-brand-dark sm:text-2xl;
  }

  .pp-section--cta .pp-section-heading {
    @apply text-white;
  }

  .pp-section-lead {
    @apply mt-4 text-left text-base leading-relaxed text-[#5f6470];
  }

  .pp-section-lead--tight {
    @apply mt-3;
  }

  .pp-section--cta .pp-section-lead {
    @apply text-white/90;
  }

  .pp-cards {
    @apply mt-6 grid gap-4 sm:grid-cols-2;
  }

  .pp-card {
    @apply rounded-xl border p-5 text-left sm:p-6;
  }

  .pp-card--blue {
    @apply border-brand-blue/20 bg-[#f0f6fd];
  }

  .pp-card--muted {
    @apply border-slate-200 bg-slate-50/80;
  }

  .pp-card-title {
    @apply m-0 text-base font-semibold text-brand-dark;
  }

  .pp-card-body {
    @apply mt-3 text-sm leading-relaxed text-[#5f6470] sm:text-base;
  }

  .pp-bullet-list {
    @apply mt-4 list-none space-y-3 p-0 text-left text-[#4a5058];
  }

  .pp-bullet-list li {
    @apply relative pl-6 text-sm leading-relaxed sm:text-base;
  }

  .pp-bullet-list li::before {
    content: '';
    @apply absolute left-0 top-[0.55em] h-1.5 w-1.5 rounded-full bg-brand-blue;
  }

  .pp-bullet-list--check li::before {
    content: '✓';
    @apply -top-0.5 h-auto w-auto rounded-none bg-transparent text-brand-blue font-bold text-sm sm:text-base;
  }

  .pp-strong {
    @apply font-semibold text-brand-dark;
  }

  .pp-note {
    @apply mt-4 rounded-xl bg-[#fafbfc] p-4 text-sm text-[#5f6470] border border-slate-100;
  }

  .pp-contact-inner {
    @apply text-left;
  }

  .pp-contact-dl {
    @apply mt-6 space-y-2 text-base text-white/95;
  }

  .pp-contact-dl a.pp-link {
    @apply text-[#fff200] underline decoration-[#fff200]/50 underline-offset-2 hover:decoration-[#fff200];
  }

  .pp-contact-actions {
    @apply mt-8;
  }

  .pp-section--cta .btn-primary {
    @apply w-fit max-w-full shrink-0 border-0 shadow-lg;
  }

  .pp-section--cta .btn-primary .btn-text {
    @apply ml-0 mr-2 whitespace-nowrap md:mr-3;
  }

  .pp-footnote {
    @apply mt-6 text-sm text-white/80;
  }

  /* Compliance & Fraud page */
  .cf-page {
    @apply font-brand;
  }

  .cf-section {
    @apply bg-white px-4 pt-10 pb-0 sm:px-8 md:pt-12 lg:px-12 lg:pt-14 xl:px-16;
  }

  .cf-section + .cf-section {
    @apply pt-8 md:pt-10 lg:pt-14 xl:pt-16;
  }

  .cf-section + .cf-section.cf-section--flush {
    @apply pt-6 pb-0 md:pt-8 lg:pt-10;
  }

  .cf-section--flush + .cf-section {
    @apply pt-8 md:pt-10 lg:pt-12 xl:pt-14;
  }

  .cf-section--flush {
    @apply bg-white;
  }

  .cf-section--last {
    @apply pb-12 md:pb-16 lg:pb-20;
  }

  .cf-section-head {
    @apply mb-6 text-left md:mb-8;
  }

  .cf-kicker {
    @apply mb-2 font-brand text-xs  text-text-darker font-semibold md:text-base;
  }

  .cf-heading {
    @apply font-normal leading-tight;
  }

  .cf-protect-grid {
    @apply m-0 grid list-none gap-5 p-0 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6;
  }

  .cf-protect-card {
    @apply flex h-full items-start gap-4 rounded-[10px] border border-[rgba(0,91,170,0.09)] bg-[#F8FAFD] p-6 md:gap-5 md:p-8;
  }

  .cf-protect-icon {
    @apply flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-base md:h-14 md:w-14 md:text-lg;
  }

  .cf-protect-icon--blue {
    @apply bg-[#E8F2FC] text-brand-blue;
  }

  .cf-protect-icon--green {
    @apply bg-[#E8F8EF] text-[#16A34A];
  }

  .cf-protect-icon--purple {
    @apply bg-[#F3E8FF] text-[#9333EA];
  }

  .cf-protect-card-body {
    @apply flex min-w-0 flex-1 flex-col gap-1.5 pt-0.5;
  }

  .cf-protect-card-title {
    @apply font-brand text-lg font-bold leading-snug text-[#1E1E1E] md:text-xl;
  }

  .cf-protect-card-text {
    @apply font-brand text-base leading-relaxed text-[#5F5F5F] md:text-lg;
  }

  .cf-fraud-banner {
    @apply relative overflow-hidden rounded-xl bg-[#091937] px-6 py-8 text-white md:rounded-xl md:px-10 md:py-10 lg:flex lg:items-center lg:justify-between lg:gap-6 xl:gap-10;
    background-size: cover;
    background-position: center;
  }

  .cf-fraud-banner::before {
    content: '';
    @apply absolute inset-0 bg-[#091937]/90;
  }

  .cf-fraud-banner-copy {
    @apply relative z-10 min-w-0 flex-1 lg:max-w-[58%] xl:max-w-[62%];
  }

  .cf-fraud-banner-title {
    @apply mb-3 font-brand text-2xl font-semibold leading-tight md:text-3xl;
  }

  .cf-fraud-banner-desc {
    @apply mb-6 text-base leading-relaxed text-white/80 md:text-lg;
  }

  .cf-fraud-banner-actions {
    @apply flex flex-col items-stretch gap-3 md:flex-row md:flex-nowrap md:gap-3;
  }

  .cf-fraud-banner-actions .cf-fraud-btn,
  .cf-fraud-banner-actions .cf-fraud-email-pill {
    @apply min-h-[44px] min-w-0 w-full md:w-auto md:flex-1 md:basis-0;
  }

  .cf-fraud-banner-actions .cf-fraud-btn--blue {
    @apply md:flex-[1.15_1_0%];
  }

  .cf-fraud-banner-actions .cf-fraud-email-pill {
    @apply md:flex-[1.25_1_0%];
  }

  .cf-fraud-btn {
    @apply inline-flex items-center justify-start gap-2 rounded-sm px-3 py-2.5 font-brand transition-opacity hover:opacity-90 sm:px-3.5 md:px-4;
  }

  .cf-fraud-btn-text {
    @apply flex min-w-0 flex-col items-start gap-0.5 text-left leading-tight;
  }

  .cf-fraud-btn-label {
    @apply text-[10px] font-medium leading-snug opacity-90 sm:text-xs;
  }

  .cf-fraud-btn-number {
    @apply text-xs font-semibold leading-snug whitespace-normal [overflow-wrap:anywhere] sm:text-sm;
  }

  .cf-fraud-btn--primary {
    @apply bg-brand-yellow text-brand-dark;
  }

  .cf-fraud-btn--primary i {
    @apply text-brand-dark;
  }

  .cf-fraud-btn--blue {
    @apply bg-brand-blue text-white;
  }

  .cf-fraud-btn--blue i {
    @apply text-white;
  }

  .cf-fraud-email-pill {
    @apply inline-flex items-center justify-center gap-2 rounded-sm bg-white px-2.5 py-2 font-brand text-[11px] font-medium leading-snug text-brand-dark sm:px-3 sm:text-xs md:px-3.5;
  }

  .cf-fraud-email-pill i {
    @apply shrink-0 text-brand-dark;
  }

  .cf-fraud-email-pill span {
    @apply min-w-0 whitespace-normal text-center [overflow-wrap:anywhere];
  }

  .cf-fraud-banner-visual {
    @apply relative z-10 mt-6 flex items-center justify-center lg:mt-0 lg:w-[38%] lg:shrink-0 xl:w-[36%];
  }

  .cf-fraud-banner-img {
    @apply h-auto w-full max-w-[280px] object-contain object-center sm:max-w-[320px] lg:max-w-[360px] xl:max-w-[420px];
  }

  .cf-safe-section {
    @apply overflow-visible;
  }

  .cf-safe-shell {
    @apply overflow-visible;
  }

  .cf-safe-panel {
    @apply relative mt-8 overflow-visible rounded-[10px] border border-[#E5E7EB] bg-[#F9FAFB] px-5 py-0 sm:mt-10 md:mt-12 md:px-8 lg:px-10;
  }

  .cf-safe-shield {
    @apply pointer-events-none absolute right-4 top-0 z-20 -translate-y-[38%] sm:right-6 md:right-8 lg:right-10;
  }

  .cf-safe-shield-svg {
    @apply block h-auto w-[72px] drop-shadow-none sm:w-[96px] md:w-[110px] lg:w-[119px];
  }

  .cf-safe-list {
    @apply relative z-10 m-0 max-w-full list-none space-y-0 p-0 pr-16 sm:max-w-[78%] sm:pr-0 md:max-w-[72%] lg:max-w-[68%];
  }

  .cf-safe-item {
    @apply flex items-center gap-4 border-b border-[#E5E7EB] py-5 last:border-b-0 md:gap-5 md:py-[22px];
  }

  .cf-safe-check {
    @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[#BBF7D0] bg-[#DCFCE7] text-[11px] text-[#16A34A] md:h-12 md:w-12 md:text-xs;
  }

  .cf-safe-item-text {
    @apply font-brand text-base font-medium leading-snug text-[#1F2937] md:text-lg;
  }

  .cf-fraud-types-grid {
    @apply m-0 grid list-none gap-5 p-0 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6;
  }

  .cf-fraud-type-card {
    @apply relative flex flex-col rounded-[10px] border border-[rgba(0,91,170,0.09)] bg-white p-6 md:p-8;
  }

  .cf-fraud-type-icon {
    @apply mb-4 flex h-10 w-10 lg:h-12 lg:w-12 shrink-0 items-center justify-center rounded-full text-base lg:text-lg;
  }

  .cf-fraud-type-card--red .cf-fraud-type-icon {
    @apply bg-[#FEE2E2] text-[#DC2626];
  }

  .cf-fraud-type-card--purple .cf-fraud-type-icon {
    @apply bg-[#F3E8FF] text-[#9333EA];
  }

  .cf-fraud-type-card--orange .cf-fraud-type-icon {
    @apply bg-[#FFEDD5] text-[#EA580C];
  }

  .cf-fraud-type-card--green .cf-fraud-type-icon {
    @apply bg-[#DCFCE7] text-[#16A34A];
  }

  .cf-fraud-type-badge {
    @apply mb-3 inline-block w-fit rounded-full px-3 py-1 font-brand text-xs font-semibold;
  }

  .cf-fraud-type-card--red .cf-fraud-type-badge {
    @apply bg-[#FEE2E2] text-[#ED1922];
  }

  .cf-fraud-type-card--purple .cf-fraud-type-badge {
    @apply bg-[#F3E8FF] text-[#5032C1];
  }

  .cf-fraud-type-card--orange .cf-fraud-type-badge {
    @apply bg-[#FFEDD5] text-[#F98D07];
  }

  .cf-fraud-type-card--green .cf-fraud-type-badge {
    @apply bg-[#DCFCE7] text-[#058062];
  }

  .cf-fraud-type-title {
    @apply mb-0 font-brand text-lg font-bold leading-snug text-[#111827] md:text-xl;
  }

  .cf-fraud-type-title::after {
    content: '';
    @apply mt-3 mb-3 block h-px w-10 bg-[#E5E7EB];
  }

  .cf-fraud-type-text {
    @apply mb-6 flex-1 font-brand text-base leading-relaxed text-[#6B7280] md:mb-8;
  }

  .cf-fraud-type-arrow {
    @apply mt-auto flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm;
  }

  .cf-fraud-type-card--red .cf-fraud-type-arrow {
    @apply bg-[#FEE2E2] text-[#DC2626];
  }

  .cf-fraud-type-card--purple .cf-fraud-type-arrow {
    @apply bg-[#F3E8FF] text-[#9333EA];
  }

  .cf-fraud-type-card--orange .cf-fraud-type-arrow {
    @apply bg-[#FFEDD5] text-[#EA580C];
  }

  .cf-fraud-type-card--green .cf-fraud-type-arrow {
    @apply bg-[#DCFCE7] text-[#16A34A];
  }

  .cf-safety-grid {
    @apply grid gap-5 sm:gap-6 lg:grid-cols-2 lg:gap-6;
  }

  .cf-safety-panel {
    @apply overflow-hidden rounded-[10px] border border-[rgba(0,91,170,0.09)] bg-white;
  }

  .cf-safety-panel--phishing {
    @apply rounded-[10px] border border-[rgba(0,91,170,0.36)] lg:col-span-2;
    background: linear-gradient(90deg, rgba(233, 240, 255, 0.2) 0%, rgba(239, 243, 255, 0.2) 100%);
  }

  .cf-safety-panel-header {
    @apply border-b border-[#E5E7EB] px-6 py-5 md:px-8 md:py-6;
  }

  .cf-safety-panel--do .cf-safety-panel-header {
    @apply bg-[#F6FFF9];
  }

  .cf-safety-panel--dont .cf-safety-panel-header {
    @apply bg-[#FFF7F7];
  }

  .cf-safety-panel--phishing .cf-safety-panel-header {
    @apply border-b border-[rgba(0,91,170,0.12)] bg-transparent;
  }

  .cf-safety-panel-title {
    @apply m-0 flex items-center gap-3 font-brand text-lg font-bold uppercase leading-none md:text-xl lg:text-2xl;
  }

  .cf-safety-panel--do .cf-safety-panel-title {
    @apply text-[#15803D];
  }

  .cf-safety-panel--dont .cf-safety-panel-title {
    @apply text-[#DC2626];
  }

  .cf-safety-panel-title--phishing {
    @apply normal-case text-brand-blue lg:text-xl;
  }

  .cf-safety-panel-mark {
    @apply flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm;
  }

  .cf-safety-panel-mark--do {
    @apply bg-[#DCFCE7] text-[#16A34A];
  }

  .cf-safety-panel-mark--dont {
    @apply bg-[#FEE2E2] text-[#DC2626];
  }

  .cf-safety-panel-mark--phishing {
    @apply bg-[#FDFEFF] border border-[#C1D7EB] text-brand-blue;
  }

  .cf-safety-list {
    @apply m-0 list-none p-0;
  }

  .cf-safety-item {
    @apply flex min-h-[60px] items-center gap-3 border-b border-[#E5E7EB] px-6 py-5 last:border-b-0 md:min-h-[64px] md:gap-4 md:px-8 md:py-6;
  }

  .cf-safety-item-icon {
    @apply flex h-10 w-10 lg:h-12 lg:w-12 shrink-0 items-center justify-center rounded-full text-sm;
  }

  .cf-safety-panel--do .cf-safety-item-icon {
    @apply bg-[#F8FEF8] border border-[#C1E9C7] text-[#16A34A];
  }

  .cf-safety-panel--dont .cf-safety-item-icon {
    @apply bg-[#F8FEF8] border border-[#FEE2E2] text-[#DC2626];
  }

  .cf-safety-panel--phishing .cf-safety-item-icon {
    @apply border border-[rgba(0,91,170,0.12)] bg-[#FDFEFF] text-[#005BAA];
  }

  .cf-safety-panel--phishing .cf-safety-item-icon i {
    @apply text-base text-[#005BAA] md:text-lg;
  }

  .cf-safety-item-text {
    @apply font-brand text-base leading-relaxed text-[#1E1E1E] md:text-[15px] lg:text-lg lg:leading-relaxed;
  }

  .cf-tips-list {
    @apply m-0 list-none space-y-3 p-0;
  }

  .cf-tip-item {
    @apply flex min-h-[72px] items-center gap-4 rounded-2xl border border-[#E8EDF5] bg-white px-4 py-5 shadow-[0_1px_8px_rgba(15,23,42,0.04)] md:min-h-[80px] md:px-6 md:py-6;
  }

  .cf-tip-icon {
    @apply flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#E8F2FC] text-brand-blue;
  }

  .cf-tip-text {
    @apply m-0 flex-1 font-brand text-[15px] leading-relaxed text-[#1E1E1E] md:text-base lg:text-lg font-semibold lg:leading-relaxed;
  }
  /* Set the actual size here */
  .pp-hero-privacy-svg {
    width: 120px; /* Adjust to 80px, 100px, 120px as needed */
    height: auto; /* Keeps correct aspect ratio */
    display: block;
    flex-shrink: 0;
  }
}