/* ==============================================
   DepiPay brand overrides
   ============================================== */

/* --- Phone UI bar chart grow animation --- */
.cp-phone-frame__ui [style*="align-items:flex-end"] > div > div {
  animation: cp-bar-grow-up 1s ease-out forwards;
  transform-origin: bottom;
}
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(1) > div { animation-delay: 0.8s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(2) > div { animation-delay: 0.9s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(3) > div { animation-delay: 1.0s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(4) > div { animation-delay: 1.1s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(5) > div { animation-delay: 1.2s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(6) > div { animation-delay: 1.3s; }
.cp-phone-frame__ui [style*="align-items:flex-end"] > div:nth-child(7) > div { animation-delay: 1.4s; }
@keyframes cp-bar-grow-up {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* --- Phone coin rows fade in --- */
.cp-phone-coin {
  animation: cp-coin-fade 0.4s ease-out both;
}
.cp-phone-coin:nth-child(1) { animation-delay: 1.5s; }
.cp-phone-coin:nth-child(2) { animation-delay: 1.7s; }
.cp-phone-coin:nth-child(3) { animation-delay: 1.9s; }
@keyframes cp-coin-fade {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Phone frame with UI on top --- */
.cp-phone-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}
.cp-phone-frame__bg {
  width: 100%;
  height: auto;
  display: block;
}
.cp-phone-frame__ui {
  /* The original hand-built placeholder app screen is hidden; the real DePi
     wallet UI (dashboard / invoice / withdraw / activity) is now shown via the
     .cp-phone-screen image dropped into the iPhone cutout below. */
  display: none !important;
}
/* DePi UI screenshot sitting inside the iPhone mockup's screen cutout. The
   inset matches the old __ui (top/left/right 12%, bottom 5%) so it lands
   exactly in the bezel's screen area; the frame's own overflow:hidden clips it. */
.cp-phone-screen {
  position: absolute;
  /* fill the iPhone mockup's actual screen glass (measured: left 5%, width
     89.5%, glass top 2.6%). height:auto keeps the screenshot's aspect (≈ the
     glass aspect) so the UI fills the glass edge-to-edge with no cropping. */
  top: 3%;
  left: 5%;
  width: 90%;
  height: auto;
  z-index: 2;
}
.cp-phone-coin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(145deg, #f8f8fa, #eeeff3 50%, #f4f5f8);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 0.7rem;
  padding: 0.45rem 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.04);
}
.cp-phone-coin img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-phone-coin__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cp-phone-coin__name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a1a1a;
}
.cp-phone-coin__sub {
  font-size: 0.5rem;
  color: #999;
  font-weight: 500;
}
.cp-phone-coin__val { display: none; }
.cp-phone-coin__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.cp-phone-coin__amt {
  font-size: 0.65rem;
  font-weight: 600;
  color: #1a1a1a;
}
.cp-phone-coin__usd {
  font-size: 0.5rem;
  color: rgba(0,0,0,0.35);
  font-weight: 500;
}

/* --- Tablet/mobile responsive fixes --- */
@media (max-width: 991px) {
  /* Hero fixes */
  .body-wrapper .section_home-hero {
    transform: translateX(0px) translateY(0px);
  }
  /* Hide floating hero elements on tablet — they overlap */
  .home-hero_bottom-left,
  .home-hero_bottom-right {
    display: none !important;
  }
  .home-hero_image {
    margin: 0 auto !important;
    max-width: 300px !important;
    width: 100% !important;
  }
  .home-hero_bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* styles.css pins this to height:70vh/44vh + overflow:hidden to corral the
       absolutely-positioned floating hero cards on desktop. Those cards are
       display:none on mobile, so the fixed short height just cropped the phone
       demo (top + bottom). Let it size to the phone instead. */
    height: auto !important;
    overflow: visible !important;
  }
  /* Fix mega menu on tablet */
  .cp-megamenu__panel {
    min-width: 400px !important;
    left: 0 !important;
    transform: translate(0, -8px) !important;
  }
  .cp-megamenu.is-open > .cp-megamenu__panel {
    transform: translate(0, 0) !important;
  }
  .cp-megamenu__grid {
    grid-template-columns: 1fr !important;
  }
  .cp-nav-right {
    display: none !important;
  }
  /* --- Mobile nav: solid dropdown panel ---
     The burger toggles `.navbar_links` (an absolute panel). It shipped with the
     page's gray background and no elevation, so it read as a transparent mess
     overlapping the hero. Make it an opaque, elevated, scrollable sheet. */
  .navbar_links.w-nav-menu {
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.16) !important;
    z-index: 9998 !important;
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1.25rem 1.5rem !important;
  }
  .navbar_link {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
  }
  /* The floating mega-menu panel can't be hovered on touch, so expand it
     inline as a plain indented link list — every destination stays reachable. */
  .cp-megamenu {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #f1f1f1 !important;
  }
  .cp-megamenu__btn {
    width: 100% !important;
    text-align: left !important;
    padding: 0.85rem 0 0.35rem !important;
    font-weight: 600 !important;
    color: #111 !important;
    font-size: 1rem !important;
  }
  .cp-megamenu__btn svg { display: none !important; }
  .cp-megamenu__panel {
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0.5rem !important;
  }
  .cp-megamenu__panel::before { display: none !important; }
  .cp-megamenu__sidebar { display: none !important; }
  .cp-megamenu__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .cp-megamenu__item {
    padding: 0.55rem 0 0.55rem 0.85rem !important;
    font-size: 0.95rem !important;
    color: #555 !important;
  }
  /* Plain top-level links (Coins, Support) — match the section headers. */
  .navbar_links .page-link-block,
  .navbar_links .page-link-wrapper {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .navbar_links .page-text-block {
    text-align: left !important;
    padding: 0.85rem 0 !important;
    font-weight: 600 !important;
    color: #111 !important;
    font-size: 1rem !important;
  }
  .cp-lang {
    display: none !important;
  }
  /* About: image on top, full width centered */
  .home-about_content {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  .home-about_left {
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-about_right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
  }
  .home-about_img {
    aspect-ratio: 1/1 !important;
    width: 80% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Solutions phone overflow fix */
  .app-intro_tab-content { overflow: visible !important; }
  .section_app-intro .cp-phone-frame { max-width: 260px !important; }
  /* Key Features: stack vertically, full width */
  .home-process_bottom {
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: stretch !important;
  }
  .home-process_card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .home-process_card._3 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Hero element spacing --- */
.home-hero_wrapper .home-hero_bottom .home-hero_bottom-left {
  align-items: flex-end;
}
.home-hero_bottom .home-hero_bottom-left .home-hero_progress {
  align-items: flex-end;
  justify-content: flex-end;
  top: 25px;
  left: -34px;
}
.home-hero_wrapper .home-hero_bottom .home-hero_bottom-right {
  left: -25px;
}
.home-hero_bottom-right .home-hero_tag .cp-hero-el--premium {
  left: -161px;
  top: 38px;
  bottom: 0px;
  right: 33px;
}

/* --- Sticky frosted-glass navbar --- */
.section_navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: transparent !important;
  border: none !important;
}
.section_navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  z-index: -1;
}
.navbar { background: transparent !important; }

/* --- Logo --- */
.navbar_logo-icon {
  max-width: 9rem !important;
  transform: translateZ(0);
  filter: brightness(0) !important;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0.78));
  mask-image: linear-gradient(135deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0.78));
}

/* --- Key Features section (home-process) --- */
.section_home-process {
  background: #f5f5f7 !important;
  padding-top: 5rem !important;
  padding-bottom: 6rem !important;
}
.home-process_bottom {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
}
.home-process_card,
.home-process_card._3 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
@media (max-width: 991px) {
  .home-process_bottom {
    flex-direction: column !important;
  }
  .home-process_card,
  .home-process_card._3 {
    flex: none !important;
    width: 100% !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.home-process_card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 0.75rem !important;
}
.home-process_card .process-card_icon {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  align-self: center;
  position: relative;
  top: 8px;
  padding-top: 0px;
}
.home-process_card .process-card_icon .w-embed {
  background: linear-gradient(145deg, #fff, #f0f0f3) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.home-process_card .process-card_title {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  align-self: start;
  margin-bottom: 0 !important;
}
.home-process_card .text-sm-2 {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  margin-top: 0.6rem;
}
/* Phone in feature sections — full width, bottom-aligned, clipped */
.feature_card.feature-image,
.feature-1_tab-img,
.app-intro_link-pane {
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 0 !important;
}
.feature_card.feature-image .cp-phone-frame,
.feature-1_tab-img .cp-phone-frame,
.app-intro_link-pane .cp-phone-frame {
  max-width: 340px !important;
  width: 100% !important;
  margin: 0 auto -2rem;
}
/* Feature cards equal height + fill grid */
.section_feature .feature_card {
  min-height: 260px !important;
}
.section_feature .feature_card.home {
  height: 100% !important;
}

/* --- About hero card (only first = Merchants) dark bg --- */
.about-hero_middle > .about-hero_card:first-child {
  background: url('dark-bg-luxury.webp') center/cover !important;
  transform: scaleX(-1);
}
.about-hero_middle > .about-hero_card:first-child > * { transform: scaleX(-1); }

/* --- About section --- */
.home-about_left { max-width: 38rem !important; }
.cp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  margin-top: 2rem;
}
.cp-stat {
  padding: 1.4rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 6.5rem;
}
.cp-stat__num {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: #0c0407;
  background: linear-gradient(180deg, rgba(12,4,7,0.55) 10%, rgba(12,4,7,0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.cp-stat__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.35;
}

.cp-stat__unit { font-size: 0.55em; letter-spacing: 0.06em; font-weight: 500; }
.section_home-about .home-about_wrapper .home-about_content {
  align-items: center !important;
  transform: translateX(0px) translateY(0px);
}
.home-about_right { display: flex !important; align-items: center; }
.home-about_img {
  background: url('dark-bg-luxury.webp') center/cover !important;
  border-radius: 1.5rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}
.home-about_img img {
  position: relative;
  z-index: 1;
}

/* --- Hero product showcase --- */
.cp-hero-showcase {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-bottom: 2rem;
  align-items: center;
}
.cp-hero-showcase__left,
.cp-hero-showcase__right { display: flex; flex-direction: column; gap: 1rem; }
.cp-hero-showcase__center { display: flex; align-items: center; justify-content: center; }
.cp-hero-globe {
  background: linear-gradient(145deg, #1a1b25, #0a0b12);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cp-hero-globe img { width: 100%; height: auto; opacity: 0.85; }

/* Hero cards */
.cp-hcard {
  background: #fff;
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}
.cp-hcard:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,0,0,0.1); }
.cp-hcard--dark { background: #1a1b25; color: #fff; }
.cp-hcard__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.cp-hcard__badge { font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.05); color: #666; }
.cp-hcard__badge--green { background: rgba(34,197,94,0.12); color: #22c55e; }
.cp-hcard__title { font-size: 0.7rem; font-weight: 500; color: rgba(0,0,0,0.45); letter-spacing: 0.02em; }
.cp-hcard--dark .cp-hcard__title { color: rgba(255,255,255,0.45); }
.cp-hcard__num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.15rem 0 0.3rem; }
.cp-hcard__chart { width: 100%; height: 35px; display: block; }

/* Transaction list */
.cp-hcard__txn { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.cp-hcard__txn:last-child { border: none; }
.cp-hcard__coin { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.cp-hcard__txn-info { flex: 1; display: flex; flex-direction: column; }
.cp-hcard__txn-name { font-size: 0.75rem; font-weight: 600; color: #1a1a1a; }
.cp-hcard__txn-sub { font-size: 0.6rem; color: #999; }
.cp-hcard__txn-amt { font-size: 0.72rem; font-weight: 600; color: #22c55e; white-space: nowrap; }

/* Coins row */
.cp-hcard__coins-row { display: flex; align-items: center; gap: -4px; margin-top: 0.5rem; }
.cp-hcard__coins-row img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1a1b25; margin-right: -6px; }
.cp-hcard__coins-more { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-left: 8px; font-weight: 500; }

/* Conversion card */
.cp-hcard__convert { display: flex; align-items: center; gap: 0.75rem; margin: 0.6rem 0 0.4rem; justify-content: center; }
.cp-hcard__convert-from, .cp-hcard__convert-to { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.cp-hcard__convert-rate { font-size: 0.6rem; color: #999; text-align: center; }

/* Float animations */
@keyframes cp-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cp-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes cp-float-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cp-float-4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --- Phone mockup --- */
.cp-phone {
  width: 280px;
  margin: 0 auto;
  background: #1a1b25;
  border-radius: 2.5rem;
  padding: 1rem 1.25rem 1.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.cp-phone__notch {
  width: 100px; height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  margin: -1rem auto 1rem;
}
.cp-phone__header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 1.2rem;
}
.cp-phone__brand { color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }
.cp-phone__balance { margin-bottom: 1.2rem; }
.cp-phone__balance-label { font-size: 0.6rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.cp-phone__balance-num { font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.cp-phone__balance-change { font-size: 0.6rem; color: #22c55e; font-weight: 500; margin-top: 0.15rem; }
.cp-phone__coins { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.cp-phone__coin-row {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 0.75rem; padding: 0.5rem 0.6rem;
}
.cp-phone__coin-row img { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.cp-phone__coin-row div { flex: 1; display: flex; flex-direction: column; }
.cp-phone__coin-name { font-size: 0.7rem; color: #fff; font-weight: 600; }
.cp-phone__coin-sub { font-size: 0.55rem; color: rgba(255,255,255,0.4); }
.cp-phone__coin-val { font-size: 0.7rem; color: #fff; font-weight: 600; }
.cp-phone__actions { display: flex; gap: 0.5rem; }
.cp-phone__action {
  flex: 1; text-align: center;
  font-size: 0.65rem; font-weight: 600;
  padding: 0.5rem; border-radius: 0.6rem;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  cursor: pointer; transition: background 0.2s;
}
.cp-phone__action:hover { background: rgba(255,255,255,0.1); }
.cp-phone__action--primary { background: #387eff; color: #fff; }
.cp-phone__action--primary:hover { background: #2563eb; }

/* --- Hero gallery (unused, kept for reference) --- */
.cp-hero-gallery {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.cp-hero-gallery__main {
  width: 100%;
  max-width: 700px;
  background: linear-gradient(145deg, #1a1b25 0%, #0a0b12 60%, #1a1b25 100%);
  border-radius: 1.5rem;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cp-hero-gallery__main img {
  width: 100%;
  height: auto;
  opacity: 0.85;
}
.cp-hero-gallery__stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
}
.cp-hero-stat {
  text-align: center;
}
.cp-hero-stat__num {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0c0407;
  line-height: 1;
  margin-bottom: 0.35rem;
  background: linear-gradient(180deg, rgba(12,4,7,0.55) 10%, rgba(12,4,7,0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cp-hero-stat__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  line-height: 1.35;
}

/* --- Neutralize hero card wrappers (they add duplicate backgrounds) --- */
.home-hero_progress,
.home-hero_tag,
.home-hero_tag.black-tag,
.home-hero_txn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.home-hero_tag .tag-price_top,
.home-hero_tag .tag-price_bottom { display: none !important; }
/* Pull elements closer to phone */
.home-hero_bottom-left { padding-right: 1rem !important; }
.home-hero_bottom-right { padding-left: 1rem !important; }

/* --- Hero premium floating elements --- */
.cp-hero-el {
  border-radius: 1rem;
  padding: 0.85rem 1rem;
}
.cp-hero-el--premium {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(56,126,255,0.06) 0%, transparent 50%),
    linear-gradient(145deg, #1c2233 0%, #0c0f1a 50%, #141620 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.cp-hero-el--premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.012) 39px, rgba(255,255,255,0.012) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.012) 39px, rgba(255,255,255,0.012) 40px);
  pointer-events: none;
}
.cp-hero-el--silver {
  background: linear-gradient(145deg, #f8f8fa 0%, #eeeff3 50%, #f4f5f8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
/* Float animations for hero elements */
.home-hero_progress .cp-hero-el { animation: cp-float-1 6s ease-in-out infinite; }
.home-hero_bottom-left .home-hero_tag .cp-hero-el { animation: cp-float-2 7s ease-in-out infinite; }
.home-hero_bottom-right .home-hero_tag .cp-hero-el { animation: cp-float-3 5.5s ease-in-out infinite; }
.home-hero_txn { animation: cp-float-4 8s ease-in-out infinite; }

/* --- Button arrow hover --- */
.cp-arrow-slider {
  transform: translate3d(-100%, 0px, 0px);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.primary-button-black:hover .cp-arrow-slider,
.primary-button-white:hover .cp-arrow-slider {
  transform: translate3d(0%, 0px, 0px);
}

/* --- Hero buttons fully rounded --- */
.primary-button-black, .primary-button-white { border-radius: 9999px !important; }

/* --- Coin grid icons centering --- */
.partners_logo img { display: block; margin: auto; }
.partners_logos-wrapper { grid-template-columns: repeat(8, 1fr) !important; }

/* --- Page-level horizontal-overflow guard ---
   Catch-all for any element that renders wider than the viewport on mobile
   (expanded feature-link rows, footer columns, etc.). `clip` on the content
   wrapper (NOT <body>) avoids the body→viewport overflow propagation that
   vertically cropped the hero, and — unlike `hidden` — does not create a
   scroll container, so the position:sticky navbar keeps working. */
.body-wrapper { overflow-x: clip; max-width: 100%; }
/* Kill horizontal overscroll/rubber-band on mobile without clipping <body>
   itself (which would break the position:sticky navbar). */
html, body { overscroll-behavior-x: none; max-width: 100%; }

/* --- Marquee clipping ---
   The three duplicated-rail marquees (trusted-brands, testimonials, partner
   logos) are intentionally far wider than the viewport and scroll via a
   translateX on the rail. Their wrappers shipped WITHOUT `overflow:hidden`,
   so on a narrow (mobile) viewport the full ~1500px rail spilled out, widened
   the whole page, and shoved the centered hero/buttons/phone off to the right
   and off-screen. Clipping each wrapper is both the page-overflow fix and the
   correct marquee window. */
.trusted-brands-bottom,
.testimonial_bottom,
.partners_logos { overflow: hidden !important; }

/* --- Trusted brands section --- */
.section_trusted-brands { margin-top: -3rem !important; }
.trusted-brands-top { padding-bottom: 2rem !important; }
.trusted-brands-top .text-lg_2 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem !important;
  font-weight: 500;
  background: linear-gradient(135deg, #1a1a1a 0%, #888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.trusted-brands-img-div { margin-right: 1.5rem !important; }
.trusted-brands-icons .trusted-brands-img {
  filter: brightness(0);
  opacity: 0.45;
  max-height: 32px;
  width: auto;
}
.trusted-brands-icons .trusted-brands-img.cp-praxis {
  max-height: 20px;
}
.trusted-brands-icons .trusted-brands-img.cp-betconstruct {
  max-height: 38px;
}

/* --- Hide ALL commerce elements --- */
.nav-cart-wrapper,
.w-commerce-commercecartcontainerwrapper,
.w-commerce-commercecartcontainer,
.w-commerce-commercecartwrapper,
[data-node-type="commerce-cart-wrapper"],
[data-node-type="commerce-cart-container-wrapper"],
.cart-block,
.w-commerce-commercecartformwrapper,
.w-commerce-commercecartemptystate { display: none !important; }

/* --- Nav chevrons (Platform, Resources, EN) --- */
.cp-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.cp-nav-item:hover .cp-chevron { transform: rotate(180deg); }
.cp-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 7px;
  height: 4px;
  margin-top: 2px;
}

/* --- Nav right: Log In + Sign Up --- */
.cp-nav-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.cp-login-link {
  text-decoration: none;
  color: #0c0407;
  transition: opacity 0.2s;
}
.cp-login-link:hover { opacity: 0.6; }

/* --- Hero app icon --- */
.cp-hero-icon {
  position: relative;
  background: #1A1B25;
  border-radius: 1.5rem;
  width: 5.625rem;
  height: 5.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  margin-bottom: .875rem;
  overflow: hidden;
  box-shadow: 1px 3px 6px #00000042, 4px 10px 11px #00000038,
              9px 23px 15px #00000021, 16px 41px 18px #0000000a,
              24px 64px 19px #0000;
}
.cp-hero-icon img {
  width: 40%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,1));
  mask-image: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,1));
}

/* --- Hero icon + badge hover --- */
.cp-hero-icon {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cp-hero-icon:hover {
  transform: scale(1.06);
  box-shadow: 1px 3px 8px #00000050, 4px 12px 14px #00000045,
              9px 25px 18px #00000028, 16px 43px 20px #00000012,
              24px 66px 22px #00000005;
}
.home-hero_top > .section-title {
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.home-hero_top > .section-title:hover {
  background-color: #ffffffe0;
  box-shadow: 0 4px 8px -2px #00000030, 0 0 0 1px #0000001a;
  transform: translateY(-1px);
}

/* --- Hero heading tighter line-height --- */
.home-hero_headline .gsap_split_line { line-height: 1.1; }

/* --- Testimonials softer --- */
.testimonial_card-text .text-lg { font-weight: 300 !important; color: #444 !important; font-size: 0.85rem !important; line-height: 1.5 !important; }
.testimonial_card-info-text .text-base { font-weight: 500 !important; color: #222 !important; font-size: 0.85rem !important; }
.testimonial_card-info-text .text-sm { color: #888 !important; }

/* --- Solutions icons: dark premium background with glow --- */
.section_app-intro .app-intro_link-icon {
  background: linear-gradient(145deg, #f5f6f8 0%, #ecedf2 60%, #f2f3f6 100%) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.06);
}
.section_app-intro .svg_deafult-color svg { stroke: #333 !important; fill: none !important; }

/* --- Infographic grid --- */
.cp-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.cp-info-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cp-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.cp-info-card--wide { grid-column: span 2; }
.cp-info-card--dark { background: #1a1b25; color: #fff; border: none; }
.cp-info-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.cp-info-card__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(110,163,255,0.1); display: flex; align-items: center; justify-content: center;
}
.cp-info-card--dark .cp-info-card__icon { background: rgba(110,163,255,0.15); }
.cp-info-card__icon--green { background: rgba(34,197,94,0.1); }
.cp-info-card__icon--amber { background: rgba(245,158,11,0.1); }
.cp-info-card__label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(0,0,0,0.35);
}
.cp-info-card--dark .cp-info-card__label { color: rgba(255,255,255,0.4); }
.cp-info-card__num {
  font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.25rem;
}
.cp-info-card__sub { font-size: 0.72rem; color: rgba(0,0,0,0.4); }
.cp-info-card--dark .cp-info-card__sub { color: rgba(255,255,255,0.4); }
.cp-info-card__bar {
  height: 4px; background: rgba(0,0,0,0.06); border-radius: 2px; margin-top: 0.75rem; overflow: hidden;
}
.cp-info-card--dark .cp-info-card__bar { background: rgba(255,255,255,0.1); }
.cp-info-card__bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #6ea3ff, #387eff);
  animation: cp-bar-grow 2s ease-out forwards;
}
.cp-info-card__bar-fill--amber { background: linear-gradient(90deg, #f59e0b, #d97706); }
@keyframes cp-bar-grow { from { width: 0; } }

/* --- No force-visible hacks — let IX2/IX3 handle animations natively --- */

/* --- FAQ fixes --- */
[aria-expanded="false"] .faq_line-1 { transform: rotateZ(0deg) !important; }
[aria-expanded="false"] .faq_line-2 { transform: rotateZ(90deg) !important; }
.faq_ques-text, .faq_item { white-space: normal !important; }
.faq_icon-wrapper { background-color: transparent !important; border: 1.5px solid #ccc !important; transition: background-color 0.25s ease, border-color 0.25s ease; }
.faq_icon-wrapper .faq_line-1, .faq_icon-wrapper .faq_line-2 { background-color: #999 !important; transition: background-color 0.25s ease; }
.faq_item:hover .faq_icon-wrapper { background-color: transparent !important; border-color: #333 !important; }
.faq_item:hover .faq_icon-wrapper .faq_line-1, .faq_item:hover .faq_icon-wrapper .faq_line-2 { background-color: #333 !important; }

/* ---------------------------------------------------------------------------
   Mobile: show the demo phone in full inside the "industry"/feature sections.
   The desktop treatment bottom-aligns the phone in an overflow:hidden box with
   a -2rem margin (a deliberate "phone peeking from a card" peek). On mobile the
   box is shorter than the phone, so it clipped the demo at BOTH top and bottom.
   These rules live at the end of the file so they win over the base
   .feature-1_tab-img / .app-intro_link-pane rules by source order.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Center the phone in its column and stop clipping it. The phone fits the
     column height — it was only cut because of flex-end + overflow:hidden +
     the -2rem peek margin. (Do NOT touch the .w-tabs/.w-tab-content heights or
     the tab panes overlap.) */
  .feature_card.feature-image,
  .feature-1_tab-img,
  .app-intro_link-pane {
    overflow: visible !important;
    align-items: center !important;
  }
  .feature_card.feature-image .cp-phone-frame,
  .feature-1_tab-img .cp-phone-frame,
  .app-intro_link-pane .cp-phone-frame {
    margin: 0 auto !important;
  }
}

/* Mobile: shrink the in-section demo phones so they don't overflow / dominate
   the column. The hero phone (.home-hero_image .cp-phone-frame) is intentionally
   left at full size — only these three feature/app-intro mockups are reduced. */
@media (max-width: 767px) {
  .feature_card.feature-image .cp-phone-frame,
  .feature-1_tab-img .cp-phone-frame,
  .app-intro_link-pane .cp-phone-frame {
    max-width: 200px !important;
  }
}

/* ===========================================================================
   Mobile compacting — on phones the "Merchant Tools & Services", "Key Benefits
   That Set Us Apart", and "Crypto payment solutions tailored for your industry"
   sections were too tall and loosely spaced (5rem section gaps, 3rem header
   margins, forced 260px card height, 2-up cramped card grid). Tighten stacking,
   padding, gaps and headings so the content reads compact.
   =========================================================================== */
@media (max-width: 767px) {
  /* Tighter section headings + spacing for the three blocks */
  .section_feature .headling-h3,
  .section_feature-1 .headling-h3,
  .section_app-intro .headling-h3 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  .section_feature,
  .section_feature-1,
  .section_app-intro {
    margin-bottom: 3rem !important;
  }

  /* --- Merchant Tools & Services --- */
  .feature_top { grid-row-gap: 0.6rem !important; }
  .feature_bottom.home {
    grid-template-columns: 1fr !important;
    grid-row-gap: 0.75rem !important;
    grid-column-gap: 0.75rem !important;
    margin-top: 1.5rem !important;
  }
  .section_feature .feature_card {
    min-height: 0 !important;
  }
  /* Text cards only — leave the phone-mockup card (.feature-image) padding
     untouched so the frame keeps its bottom alignment. */
  .section_feature .feature_card.home {
    grid-row-gap: 0.75rem !important;
    padding: 1.1rem 1.1rem 1.25rem !important;
  }

  /* --- Key Benefits That Set Us Apart --- */
  .feature-1_header { margin-bottom: 1.5rem !important; }
  .feature-1_tab-content { margin-bottom: 1.25rem !important; }
  .feature-1_link-top { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }

  /* --- Crypto payment solutions tailored for your industry --- */
  .app-intro_top { grid-row-gap: 0.6rem !important; }
  .app-intro_bottom { margin-top: 1.5rem !important; }
  .app-intro_link { padding: 1rem !important; grid-column-gap: 0.9rem !important; }
  .app-intro_link-text { grid-row-gap: 0.35rem !important; }
}