@media (max-width: 767px) {
  .hero-bg > nav {
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .hero-bg .liquid-brand,
  .hero-bg .mobile-top-cta,
  .hero-bg .liquid-menu-button {
    --mx: 50% !important;
    --my: 50% !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
    text-shadow: none !important;
  }

  .hero-bg .liquid-brand::before,
  .hero-bg .liquid-brand::after,
  .hero-bg .mobile-top-cta::before,
  .hero-bg .mobile-top-cta::after,
  .hero-bg .liquid-menu-button::before,
  .hero-bg .liquid-menu-button::after,
  .hero-bg .mobile-menu::before,
  .hero-bg .mobile-menu::after,
  .hero-bg .ds-liquid-clone-layer {
    display: none !important;
  }

  .hero-bg .liquid-brand {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: min(48vw, 196px) !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(160, 237, 255, 0.82) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(90px 64px at 18% 15%, rgba(255, 255, 255, 0.42), transparent 58%),
      linear-gradient(135deg, rgba(35, 229, 255, 0.92), rgba(11, 161, 214, 0.88) 48%, rgba(14, 57, 86, 0.9)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(3, 32, 51, 0.42),
      0 10px 26px rgba(4, 42, 68, 0.26) !important;
    color: #ffffff !important;
    font-size: clamp(1.05rem, 5.2vw, 1.42rem) !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .hero-bg .mobile-nav-actions {
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }

  .hero-bg .mobile-top-cta {
    flex: 0 0 auto !important;
    width: min(30vw, 112px) !important;
    min-width: 92px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(70px 46px at 28% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.54) 64%, transparent 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(217, 237, 255, 0.88)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(50, 86, 116, 0.18),
      0 10px 22px rgba(4, 28, 52, 0.18) !important;
    color: #101827 !important;
    font-size: clamp(0.62rem, 2.5vw, 0.74rem) !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero-bg .menu-button.liquid-menu-button {
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(177, 243, 255, 0.9) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(44px 34px at 26% 15%, rgba(255, 255, 255, 0.58), transparent 62%),
      linear-gradient(135deg, #35e8ff, #03a7df 58%, #055d91) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -1px 0 rgba(3, 28, 52, 0.42),
      0 10px 24px rgba(3, 39, 69, 0.24) !important;
    color: #041521 !important;
  }

  .hero-bg .menu-button.liquid-menu-button svg {
    width: 21px !important;
    height: 21px !important;
  }

  .hero-bg .menu-button.liquid-menu-button svg path {
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
  }

  .hero-bg .mobile-menu {
    right: 0 !important;
    top: 56px !important;
    width: min(292px, calc(100vw - 28px)) !important;
    border: 1px solid rgba(198, 231, 255, 0.26) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(240px 180px at 0% 0%, rgba(53, 232, 255, 0.18), transparent 56%),
      linear-gradient(150deg, rgba(9, 20, 33, 0.96), rgba(15, 32, 50, 0.94)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 24px 58px rgba(3, 10, 22, 0.42) !important;
  }

  .hero-bg .mobile-menu .liquid-dropdown-link,
  .hero-bg .mobile-menu .liquid-nav-link,
  .hero-bg .mobile-menu .liquid-nav-cta {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
    transform: none !important;
  }

  .hero-bg .mobile-menu .liquid-nav-cta {
    background: linear-gradient(135deg, #35e8ff, #7c5cff) !important;
    color: #ffffff !important;
  }
}

@media (max-width: 390px) {
  .hero-bg > nav {
    padding: 10px 12px !important;
  }

  .hero-bg .liquid-brand {
    max-width: calc(100vw - 194px) !important;
    height: 44px !important;
    padding: 0 13px !important;
    font-size: clamp(0.95rem, 4.8vw, 1.16rem) !important;
    letter-spacing: 0.1em !important;
  }

  .hero-bg .mobile-top-cta {
    width: 92px !important;
    min-width: 92px !important;
    height: 42px !important;
    padding: 0 9px !important;
  }

  .hero-bg .menu-button.liquid-menu-button {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 360px) {
  .hero-bg .liquid-brand {
    max-width: calc(100vw - 180px) !important;
    font-size: 0.92rem !important;
  }

  .hero-bg .mobile-top-cta {
    width: 84px !important;
    min-width: 84px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.06em !important;
  }
}