/* BitBit Color Palette Variables */

:root {
  --chartreuse: #02ff40 !important;     /* Brighter, modern lime — energetic but clean */
  --marble: #f8f8f8 !important;         /* Lightest gray — used for backgrounds & sections */
  --olive: #3a3b40 !important;          /* Slightly earthy gray — section contrast */
  --lavender: #b8b9c2 !important;       /* Muted lavender-gray — used for softer CTAs/headlines */
  --goldenrod: #4a4b50 !important;      /* Warm dark gray — UI depth without color pop */
  --root: #1a1a1f !important;           /* Base layer — for deepest backgrounds or borders */
  --iris: #262731 !important;          /* Slightly bluish graphite — clean, tech feel */
  --currant: #2e2f34 !important;        /* Slightly reddish gray — keeps hierarchy but muted */
  --orchid: #5a5b6b !important;         /* Slight purple tint — brandable without color clash */
  --shade: #1e1f25 !important;          /* Primary text/background base — high-contrast anchor */
  --black: #000000 !important;          /* Absolute black — fallback or deep shadows */
  --white: #ffffff !important;          /* Absolute white — highlights, text on dark */
}

      /* Default behavior: clickable */
      .persona-slider {
        pointer-events: auto;
      }

      /* Disable pointer events only on mobile */
      @media (max-width: 767px) {
        .persona-slider {
          pointer-events: none;
          touch-action: none;
        }
      }

      .faq-body {
        display: none;
      }

      li::marker {
        color: #1e2330;
      }

      .swiper-wrapper {
        overflow: visible !important;
      }

      .swiper-wrapper.reg-swiper {
        overflow: visible !important;
      }

      a {
        color: inherit;
      }

      @media (min-width: 1280px) {
        li::marker {
          font-size: 1.25rem;
        }
      }

      @media (max-width: 991px) {
        li::marker {
          font-size: 1.704vw;
        }
      }

      @media (max-width: 767px) {
        li::marker {
          font-size: 1.42vw;
        }
      }

      @media (max-width: 479px) {
        li::marker {
          font-size: 3.5vw;
        }
      }

      * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -moz-font-smoothing: antialiased;
        -o-font-smoothing: antialiased;
      }

      .faq-item li::marker {
        font-size: inherit !important;
      }
    


      .arrow-prev.swiper-button-disabled {
        border-color: #1e233040;
        color: #1e233040;
      }

      .arrow-next.swiper-button-disabled {
        border-color: #1e233040;
        color: #1e233040;
      }

      .swiper-slide.swiper-slide.is-swiper-scroll {
        opacity: 100%;
        transition: opacity 1s;
        transition-timing-function: cubic-bezier(1, 0, 0, 1);
      }

      .swiper-slide.is-swiper-scroll.swiper-slide-active {
        opacity: 100%;
        transition: opacity .5s;
        transition-timing-function: cubic-bezier(1, 0, 0, 1);
      }

      .swiper-button-next,
      .swiper-button-prev {
        display: none;
      }

      .arrow-next:focus,
      .arrow-prev:focus {
        outline: none;
      }

      .swiper-wrapper.is-swiper-scroll {
        transition-timing-function: cubic-bezier(1, 0, 0, 1);
      }

      .faq-body {
        display: none;
      }

      .swiper-slide.affiliate-marketing_slide {
        height: auto;
      }
    


                  .p.is-rich-text strong {
                    font-weight: 500 !important;
                    font-variation-settings: "wght"560 !important;
                    display: inline-block;
                  }

                  .p.is-rich-text strong {
                    margin-top: 24px;
                    margin-bottom: 8px;
                  }
                


                          .apple-app-store-icon svg {
                            fill: rgb(255, 255, 255);
                          }
                        


                          .google-play-icon svg {
                            fill: rgb(255, 255, 255);
                          }
                        


          /* Make text look crisper and more legible in all browsers */
          body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
          }

          body.loading {
            visibility: hidden;
          }
          body.loaded {
            visibility: visible;
          }

          /* Focus state style for keyboard navigation for the focusable elements */
          *[tabindex]:focus-visible,
          input[type="file"]:focus-visible {
            outline: 0.125rem solid #4d65ff;
            outline-offset: 0.125rem;
          }

          /* Set color style to inherit */
          .inherit-color * {
            color: inherit;
          }

          /* Get rid of top margin on first element in any rich text element */
          .w-richtext> :not(div):first-child,
          .w-richtext>div:first-child> :first-child {
            margin-top: 0 !important;
          }

          /* Get rid of bottom margin on last element in any rich text element */
          .w-richtext>:last-child,
          .w-richtext ol li:last-child,
          .w-richtext ul li:last-child {
            margin-bottom: 0 !important;
          }

          /* Make sure containers never lose their center alignment */
          .container-medium,
          .container-small,
          .container-large {
            margin-right: auto !important;
            margin-left: auto !important;
          }

          /* 
  Make the following elements inherit typography styles from the parent and not have hardcoded values. 
  Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
  Uncomment this CSS to use it in the project. Leave this message for future hand-off.
  */
          /*
  a,
  .w-input,
  .w-select,
  .w-tab-link,
  .w-nav-link,
  .w-dropdown-btn,
  .w-dropdown-toggle,
  .w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  }
  */
          /* Apply "..." after 3 lines of text */
          .text-style-3lines {
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }

          /* Apply "..." after 2 lines of text */
          .text-style-2lines {
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          /* These classes are never overwritten */
          .hide {
            display: none !important;
          }

          @media screen and (max-width: 991px) {

            .hide,
            .hide-tablet {
              display: none !important;
            }
          }

          @media screen and (max-width: 767px) {
            .hide-mobile-landscape {
              display: none !important;
            }
          }

          @media screen and (max-width: 479px) {
            .hide-mobile {
              display: none !important;
            }
          }

          .margin-0 {
            margin: 0rem !important;
          }

          .padding-0 {
            padding: 0rem !important;
          }

          .spacing-clean {
            padding: 0rem !important;
            margin: 0rem !important;
          }

          .margin-top {
            margin-right: 0rem !important;
            margin-bottom: 0rem !important;
            margin-left: 0rem !important;
          }

          .padding-top {
            padding-right: 0rem !important;
            padding-bottom: 0rem !important;
            padding-left: 0rem !important;
          }

          .margin-right {
            margin-top: 0rem !important;
            margin-bottom: 0rem !important;
            margin-left: 0rem !important;
          }

          .padding-right {
            padding-top: 0rem !important;
            padding-bottom: 0rem !important;
            padding-left: 0rem !important;
          }

          .margin-bottom {
            margin-top: 0rem !important;
            margin-right: 0rem !important;
            margin-left: 0rem !important;
          }

          .padding-bottom {
            padding-top: 0rem !important;
            padding-right: 0rem !important;
            padding-left: 0rem !important;
          }

          .margin-left {
            margin-top: 0rem !important;
            margin-right: 0rem !important;
            margin-bottom: 0rem !important;
          }

          .padding-left {
            padding-top: 0rem !important;
            padding-right: 0rem !important;
            padding-bottom: 0rem !important;
          }

          .margin-horizontal {
            margin-top: 0rem !important;
            margin-bottom: 0rem !important;
          }

          .padding-horizontal {
            padding-top: 0rem !important;
            padding-bottom: 0rem !important;
          }

          .margin-vertical {
            margin-right: 0rem !important;
            margin-left: 0rem !important;
          }

          .padding-vertical {
            padding-right: 0rem !important;
            padding-left: 0rem !important;
          }
    
        
      @media (min-width: 992px) {
        ._w-creator-hero-img.header-size-small.is-linkin-bio {
          margin-left: 48px;
        }
      }
    
      @media (min-width: 480px) and (max-width: 991px) {
        ._w-creator-hero-img.header-size-small.is-linkin-bio {
          margin-left: 32px;
        }
      }
    
        
@font-face {
  font-family: 'Marche Super Pro';
  src: url('../fonts/marche-super-pro.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Marche Super Pro', sans-serif;
  letter-spacing: 0.02em;
}

/* Language-specific font classes */
h1.font-chinese, h2.font-chinese, h3.font-chinese, h4.font-chinese, h5.font-chinese, h6.font-chinese {
  font-family: 'Noto Sans SC', sans-serif !important;
}

h1.font-english, h2.font-english, h3.font-english, h4.font-english, h5.font-english, h6.font-english,
h1.font-spanish, h2.font-spanish, h3.font-spanish, h4.font-spanish, h5.font-spanish, h6.font-spanish {
  font-family: 'Marche Super Pro', sans-serif !important;
}
    
.h1.hero_h1 {
  letter-spacing: 0em !important;
}
        
.background-color_black {
  background-color: #000 !important;
}
        
.button-color_orchid:hover {
  background-color: #000 !important;
  color: #fff !important;
}
        
/* Feature 5 & 6 CTA Button Overrides */
.button-color_lavender {
  background-color: var(--lavender) !important;
  color: var(--shade) !important;
}
.button-color_lavender:hover {
  background-color: #000 !important;
  color: #fff !important;
}

.button-color_shade {
  background-color: var(--shade) !important;
  color: var(--white) !important;
}
.button-color_shade:hover {
  background-color: var(--lavender) !important;
  color: var(--shade) !important;
}

/* Feature 2 & 3 CTA Button Overrides */
.button-color_chartreuse {
  background-color: var(--chartreuse) !important;
  color: var(--shade) !important;
}
.button-color_chartreuse:hover {
  background-color: #000 !important;
  color: #fff !important;
}

.button-color_shade {
  background-color: var(--shade) !important;
  color: var(--white) !important;
}
.button-color_shade:hover {
  background-color: var(--chartreuse) !important;
  color: var(--shade) !important;
}

/* Feature 4 CTA Button Override */
.button-color_currant {
  background-color: var(--currant) !important;
  color: var(--white) !important;
}
.button-color_currant:hover {
  background-color: #000 !important;
  color: #fff !important;
}
        
/* Feature 4 Section Color Overrides (SOLANA STYLE) */
.section.background-color_goldenrod {
  background: linear-gradient(135deg, #00ffa3 0%, #00d1ff 50%, #dc1fff 100%) !important;
}

.section.background-color_goldenrod .h2,
.section.background-color_goldenrod .h3,
.section.background-color_goldenrod .h4 {
  color: #000000 !important; /* Jet black for sharp contrast */
}

.section.background-color_goldenrod .social_hero-subtitle,
.section.background-color_goldenrod .p {
  color: #0f0f0f !important; /* Slightly lifted black for body text */
}

.section.background-color_goldenrod .button-color_currant {
  background-color: #000000 !important;
  color: #00ffa3 !important; /* Solana green — feels on-brand */
  
}

.section.background-color_goldenrod .button-color_currant:hover {
  background-color: #00ffa3 !important;
  color: #000000 !important;
}

.img-100.margin-top-mobile {
    object-fit: contain;
    max-height: 700px;
}
        
.img-100.width_50 {
    width: 100%; 
    min-width: 90%;
    padding-left: 0px; 
}
  
.footer-cta-button-wrapper {
  margin-top: 32px;
}

.bitbit-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ff9900, #ff5e00);
  color: white;
  border-radius: 40px;
  padding: 16px 24px;
  text-decoration: none;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  min-width: 340px;
  gap: 16px;
  transition: 
    transform 0.15s ease, 
    box-shadow 0.2s ease, 
    background 0.2s ease;

  box-shadow: 
    rgba(255, 255, 255, 0.59) 0px 0.5px 0.8px -1px inset,
    rgba(255, 255, 255, 0.55) 0px 1.8px 3.3px -2px inset,
    rgba(255, 255, 255, 0.4) 0px 8px 14px -3px inset,
    rgba(255, 255, 255, 0.2) 0px -0.3px 0.2px -0.5px inset,
    rgba(255, 255, 255, 0.57) 0px -3px 1.8px -1px inset;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bitbit-button:hover {
  transform: scale(1.035);
  background: rgba(3, 100, 21, 0.3); /* Translucent orange */
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 
    rgba(255, 255, 255, 0.59) 0px 0.5px 0.8px -1px inset,
    rgba(255, 255, 255, 0.55) 0px 1.8px 3.3px -2px inset,
    rgba(255, 255, 255, 0.4) 0px 8px 14px -3px inset,
    rgba(255, 255, 255, 0.2) 0px -0.3px 0.2px -0.5px inset,
    rgba(255, 255, 255, 0.57) 0px -3px 1.8px -1px inset
}

.bitbit-button:active {
  transform: scale(0.97);
  box-shadow: 
    inset rgba(0, 0, 0, 0.2) 0px 2px 6px,
    inset rgba(255, 255, 255, 0.2) 0px -1px 1px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px;
    background: rgba(255, 138, 0, 0.4); /* Translucent orange */
    backdrop-filter: blur(20px) saturate(180%); /* slightly darker pressed feel */
}

.bitbit-button .icon {
  background: white;
  border-radius: 32px;
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bitbit-button .icon img {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
@media (max-width: 480px) {
  .bitbit-button {
    padding: 12px 20px;
    font-size: 16px;
    min-width: auto;
    width: 100%;
    max-width: 320px;
    border-radius: 32px;
  }

  .bitbit-button .icon {
    width: 64px;
    height: 64px;
    border-radius: 24px;
  }

  .bitbit-button .icon img {
    width: 40px;
    height: 40px;
  }

  .bitbit-button .text {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* Hide the announcement banner */
._w-top-banner {
  display: none !important;
}

/* Make hero area elements non-selectable */
.hero {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.hero * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fix mobile menu padding issue - override the scroll disable padding */
body {
  padding-right: 0 !important;
}

/* Footer Disclaimer Styling */
.footer-legal-p:nth-of-type(2) {
  font-size: 75% !important;
  font-style: italic !important;
}

/* Hide Solana Bridge Section */
.section.background-color_goldenrod {
  display: none !important;
}

/* Coming Soon Tooltip Styling */
.coming-soon-tooltip {
  position: relative;
  cursor: pointer;
}

.coming-soon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  margin-top: 8px;
}

.coming-soon-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  margin-top: -3px;
}

.coming-soon-tooltip:hover::after,
.coming-soon-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Mobile tooltip positioning - show on the right */
@media (max-width: 992px) {
  .coming-soon-tooltip::after {
    bottom: auto;
    top: 15px;
    right: -15px;
    transform: translateY(-50%);
    margin-bottom: 0;
    width: 100px;
  }
  
  .coming-soon-tooltip::before {
    display: none;
  }
}