@charset "UTF-8";
:root {
  --color-primary: #296df5;
  /* Primary */
  --color-primary-0: #14274d;
  --color-primary-50: #1a3e85;
  --color-primary-100: #184aad;
  --color-primary-200: #1354d6;
  --color-primary-300: #145ff5;
  --color-primary-400: #296df5;
  --color-primary-500: #4e85f5;
  --color-primary-600: #88acf5;
  --color-primary-700: #b6d2f5;
  --color-primary-800: #d3e2f5;
  --color-primary-900: #e5ecf5;
  --color-primary-950: #ebeff5;
  /* Text */
  --color-text-0: #ffffff;
  --color-text-50: #eeecec;
  --color-text-100: #d8d8d8;
  --color-text-200: #bebebe;
  --color-text-300: #919191;
  --color-text-400: #838383;
  --color-text-500: #656565;
  --color-text-600: #565656;
  --color-text-700: #484848;
  --color-text-800: #393939;
  --color-text-900: #181313;
  --color-text-950: #141414;
  --color-text-950-0: #14141400;
  /* Background */
  --color-bg-0: #ffffff;
  --color-bg-0-40: rgba(255, 255, 255, 0.4);
  --color-bg-0-12: rgba(255, 255, 255, 0.12);
  --color-bg-0-0: rgba(255, 255, 255, 0);
  --color-bg-50: #ededed;
  --color-bg-100: #cecdcd;
  --color-bg-200: #b5b4b4;
  --color-bg-300: #9d9b9b;
  --color-bg-400: #848282;
  --color-bg-500: #6c6a6a;
  --color-bg-600: #545151;
  --color-bg-700: #3b3838;
  --color-bg-800: #231f1f;
  --color-bg-900: #161212;
  --color-bg-950: #0a0606;
  --color-bg-950-05: rgba(10, 6, 6, 0.05);
  --color-bg-950-10: rgba(10, 6, 6, 0.1);
  /* Border */
  --color-border-0: #f3f3f3;
  --color-border-50: #e6e6e6;
  --color-border-100: #dadada;
  --color-border-200: #c2c1c1;
  --color-border-300: #a9a8a8;
  --color-border-400: #918f8f;
  --color-border-500: #787676;
  --color-border-600: #605d5d;
  --color-border-700: #474444;
  --color-border-800: #2f2b2b;
  --color-border-900: #231f1f;
  --color-border-950: #161212;
  /* Theme */
  --color-theme-0: #fff4f6;
  --color-theme-50: #ffbfcd;
  --color-theme-100: #ff809c;
  --color-theme-200: #ff4d74;
  --color-theme-300: #ff1a4d;
  --color-theme-400: #ff0039;
  --color-theme-500: #cc002e;
  --color-theme-500-0: rgba(204, 0, 46, 0);
  --color-theme-500-20: rgba(204, 0, 46, 0.2);
  --color-theme-600: #990022;
  --color-theme-700: #80001d;
  --color-theme-800: #660017;
  --color-theme-900: #33000b;
  --color-theme-950: #1a0006;
  /* Purple */
  --color-purple-0: #f9f9ff;
  --color-purple-50: #f0ecfe;
  --color-purple-100: #e0d7fc;
  --color-purple-200: #cbb9f9;
  --color-purple-300: #b094f6;
  --color-purple-400: #9570f3;
  --color-purple-500: #7a4df0;
  --color-purple-500-0: rgba(122, 77, 240, 0);
  --color-purple-500-10: rgba(122, 77, 240, 0.1);
  --color-purple-500-20: rgba(122, 77, 240, 0.2);
  --color-purple-500-30: rgba(122, 77, 240, 0.3);
  --color-purple-600: #5f2bed;
  --color-purple-700: #4d1fd6;
  --color-purple-800: #3d17ac;
  --color-purple-900: #2d1084;
  --color-purple-950: #1e0a5c;
  /* Green */
  --color-green-0: #e8f9e6;
  --color-green-50: #bbecb5;
  --color-green-100: #83dd78;
  --color-green-200: #61d454;
  --color-green-300: #3fca2f;
  --color-green-400: #1dc10a;
  --color-green-500: #19a409;
  --color-green-500-20: rgba(25, 164, 9, 0.2);
  --color-green-600: #148707;
  --color-green-700: #106a06;
  --color-green-800: #0a4404;
  --color-green-900: #073003;
  --color-green-950: #031301;
  /* Blue */
  --color-blue-0: #e6f6ff;
  --color-blue-50: #b5e4ff;
  --color-blue-100: #83d1ff;
  --color-blue-200: #52bfff;
  --color-blue-300: #2db2ff;
  --color-blue-400: #08a4ff;
  --color-blue-500: #078bd9;
  --color-blue-500-10: rgba(7, 139, 217, 0.1);
  --color-blue-500-20: rgba(7, 139, 217, 0.2);
  --color-blue-600: #0673b2;
  --color-blue-700: #045280;
  --color-blue-800: #033959;
  --color-blue-900: #022133;
  --color-blue-950: #01101a;
  /* Orange */
  --color-orange-0: #fffaeb;
  --color-orange-50: #fef0c7;
  --color-orange-100: #fedf89;
  --color-orange-200: #fec84b;
  --color-orange-300: #fdb022;
  --color-orange-400: #de8208;
  --color-orange-500: #c67307;
  --color-orange-500-0: rgba(198, 115, 7, 0.1);
  --color-orange-500-10: rgba(198, 115, 7, 0.1);
  --color-orange-500-20: rgba(198, 115, 7, 0.2);
  --color-orange-600: #b05302;
  --color-orange-700: #7f3206;
  --color-orange-800: #672709;
  --color-orange-900: #441a01;
  --color-orange-950: #2c1005;
  /* cyan */
  --color-cyan-0: #e5fbf3;
  --color-cyan-50: #b2f4dc;
  --color-cyan-100: #99f0d0;
  --color-cyan-200: #66e9b9;
  --color-cyan-300: #33e1a1;
  --color-cyan-400: #00da8a;
  --color-cyan-500: #00ae6e;
  --color-cyan-500-20: rgba(0, 174, 110, 0.2);
  --color-cyan-600: #008353;
  --color-cyan-700: #005737;
  --color-cyan-800: #004129;
  --color-cyan-900: #002c1c;
  --color-cyan-950: #00160e;
  /* azure */
  --color-azure-0: #e5fbf9;
  --color-azure-50: #ccf8f4;
  --color-azure-100: #99f0e9;
  --color-azure-200: #66e9de;
  --color-azure-300: #33e1d3;
  --color-azure-400: #00dac8;
  --color-azure-500: #00aea0;
  --color-azure-500-10: rgba(0, 174, 160, 0.1);
  --color-azure-500-20: rgba(0, 174, 160, 0.2);
  --color-azure-600: #008378;
  --color-azure-700: #00413c;
  --color-azure-800: #002c28;
  --color-azure-900: #002c28;
  --color-azure-950: #001614;
  /* other */
  --color-modal: #252627;
  --color-mask: rgba(0, 0, 0, 0.5);
}

.dark {
  --color-primary: #60a5fa;
  --color-primary-0: #ebeff5;
  --color-primary-50: #e5ecf5;
  --color-primary-100: #d3e2f5;
  --color-primary-200: #b6d2f5;
  --color-primary-300: #88acf5;
  --color-primary-400: #4e85f5;
  --color-primary-500: #296df5;
  --color-primary-600: #145ff5;
  --color-primary-700: #1354d6;
  --color-primary-800: #184aad;
  --color-primary-900: #1a3e85;
  --color-primary-950: #14274d;
  /* Text */
  --color-text-0: #141414;
  --color-text-50: #181313;
  --color-text-100: #393939;
  --color-text-200: #484848;
  --color-text-300: #565656;
  --color-text-400: #656565;
  --color-text-500: #838383;
  --color-text-600: #919191;
  --color-text-700: #bebebe;
  --color-text-800: #d8d8d8;
  --color-text-900: #eeecec;
  --color-text-950: #ffffff;
  --color-text-950-0: #ffffff00;
  /* Background */
  --color-bg-0: #0a0606;
  --color-bg-0-40: rgba(10, 6, 6, 0.4);
  --color-bg-0-12: rgba(10, 6, 6, 0.12);
  --color-bg-0-0: rgba(10, 6, 6, 0);
  --color-bg-50: #161212;
  --color-bg-100: #231f1f;
  --color-bg-200: #3b3838;
  --color-bg-300: #545151;
  --color-bg-400: #6c6a6a;
  --color-bg-500: #848282;
  --color-bg-600: #9d9b9b;
  --color-bg-700: #b5b4b4;
  --color-bg-800: #cecdcd;
  --color-bg-900: #ededed;
  --color-bg-950: #ffffff;
  --color-bg-950-05: rgba(255, 255, 255, 0.05);
  --color-bg-950-10: rgba(255, 255, 255, 0.1);
  /* Border */
  --color-border-0: #161212;
  --color-border-50: #231f1f;
  --color-border-100: #2f2b2b;
  --color-border-200: #474444;
  --color-border-300: #605d5d;
  --color-border-400: #787676;
  --color-border-500: #918f8f;
  --color-border-600: #a9a8a8;
  --color-border-700: #c2c1c1;
  --color-border-800: #dadada;
  --color-border-900: #e6e6e6;
  --color-border-950: #f3f3f3;
  /* Theme */
  --color-theme-0: #1a0006;
  --color-theme-50: #33000b;
  --color-theme-100: #660017;
  --color-theme-200: #80001d;
  --color-theme-300: #990022;
  --color-theme-400: #cc002e;
  --color-theme-500: #ff0039;
  --color-theme-500-0: rgba(255, 0, 57, 0);
  --color-theme-500-20: rgba(255, 0, 57, 0.2);
  --color-theme-600: #ff1a4d;
  --color-theme-700: #ff4d74;
  --color-theme-800: #ff809c;
  --color-theme-900: #ffbfcd;
  --color-theme-950: #fff4f6;
  /* Purple */
  --color-purple-0: #1e0a5c;
  --color-purple-50: #2d1084;
  --color-purple-100: #3d17ac;
  --color-purple-200: #4d1fd6;
  --color-purple-300: #5f2bed;
  --color-purple-400: #7a4df0;
  --color-purple-500: #9570f3;
  --color-purple-500-0: rgba(149, 112, 243, 0);
  --color-purple-500-10: rgba(149, 112, 243, 0.1);
  --color-purple-500-20: rgba(149, 112, 243, 0.2);
  --color-purple-500-30: rgba(149, 112, 243, 0.3);
  --color-purple-600: #b094f6;
  --color-purple-700: #cbb9f9;
  --color-purple-800: #e0d7fc;
  --color-purple-900: #f0ecfe;
  --color-purple-950: #f9f9ff;
  /* Green */
  --color-green-0: #031301;
  --color-green-50: #073003;
  --color-green-100: #0a4404;
  --color-green-200: #106a06;
  --color-green-300: #148707;
  --color-green-400: #19a409;
  --color-green-500: #1dc10a;
  --color-green-500-20: rgba(29, 193, 10, 0.2);
  --color-green-600: #3fca2f;
  --color-green-700: #61d454;
  --color-green-800: #83dd78;
  --color-green-900: #bbecb5;
  --color-green-950: #e8f9e6;
  /* Blue */
  --color-blue-0: #01101a;
  --color-blue-50: #022133;
  --color-blue-100: #033959;
  --color-blue-200: #045280;
  --color-blue-300: #0673b2;
  --color-blue-400: #078bd9;
  --color-blue-500: #08a4ff;
  --color-blue-500-10: rgba(8, 164, 255, 0.1);
  --color-blue-500-20: rgba(8, 164, 255, 0.2);
  --color-blue-600: #2db2ff;
  --color-blue-700: #52bfff;
  --color-blue-800: #83d1ff;
  --color-blue-900: #b5e4ff;
  --color-blue-950: #e6f6ff;
  /* Orange */
  --color-orange-0: #2c1005;
  --color-orange-50: #441a01;
  --color-orange-100: #672709;
  --color-orange-200: #7f3206;
  --color-orange-300: #b05302;
  --color-orange-400: #c67307;
  --color-orange-500: #de8208;
  --color-orange-500-0: rgba(222, 130, 8, 0.1);
  --color-orange-500-10: rgba(222, 130, 8, 0.1);
  --color-orange-500-20: rgba(222, 130, 8, 0.2);
  --color-orange-600: #fdb022;
  --color-orange-700: #fec84b;
  --color-orange-800: #fedf89;
  --color-orange-900: #fef0c7;
  --color-orange-950: #fffaeb;
  /* cyan */
  --color-cyan-0: #00160e;
  --color-cyan-50: #002c1c;
  --color-cyan-100: #004129;
  --color-cyan-200: #005737;
  --color-cyan-300: #008353;
  --color-cyan-400: #00ae6e;
  --color-cyan-500: #00da8a;
  --color-cyan-500-20: rgba(0, 218, 138, 0.2);
  --color-cyan-600: #33e1a1;
  --color-cyan-700: #66e9b9;
  --color-cyan-800: #99f0d0;
  --color-cyan-900: #b2f4dc;
  --color-cyan-950: #e5fbf3;
  /* azure */
  --color-azure-0: #001614;
  --color-azure-50: #002c28;
  --color-azure-100: #002c28;
  --color-azure-200: #00413c;
  --color-azure-300: #008378;
  --color-azure-400: #00aea0;
  --color-azure-500: #00dac8;
  --color-azure-500-10: rgba(0, 218, 200, 0.1);
  --color-azure-500-20: rgba(0, 218, 200, 0.2);
  --color-azure-600: #33e1d3;
  --color-azure-700: #66e9de;
  --color-azure-800: #99f0e9;
  --color-azure-900: #ccf8f4;
  --color-azure-950: #e5fbf9;
  /* other */
  --color-modal: #252627;
  --color-mask: rgba(0, 0, 0, 0.5);
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.container.dark .global-header-content {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}
.container.dark .global-header-content .global-header {
  position: relative;
  background: var(--color-bg-0);
  backdrop-filter: blur(16px);
  z-index: 999;
}

.container {
  background-color: var(--color-bg-0);
}
.container-header {
  padding: 145px 0 86px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 200% at 50% 150%, var(--color-theme-500) 0%, rgba(180, 4, 1, 0.7) 10%, rgba(90, 2, 16, 0.85) 30%, rgba(26, 0, 8, 0.94) 60%, rgba(5, 0, 2, 0.98) 80%, rgb(0, 0, 0) 100%);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header {
    padding: 100px 0 50px;
  }
}
@media (max-width: 767px) {
  .container-header {
    padding: 50px 0 20px;
  }
}
.container-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  position: relative;
}
@media (max-width: 767px) {
  .container-header-content {
    padding: 0 24px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header-content {
    padding: 0 24px;
  }
}
.container-header-arches {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.container-header .arch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container-header .arch::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(204, 0, 46, 0.04) 30%, rgba(220, 15, 50, 0.16) 45%, rgba(240, 30, 70, 0.24) 50%, rgba(220, 15, 50, 0.16) 55%, rgba(204, 0, 46, 0.04) 70%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0.65;
  mix-blend-mode: screen;
  animation: arch-sweep 6s linear infinite;
}
.container-header .arch::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #5b0216;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  z-index: 2;
  box-shadow: 0 0 8px rgba(204, 0, 46, 0.25);
}
.container-header .arch-1 {
  width: 600px;
  height: 300px;
  z-index: 3;
}
.container-header .arch-1::before {
  width: 600px;
  height: 300px;
  border-radius: 300px 300px 0 0;
}
.container-header .arch-1::after {
  width: 598px;
  height: 298px;
  border-radius: 298px 298px 0 0;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header .arch-1 {
    width: 500px;
    height: 250px;
  }
  .container-header .arch-1::before {
    width: 500px;
    height: 250px;
    border-radius: 250px 250px 0 0;
  }
  .container-header .arch-1::after {
    width: 498px;
    height: 248px;
    border-radius: 248px 248px 0 0;
    bottom: 1px;
  }
}
@media (max-width: 767px) {
  .container-header .arch-1 {
    width: 350px;
    height: 175px;
  }
  .container-header .arch-1::before {
    width: 350px;
    height: 175px;
    border-radius: 175px 175px 0 0;
  }
  .container-header .arch-1::after {
    width: 348px;
    height: 173px;
    border-radius: 173px 173px 0 0;
    bottom: 1px;
  }
}
.container-header .arch-2 {
  width: 900px;
  height: 450px;
  z-index: 2;
}
.container-header .arch-2::before {
  width: 900px;
  height: 450px;
  border-radius: 450px 450px 0 0;
}
.container-header .arch-2::after {
  width: 898px;
  height: 448px;
  border-radius: 448px 448px 0 0;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header .arch-2 {
    width: 750px;
    height: 375px;
  }
  .container-header .arch-2::before {
    width: 750px;
    height: 375px;
    border-radius: 375px 375px 0 0;
  }
  .container-header .arch-2::after {
    width: 748px;
    height: 373px;
    border-radius: 373px 373px 0 0;
    bottom: 1px;
  }
}
@media (max-width: 767px) {
  .container-header .arch-2 {
    width: 500px;
    height: 250px;
  }
  .container-header .arch-2::before {
    width: 500px;
    height: 250px;
    border-radius: 250px 250px 0 0;
  }
  .container-header .arch-2::after {
    width: 498px;
    height: 248px;
    border-radius: 248px 248px 0 0;
    bottom: 1px;
  }
}
.container-header .arch-3 {
  width: 1200px;
  height: 600px;
  z-index: 1;
}
.container-header .arch-3::before {
  width: 1200px;
  height: 600px;
  border-radius: 600px 600px 0 0;
}
.container-header .arch-3::after {
  width: 1198px;
  height: 598px;
  border-radius: 598px 598px 0 0;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header .arch-3 {
    width: 1000px;
    height: 500px;
  }
  .container-header .arch-3::before {
    width: 1000px;
    height: 500px;
    border-radius: 500px 500px 0 0;
  }
  .container-header .arch-3::after {
    width: 998px;
    height: 498px;
    border-radius: 498px 498px 0 0;
    bottom: 1px;
  }
}
@media (max-width: 767px) {
  .container-header .arch-3 {
    width: 650px;
    height: 325px;
  }
  .container-header .arch-3::before {
    width: 650px;
    height: 325px;
    border-radius: 325px 325px 0 0;
  }
  .container-header .arch-3::after {
    width: 648px;
    height: 323px;
    border-radius: 323px 323px 0 0;
    bottom: 1px;
  }
}
.container-header::before, .container-header::after {
  content: "";
  position: absolute;
  top: 200px;
  left: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.container-header::before {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 380px 110px rgba(255, 255, 255, 0.8), 540px 260px rgba(255, 255, 255, 0.65), 680px 140px rgba(255, 255, 255, 0.7), 840px 310px rgba(255, 255, 255, 0.75), 1000px 190px rgba(255, 255, 255, 0.65), 1140px 330px rgba(255, 255, 255, 0.75), 1300px 150px rgba(255, 255, 255, 0.65), 1440px 290px rgba(255, 255, 255, 0.75), 600px 430px rgba(255, 255, 255, 0.6), 860px 410px rgba(255, 255, 255, 0.7), 1100px 400px rgba(255, 255, 255, 0.55), 1340px 430px rgba(255, 255, 255, 0.7), 1500px 380px rgba(255, 255, 255, 0.65);
  animation: broker-stars-slow 85s linear infinite;
}
.container-header::after {
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 340px 190px rgba(255, 255, 255, 0.6), 480px 90px rgba(255, 255, 255, 0.8), 640px 220px rgba(255, 255, 255, 0.55), 800px 130px rgba(255, 255, 255, 0.7), 940px 260px rgba(255, 255, 255, 0.6), 1040px 100px rgba(255, 255, 255, 0.8), 1160px 240px rgba(255, 255, 255, 0.6), 1300px 110px rgba(255, 255, 255, 0.7), 1440px 270px rgba(255, 255, 255, 0.65), 1560px 130px rgba(255, 255, 255, 0.7), 1680px 280px rgba(255, 255, 255, 0.6), 500px 330px rgba(255, 255, 255, 0.55), 680px 380px rgba(255, 255, 255, 0.7), 880px 420px rgba(255, 255, 255, 0.6), 1080px 370px rgba(255, 255, 255, 0.55), 1280px 390px rgba(255, 255, 255, 0.65), 1460px 410px rgba(255, 255, 255, 0.5), 420px 110px rgba(255, 255, 255, 0.6);
  animation: broker-stars-fast 120s linear infinite;
}
.container-header-title {
  color: var(--color-text-950);
  text-align: center;
  /* 大标题-48 */
  font-family: Rajdhani;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px;
  /* 116.667% */
  text-transform: uppercase;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.container-header-title > div {
  position: relative;
  transition: text-shadow 0.2s ease;
  will-change: text-shadow;
  transform: translateZ(0);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header-title {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .container-header-title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 20px;
  }
}
.container-header-subTitle {
  color: var(--color-theme-500);
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  /* text-32/Semi Bold */
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  /* 125% */
  margin-bottom: 64px;
  position: relative;
  transition: text-shadow 0.2s ease;
  will-change: text-shadow;
  transform: translateZ(0);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header-subTitle {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .container-header-subTitle {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 30px;
  }
}
.container-header-btn {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--color-text-950);
  text-align: center;
  /* 按钮-28：中文/英文通用，使用无衬线字体，取消强制大写 */
  font-family: Rajdhani;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  text-transform: none;
  background: url(../assets/images/broker/broker-btn.png) no-repeat;
  background-size: 100% 100%;
  padding: 15px 55px;
  position: relative;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  line-height: 28px;
}
.container-header-btn::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, rgba(204, 0, 46, 0.15) 0%, rgba(204, 0, 46, 0.08) 50%, transparent 70%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}
.container-header-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.05) drop-shadow(0 0 8px rgba(204, 0, 46, 0.25));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.container-header-btn:hover::before {
  opacity: 0.8;
}
.container-header-btn:active {
  transform: scale(1.01);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-header-btn {
    font-size: 20px;
    padding: 10px 40px;
  }
}
@media (max-width: 767px) {
  .container-header-btn {
    font-size: 14px;
    padding: 8px 60px;
  }
}
.container-content {
  padding: 100px 0 300px 0;
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content {
    padding: 60px 20px 150px 20px;
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .container-content {
    padding: 40px 24px 150px 24px;
    gap: 20px;
    flex-direction: column;
  }
}
.container-content-item {
  width: 337px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item {
    width: 320px;
    padding: 28px 20px;
  }
}
@media (max-width: 767px) {
  .container-content-item {
    padding: 24px 16px;
    width: auto;
  }
}
.container-content-item-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-content {
    align-items: center;
  }
}
@media (max-width: 767px) {
  .container-content-item-content {
    align-items: center;
    width: 100%;
  }
}
.container-content-item-active {
  border: 1px solid rgb(59, 130, 246);
  box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.6), inset 0 0 30px rgba(59, 130, 246, 0.4), inset 0 0 50px rgba(59, 130, 246, 0.2);
  animation: broker-card-breathe 4s ease-in-out infinite;
}
.container-content-item:hover {
  transform: translateY(-4px);
}
.container-content-item-logo {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 56px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-logo {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .container-content-item-logo {
    font-size: 18px;
    margin-bottom: 20px;
  }
}
.container-content-item-logo img {
  height: 48px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-logo img {
    height: 36px;
  }
}
@media (max-width: 767px) {
  .container-content-item-logo img {
    height: 32px;
  }
}
.container-content-item-active .container-content-item-logo {
  background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.container-content-item-name {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-text-950);
  text-align: center;
  line-height: 40px;
  font-family: Inter;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-name {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .container-content-item-name {
    font-size: 24px;
  }
}
.container-content-item-tags {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: flex-start;
  flex: 1;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-tags {
    align-items: center;
  }
}
@media (max-width: 767px) {
  .container-content-item-tags {
    align-items: center;
  }
}
.container-content-item-tag {
  display: inline-block;
  padding: 0 12px;
  height: 32px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-200);
  border-radius: 4px;
  font-size: 18px;
  color: var(--color-text-500);
  white-space: nowrap;
  font-family: Inter;
  font-weight: 400;
  line-height: 26px;
}
@media (max-width: 767px) {
  .container-content-item-tag {
    font-size: 11px;
    padding: 5px 10px;
    width: 97%;
    justify-content: center;
  }
}
.container-content-item-active .container-content-item-tag {
  border-color: var(--color-theme-500);
  color: var(--color-theme-500);
}
.container-content-item-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.container-content-item-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}
.container-content-item-stars .star {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
}
@media (max-width: 767px) {
  .container-content-item-stars .star {
    width: 14px;
    height: 14px;
  }
}
.container-content-item-stars .star.star-full::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: #fbbf24;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-full::before {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-half::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: #fbbf24;
  font-size: 16px;
  line-height: 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-half::before {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-half::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  line-height: 1;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-half::after {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-empty::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-empty::before {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-full-inactive::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-full-inactive::before {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-half-inactive::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  line-height: 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-half-inactive::before {
    font-size: 14px;
  }
}
.container-content-item-stars .star.star-half-inactive::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  line-height: 1;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
@media (max-width: 767px) {
  .container-content-item-stars .star.star-half-inactive::after {
    font-size: 14px;
  }
}
.container-content-item-stars-inactive .star.star-empty::before {
  color: rgba(255, 255, 255, 0.3);
}
.container-content-item-score {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-950);
}
@media (max-width: 767px) {
  .container-content-item-score {
    font-size: 12px;
  }
}
.container-content-item-btn {
  width: 174px;
  padding: 9px 22px;
  background: var(--color-theme-300);
  border: none;
  border-radius: 6px;
  color: var(--color-text-950);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  font-family: Rajdhani;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.2s ease;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-content-item-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .container-content-item-btn {
    padding: 10px 16px;
    font-size: 12px;
    width: 140px;
  }
}
.container-content-item-active .container-content-item-btn {
  background: var(--color-theme-500);
}
.container-content-item-active .container-content-item-btn:hover {
  background: var(--color-theme-300);
}

@keyframes broker-stars-slow {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-160px, -140px, 0);
  }
}
@keyframes broker-stars-fast {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(140px, -160px, 0);
  }
}
@keyframes broker-card-breathe {
  0%, 100% {
    box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.5), inset 0 0 26px rgba(59, 130, 246, 0.35), inset 0 0 40px rgba(59, 130, 246, 0.18);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.8), inset 0 0 40px rgba(59, 130, 246, 0.55), inset 0 0 70px rgba(59, 130, 246, 0.3);
  }
}
@keyframes header-breathe {
  0%, 100% {
    background: radial-gradient(120% 200% at 50% 150%, var(--color-theme-500) 0%, rgba(180, 4, 1, 0.7) 10%, rgba(90, 2, 16, 0.85) 30%, rgba(26, 0, 8, 0.94) 60%, rgba(5, 0, 2, 0.98) 80%, rgb(0, 0, 0) 100%);
  }
  50% {
    background: radial-gradient(130% 210% at 50% 150%, var(--color-theme-500) 0%, rgba(200, 10, 15, 0.75) 10%, rgba(100, 5, 20, 0.9) 30%, rgba(30, 2, 10, 0.96) 60%, rgba(8, 1, 4, 0.99) 80%, rgb(0, 0, 0) 100%);
  }
}
@keyframes arch-sweep {
  0% {
    background-position: -100% 0;
  }
  50% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}