/* ===== CB UPDATES 2 ===== */

/* (0) Kill horizontal scroll on adaptive — decorative absolutes (springs, curves, orbs)
   stick out past the viewport; body already has overflow:hidden but html and some sections
   don't, so on some mobile browsers the page still scrolls horizontally. */
html { overflow-x: clip; }
html, body { max-width: 100%; }
@media (max-width: 1024px) {
  .about, .our, .join, .hero { overflow-x: clip; }
}

/* (1) Mobile logo — fix squish: keep aspect ratio of the SVG */
@media (max-width: 768px) {
  .header__mobile-logo {
    width: 140px !important;
    height: 21px !important;
    aspect-ratio: 179.276 / 26.657;
    overflow: hidden;
  }
  .header__mobile-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
}

/* (6) Section titles — cashbee-style gradient sweep on hover.
   Text is wrapped in <span class="cb-reveal-word"> by the reveal script, so we
   put the gradient on those spans (clipping through inline-block children was
   rendering the parent's clipped bg as invisible). */
.about-wrap__title,
.our-wrap__title,
.join-wrap__title {
  cursor: default;
}
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg, #501F21 0%, #FFB000 11.78%, #FFD900 24.52%, #FFB000 36.54%, #501F21 50%, #2B1213 50%, #501F21 74.5%, #2B1213 100%) !important;
  background-size: 300% 100% !important;
  background-position: 100% 0;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-transition: background-position 0.5s ease !important;
  transition: background-position 0.5s ease !important;
}
.about-wrap__title:hover .cb-reveal-word,
.our-wrap__title:hover .cb-reveal-word,
.join-wrap__title:hover .cb-reveal-word {
  background-position: 0 0;
}

/* (3) About/Our/Join — animated gradient border (top → bottom cycle) */
@keyframes cb-border-flow {
  0%   { background-position: 0 0%; }
  100% { background-position: 0 200%; }
}

.about-wrap {
  background-image:
    linear-gradient(#FFFFF3, #FFFFF3),
    linear-gradient(180deg, #501F21 0%, #FFB000 25%, #FFD900 50%, #FFB000 75%, #501F21 100%) !important;
  background-size: auto, 100% 200% !important;
  background-position: 0 0, 0 0%;
  background-repeat: no-repeat, repeat-y !important;
  -webkit-animation: cb-border-flow 4s linear infinite !important;
          animation: cb-border-flow 4s linear infinite !important;
  will-change: background-position;
}

.our-wrap::before,
.join-wrap::before {
  background-image: linear-gradient(180deg, #501F21 0%, #FFB000 25%, #FFD900 50%, #FFB000 75%, #501F21 100%) !important;
  background-size: 100% 200% !important;
  background-position: 0 0%;
  background-repeat: repeat-y !important;
  -webkit-animation: cb-border-flow 4s linear infinite !important;
          animation: cb-border-flow 4s linear infinite !important;
  will-change: background-position;
}

/* (4) About orb — butterfly wing flap on scroll (replaces the float loop) */
.about-wrap__orb {
  animation: none !important;
  transform-origin: 50% 60%;
  -webkit-transform-origin: 50% 60%;
  transition: transform 0.12s linear;
  -webkit-transition: -webkit-transform 0.12s linear;
  will-change: transform;
}

/* (5) Modal — vertically centered, hidden scrollbar but still scrollable */
.modal.modal-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

#contactModal .modal__box,
.modal__box {
  margin: 0 auto !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#contactModal .modal__box::-webkit-scrollbar,
.modal__box::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

@media (max-width: 768px) {
  .modal.modal-active {
    padding: 8px 0;
  }
  #contactModal .modal__box {
    max-height: calc(100vh - 16px);
    margin: 0 8px !important;
  }
}

/* ===== END CB UPDATES 2 ===== */

/* ===== CB UPDATES 3 ===== */

/* (7) Lang switcher — uniform across header + footer:
   inactive = brand brown @ 40% opacity, hover = full opacity (no white/orange jump) */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #501F21 !important;
  opacity: 1 !important;
  cursor: default;
}
.header-wrap__lang .is-inactive,
.header__burger-lang .is-inactive,
.footer-col__lang .footer-col__lang-alt {
  color: #501F21 !important;
  opacity: 0.4 !important;
  -webkit-transition: opacity 0.25s ease, color 0.25s ease !important;
          transition: opacity 0.25s ease, color 0.25s ease !important;
}
.header-wrap__lang .is-inactive:hover,
.header__burger-lang .is-inactive:hover,
.footer-col__lang .footer-col__lang-alt:hover {
  color: #501F21 !important;
  opacity: 1 !important;
}
.header-wrap__lang .lang-sep,
.header__burger-lang span:nth-child(2),
.footer-col__lang .footer-col__lang-sep {
  color: #501F21 !important;
  opacity: 0.6 !important;
}

/* (8) About connector line — 2x thicker, brand brown */
.about-wrap__line {
  height: 2px !important;
  background: #501F21 !important;
}

/* (9) Always-shimmer for hero CashBee + .about/.our/.join titles */
@-webkit-keyframes cb-shimmer-sweep {
  0%   { background-position: 0 0; }
  100% { background-position: -200% 0; }
}
@keyframes cb-shimmer-sweep {
  0%   { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

.hero .hero-wrap__cashbee {
  background-image: linear-gradient(90deg,
    #501F21 0%, #FFB000 16%, #FFD900 33%, #FFB000 50%,
    #501F21 66%, #2B1213 83%, #501F21 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-transition: none !important;
          transition: none !important;
  -webkit-animation: cb-shimmer-sweep 4.5s linear infinite !important;
          animation: cb-shimmer-sweep 4.5s linear infinite !important;
}

.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%, #FFB000 16%, #FFD900 33%, #FFB000 50%,
    #501F21 66%, #2B1213 83%, #501F21 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-transition: none !important;
          transition: none !important;
  -webkit-animation: cb-shimmer-sweep 4.5s linear infinite !important;
          animation: cb-shimmer-sweep 4.5s linear infinite !important;
}
/* on hover keep flowing (just hand off — animation already perpetual) */
.about-wrap__title:hover .cb-reveal-word,
.our-wrap__title:hover .cb-reveal-word,
.join-wrap__title:hover .cb-reveal-word {
  background-position: 0 0;
}

/* (10) Our cards — bigger bottom breathing room */
.our-wrap__card {
  padding: 47px 56px 72px 47px !important;
  height: auto !important;
  min-height: 473px;
}
@media (max-width: 768px) {
  .our-wrap__card {
    padding: 32px 28px 56px 28px !important;
    min-height: 0;
  }
}

/* ===== END CB UPDATES 3 ===== */

/* ===== CB UPDATES 4 — refine lang colors + add about title underline ===== */

/* (7b) Lang switcher — inactive = TRUE gray (was opacity-brown which read brown-tan).
   Active stays brand brown, sep neutral gray. */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #501F21 !important;
  opacity: 1 !important;
  cursor: default;
}
.header-wrap__lang .is-inactive,
.header__burger-lang .is-inactive,
.footer-col__lang .footer-col__lang-alt {
  color: #9A9A9A !important;
  opacity: 1 !important;
  -webkit-transition: color 0.25s ease !important;
          transition: color 0.25s ease !important;
}
.header-wrap__lang .is-inactive:hover,
.header__burger-lang .is-inactive:hover,
.footer-col__lang .footer-col__lang-alt:hover {
  color: #501F21 !important;
}
.header-wrap__lang .lang-sep,
.header__burger-lang span:nth-child(2),
.footer-col__lang .footer-col__lang-sep {
  color: #9A9A9A !important;
  opacity: 1 !important;
}

/* (8b) About title — visible thick brown underline directly under the heading */
.about-wrap__title {
  position: relative;
}
.about-wrap__title::after {
  content: "";
  display: block;
  width: clamp(80px, 12vw, 160px);
  height: 3px;
  background: #501F21;
  margin-top: 12px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .about-wrap__title::after {
    width: 64px;
    height: 3px;
    margin-top: 8px;
  }
}

/* ===== END CB UPDATES 4 ===== */

/* ===== CB UPDATES 5 — shimmer that stays readable on yellow bg ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%, #501F21 38%,
    #FFD900 48%, #FFFFFF 50%, #FFD900 52%,
    #501F21 62%, #501F21 100%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 100% 0;
  -webkit-transition: none !important;
          transition: none !important;
  -webkit-animation: cb-shimmer-band 5s linear infinite !important;
          animation: cb-shimmer-band 5s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-band {
  0%   { background-position: 100% 0; }
  100% { background-position: -150% 0; }
}
@keyframes cb-shimmer-band {
  0%   { background-position: 100% 0; }
  100% { background-position: -150% 0; }
}
/* ===== END CB UPDATES 5 ===== */

/* ===== CB UPDATES 6 — hover-style gradient continuously ping-ponging ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%,
    #FFB000 11.78%,
    #FFD900 24.52%,
    #FFB000 36.54%,
    #501F21 50%,
    #2B1213 50%,
    #501F21 74.5%,
    #2B1213 100%) !important;
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-transition: none !important;
          transition: none !important;
  -webkit-animation: cb-shimmer-pingpong 6s ease-in-out infinite alternate !important;
          animation: cb-shimmer-pingpong 6s ease-in-out infinite alternate !important;
}
@-webkit-keyframes cb-shimmer-pingpong {
  0%   { background-position: 100% 0; }
  100% { background-position: 0    0; }
}
@keyframes cb-shimmer-pingpong {
  0%   { background-position: 100% 0; }
  100% { background-position: 0    0; }
}
/* ===== END CB UPDATES 6 ===== */

/* ===== CB UPDATES 7 — swap lang active/inactive + white hover ===== */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #9A9A9A !important;
  opacity: 1 !important;
  cursor: default;
}
.header-wrap__lang .is-inactive,
.header__burger-lang .is-inactive,
.footer-col__lang .footer-col__lang-alt {
  color: #501F21 !important;
  opacity: 1 !important;
  -webkit-transition: color 0.25s ease !important;
          transition: color 0.25s ease !important;
}
.header-wrap__lang .is-inactive:hover,
.header__burger-lang .is-inactive:hover,
.footer-col__lang .footer-col__lang-alt:hover {
  color: #FFFFFF !important;
}
.header-wrap__lang .lang-sep,
.header__burger-lang span:nth-child(2),
.footer-col__lang .footer-col__lang-sep {
  color: #9A9A9A !important;
  opacity: 1 !important;
}
/* ===== END CB UPDATES 7 ===== */

/* ===== CB UPDATES 8 — underline on all section titles + cashbee infinite hover loop ===== */

/* Underline under all section H2 titles */
.about-wrap__title,
.our-wrap__title,
.join-wrap__title,
.cta-wrap__title {
  position: relative;
}
.about-wrap__title::after,
.our-wrap__title::after,
.join-wrap__title::after,
.cta-wrap__title::after {
  content: "";
  display: block;
  width: clamp(80px, 12vw, 160px);
  height: 3px;
  background: #501F21;
  margin-top: 12px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .about-wrap__title::after,
  .our-wrap__title::after,
  .join-wrap__title::after,
  .cta-wrap__title::after {
    width: 64px;
    height: 3px;
    margin-top: 8px;
  }
}

/* Hero CashBee — infinite loop: rest (dark) → sweep to hover (colorful) → back.
   Replaces v6 ping-pong (which never paused on either state).
   Same gradient and 200% size as on-hover; keyframe stops give clear dwell at rest
   and a brief reveal of the colorful left half. */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word,
.cta-wrap__title .cb-reveal-word {
  -webkit-animation: cb-cashbee-loop 5s ease-in-out infinite !important;
          animation: cb-cashbee-loop 5s ease-in-out infinite !important;
}
@-webkit-keyframes cb-cashbee-loop {
  0%, 35%   { background-position: 100% 0; }   /* rest = dark */
  50%, 65%  { background-position: 0    0; }   /* hover state = colorful */
  100%      { background-position: 100% 0; }   /* back to rest */
}
@keyframes cb-cashbee-loop {
  0%, 35%   { background-position: 100% 0; }
  50%, 65%  { background-position: 0    0; }
  100%      { background-position: 100% 0; }
}
/* ===== END CB UPDATES 8 ===== */

/* ===== CB UPDATES 9 — footer lang hover: brand orange instead of white ===== */
.footer-col__lang .footer-col__lang-alt:hover {
  color: #FFB000 !important;
}
/* ===== END CB UPDATES 9 ===== */

/* ===== CB UPDATES 10 — drop underlines, continuous shimmer (hover-style) ===== */
.about-wrap__title::after,
.our-wrap__title::after,
.join-wrap__title::after,
.cta-wrap__title::after {
  content: none !important;
  display: none !important;
}

.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word,
.cta-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%,
    #501F21 32%,
    #FFB000 40%,
    #FFD900 50%,
    #FFB000 60%,
    #501F21 68%,
    #501F21 100%) !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 100% 0;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-transition: none !important;
          transition: none !important;
  -webkit-animation: cb-shimmer-sweep 4.5s linear infinite !important;
          animation: cb-shimmer-sweep 4.5s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes cb-shimmer-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* ===== END CB UPDATES 10 ===== */

/* ===== CB UPDATES 11 — header link underline brown + 2x thicker ===== */
.header-wrap__link::after {
  height: 2px !important;
  background: #501F21 !important;
  background-image: none !important;
}
/* ===== END CB UPDATES 11 ===== */

/* ===== CB UPDATES 12 — Figma hover gradient, continuously sliding ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word,
.cta-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%,
    #FFB000 10%,
    #FFD900 20%,
    #FFB000 30%,
    #501F21 50%,
    #FFB000 60%,
    #FFD900 70%,
    #FFB000 80%,
    #501F21 100%) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  background-position: 0 0;
  -webkit-animation: cb-hover-slide 3.5s linear infinite !important;
          animation: cb-hover-slide 3.5s linear infinite !important;
}
@-webkit-keyframes cb-hover-slide {
  from { background-position: 0 0; }
  to   { background-position: -100% 0; }
}
@keyframes cb-hover-slide {
  from { background-position: 0 0; }
  to   { background-position: -100% 0; }
}
/* ===== END CB UPDATES 12 ===== */

/* ===== CB UPDATES 13 — unblock background-position so keyframes can animate ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word,
.cta-wrap__title .cb-reveal-word {
  background-position: 0 0;
}
/* ===== END CB UPDATES 13 ===== */

/* ===== CB UPDATES 14 — inactive lang: no color hover, underline like header menu ===== */
.header-wrap__lang .is-inactive:hover,
.header__burger-lang .is-inactive:hover,
.footer-col__lang .footer-col__lang-alt:hover {
  color: inherit !important;
}
.header-wrap__lang .is-inactive,
.header__burger-lang .is-inactive,
.footer-col__lang .footer-col__lang-alt {
  position: relative;
  display: inline-block;
}
.header-wrap__lang .is-inactive::after,
.header__burger-lang .is-inactive::after,
.footer-col__lang .footer-col__lang-alt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #501F21;
  transform: translateX(-50%) scaleX(0);
  -webkit-transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  -webkit-transform-origin: center;
  transition: transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
}
.header-wrap__lang .is-inactive:hover::after,
.header__burger-lang .is-inactive:hover::after,
.footer-col__lang .footer-col__lang-alt:hover::after {
  transform: translateX(-50%) scaleX(1);
  -webkit-transform: translateX(-50%) scaleX(1);
}
/* ===== END CB UPDATES 14 ===== */

/* ===== CB UPDATES 15 — active lang back to brown (not gray) ===== */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #501F21 !important;
}
/* ===== END CB UPDATES 15 ===== */

/* ===== CB UPDATES 16 — gray -> #fff46c for inactive lang + separator ===== */
.header-wrap__lang .is-inactive,
.header__burger-lang .is-inactive,
.footer-col__lang .footer-col__lang-alt,
.header-wrap__lang .lang-sep,
.header__burger-lang span:nth-child(2),
.footer-col__lang .footer-col__lang-sep {
  color: #fff46c !important;
}
/* ===== END CB UPDATES 16 ===== */

/* ===== CB UPDATES 17 — shimmer: 2 sweeps on appear, then once every 30s ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word,
.cta-wrap__title .cb-reveal-word {
  -webkit-animation: cb-shimmer-burst 30s linear infinite !important;
          animation: cb-shimmer-burst 30s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-burst {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  23.34% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}
@keyframes cb-shimmer-burst {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  23.34% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}
/* ===== END CB UPDATES 17 ===== */

/* ===== CB UPDATES 18 — lang separator back to brown ===== */
.header-wrap__lang .lang-sep,
.header__burger-lang span:nth-child(2),
.footer-col__lang .footer-col__lang-sep {
  color: #501F21 !important;
}
/* ===== END CB UPDATES 18 ===== */

/* ===== CB UPDATES 19 — brown rest, 2 sweeps, hold; revert CTA ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  background-image: linear-gradient(90deg,
    #501F21 0%,
    #501F21 50%,
    #FFB000 60%,
    #FFD900 70%,
    #FFB000 80%,
    #501F21 90%,
    #501F21 100%) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  -webkit-animation: cb-shimmer-burst-rest 30s linear infinite !important;
          animation: cb-shimmer-burst-rest 30s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-burst-rest {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  23.34% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}
@keyframes cb-shimmer-burst-rest {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  23.34% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}

/* CTA — revert everything (gradient/animation), keep original brown text */
.cta-wrap__title .cb-reveal-word {
  background-image: none !important;
  background: transparent !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #501F21 !important;
  -webkit-animation: none !important;
          animation: none !important;
}
/* ===== END CB UPDATES 19 ===== */

/* ===== CB UPDATES 20 — viewport-triggered shimmer, no end-of-anim snap ===== */
.hero .hero-wrap__cashbee,
.about-wrap__title .cb-reveal-word,
.our-wrap__title .cb-reveal-word,
.join-wrap__title .cb-reveal-word {
  -webkit-animation: none !important;
          animation: none !important;
  background-position: 0 0;
}
.hero .hero-wrap__cashbee.cb-shimmer-on,
.about-wrap__title.cb-shimmer-on .cb-reveal-word,
.our-wrap__title.cb-shimmer-on .cb-reveal-word,
.join-wrap__title.cb-shimmer-on .cb-reveal-word {
  -webkit-animation: cb-shimmer-burst-v2 30s linear infinite !important;
          animation: cb-shimmer-burst-v2 30s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-burst-v2 {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  100%   { background-position: -200% 0; }
}
@keyframes cb-shimmer-burst-v2 {
  0%     { background-position: 0 0; }
  23.33% { background-position: -200% 0; }
  100%   { background-position: -200% 0; }
}
/* ===== END CB UPDATES 20 ===== */

/* ===== CB UPDATES 21 — 2 sweeps (~7s) then 30s idle, total 37s ===== */
.hero .hero-wrap__cashbee.cb-shimmer-on,
.about-wrap__title.cb-shimmer-on .cb-reveal-word,
.our-wrap__title.cb-shimmer-on .cb-reveal-word,
.join-wrap__title.cb-shimmer-on .cb-reveal-word {
  -webkit-animation: cb-shimmer-burst-v3 37s linear infinite !important;
          animation: cb-shimmer-burst-v3 37s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-burst-v3 {
  0%      { background-position: 0 0; }
  18.92%  { background-position: -200% 0; }
  100%    { background-position: -200% 0; }
}
@keyframes cb-shimmer-burst-v3 {
  0%      { background-position: 0 0; }
  18.92%  { background-position: -200% 0; }
  100%    { background-position: -200% 0; }
}
/* ===== END CB UPDATES 21 ===== */

/* ===== CB UPDATES 22 — true 2 sweeps via snap-back (invisible because both ends are brown) ===== */
.hero .hero-wrap__cashbee.cb-shimmer-on,
.about-wrap__title.cb-shimmer-on .cb-reveal-word,
.our-wrap__title.cb-shimmer-on .cb-reveal-word,
.join-wrap__title.cb-shimmer-on .cb-reveal-word {
  -webkit-animation: cb-shimmer-burst-v4 37s linear infinite !important;
          animation: cb-shimmer-burst-v4 37s linear infinite !important;
}
@-webkit-keyframes cb-shimmer-burst-v4 {
  0%      { background-position: 0 0; }
  9.46%   { background-position: -200% 0; }
  9.47%   { background-position: 0 0; }
  18.92%  { background-position: -200% 0; }
  100%    { background-position: -200% 0; }
}
@keyframes cb-shimmer-burst-v4 {
  0%      { background-position: 0 0; }
  9.46%   { background-position: -200% 0; }
  9.47%   { background-position: 0 0; }
  18.92%  { background-position: -200% 0; }
  100%    { background-position: -200% 0; }
}
/* ===== END CB UPDATES 22 ===== */

/* ===== CB UPDATES 23 — swap lang colors: active #fff46c, inactive #501F21 ===== */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #fff46c !important;
}
.header-wrap__lang a.is-inactive,
.header-wrap__lang span.is-inactive,
.header__burger-lang a.is-inactive,
.header__burger-lang span.is-inactive,
.footer-col__lang a.footer-col__lang-alt,
.footer-col__lang span.footer-col__lang-alt {
  color: #501F21 !important;
}
/* ===== END CB UPDATES 23 ===== */

/* ===== CB UPDATES 24 — modal close X hover -> yellow ===== */
.modal__close svg,
.modal__close svg * {
  -webkit-transition: stroke 0.25s ease, fill 0.25s ease, color 0.25s ease;
          transition: stroke 0.25s ease, fill 0.25s ease, color 0.25s ease;
}
.modal__close:hover {
  opacity: 1 !important;
  color: #FFD900 !important;
}
.modal__close:hover svg,
.modal__close:hover svg * {
  stroke: #FFD900 !important;
  color: #FFD900 !important;
}
.modal__close:hover svg [fill]:not([fill="none"]) {
  fill: #FFD900 !important;
}
/* ===== END CB UPDATES 24 ===== */




/* ===== CB UPDATES 25 — yellow active lang -> #271011, opacity .5 ===== */
.header-wrap__lang span:not(.is-inactive):not(:nth-child(2)),
.header__burger-lang span:not(.is-inactive):not(:nth-child(2)),
.footer-col__lang .footer-col__lang-cur {
  color: #271011 !important;
  opacity: 0.5 !important;
}
/* ===== END CB UPDATES 25 ===== */





/* ===== CB UPDATES 26 — header blur 2px ===== */
.header-wrap {
  -webkit-backdrop-filter: blur(5px) !important;
          backdrop-filter: blur(5px) !important;
}
/* ===== END CB UPDATES 26 ===== */




/* ===== CB UPDATES 27 — modal compact, hard-clamped height, sticky X, mobile ===== */
.modal {
  display: none;
}
.modal.modal-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#contactModal .modal__box,
#successModal .modal__box,
.modal__box {
  margin: 0 auto !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal__close {
  position: sticky !important;
  top: 4px;
  align-self: flex-end;
  z-index: 5;
  
}
@media (max-width: 768px) {
  #contactModal .modal__box,
  .modal__box {
    margin: 0 auto !important;
    padding: 8px 12px 16px !important;
    border-radius: 14px !important;
    width: calc(100% - 16px) !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
  }
  .modal__close {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 2px !important;
  }
  .modal__inner {
    gap: 14px !important;
  }
  .modal__tabs {
    height: auto !important;
    gap: 18px !important;
    padding-bottom: 0 !important;
  }
}
/* ===== END CB UPDATES 27 ===== */