/*
 * NetPay overrides on top of the Synox template.
 *
 * Synox puts the page theme class (e.g. "payment_solutions") on <body>. In
 * Next.js every page shares one <body>, so the class sits on .page_wrapper and
 * these rules carry its body-level variables (background, text colour) up.
 *
 * Colour: NetPay blue & white. The template's lime/purple were swapped for
 * this palette in style.css and in the shape/icon images (originals in
 * /.color-backup); the rules below set the page themes and keep large
 * surfaces a calm navy so bright blue is reserved for buttons and accents.
 */
:root {
  --np-navy-950: #061233;
  --np-navy-900: #0A1A4A;
  --np-navy: #0D2366;
  --np-blue: #3395FF;
  --np-blue-600: #2B6CF0;
  --np-border: #E3EAF5;
  --np-dark-surface: radial-gradient(80% 60% at 50% 0%, rgba(51, 149, 255, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #0B1D52 0%, #061233 100%);

  --bs-link-color: #2B6CF0;
  --bs-link-color-rgb: 43, 108, 240;
  --bs-link-hover-color: #1F57C9;
  --bs-link-hover-color-rgb: 31, 87, 201;
  --bs-heading-color: #0D2366;
  --bs-body-color: #5B6B86;
  --bs-body-color-rgb: 91, 107, 134;
  --bs-border-color: #E3EAF5;
}

/* Home page: white body, navy blocks. */
body:has(> .page_wrapper.payment_solutions),
.page_wrapper.payment_solutions {
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #5B6B86;
  --bs-body-color-rgb: 91, 107, 134;
  --bs-heading-color: #0D2366;
  --bs-dark: #061233;
  --bs-dark-rgb: 6, 18, 51;
  --bs-primary-bg-subtle: rgba(51, 149, 255, 0.1);
  --bs-secondary: #0D2366;
  --bs-secondary-rgb: 13, 35, 102;
}

/* Text on navy surfaces. --bs-secondary matches the fade colour baked into the shape SVGs. */
.payment_solutions .bg-dark,
.payment_solutions .hero_payment_solutions,
.payment_solutions .payment_methods_section .content_wrapper,
.site_footer.bg-dark {
  --bs-heading-color: #FFFFFF;
  --bs-body-color: #C3CEE3;
  --bs-body-color-rgb: 195, 206, 227;
  --bs-secondary: #0A1A4A;
  --bs-secondary-rgb: 10, 26, 74;
}

/* Hero intro: soft body tone so the bold product terms carry the line,
   the same way "Trusted by <b>2,000+</b>" does just below it. */
.hero_payment_solutions p.hero_intro {
  color: #C3CEE3 !important;
}
.hero_payment_solutions p.hero_intro b {
  color: #FFFFFF;
  font-weight: 600;
}

/* ── Home hero polish ───────────────────────────────────────── */

/* Pill badge with a glowing status dot. */
.hero_payment_solutions .hero_badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(51, 149, 255, 0.45);
  background-color: rgba(51, 149, 255, 0.1) !important;
  color: #6BB4FF !important;
  letter-spacing: 0.02em;
}
.hero_payment_solutions .hero_badge_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3395FF;
  box-shadow: 0 0 10px 2px rgba(51, 149, 255, 0.8);
}

/* Accent word: blue gradient with a glowing swoosh underneath.
   Used by the hero ("Banking"), page banners and section headings site-wide. */
.np_accent {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bg-dark .np_accent,
.bg-secondary .np_accent,
.text-white .np_accent,
.page_header .np_accent,
.hero_payment_solutions .np_accent {
  background-image: linear-gradient(90deg, #2F8BFF 0%, #5CC8FF 100%);
}
.np_accent::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -6%;
  bottom: -0.24em;
  height: 0.3em;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233395FF' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%235CC8FF'/%3E%3Cstop offset='1' stop-color='%233395FF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 20 C 90 6, 240 2, 398 6' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  filter: drop-shadow(0 0 6px rgba(51, 149, 255, 0.9));
}
/* Shine: a soft highlight that travels along the swoosh, clipped to the line. */
.np_accent::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -6%;
  bottom: -0.24em;
  height: 0.3em;
  pointer-events: none;
  /* A bright dot riding the line, with a soft trail behind it. */
  background-image: radial-gradient(
      circle closest-side,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(198, 232, 255, 0.7) 45%,
      rgba(120, 195, 255, 0) 100%
    ),
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(200, 232, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 60%
    );
  background-size: 22px 100%, 240% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cpath d='M2 20 C 90 6, 240 2, 398 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cpath d='M2 20 C 90 6, 240 2, 398 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  /* Above the swoosh itself, which paints later in the pseudo-element order. */
  z-index: 1;
  /* Left to right, then back right to left, with a rest at each end. */
  animation: np_accent_shine 16s linear infinite alternate;
  /* The mask clips the dot to the line; the glow is added back outside it. */
  filter: drop-shadow(0 0 5px rgba(140, 205, 255, 0.5))
    drop-shadow(0 0 11px rgba(80, 170, 255, 0.28));
}
@keyframes np_accent_shine {
  0%,
  30% {
    background-position: -6% 0, -30% 0;
  }
  65%,
  100% {
    background-position: 106% 0, 130% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .np_accent::before {
    animation: none;
    opacity: 0;
  }
}
/* Primary button: blue gradient with a soft glow. */
.hero_payment_solutions .btns_group .btn.bg-primary {
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 30px -8px rgba(51, 149, 255, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Monochrome network / compliance marks under "Trusted by". */
.hero_payment_solutions .hero_trust_marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 22px;
}.hero_payment_solutions .hero_trust_marks li,
.np_hg_trust .hero_trust_marks li {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1;
}.hero_payment_solutions .tm_visa,
.np_hg_trust .hero_trust_marks li.tm_visa {
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
}.hero_payment_solutions .tm_mastercard,
.np_hg_trust .hero_trust_marks li.tm_mastercard {
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}.hero_payment_solutions .tm_mc_circles,
.np_hg_trust .tm_mc_circles {
  position: relative;
  width: 44px;
  height: 28px;
}.hero_payment_solutions .tm_mc_circles span,
.np_hg_trust .tm_mc_circles span {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}.hero_payment_solutions .tm_mc_circles span:first-child,
.np_hg_trust .tm_mc_circles span:first-child {
  left: 0;
}.hero_payment_solutions .tm_mc_circles span:last-child,
.np_hg_trust .tm_mc_circles span:last-child {
  right: 0;
  background: rgba(255, 255, 255, 0.3);
}.hero_payment_solutions .tm_pci,
.np_hg_trust .tm_pci {
  gap: 4px;
}.hero_payment_solutions .tm_pci_mark,
.np_hg_trust .tm_pci_mark {
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
}.hero_payment_solutions .tm_pci_text,
.np_hg_trust .tm_pci_text {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 800;
}.hero_payment_solutions .tm_pci_text small,
.np_hg_trust .tm_pci_text small {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Large surfaces: deep navy instead of bright blue. */
.hero_payment_solutions,
.payment_methods_section .content_wrapper,
.footer_layout_3 .content_wrap {
  background-image: var(--np-dark-surface);
}
.hero_payment_solutions .decoration_item img,
.payment_methods_section .decoration_item img,
.footer_layout_3 .decoration_item img {
  opacity: 0.4;
}
.ps_pricing_block.bg-grd {
  background: linear-gradient(135deg, #16347F 0%, #0A1A4A 100%);
}
.ps_pricing_block.bg-grd-2 {
  background: linear-gradient(135deg, #1F57C9 0%, #0D2366 100%);
}

/* Blue buttons carry white text; the hover bubble is white, so text turns navy. */
.btn.bg-primary.text-dark,
.pricing_amount.bg-primary.text-dark {
  color: #FFFFFF !important;
}
.btn.bg-primary.text-dark svg path {
  fill: #FFFFFF;
  transition: var(--bs-transition);
}
.btn.bg-primary.text-dark:hover {
  color: var(--np-navy) !important;
}
.btn.bg-primary.text-dark:hover svg path {
  fill: var(--np-navy);
}
/* Gradient submit buttons stay blue on hover. */
.comment_form .btn[type=submit].text-dark,
.career_block .btn.text-dark:hover {
  color: #FFFFFF !important;
}
.comment_form .btn[type=submit].text-dark svg path,
.career_block .btn.text-dark:hover svg path {
  fill: #FFFFFF;
}

/* Header call-to-action stands out on the navy hero / page header. */
.header_layout_1 .xb-header:not(.stricked-menu) .btn.bg-dark {
  background-color: var(--np-blue-600) !important;
}
.header_layout_1 .hotline_btn {
  background-color: var(--np-blue-600);
}

/* White sections on the home page. */
.payment_solutions .contact_process_step .iconbox_block {
  background-color: #FFFFFF;
  border-color: var(--np-border);
  box-shadow: 0 12px 30px -14px rgba(13, 35, 102, 0.18);
}
.payment_solutions .contact_process_content .site_logo .site_link {
  border-color: rgba(51, 149, 255, 0.4);
}


/* ── Pricing plans (/pricing) ─────────────────────────────────── */

.np_pricing .np_pricing_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 56px;
  position: relative;
  z-index: 2;
}

.np_pricing .np_plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(20, 44, 110, 0.72) 0%, rgba(8, 22, 60, 0.82) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -30px rgba(2, 8, 30, 0.8);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.np_pricing .np_plan:hover {
  transform: translateY(-6px);
  border-color: rgba(51, 149, 255, 0.45);
}

/* Featured: gradient border + glow, lifted on desktop. */
.np_pricing .np_plan.is_featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, #16357F 0%, #0B1D52 100%) padding-box,
    linear-gradient(160deg, #5CC8FF 0%, #2B6CF0 45%, rgba(43, 108, 240, 0.15) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 40px 80px -30px rgba(51, 149, 255, 0.55);
}
@media (min-width: 992px) {
  .np_pricing .np_plan.is_featured {
    transform: translateY(-16px);
  }
  .np_pricing .np_plan.is_featured:hover {
    transform: translateY(-22px);
  }
}

.np_pricing .np_plan_ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 50px;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 8px 20px -6px rgba(51, 149, 255, 0.7);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.np_pricing .np_plan_head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.np_pricing .np_plan_icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(51, 149, 255, 0.14);
  border: 1px solid rgba(51, 149, 255, 0.3);
}
.np_pricing .np_plan_icon img {
  width: 28px;
  height: 28px;
}
.np_pricing .np_plan_name {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.2;
  color: #FFFFFF;
}
.np_pricing .np_plan_tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #9FB0D0;
}

.np_pricing .np_plan_price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.np_pricing .np_plan_amount {
  font-family: var(--bs-heading-font-family);
  font-size: 44px;
  line-height: 1;
  color: #FFFFFF;
}
.np_pricing .is_featured .np_plan_amount {
  background-image: linear-gradient(90deg, #FFFFFF 0%, #8FD3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.np_pricing .np_plan_unit {
  font-size: 13px;
  color: #9FB0D0;
}

/* Secondary button: outline that fills on hover. */
.np_pricing .btn.np_plan_btn {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.np_pricing .is_featured .btn.bg-primary {
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 30px -8px rgba(51, 149, 255, 0.65);
}

.np_pricing .np_plan_divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6F84AD;
}
.np_pricing .np_plan_divider::before,
.np_pricing .np_plan_divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.np_pricing .np_plan_features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.np_pricing .np_plan_features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: #DCE5F5;
}
.np_pricing .np_plan_check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(51, 149, 255, 0.18);
  color: #5CB2FF;
  font-size: 11px;
}
.np_pricing .np_plan_features li.is_excluded {
  color: #6F84AD;
}
.np_pricing .np_plan_features li.is_excluded .np_plan_check {
  background: rgba(255, 255, 255, 0.06);
  color: #6F84AD;
}

/* "Every plan includes" strip. */
.np_pricing .np_pricing_included {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 36px;
  margin-top: 48px;
  padding: 22px 30px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.np_pricing .np_pricing_included_title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.np_pricing .np_pricing_included ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
}
.np_pricing .np_pricing_included li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #C3CEE3;
}
.np_pricing .np_pricing_included li i {
  color: #5CB2FF;
}

.np_pricing .np_pricing_note {
  position: relative;
  z-index: 2;
  margin: 26px 0 0;
  text-align: center;
  font-size: 15px;
  color: #9FB0D0;
}
.np_pricing .np_pricing_note a {
  color: #5CB2FF;
  font-weight: 600;
}
.np_pricing .np_pricing_note a:hover {
  color: #FFFFFF;
}

@media (max-width: 991px) {
  .np_pricing .np_pricing_grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    gap: 34px;
  }
}
@media (max-width: 575px) {
  .np_pricing .np_plan {
    padding: 30px 22px 26px;
  }
  .np_pricing .np_plan_amount {
    font-size: 38px;
  }
}


/* How pricing works — numbered step cards. */
.np_how .np_how_steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  position: relative;
  counter-reset: none;
}
.np_how .np_how_steps::before {
  content: "";
  position: absolute;
  top: 64px;
  left: 16%;
  right: 16%;
  border-top: 2px dashed #D6E2FB;
  z-index: 0;
}
.np_how .np_how_step {
  position: relative;
  z-index: 1;
  padding: 34px 30px 32px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid #E3EAF5;
  box-shadow: 0 20px 50px -30px rgba(13, 35, 102, 0.35);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.np_how .np_how_step:hover {
  transform: translateY(-6px);
  border-color: rgba(51, 149, 255, 0.45);
  box-shadow: 0 30px 60px -30px rgba(43, 108, 240, 0.45);
}
.np_how .np_how_num {
  position: absolute;
  top: 26px;
  right: 28px;
  font-family: var(--bs-heading-font-family);
  font-size: 40px;
  line-height: 1;
  color: #EEF3FB;
}
.np_how .np_how_icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 24px -10px rgba(51, 149, 255, 0.7);
}
.np_how .np_how_icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.np_how .np_how_title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  color: #0D2366;
}
.np_how .np_how_text {
  font-size: 15px;
  line-height: 1.6;
  color: #5B6B86;
}

/* Plan comparison table. */
.np_compare .np_compare_wrap {
  overflow-x: auto;
  border-radius: 22px;
  border: 1px solid #E3EAF5;
  background: #FFFFFF;
  box-shadow: 0 20px 50px -30px rgba(13, 35, 102, 0.3);
}
.np_compare .np_compare_table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.np_compare .np_compare_table th,
.np_compare .np_compare_table td {
  padding: 16px 24px;
  border-bottom: 1px solid #EEF3FA;
  text-align: center;
  font-size: 15px;
}
.np_compare .np_compare_table tbody tr:last-child th,
.np_compare .np_compare_table tbody tr:last-child td {
  border-bottom: 0;
}
.np_compare .np_compare_table thead th {
  padding-top: 22px;
  padding-bottom: 22px;
  font-family: var(--bs-heading-font-family);
  font-size: 18px;
  color: #0D2366;
  background: #F6F9FF;
}
.np_compare .np_compare_table thead th:first-child,
.np_compare .np_compare_table tbody th {
  text-align: left;
}
.np_compare .np_compare_table tbody th {
  font-weight: 500;
  color: #0D2366;
}
.np_compare .np_compare_table tbody tr:hover {
  background: #FAFCFF;
}
.np_compare .np_compare_table .is_featured {
  background: rgba(51, 149, 255, 0.06);
}
.np_compare .np_compare_table thead .is_featured {
  color: #FFFFFF;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
}
.np_compare .np_cmp_yes,
.np_compare .np_cmp_no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
}
.np_compare .np_cmp_yes {
  background: rgba(51, 149, 255, 0.14);
  color: #2B6CF0;
}
.np_compare .np_cmp_no {
  color: #B6C2D6;
}

/* Pricing FAQ — native <details>, no script needed. */
.np_pfaq .np_pfaq_head {
  position: sticky;
  top: 120px;
}
.np_pfaq .np_link_arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2B6CF0;
}
.np_pfaq .np_link_arrow:hover {
  gap: 12px;
}
.np_pfaq .np_pfaq_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.np_pfaq .np_pfaq_item {
  border-radius: 18px;
  border: 1px solid #E3EAF5;
  background: #FFFFFF;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.np_pfaq .np_pfaq_item[open] {
  border-color: rgba(51, 149, 255, 0.45);
  box-shadow: 0 20px 40px -28px rgba(43, 108, 240, 0.5);
}
.np_pfaq .np_pfaq_item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 64px 22px 26px;
  font-family: var(--bs-heading-font-family);
  font-size: 18px;
  line-height: 1.4;
  color: #0D2366;
}
.np_pfaq .np_pfaq_item summary::-webkit-details-marker {
  display: none;
}
.np_pfaq .np_pfaq_toggle {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #EEF3FB;
  transition: background 300ms ease, transform 300ms ease;
}
.np_pfaq .np_pfaq_toggle::before,
.np_pfaq .np_pfaq_toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: #2B6CF0;
  transition: transform 300ms ease;
}
.np_pfaq .np_pfaq_toggle::after {
  transform: rotate(90deg);
}
.np_pfaq .np_pfaq_item[open] .np_pfaq_toggle {
  background: #2B6CF0;
}
.np_pfaq .np_pfaq_item[open] .np_pfaq_toggle::before,
.np_pfaq .np_pfaq_item[open] .np_pfaq_toggle::after {
  background: #FFFFFF;
}
.np_pfaq .np_pfaq_item[open] .np_pfaq_toggle::after {
  transform: rotate(0deg);
}
.np_pfaq .np_pfaq_item p {
  margin: 0;
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #5B6B86;
}

/* Closing CTA band. */
.np_pcta_section .np_pcta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 56px 60px;
  border-radius: 28px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(63, 169, 255, 0.35) 0%, transparent 60%),
    linear-gradient(120deg, #0D2366 0%, #16357F 55%, #2B6CF0 100%);
  box-shadow: 0 40px 80px -40px rgba(13, 35, 102, 0.6);
}
.np_pcta_section .np_pcta h2 {
  margin: 0 0 10px;
  font-size: 40px;
  line-height: 1.15;
  color: #FFFFFF;
}
.np_pcta_section .np_pcta p {
  margin: 0;
  font-size: 17px;
  color: #C3CEE3;
}
.np_pcta_section .np_pcta_actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 24px;
}
.np_pcta_section .np_pcta .btn.bg-primary {
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 30px -8px rgba(51, 149, 255, 0.65);
}
.np_pcta_section .np_pcta_secondary {
  font-weight: 600;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}
.np_pcta_section .np_pcta_secondary:hover {
  color: #8FD3FF;
  border-color: #8FD3FF;
}

@media (max-width: 991px) {
  .np_how .np_how_steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin: 0 auto;
  }
  .np_how .np_how_steps::before {
    display: none;
  }
  .np_pfaq .np_pfaq_head {
    position: static;
  }
  .np_pcta_section .np_pcta {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 30px;
  }
  .np_pcta_section .np_pcta h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .np_pcta_section .np_pcta_actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .np_pfaq .np_pfaq_item summary {
    font-size: 16px;
    padding: 18px 58px 18px 20px;
  }
}


/* "Powering Every Industry" accordion: the template ships only four light
   icons, so every icon here is forced to the same brand blue. */
.powering_industry_section .accordion-button .icon img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(72%) saturate(2496%) hue-rotate(195deg) brightness(102%) contrast(101%);
}

/* Connect-process badge: white card so the full-colour NetPay logo shows. */
.contact_process_content .site_logo .site_link {
  background-color: #FFFFFF;
  border-color: #D6E2FB;
  box-shadow: 0 18px 40px -26px rgba(13, 35, 102, 0.45);
}

/* Newsletter row inside the site footer. */
.footer_layout_3 .np_footer_newsletter {
  padding-bottom: 46px;
  margin-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer_layout_3 .np_footer_newsletter .heading_text {
  font-size: 34px;
  line-height: 1.25;
}

/* Footer bottom bar: logo beside the copyright line. */
.footer_layout_3 .np_footer_brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer_layout_3 .np_footer_logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}
.footer_layout_3 .np_footer_logo img {
  height: 60px;
  width: auto;
}
/* Shiny blue matching the logo's globe. */
.footer_layout_3 .np_footer_brand .copyright_text {
  background: linear-gradient(180deg, #8FDBFF 0%, #3BB2F6 50%, #1F74E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
@media (max-width: 991px) {
  .footer_layout_3 .np_footer_brand {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .footer_layout_3 .np_footer_brand .copyright_text {
    max-width: 100%;
    text-align: center;
  }
}

/* Compact footer: tighten the template's large spacing and link text. */
.footer_layout_3 .cta_section.section_space {
  padding-top: 80px;
  padding-bottom: 80px;
}
.footer_layout_3 .content_wrap {
  padding: 70px 0 44px;
}
.footer_layout_3 .np_footer_newsletter {
  padding-bottom: 32px;
  margin-bottom: 36px;
}
.footer_layout_3 .np_footer_newsletter .heading_text {
  font-size: 28px;
}
.footer_layout_3 .footer_info_title {
  font-size: 15px;
  margin-bottom: 20px;
}
.footer_layout_3 .iconlist_block.unordered_list_block {
  gap: 9px;
}
.footer_layout_3 .iconlist_block > li {
  font-size: 15px;
  line-height: 22px;
}
.footer_layout_3 .footer_bottom {
  margin-top: 56px;
}
.footer_layout_3 .np_footer_logo img {
  height: 46px;
}
/* --- Mobile / tablet: the template ships no responsive rules for
   footer_layout_3, so fix side padding, the oversized CTA, column
   stacking gaps and the newsletter here. --- */
@media (max-width: 991px) {
  .footer_layout_3 {
    padding: 0 16px;
  }
  .footer_layout_3 .cta_section.section_space {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .footer_layout_3 .cta_section .heading_text {
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 24px;
  }
  .footer_layout_3 .cta_section .btn {
    font-size: 17px;
    padding: 16px 40px;
  }
  .footer_layout_3 .content_wrap {
    padding: 44px 0 32px;
    border-radius: 20px 20px 0 0;
  }
  /* Newsletter heading + form stack: add a gap between them. */
  .footer_layout_3 .np_footer_newsletter .heading_block {
    margin-bottom: 20px;
  }
  .footer_layout_3 .np_footer_newsletter .heading_text {
    font-size: 24px;
  }
  /* Link columns wrap 2-up (sm) / 1-up (xs): give each row breathing room. */
  .footer_layout_3 .content_wrap > .container > .row > [class*="col-"] {
    margin-bottom: 32px;
  }
  .footer_layout_3 .footer_bottom {
    margin-top: 16px;
    padding: 20px;
    text-align: center;
  }
}
@media (max-width: 575px) {
  .footer_layout_3 .cta_section .heading_text {
    font-size: 25px;
  }
  .footer_layout_3 .cta_section .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 28px;
  }
  .footer_layout_3 .np_footer_newsletter .heading_text {
    font-size: 22px;
  }
}

/* Hero: looping data-grid video behind the navy surface. Kept dim so the
   headline, stats and card artwork stay the focus. */
.np_hero_video_section {
  position: relative;
}
.np_hero_video_section .np_hero_video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Only the content wrappers are lifted above the video — the template's
   decoration shapes keep their own absolute positioning. */
.np_hero_video_section > .container,
.np_hero_video_section > .container-fluid {
  position: relative;
  z-index: 1;
}
.np_hero_video_section > .decoration_item {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .np_hero_video_section .np_hero_video {
    display: none;
  }
}

/* Hero artwork slider — same box as the template's single image. */
.np_hero_slides {
  position: relative;
  width: 100%;
  /* Widest artwork sets the box, so no slide is ever clamped sideways and the
     hero never jumps between slides. Capped so the hero keeps its old height. */
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 512 / 433;
}
/* Smaller screens: keep the artwork clearly smaller than the copy column. */
@media (max-width: 1499px) {
  .np_hero_slides {
    max-width: 520px;
  }
}
@media (max-width: 1299px) {
  .np_hero_slides {
    max-width: 440px;
  }
}
.np_hero_slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: opacity 700ms ease, transform 700ms ease, visibility 700ms;
}
.np_hero_slide.is_active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
/* The wrapper carries each artwork's own ratio at full height, so it matches the
   image exactly and overlay percentages line up with what's drawn. */
.np_hero_art {
  position: relative;
  height: 100%;
  container-type: inline-size;
}
.np_hero_art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.np_hero_art.is_faded img {
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 99%);
  mask-image: linear-gradient(to right, #000 78%, transparent 99%);
}

/* Floating labels for artwork without blank rows to write on. */
.np_hero_chip {
  position: absolute;
  padding: 0.9cqw 1.8cqw;
  border-radius: 50px;
  border: 1px solid rgba(92, 200, 255, 0.45);
  background: rgba(10, 26, 74, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-family: 'SuisseIntl Medium';
  font-size: 2.5cqw;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

/* Account labels drawn onto the blank rows of the artwork. */
.np_hero_tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}
.np_hero_tag_label {
  font-family: 'SuisseIntl Medium';
  font-size: 2.15cqw;
  letter-spacing: 0.02em;
  color: #0D2366;
}
.np_hero_tag_value {
  font-family: 'Courier New', monospace;
  font-size: 2.15cqw;
  font-weight: 700;
  color: #4A6592;
}

.np_hero_dots {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  gap: 8px;
  z-index: 2;
}
.np_hero_dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 300ms ease, background 300ms ease;
}
.np_hero_dots button.is_active {
  width: 26px;
  background: linear-gradient(90deg, #3FA9FF 0%, #8FD3FF 100%);
}

/* ── Home product showcase slider ─────────────────────────────── */

/* The template clips the page wrapper, which would kill position: sticky.
   `clip` clips the same way without creating a scroll container. */
.page_wrapper {
  overflow: clip;
}

.np_showcase {
  position: relative;
  margin-top: 46px;
}
/* All slides share one grid cell, so the stage is as tall as the tallest slide
   and nothing gets clipped when a taller image is showing. */
.np_showcase_stage {
  display: grid;
}
.np_showcase_slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease, visibility 600ms;
}
.np_showcase_slide.is_active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.np_showcase_badge {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid rgba(51, 149, 255, 0.35);
  background: rgba(51, 149, 255, 0.1);
  color: #2B6CF0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.np_showcase_title {
  margin: 20px 0 14px;
  font-size: 38px;
  line-height: 1.2;
  color: #0D2366;
}
.np_showcase_text {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.7;
  color: #5B6B86;
}
.np_showcase_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SuisseIntl Medium';
  font-size: 16px;
  color: #2B6CF0;
  transition: gap 250ms ease;
}
.np_showcase_link:hover {
  gap: 12px;
}

.np_showcase_media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.np_showcase_controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 38px;
}
.np_showcase_arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #D6E2FB;
  background: #FFFFFF;
  color: #2B6CF0;
  font-size: 14px;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.np_showcase_arrow:hover {
  border-color: #2B6CF0;
  background: #2B6CF0;
  color: #FFFFFF;
}
.np_showcase_dots {
  gap: 10px;
}
.np_showcase_dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: #C9D8F2;
  transition: width 300ms ease, background 300ms ease;
}
.np_showcase_dots button.is_active {
  width: 30px;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
}

@media (prefers-reduced-motion: reduce) {
  .np_showcase_slide {
    transition: none;
  }
}

@media (max-width: 991px) {
  .np_showcase_slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .np_showcase_title {
    font-size: 28px;
  }
  .np_showcase_media {
    order: -1;
  }
}

/* ── Homepage pricing block ───────────────────────────────────── */

.np_hp_pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 54px;
}

.np_hp_card {
  display: flex;
  flex-direction: column;
  padding: 40px 38px 36px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(22, 52, 127, 0.55) 0%, rgba(8, 22, 60, 0.75) 100%);
  box-shadow: 0 30px 60px -34px rgba(2, 8, 30, 0.9);
}
.np_hp_card.is_featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #16357F 0%, #0B1D52 100%) padding-box,
    linear-gradient(160deg, #5CC8FF 0%, #2B6CF0 45%, rgba(43, 108, 240, 0.15) 100%) border-box;
  box-shadow: 0 40px 80px -36px rgba(51, 149, 255, 0.5);
}

.np_hp_eyebrow,
.np_hp_badge {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.np_hp_eyebrow {
  border: 1px solid rgba(92, 200, 255, 0.35);
  background: rgba(51, 149, 255, 0.12);
  color: #8FD3FF;
}
.np_hp_badge {
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 10px 24px -10px rgba(51, 149, 255, 0.8);
  color: #FFFFFF;
}

.np_hp_title {
  margin: 20px 0 12px;
  font-size: 30px;
  line-height: 1.2;
  color: #FFFFFF;
}
.np_hp_text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.65;
  color: #C3CEE3;
}

.np_hp_points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 30px;
}
.np_hp_points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #9FB0D0;
}
.np_hp_points strong {
  display: block;
  margin-bottom: 3px;
  font-family: 'SuisseIntl Medium';
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
}
.np_hp_icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(51, 149, 255, 0.14);
  color: #5CB2FF;
  font-size: 16px;
}

.np_hp_link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SuisseIntl Medium';
  font-size: 16px;
  color: #5CB2FF;
  transition: gap 250ms ease;
}
.np_hp_link:hover {
  gap: 12px;
  color: #FFFFFF;
}

.np_hp_price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 0 24px;
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.np_hp_amount {
  font-family: var(--bs-heading-font-family);
  font-size: 52px;
  line-height: 1;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #8FD3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.np_hp_unit {
  font-size: 14px;
  color: #9FB0D0;
}

.np_hp_check {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 26px 0 32px;
}
.np_hp_check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #DCE5F5;
}
.np_hp_check i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(51, 149, 255, 0.2);
  color: #5CB2FF;
  font-size: 11px;
}
.np_hp_card.is_featured .btn {
  margin-top: auto;
  align-self: flex-start;
}

.np_hp_stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 26px 0 0;
  padding: 0;
}
.np_hp_stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.np_hp_stat_value {
  font-family: var(--bs-heading-font-family);
  font-size: 34px;
  line-height: 1;
  color: #FFFFFF;
}
.np_hp_stat_label {
  font-size: 14px;
  color: #9FB0D0;
}

@media (max-width: 991px) {
  .np_hp_pricing,
  .np_hp_stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .np_hp_card {
    padding: 32px 26px 28px;
  }
  .np_hp_title {
    font-size: 26px;
  }
  .np_hp_amount {
    font-size: 44px;
  }
}

/* ── Solutions mega menu (header) ─────────────────────────────── */

.main_menu_list .dropdown-menu.np_mega {
  padding: 0;
  border: 1px solid #E3EAF5;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 30px 70px -20px rgba(13, 35, 102, 0.28);
  overflow: hidden;
}
.np_mega .np_mega_groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  padding: 26px 22px 22px;
}
.np_mega .np_mega_title {
  display: block;
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3395FF;
}
.np_mega .np_mega_group ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.main_menu_list .np_mega .np_mega_link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  white-space: normal;
  color: #0D2366;
  background: transparent;
  transition: background-color 250ms ease;
}
.main_menu_list .np_mega li:hover > .np_mega_link,
.main_menu_list .np_mega li.active > .np_mega_link {
  color: #0D2366;
  background-color: #F2F6FF;
}
.np_mega .np_mega_icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(51, 149, 255, 0.12);
  color: #2B6CF0;
  font-size: 15px;
  transition: background 250ms ease, color 250ms ease;
}
.np_mega li:hover .np_mega_icon,
.np_mega li.active .np_mega_icon {
  background: linear-gradient(135deg, #2B6CF0 0%, #3FA9FF 100%);
  color: #FFFFFF;
}
.np_mega .np_mega_text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.np_mega .np_mega_label {
  font-family: 'SuisseIntl Medium';
  font-size: 15px;
  line-height: 1.25;
  color: #0D2366;
}
.np_mega .np_mega_sub {
  font-family: var(--bs-body-font-family);
  font-size: 13px;
  line-height: 1.35;
  color: #6B7A96;
}

.np_mega .np_mega_promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  color: #C3CEE3;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(63, 169, 255, 0.35) 0%, transparent 70%),
    linear-gradient(160deg, #16357F 0%, #0D2366 100%);
}
/* Card photo behind the blue, with the copy side kept dark for contrast. */
.np_mega .np_mega_promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/netpay/photos/hero-cards.webp") center / cover no-repeat;
  opacity: 0.55;
  mix-blend-mode: luminosity;
}
.np_mega .np_mega_promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(200deg, rgba(13, 35, 102, 0.88) 0%, rgba(13, 35, 102, 0.35) 100%);
}
.np_mega .np_mega_promo_badge {
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid rgba(92, 200, 255, 0.4);
  background: rgba(51, 149, 255, 0.15);
  color: #8FD3FF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.np_mega .np_mega_promo h3 {
  margin: 18px 0 10px;
  font-size: 22px;
  line-height: 1.25;
  color: #FFFFFF;
}
.np_mega .np_mega_promo p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
}
.main_menu_list .np_mega .np_mega_promo_primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 50px;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 10px 24px -8px rgba(51, 149, 255, 0.7);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.main_menu_list .np_mega .np_mega_promo_primary:hover {
  gap: 14px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
}
.main_menu_list .np_mega .np_mega_promo_secondary {
  margin-top: 14px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
}
.main_menu_list .np_mega .np_mega_promo_secondary:hover {
  color: #8FD3FF;
  background: none;
}

/* Desktop: panels open centred under the whole header (the <li> is static, so
   they position against .navbar) — a wide panel can't run off either edge. */
@media (min-width: 992px) {
  .main_menu_list > li.np_mega_entry {
    position: static;
  }
  .main_menu_list .dropdown > .dropdown-menu.np_mega {
    display: grid;
    top: 100%;
    left: 50%;
    margin-top: 18px;
    transform: translate(-50%, 8px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
  }
  .main_menu_list .dropdown > .dropdown-menu.np_mega.is_wide {
    grid-template-columns: minmax(0, 1fr) 270px;
    width: min(1060px, calc(100vw - 40px));
  }
  .main_menu_list .dropdown > .dropdown-menu.np_mega.is_medium {
    grid-template-columns: minmax(0, 1fr) 270px;
    width: min(700px, calc(100vw - 40px));
  }
  .main_menu_list .dropdown > .dropdown-menu.np_mega.is_compact {
    grid-template-columns: minmax(0, 1fr);
    width: min(520px, calc(100vw - 40px));
  }
  .np_mega.is_medium .np_mega_groups {
    grid-template-columns: minmax(0, 1fr);
  }
  .np_mega.is_compact .np_mega_groups {
    grid-template-columns: minmax(0, 1fr);
  }
  .np_mega.is_compact .np_mega_group ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
  }
  .main_menu_list .dropdown:hover > .dropdown-menu.np_mega,
  .main_menu_list .dropdown > .dropdown-menu.np_mega.show {
    transform: translate(-50%, 0);
  }
  /* Hover bridge over the gap between the link and the panel. */
  .main_menu_list .dropdown > .dropdown-menu.np_mega::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
  }
}

/* Mobile menu: one column, no descriptions, no promo panel. */
@media (max-width: 991px) {
  .np_mega .np_mega_groups {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 6px;
  }
  .np_mega .np_mega_sub,
  .np_mega .np_mega_promo_badge,
  .np_mega .np_mega_promo h3,
  .np_mega .np_mega_promo p,
  .np_mega .np_mega_promo_secondary {
    display: none;
  }
  /* Keep the "Explore all …" link so index pages stay reachable on mobile. */
  .np_mega .np_mega_promo {
    padding: 4px 18px 14px;
    background: none;
  }
  .main_menu_list .dropdown-menu.np_mega {
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}


/* ── 3D banners (components/three-scene.tsx) ──────────────────── */
.np_three_scene canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  /* Kept calm on purpose — the scenes read too bright at full strength. */
  filter: brightness(0.78) saturate(0.95);
}

/* Page banner with a 3D scene: title on the left, scene on the right.
   The scene is absolutely placed, so the banner keeps its normal height. */
.page_header .np_header_scene {
  display: none;
}
@media (min-width: 992px) {
  .page_header.np_header_with_scene {
    position: relative;
  }
  .page_header.np_header_with_scene .container {
    position: relative;
    z-index: 2;
    text-align: left;
  }
  .page_header.np_header_with_scene .page_title {
    max-width: 56%;
  }
  .page_header.np_header_with_scene .breadcrumb_nav {
    justify-content: flex-start !important;
  }
  /* The floating dollar shapes sit where the scene goes. */
  .page_header.np_header_with_scene [class*="shape_dollar"] {
    display: none;
  }
  .page_header .np_header_scene {
    display: block;
    position: absolute !important;
    z-index: 1;
    top: 90px;
    bottom: 0;
    right: 0;
    width: 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%);
  }
}

/* Homepage "Connect NetPay to Your Stack": copy on the left, video on the right. */
.np_integrating .heading_description {
  margin-bottom: 30px;
}
.np_integrating .np_integrating_points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  margin: 0 0 36px;
}
.np_integrating .np_integrating_points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #5B6B86;
}
.np_integrating .np_integrating_points strong {
  display: block;
  margin-bottom: 3px;
  font-family: 'SuisseIntl Medium';
  font-weight: 500;
  font-size: 17px;
  color: #0D2366;
}
.np_integrating .np_integrating_icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(51, 149, 255, 0.12);
  color: #2B6CF0;
  font-size: 17px;
}
.np_integrating .np_integrating_btns {
  align-items: center;
  gap: 28px;
}
.np_integrating .np_integrating_btns .btn.bg-primary {
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 30px -10px rgba(51, 149, 255, 0.55);
}
.np_integrating .np_integrating_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SuisseIntl Medium';
  font-size: 16px;
  color: #2B6CF0;
  transition: gap 250ms ease;
}
.np_integrating .np_integrating_link:hover {
  gap: 12px;
}

/* The video's artwork sits in its right half — crop the empty left side and
   fade the edges into the white section. */
.np_integrating_video video {
  display: block;
  width: 100%;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
  object-position: 88% 50%;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 100%);
}

@media (max-width: 575px) {
  .np_integrating .np_integrating_points {
    grid-template-columns: minmax(0, 1fr);
  }
  .np_integrating .np_integrating_btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}


/* ── Features page (photo-led layout, alternating blocks) ────────── */

.np_feat {
  --feat-ink: #0D2366;
  --feat-body: #5B6B86;
}
.np_feat .container {
  max-width: 1240px;
}
.np_feat_eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid rgba(51, 149, 255, 0.35);
  background: rgba(51, 149, 255, 0.1);
  color: #2B6CF0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.np_feat_hero .np_feat_eyebrow {
  color: #8FD3FF;
}
.np_feat_h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.np_feat_h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  color: var(--feat-ink);
}
.np_feat_lead {
  max-width: 520px;
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.65;
  color: #C3CEE3;
}

.np_feat_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 50px;
  background: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 14px 30px -12px rgba(51, 149, 255, 0.8);
  color: #FFFFFF;
  font-family: 'SuisseIntl Medium';
  font-size: 16px;
  transition: gap 250ms ease;
}
.np_feat_btn:hover {
  gap: 14px;
  color: #FFFFFF;
}
.np_feat_btn.is_ghost {
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}
.np_feat_section .np_feat_btn.is_ghost,
.np_feat_cta .np_feat_btn.is_ghost {
  border-color: rgba(255, 255, 255, 0.4);
}
.np_feat_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.np_feat_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SuisseIntl Medium';
  font-size: 16px;
  color: #2B6CF0;
  transition: gap 250ms ease;
}
.np_feat_link:hover {
  gap: 12px;
}

/* Hero */
.np_feat_hero {
  padding: 190px 0 90px;
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(51, 149, 255, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #0B1D52 0%, #061233 100%);
}
.np_feat_hero_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}
.np_feat_note {
  margin: 22px 0 0;
  font-size: 14px;
  color: rgba(195, 206, 227, 0.75);
}
.np_feat_hero_media img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

/* Trust strip */
.np_feat_trust {
  padding: 22px 0;
  background: #0A1A4A;
}
.np_feat_trust ul {
  justify-content: space-between;
  gap: 18px 30px;
}
.np_feat_trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #C3CEE3;
}
.np_feat_trust i {
  color: #5CC8FF;
  font-size: 12px;
}

/* Sections */
.np_feat_section {
  padding: 90px 0;
}
.np_feat_head {
  max-width: 640px;
  margin: 0 auto 50px;
  text-align: center;
}
.np_feat_head.is_left {
  margin: 0;
  text-align: left;
}
.np_feat_head p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--feat-body);
}

/* Card types */
.np_feat_types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.np_feat_type {
  display: block;
  padding: 30px 26px 26px;
  border-radius: 20px;
  border: 1px solid #E3EAF5;
  background: #FFFFFF;
  box-shadow: 0 20px 45px -32px rgba(13, 35, 102, 0.4);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.np_feat_type:hover {
  transform: translateY(-6px);
  border-color: rgba(51, 149, 255, 0.45);
  box-shadow: 0 30px 55px -30px rgba(43, 108, 240, 0.45);
}
.np_feat_type_icon,
.np_feat_card_icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 24px -12px rgba(51, 149, 255, 0.8);
  color: #FFFFFF;
  font-size: 19px;
}
.np_feat_type h3,
.np_feat_card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--feat-ink);
}
.np_feat_type p,
.np_feat_card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--feat-body);
}
.np_feat_type_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: 'SuisseIntl Medium';
  font-size: 15px;
  color: #2B6CF0;
}

/* Alternating photo blocks */
.np_feat_block {
  padding: 80px 0;
}
.np_feat_block.is_flipped {
  background: #F6F9FF;
}
.np_feat_block_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}
.np_feat_block.is_flipped .np_feat_block_copy {
  order: 2;
}
.np_feat_block_copy p {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--feat-body);
}
.np_feat_points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 0 0 30px;
}
.np_feat_points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--feat-ink);
}
.np_feat_points i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(51, 149, 255, 0.14);
  color: #2B6CF0;
  font-size: 11px;
}
.np_feat_block_media img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 40px 70px -40px rgba(13, 35, 102, 0.6);
}

/* Stats band */
.np_feat_stats {
  padding: 56px 0;
  background: linear-gradient(120deg, #0D2366 0%, #16357F 55%, #2B6CF0 100%);
}
.np_feat_stats ul {
  justify-content: space-between;
  gap: 30px;
}
.np_feat_stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np_feat_stat_value {
  font-family: var(--bs-heading-font-family);
  font-size: 40px;
  line-height: 1;
  color: #FFFFFF;
}
.np_feat_stat_label {
  font-size: 15px;
  color: rgba(195, 206, 227, 0.9);
}

/* Feature grid */
.np_feat_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.np_feat_card {
  padding: 30px 28px;
  border-radius: 20px;
  border: 1px solid #E3EAF5;
  background: #FFFFFF;
  transition: border-color 300ms ease, transform 300ms ease;
}
.np_feat_card:hover {
  transform: translateY(-4px);
  border-color: rgba(51, 149, 255, 0.45);
}

/* Steps */
.np_feat_steps_section {
  background: #F6F9FF;
}
.np_feat_steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np_feat_steps li {
  padding: 30px 26px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #E3EAF5;
}
.np_feat_step_n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--bs-heading-font-family);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: #3395FF;
}
.np_feat_steps h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--feat-ink);
}
.np_feat_steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--feat-body);
}

/* FAQ */
.np_feat_faq_grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 50px;
  align-items: start;
}
.np_feat_faq_list details {
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid #E3EAF5;
  background: #FFFFFF;
}
.np_feat_faq_list details[open] {
  border-color: rgba(51, 149, 255, 0.45);
  box-shadow: 0 20px 40px -30px rgba(43, 108, 240, 0.5);
}
.np_feat_faq_list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 60px 22px 26px;
  font-family: var(--bs-heading-font-family);
  font-size: 18px;
  line-height: 1.4;
  color: var(--feat-ink);
}
.np_feat_faq_list summary::-webkit-details-marker {
  display: none;
}
.np_feat_faq_list summary span {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: #EEF3FB;
}
.np_feat_faq_list summary span::before,
.np_feat_faq_list summary span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  margin: -1px 0 0 -5.5px;
  border-radius: 2px;
  background: #2B6CF0;
  transition: transform 300ms ease;
}
.np_feat_faq_list summary span::after {
  transform: rotate(90deg);
}
.np_feat_faq_list details[open] summary span {
  background: #2B6CF0;
}
.np_feat_faq_list details[open] summary span::before,
.np_feat_faq_list details[open] summary span::after {
  background: #FFFFFF;
}
.np_feat_faq_list details[open] summary span::after {
  transform: rotate(0deg);
}
.np_feat_faq_list details p {
  margin: 0;
  padding: 0 26px 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--feat-body);
}

/* Closing CTA */
.np_feat_cta_section {
  padding: 0 0 90px;
}
.np_feat_cta {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 70px 60px;
  background: linear-gradient(120deg, #0D2366 0%, #16357F 60%, #2B6CF0 100%);
}
.np_feat_cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.np_feat_cta_copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.np_feat_cta h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  color: #FFFFFF;
}
.np_feat_cta p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: #C3CEE3;
}

@media (max-width: 991px) {
  .np_feat_hero {
    padding: 150px 0 70px;
  }
  .np_feat_hero_grid,
  .np_feat_block_grid,
  .np_feat_faq_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .np_feat_block.is_flipped .np_feat_block_copy {
    order: 0;
  }
  .np_feat_types,
  .np_feat_grid,
  .np_feat_steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .np_feat_section,
  .np_feat_block {
    padding: 60px 0;
  }
  .np_feat_cta {
    padding: 44px 28px;
  }
}
@media (max-width: 575px) {
  .np_feat_types,
  .np_feat_grid,
  .np_feat_steps,
  .np_feat_points {
    grid-template-columns: minmax(0, 1fr);
  }
  .np_feat_trust ul,
  .np_feat_stats ul {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Definition block on solution pages (kept for search/answer engines). */
.np_feat_definition {
  padding-top: 0;
}
.np_feat_def_card {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 46px;
  border-radius: 24px;
  border: 1px solid #E3EAF5;
  background: #F6F9FF;
}
.np_feat_def_card .np_feat_h2 {
  font-size: clamp(24px, 2.2vw, 32px);
}
.np_feat_def_card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--feat-body);
}
.np_feat_hero_media .np_three_scene {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
@media (max-width: 575px) {
  .np_feat_def_card {
    padding: 28px 22px;
  }
}

/* ==========================================================================
   Hero test (/hero-test) — globe concept
   Everything is scoped under .np_hg_page so the template's own styles on the
   rest of the site are untouched.
   ========================================================================== */
.np_hg_page {
  --np-hg-bg: #020a1d;
  --np-hg-bg-2: #041433;
  --np-hg-ink: #eef4ff;
  --np-hg-muted: #9ab0cf;
  --np-hg-cyan: #6fd0fa;
  --np-hg-line: rgba(150, 185, 235, 0.16);
  /* --np-hg-hanken comes from next/font on the page wrapper. */
  --np-hg-font: var(--np-hg-hanken), "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--np-hg-bg);
  color: var(--np-hg-ink);
  font-family: var(--np-hg-font);
  -webkit-font-smoothing: antialiased;
}
.np_hg_page img {
  max-width: 100%;
  display: block;
}
.np_hg_page a {
  color: inherit;
  text-decoration: none;
}
.np_hg_page :focus-visible {
  outline: 2px solid #3395ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- nav --- */
.np_hg_nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px clamp(20px, 5vw, 72px);
}
.np_hg_page .np_hg_brand img {
  height: 52px;
  width: auto;
}
.np_hg_nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--np-hg-muted);
}
.np_hg_nav ul a:hover {
  color: var(--np-hg-ink);
}
.np_hg_actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.np_hg_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font: 600 15px/1 var(--np-hg-font);
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.np_hg_btn_primary {
  background-image: linear-gradient(90deg, #2B6CF0 0%, #3FA9FF 100%);
  color: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(51, 149, 255, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.np_hg_btn_primary:hover {
  background-image: linear-gradient(90deg, #3A7BFF 0%, #5CC8FF 100%);
  color: #ffffff;
}
.np_hg_btn_ghost {
  border: 1px solid var(--np-hg-line);
  color: var(--np-hg-ink);
  background: rgba(4, 20, 51, 0.35);
  backdrop-filter: blur(6px);
}
.np_hg_btn_ghost:hover {
  border-color: rgba(150, 185, 235, 0.45);
}
.np_hg_nav .np_hg_btn {
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
}
.np_hg_login {
  font-size: 15px;
  font-weight: 500;
  color: var(--np-hg-muted);
  padding: 0 8px;
}

/* --- hero --- */
.np_hg_hero {
  position: relative;
  min-height: max(720px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 90% at 75% 45%, var(--np-hg-bg-2) 0%, var(--np-hg-bg) 60%);
}
/* The stage starts at 38% so the copy keeps a clean, unlit column on the left. */
.np_hg_stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38%;
  right: 0;
  z-index: 0;
}
.np_hg_stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
.np_hg_stage canvas {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
/* Fades the clip into the page instead of cutting it off. */
.np_hg_hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--np-hg-bg));
}

.np_hg_copy {
  position: relative;
  z-index: 10;
  max-width: 1440px;
  margin: 0 auto;
  min-height: max(720px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px clamp(20px, 5vw, 72px) 96px;
}
.np_hg_page .np_hg_copy h1 {
  font-family: var(--np-hg-font);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.032em;
  max-width: 8.4em;
  color: var(--np-hg-ink);
  margin: 0;
}
.np_hg_page .np_hg_lede {
  margin: 28px 0 0;
  max-width: 29em;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--np-hg-muted);
}
.np_hg_cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.np_hg_parent {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--np-hg-line);
  max-width: 420px;
}
.np_hg_parent span {
  font-size: 14px;
  color: var(--np-hg-muted);
  line-height: 1.4;
}
.np_hg_page .np_hg_parent img {
  height: 46px;
  width: auto;
}

/* --- responsive --- */
@media (max-width: 1180px) {
  .np_hg_nav ul {
    display: none;
  }
}
@media (max-width: 900px) {
  .np_hg_hero {
    min-height: auto;
  }
  .np_hg_stage {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: 62svh;
    min-height: 420px;
  }
  .np_hg_stage video {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .np_hg_copy {
    min-height: auto;
    justify-content: flex-start;
    padding-top: calc(max(420px, 62svh) - 40px);
    padding-bottom: 64px;
  }
  .np_hg_login {
    display: none;
  }
  .np_hg_page .np_hg_brand img {
    height: 40px;
  }
}
@media (max-width: 520px) {
  .np_hg_nav .np_hg_btn {
    display: none;
  }
  .np_hg_cta .np_hg_btn {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .np_hg_btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Equal-height card rows
   The template's .service_block sizes to its own copy, so a row of cards with
   uneven text ends up ragged. Rows marked .np_cards_row stretch every card to
   the tallest one and pin "Read More" to the bottom edge.
   -------------------------------------------------------------------------- */
.np_cards_row > [class*="col-"] {
  display: flex;
}
.np_cards_row > [class*="col-"] > .service_block {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.np_cards_row .service_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.np_cards_row .service_content .btn-link {
  margin-top: auto;
}

/* Dark hero: the accent gradient reads brighter on navy. */
.np_hg_hero .np_accent {
  background-image: linear-gradient(90deg, #2F8BFF 0%, #5CC8FF 100%);
}

/* --------------------------------------------------------------------------
   Globe hero on the homepage
   Same hero as /hero-test, but under the site's own sticky header and with the
   card-network marks instead of the parent-company strip.
   -------------------------------------------------------------------------- */
.np_hg_hero.is_home .np_hg_copy {
  padding-top: 170px;
}
.np_hg_trust {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--np-hg-line);
  max-width: 520px;
}
.np_hg_trust_text {
  font-size: 14px;
  color: var(--np-hg-muted);
}
.np_hg_trust .hero_trust_marks {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .np_hg_hero.is_home .np_hg_copy {
    padding-top: calc(max(420px, 62svh) - 40px);
  }
}

/* Card-network marks in their own brand colours on the hero's navy. */
.np_hg_trust .hero_trust_marks li {
  color: rgba(255, 255, 255, 0.9);
}
.np_hg_trust .hero_trust_marks li.tm_visa {
  color: #4a90ff;
  text-shadow: 0 0 18px rgba(74, 144, 255, 0.35);
}
.np_hg_trust .tm_mc_circles span:first-child {
  background: #eb001b;
}
.np_hg_trust .tm_mc_circles span:last-child {
  background: #f79e1b;
  opacity: 0.92;
}
.np_hg_trust .hero_trust_marks li.tm_mastercard {
  color: #ffffff;
}
.np_hg_trust .tm_pci_mark {
  color: #3fa9ff;
}
.np_hg_trust .tm_pci_text {
  color: #ffffff;
}
.np_hg_trust .tm_pci_text small {
  color: #7fd0a8;
}

/* --------------------------------------------------------------------------
   Icons on dark service cards
   The template's icons are drawn in brand blue on a thin blue outline, which
   disappears against the navy card. They get the gradient tile and a white
   glyph instead, matching the icons on the feature pages.
   -------------------------------------------------------------------------- */
.service_block .service_icon {
  background-image: none;
  border-radius: 15px;
  background: linear-gradient(135deg, #2B6CF0 0%, #3FA9FF 100%);
  box-shadow: 0 12px 24px -12px rgba(51, 149, 255, 0.8);
}
.service_block .service_icon img {
  filter: brightness(0) invert(1);
}

/* The marks sit alone under the hero copy, so they carry more size and air
   than they did in the old cramped hero column. */
.np_hg_trust {
  max-width: 620px;
}
.np_hg_trust .np_hg_trust_text {
  font-size: 15px;
}
.np_hg_trust .hero_trust_marks {
  gap: 20px 48px;
  margin-top: 22px;
}
.np_hg_trust .hero_trust_marks li.tm_visa {
  font-size: 36px;
}
.np_hg_trust .tm_mc_circles {
  width: 58px;
  height: 36px;
}
.np_hg_trust .tm_mc_circles span {
  width: 36px;
  height: 36px;
}
.np_hg_trust .hero_trust_marks li.tm_mastercard {
  gap: 11px;
  font-size: 16px;
}
.np_hg_trust .tm_pci {
  gap: 10px;
}
.np_hg_trust .tm_pci_mark {
  font-size: 30px;
}
.np_hg_trust .tm_pci_text {
  font-size: 20px;
}
.np_hg_trust .tm_pci_text small {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Connect steps: photo reveals on hover
   The photo fills the step card itself rather than hanging below it, so
   nothing overlaps the next section and the row never shifts.
   -------------------------------------------------------------------------- */
.np_step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.np_step:hover {
  border-color: #3FA9FF;
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -24px rgba(11, 33, 84, 0.55);
}
.np_step .block_number,
.np_step .iconbox_content {
  position: relative;
  z-index: 2;
}
.np_step_shot {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.np_step_shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.6s ease;
}
/* Scrim, so the step number and title stay readable over the photo. */
.np_step_shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 46, 0.6) 0%, rgba(4, 16, 46, 0.86) 100%);
}
.np_step:hover .np_step_shot {
  opacity: 1;
}
.np_step:hover .np_step_shot img {
  transform: scale(1);
}
.np_step:hover .iconbox_title {
  color: #FFFFFF;
}
.np_step:hover .block_number {
  background: linear-gradient(to right, #FFFFFF 0%, #5CC8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (hover: none) {
  .np_step_shot {
    opacity: 1;
  }
  .np_step .iconbox_title {
    color: #FFFFFF;
  }
  .np_step .block_number {
    background: linear-gradient(to right, #FFFFFF 0%, #5CC8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Connect diagram wires
   One pulse makes the whole journey in order — logo to step 1, step 1 to
   step 2, step 2 to step 3 — on a 7.2s cycle of four 1.8s phases (three moves
   and a beat of rest). Every delay below is a multiple of that phase.
   -------------------------------------------------------------------------- */
.np_wires {
  /* Pulled out to the row's gutters so each wire lands on a card's centre. */
  margin: -18px -15px -70px;
  pointer-events: none;
}
.np_wires svg {
  display: block;
  width: 100%;
  height: 230px;
  overflow: visible;
}
.np_wire_base {
  fill: none;
  stroke: #C9DCF7;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.np_wire_pulse {
  fill: none;
  stroke: url(#np_wire_pulse_grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength is normalised to 1000, so the dash is ~12% of the wire. */
  stroke-dasharray: 120 880;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 5px rgba(51, 149, 255, 0.55));
  animation: np_wire_run 7.2s linear infinite;
}
@keyframes np_wire_run {
  0% {
    stroke-dashoffset: 1000;
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  26%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* Hop from one step card to the next, sitting in the row's gutter. */
.np_step_col {
  position: relative;
}
.np_step_hop {
  position: absolute;
  top: 50%;
  left: calc(100% - 15px);
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
  background: #C9DCF7;
  overflow: hidden;
  z-index: 2;
}
.np_step_hop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(51, 149, 255, 0) 0%, #3395FF 60%, #5CC8FF 100%);
  box-shadow: 0 0 8px rgba(51, 149, 255, 0.8);
  animation: np_hop_run 7.2s linear infinite;
  animation-delay: inherit;
}
@keyframes np_hop_run {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  25% {
    transform: translateX(170%);
    opacity: 1;
  }
  26%,
  100% {
    transform: translateX(170%);
    opacity: 0;
  }
}

.np_wire_dot {
  fill: #3395FF;
  animation: np_wire_land 7.2s ease-in-out infinite;
}
@keyframes np_wire_land {
  0%,
  10% {
    opacity: 0.25;
    r: 3;
  }
  20% {
    opacity: 1;
    r: 5.5;
  }
  40%,
  100% {
    opacity: 0.25;
    r: 3;
  }
}
@media (max-width: 991px) {
  .np_wires,
  .np_step_hop {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .np_wire_pulse {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
  .np_wire_dot,
  .np_step_hop::after {
    animation: none;
  }
}

/* Each step card lights up as the pulse reaches it, showing exactly what a
   hover shows — the photo behind a navy scrim. Children read the delay from
   the card through `animation-delay: inherit`, so one inline delay drives the
   whole card. Hovering cancels the loop so the pointer always wins. */
.np_step {
  animation: np_step_live 7.2s ease-in-out infinite;
}
.np_step_shot {
  animation: np_step_shot_live 7.2s ease-in-out infinite;
  animation-delay: inherit;
}
.np_step_shot img {
  animation: np_step_zoom_live 7.2s ease-in-out infinite;
  animation-delay: inherit;
}
.np_step .iconbox_title {
  animation: np_step_title_live 7.2s ease-in-out infinite;
  animation-delay: inherit;
}
.np_step .block_number {
  animation: np_step_number_live 7.2s ease-in-out infinite;
  animation-delay: inherit;
}
.np_step:hover,
.np_step:hover .np_step_shot,
.np_step:hover .np_step_shot img,
.np_step:hover .iconbox_title,
.np_step:hover .block_number {
  animation: none;
}
@keyframes np_step_live {
  0%,
  3% {
    border-color: var(--np-border);
    box-shadow: 0 12px 30px -14px rgba(13, 35, 102, 0.18);
    transform: translateY(0);
  }
  10%,
  25% {
    border-color: #3FA9FF;
    box-shadow: 0 20px 40px -18px rgba(51, 149, 255, 0.5);
    transform: translateY(-5px);
  }
  34%,
  100% {
    border-color: var(--np-border);
    box-shadow: 0 12px 30px -14px rgba(13, 35, 102, 0.18);
    transform: translateY(0);
  }
}
@keyframes np_step_shot_live {
  0%,
  3% {
    opacity: 0;
  }
  10%,
  25% {
    opacity: 1;
  }
  34%,
  100% {
    opacity: 0;
  }
}
@keyframes np_step_zoom_live {
  0%,
  3% {
    transform: scale(1.08);
  }
  25% {
    transform: scale(1);
  }
  34%,
  100% {
    transform: scale(1.08);
  }
}
@keyframes np_step_title_live {
  0%,
  4% {
    color: #0B2154;
  }
  10%,
  25% {
    color: #FFFFFF;
  }
  33%,
  100% {
    color: #0B2154;
  }
}
@keyframes np_step_number_live {
  0%,
  4% {
    background-image: linear-gradient(to right, #2B6CF0 0%, #0B2154 100%);
  }
  10%,
  25% {
    background-image: linear-gradient(to right, #FFFFFF 0%, #5CC8FF 100%);
  }
  33%,
  100% {
    background-image: linear-gradient(to right, #2B6CF0 0%, #0B2154 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .np_step,
  .np_step_shot,
  .np_step_shot img,
  .np_step .iconbox_title,
  .np_step .block_number {
    animation: none;
  }
}



/* --------------------------------------------------------------------------
   API documentation (/api-docs)
   -------------------------------------------------------------------------- */
.np_docs_grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 50px;
  padding: 70px 0 20px;
  align-items: start;
}
.np_docs_nav {
  position: sticky;
  top: 110px;
}
.np_docs_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--np-border);
}
.np_docs_nav a {
  display: block;
  padding: 8px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--feat-muted);
  font-weight: 500;
  font-size: 15px;
}
.np_docs_nav a:hover {
  color: var(--np-blue-600);
  border-left-color: var(--np-blue-600);
}
.np_docs_body > section {
  padding-bottom: 46px;
  scroll-margin-top: 110px;
}
.np_docs_body .np_feat_h2 {
  font-size: 30px;
  margin-bottom: 16px;
}
.np_docs_body h4 {
  margin: 22px 0 8px;
  font-size: 15px;
}
.np_docs_note {
  color: var(--feat-muted);
  font-size: 15px;
}
.np_docs_code {
  margin: 12px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #0B2154;
  color: #DCE9FF;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.np_docs_endpoint {
  border: 1px solid var(--np-border);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  background: #FFFFFF;
}
.np_docs_endpoint header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.np_docs_endpoint header code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  color: var(--feat-ink);
}
.np_docs_verb {
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(51, 149, 255, 0.12);
  color: var(--np-blue-600);
}
.np_docs_verb.post {
  background: rgba(15, 157, 107, 0.12);
  color: #0F9D6B;
}
.np_docs_status {
  font-size: 12px;
  font-weight: 600;
  color: #0F9D6B;
  margin-left: 6px;
}
.np_docs_table_wrap {
  overflow-x: auto;
  margin-top: 14px;
}
.np_docs_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.np_docs_table th,
.np_docs_table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--np-border);
}
.np_docs_table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--feat-muted);
}
.np_docs_table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--feat-ink);
}
.np_docs_table .is_required {
  color: #0F9D6B;
  font-weight: 600;
}
.np_docs_errors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np_docs_errors li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--np-border);
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 15px;
}
.np_docs_code_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 10px;
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  background: #FDECEA;
  color: #D2453B;
}
.np_docs_code_badge.warn {
  background: #FDF3E2;
  color: #B6791A;
}
@media (max-width: 991px) {
  .np_docs_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 40px;
  }
  .np_docs_nav {
    position: static;
  }
  .np_docs_nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    gap: 8px;
  }
  .np_docs_nav a {
    border: 1px solid var(--np-border);
    border-radius: 50px;
    padding: 6px 14px;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Forex Expo Dubai badge (temporary — remove after 23 Sep 2026)
   -------------------------------------------------------------------------- */
.np_expo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: #0D2366;
  color: #FFFFFF;
  box-shadow: 0 18px 34px -20px rgba(13, 35, 102, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  text-align: left;
}
.np_expo img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}
.np_expo_text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.np_expo_text strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.np_expo_text strong i {
  color: #3395FF;
  margin-right: 5px;
  font-size: 13px;
}
.np_expo_text small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
/* On the dark globe hero it sits above the headline. */
.np_hg_copy .np_expo {
  align-self: flex-start;
}

/* Lead form that sits in the /offer hero, in place of the usual photo. */
.np_offer_form {
  padding: 30px 30px 26px;
  border-radius: 20px;
  border: 1px solid var(--np-border);
  background: #FFFFFF;
  box-shadow: 0 30px 60px -34px rgba(13, 35, 102, 0.35);
}
.np_offer_form .np_feat_h2 {
  font-size: 26px;
  margin-bottom: 8px;
}
.np_offer_form > p {
  margin-bottom: 18px;
  color: var(--feat-muted);
  font-size: 15px;
}

/* Height the expo strip reserves at the top of the page. The strip is off
   (see components/site-header.tsx), so it reserves nothing — put 44px back
   when the markup returns, and 38px in the mobile block below. */
:root {
  --np-strip-h: 0px;
}

/* Expo announcement strip above the nav (temporary — remove after 23 Sep 2026
   together with components/expo-badge.tsx). */
.np_expo_strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 20px;
  background: linear-gradient(90deg, #0D2366 0%, #16357F 50%, #0D2366 100%);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.np_expo_strip:hover {
  color: #FFFFFF;
}
.np_expo_strip img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}
.np_expo_strip strong {
  font-weight: 700;
}
.np_expo_strip_meta {
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 13px;
}
.np_expo_strip_cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  font-size: 13px;
}
.np_expo_strip_cta i {
  font-size: 11px;
}
/* The strip owns the top of the screen: the page starts below it, and both
   the floating header and its pinned (.stricked-menu) state sit under it. */
body {
  padding-top: var(--np-strip-h);
}
.site_header {
  top: var(--np-strip-h);
}
.stricked-menu {
  top: var(--np-strip-h);
}
@media (max-width: 767px) {
  .np_expo_strip {
    gap: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .np_expo_strip_meta,
  .np_expo_strip_cta {
    display: none;
  }
}

/* Larger navbar wordmark — applies to both the dark-hero and sticky-white
   states (the sticky clone lives inside .site_header). Kept at the template
   default on small phones so it never overflows the narrow logo column. */
@media (min-width: 576px) {
  .site_header .site_logo .site_link {
    max-width: 175px;
  }
}