* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #0B0D0F;
      font-family: 'Montserrat', sans-serif;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      position: relative;
      padding-top: 92px;
      margin: 0;
    }

    .page-bg {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1920px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      pointer-events: none;
      z-index: 4;
    }

    .page-bg--top {
      top: 0;
    }

    .page-bg--mid {
      top: 2050px;
      opacity: 0.65;
    }

    .section-wrapper {
      width: 1026px;
      max-width: 95%;
      z-index: 4;
      position: relative;
      flex: 1;
    }

    .section-spacing {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 170px;
      padding-bottom: 180px;
    }

    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 92px;
      padding: 8px 5%;
      background: rgba(9, 10, 12, 0.12);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      flex-shrink: 0;
      z-index: 1000;
      min-width: 0;
    }

    .top-bar .left {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 40px;
      cursor: pointer;
      text-decoration: none;
      flex-shrink: 0;
    }

    .top-bar .left img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .logo-text {
      display: flex;
      font-style: italic;
      font-weight: 900;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .logo-text .griff {
      color: #FFFFFF;
    }

    .logo-text .rewards {
      color: #00A6FD;
    }

    .top-bar .middle {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: clamp(20px, 4vw, 44px);
      height: 40px;
    }

    .top-bar .middle a {
      text-decoration: none;
      color: #B3BBC4;
      font-size: clamp(12px, 1.2vw, 16px);
      font-weight: 600;
      line-height: 20px;
      transition: color 0.25s ease;
      white-space: nowrap;
    }

    .top-bar .middle a:hover:not(.leaderboards) {
      color: #00A6FD;
    }

    .top-bar .middle .leaderboards {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .top-bar .middle .leaderboards .lb-text {
      color: #B3BBC4;
      transition: color 0.7s ease;
    }

    .top-bar .middle .leaderboards .prize {
      color: #00A6FD;
      transition: color 0.7s ease;
    }

    .top-bar .middle .leaderboards:hover .lb-text {
      color: #00A6FD;
    }

    .top-bar .right {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 14px 26px;
      border-radius: 7px;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      text-decoration: none;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      transition: filter 0.3s ease, background 0.7s ease;
      white-space: nowrap;
    }

    .btn--join {
      background: #00A6FD;
      transition: filter 0.3s ease, background 0.7s ease;
    }

    .btn--join:hover {
      filter: brightness(0.65);
    }

    .banner-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 1026px;
      max-width: 100%;
      position: relative;
    }

    .main-banner {
      box-sizing: border-box;
      width: 1026px;
      max-width: 100%;
      height: 275px;
      background: #080A0C;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      z-index: 5;
      transition: box-shadow 0.3s ease;
      cursor: pointer;
    }

    .border-shadow-left {
      position: absolute;
      width: 237.32px;
      height: 393.42px;
      left: -150px;
      top: -25.16px;
      background: #06101b;
      filter: blur(44.8px);
      transform: rotate(-25.56deg);
      z-index: 20;
      pointer-events: none;
    }

    .border-shadow-right {
      position: absolute;
      width: 237.32px;
      height: 393.42px;
      right: -150px;
      top: -25.16px;
      background: #040d16;
      filter: blur(44.8px);
      transform: matrix(-0.94, -0.33, -0.33, 0.94, 0, 0);
      z-index: 20;
      pointer-events: none;
    }

    .main-banner {
      --gungnir-left: 190.2px;
      --gungnir-top: 125px;
      --gungnir-width: 216.16px;
      --gungnir-height: auto;
      --gungnir-rotate: -49.99deg;
      --gungnir-blur: 5.7px;
      --gungnir-opacity: 1;
      --gungnir-z: 7;

      --bannercasehowl-left: 71.54px;
      --bannercasehowl-top: 131px;
      --bannercasehowl-width: 295px;
      --bannercasehowl-height: auto;
      --bannercasehowl-rotate: -5.1deg;
      --bannercasehowl-blur: 0px;
      --bannercasehowl-opacity: 0.65;
      --bannercasehowl-z: 8;

      --bannershroom-left: 80.14px;
      --bannershroom-top: 245.05px;
      --bannershroom-width: 128.5px;
      --bannershroom-height: auto;
      --bannershroom-rotate: -9.65deg;
      --bannershroom-blur: 3.1px;
      --bannershroom-opacity: 1;
      --bannershroom-z: 9;

      --howl-right: 190.2px;
      --howl-top: 125px;
      --howl-width: 209.77px;
      --howl-height: auto;
      --howl-rotate: 45deg;
      --howl-blur: 8.8px;
      --howl-opacity: 1;
      --howl-z: 7;

      --bannercasetitan-right: 73.54px;
      --bannercasetitan-top: 155px;
      --bannercasetitan-width: 295px;
      --bannercasetitan-height: auto;
      --bannercasetitan-rotate: -8.4deg;
      --bannercasetitan-blur: 0px;
      --bannercasetitan-opacity: 0.6;
      --bannercasetitan-z: 8;

      --x2500-right: 80.14px;
      --x2500-top: 220.05px;
      --x2500-width: 180.12px;
      --x2500-height: auto;
      --x2500-rotate: 14.83deg;
      --x2500-blur: 3.2px;
      --x2500-opacity: 1;
      --x2500-z: 9;

      --gungnir-left-end: 230.2px;
      --gungnir-top-end: 115px;
      --gungnir-width-end: 260px;
      --gungnir-height-end: auto;
      --gungnir-rotate-end: -58deg;
      --gungnir-blur-end: 4px;
      --gungnir-opacity-end: 0.5;

      --bannercasehowl-left-end: 91.54px;
      --bannercasehowl-top-end: 117px;
      --bannercasehowl-width-end: 360px;
      --bannercasehowl-height-end: auto;
      --bannercasehowl-rotate-end: -9.1deg;
      --bannercasehowl-blur-end: 0px;
      --bannercasehowl-opacity-end: 1;

      --bannershroom-left-end: 161.28px;
      --bannershroom-top-end: 220.05px;
      --bannershroom-width-end: 150px;
      --bannershroom-height-end: auto;
      --bannershroom-rotate-end: 0deg;
      --bannershroom-blur-end: 0px;
      --bannershroom-opacity-end: 1;

      --howl-right-end: 190.2px;
      --howl-top-end: 125px;
      --howl-width-end: 250px;
      --howl-height-end: auto;
      --howl-rotate-end: 70deg;
      --howl-blur-end: 4px;
      --howl-opacity-end: 0.5;

      --bannercasetitan-right-end: 126.2px;
      --bannercasetitan-top-end: 155px;
      --bannercasetitan-width-end: 349px;
      --bannercasetitan-height-end: auto;
      --bannercasetitan-rotate-end: 11.33deg;
      --bannercasetitan-blur-end: 0px;
      --bannercasetitan-opacity-end: 1;

      --x2500-right-end: 211.28px;
      --x2500-top-end: 210.05px;
      --x2500-width-end: 180.12px;
      --x2500-height-end: auto;
      --x2500-rotate-end: 14.83deg;
      --x2500-blur-end: 0px;
      --x2500-opacity-end: 1;
    }

    .main-banner:hover .img-gungnir {
      left: var(--gungnir-left-end);
      top: var(--gungnir-top-end);
      width: var(--gungnir-width-end);
      height: var(--gungnir-height-end);
      transform: translate(-50%, -50%) rotate(var(--gungnir-rotate-end));
      filter: blur(var(--gungnir-blur-end));
      opacity: var(--gungnir-opacity-end);
    }

    .main-banner:hover .img-bannercasehowl {
      left: var(--bannercasehowl-left-end);
      top: var(--bannercasehowl-top-end);
      width: var(--bannercasehowl-width-end);
      height: var(--bannercasehowl-height-end);
      transform: translate(-50%, -50%) rotate(var(--bannercasehowl-rotate-end));
      filter: blur(var(--bannercasehowl-blur-end));
      opacity: var(--bannercasehowl-opacity-end);
    }

    .main-banner:hover .img-bannershroom {
      left: var(--bannershroom-left-end);
      top: var(--bannershroom-top-end);
      width: var(--bannershroom-width-end);
      height: var(--bannershroom-height-end);
      transform: translate(-50%, -50%) rotate(var(--bannershroom-rotate-end));
      filter: blur(var(--bannershroom-blur-end));
      opacity: var(--bannershroom-opacity-end);
    }

    .main-banner:hover .img-howl {
      right: var(--howl-right-end);
      top: var(--howl-top-end);
      width: var(--howl-width-end);
      height: var(--howl-height-end);
      transform: translate(50%, -50%) rotate(var(--howl-rotate-end));
      filter: blur(var(--howl-blur-end));
      opacity: var(--howl-opacity-end);
    }

    .main-banner:hover .img-bannercasetitan {
      right: var(--bannercasetitan-right-end);
      top: var(--bannercasetitan-top-end);
      width: var(--bannercasetitan-width-end);
      height: var(--bannercasetitan-height-end);
      transform: translate(50%, -50%) rotate(var(--bannercasetitan-rotate-end));
      filter: blur(var(--bannercasetitan-blur-end));
      opacity: var(--bannercasetitan-opacity-end);
    }

    .main-banner:hover .img-2500x {
      right: var(--x2500-right-end);
      top: var(--x2500-top-end);
      width: var(--x2500-width-end);
      height: var(--x2500-height-end);
      transform: translate(50%, -50%) rotate(var(--x2500-rotate-end));
      filter: blur(var(--x2500-blur-end));
      opacity: var(--x2500-opacity-end);
    }

    .main-banner:hover .banner-logo-wrapper {
      transform: translate(-50%, -50%) scale(1.50);
    }

    .main-banner:hover .banner-subtitle-wrapper {
      transform: translate(-50%, -50%) scale(0.7);
    }

    .main-banner:hover .banner-effects .ellipse-7 {
      opacity: 0.35;
    }
    .main-banner:hover .banner-effects .ellipse-8 {
      opacity: 0.30;
    }
    .main-banner:hover .banner-effects .ellipse-9 {
      opacity: 0.35;
    }

    .banner-bg-image {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .banner-bg-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
    }

    .img-gungnir {
      position: absolute;
      left: var(--gungnir-left);
      top: var(--gungnir-top);
      width: var(--gungnir-width);
      height: var(--gungnir-height);
      transform: translate(-50%, -50%) rotate(var(--gungnir-rotate));
      z-index: var(--gungnir-z);
      pointer-events: none;
      filter: blur(var(--gungnir-blur));
      opacity: var(--gungnir-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, left, top, width, height, filter, opacity;
    }

    .img-bannercasehowl {
      position: absolute;
      left: var(--bannercasehowl-left);
      top: var(--bannercasehowl-top);
      width: var(--bannercasehowl-width);
      height: var(--bannercasehowl-height);
      transform: translate(-50%, -50%) rotate(var(--bannercasehowl-rotate));
      z-index: var(--bannercasehowl-z);
      pointer-events: none;
      filter: blur(var(--bannercasehowl-blur));
      opacity: var(--bannercasehowl-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, left, top, width, height, filter, opacity;
    }

    .img-bannershroom {
      position: absolute;
      left: var(--bannershroom-left);
      top: var(--bannershroom-top);
      width: var(--bannershroom-width);
      height: var(--bannershroom-height);
      transform: translate(-50%, -50%) rotate(var(--bannershroom-rotate));
      z-index: var(--bannershroom-z);
      pointer-events: none;
      filter: blur(var(--bannershroom-blur));
      opacity: var(--bannershroom-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, left, top, width, height, filter, opacity;
    }

    .img-howl {
      position: absolute;
      right: var(--howl-right);
      top: var(--howl-top);
      width: var(--howl-width);
      height: var(--howl-height);
      transform: translate(50%, -50%) rotate(var(--howl-rotate));
      z-index: var(--howl-z);
      pointer-events: none;
      filter: blur(var(--howl-blur));
      opacity: var(--howl-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, right, top, width, height, filter, opacity;
    }

    .img-bannercasetitan {
      position: absolute;
      right: var(--bannercasetitan-right);
      top: var(--bannercasetitan-top);
      width: var(--bannercasetitan-width);
      height: var(--bannercasetitan-height);
      transform: translate(50%, -50%) rotate(var(--bannercasetitan-rotate));
      z-index: var(--bannercasetitan-z);
      pointer-events: none;
      filter: blur(var(--bannercasetitan-blur));
      opacity: var(--bannercasetitan-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, right, top, width, height, filter, opacity;
    }

    .img-2500x {
      position: absolute;
      right: var(--x2500-right);
      top: var(--x2500-top);
      width: var(--x2500-width);
      height: var(--x2500-height);
      transform: translate(50%, -50%) rotate(var(--x2500-rotate));
      z-index: var(--x2500-z);
      pointer-events: none;
      filter: blur(var(--x2500-blur));
      opacity: var(--x2500-opacity);
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, right, top, width, height, filter, opacity;
    }

    .banner-logo-wrapper {
      position: absolute;
      left: 50%;
      top: 38%;
      transform: translate(-50%, -50%) scale(1);
      transform-origin: center center;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
      z-index: 10;
      width: 317px;
      height: 103px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .banner-logo-wrapper img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(0, 166, 253, 0.15));
    }

    .banner-subtitle-wrapper {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translate(-50%, -50%) scale(1);
      transform-origin: center center;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
      z-index: 10;
      width: 309px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .banner-subtitle-wrapper img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 4px rgba(0, 166, 253, 0.08));
    }

    .banner-effects {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
      overflow: hidden;
      border-radius: 5px;
    }

    .banner-effects .ellipse-10 {
      position: absolute;
      width: 237.32px;
      height: 393.42px;
      left: -201.08px;
      top: -29px;
      background: #0B0D0F;
      filter: blur(44.8px);
      transform: rotate(-25.56deg);
      border-radius: 50%;
    }

    .banner-effects .ellipse-11 {
      position: absolute;
      width: 237.32px;
      height: 393.42px;
      left: 858px;
      top: -25.16px;
      background: #0B0D0F;
      filter: blur(44.8px);
      transform: matrix(-0.94, -0.33, -0.33, 0.94, 0, 0);
      border-radius: 50%;
    }

    .banner-effects .ellipse-7 {
      position: absolute;
      width: 518.25px;
      height: 348.04px;
      left: calc(50% - 259.125px - 14.86px);
      top: calc(50% - 174.02px + 149.69px);
      background: #4C5864;
      opacity: 0.25;
      filter: blur(170px);
      transform: rotate(-5.3deg);
      border-radius: 50%;
      transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: opacity;
    }

    .banner-effects .ellipse-8 {
      position: absolute;
      width: 704.57px;
      height: 473.17px;
      left: calc(50% - 352.285px - 20.24px);
      top: calc(50% - 236.585px + 141.36px);
      background: #00A6FD;
      opacity: 0.19;
      filter: blur(170px);
      transform: rotate(-5.3deg);
      border-radius: 50%;
      transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: opacity;
    }

    .banner-effects .ellipse-9 {
      position: absolute;
      width: 439.51px;
      height: 192.69px;
      left: calc(50% - 219.755px - 7.86px);
      top: calc(50% - 96.345px + 192.85px);
      background: #00A6FD;
      opacity: 0.24;
      filter: blur(70px);
      transform: rotate(-5.3deg);
      border-radius: 50%;
      transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: opacity;
    }

    .banner-bottom-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 16px;
      width: 1026px;
      max-width: 100%;
      height: 212px;
    }

    .banner-bottom-row .frame-6,
    .banner-bottom-row .frame-7 {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 96px 160px;
      gap: 10px;
      width: 505px;
      max-width: 100%;
      height: 212px;
      background: #080A0C;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      flex: 1;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .banner-bottom-row .frame-6:hover,
    .banner-bottom-row .frame-7:hover {
      border-color: rgba(0, 166, 253, 0.3);
      background: #0A0D0F;
    }

    .banner-bottom-row .frame-6 span,
    .banner-bottom-row .frame-7 span {
      font-style: italic;
      font-weight: 900;
      font-size: 32px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .lb-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 80px;
      width: 1026px;
      max-width: 100%;
      position: relative;
      scroll-margin-top: -20px;
    }

    .top-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      width: 846.46px;
      max-width: 100%;
      position: relative;
    }

    .top-text .check-out {
      width: 137px;
      height: 11px;
      font-style: italic;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
      z-index: 5;
      margin-bottom: -10px;
    }

    .leaderboard-title {
      width: 100%;
      max-width: 842px;
      height: 67px;
      font-style: italic;
      font-weight: 900;
      font-size: clamp(48px, 12vw, 96px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: #00A6FD;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
      white-space: nowrap;
      z-index: 1;
      margin-bottom: 15px;
      transition: color 0.7s ease, text-shadow 0.7s ease;
      text-shadow: 0 0 18px rgba(0, 166, 253, 0.35);
    }

    .top-text .ellipse-bg {
      position: absolute;
      width: 806.3px;
      max-width: 90%;
      height: 55px;
      left: -17.49px;
      top: 30.92px;
      background: #00A6FD;
      mix-blend-mode: screen;
      filter: blur(65.45px);
      transform: rotate(-2.76deg);
      z-index: 2;
      pointer-events: none;
      border-radius: 50%;
      transition: background 0.7s ease;
    }

    .lb-part {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 42px;
      width: 908.63px;
      max-width: 100%;
    }

    .lb-and-tabs {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
      width: 100%;
      max-width: 908.63px;
      position: relative;
    }

    .switch-tabs {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 29px;
      width: 100%;
      max-width: 700px;
      height: 61px;
      flex-wrap: nowrap;
      z-index: 5;
    }

    .tab-btn {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 4px 44px;
      gap: 10px;
      height: 61px;
      border-radius: 7px;
      cursor: pointer;
      transition: 0.2s;
      border: 1px solid rgba(255, 255, 255, 0.05);
      background: rgba(24, 141, 178, 0.05);
      opacity: 0.5;
      flex: 0 1 auto;
    }

    .tab-btn.active {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid #00A6FD;
      opacity: 1;
      transition: border-color 0.7s ease;
    }

    .tab-btn:hover {
      opacity: 0.8;
    }

    .tab-btn img {
      object-fit: contain;
      filter: brightness(0.7);
      transition: filter 0.2s;
    }

    .tab-btn.csgogem-tab img {
      width: 130px;
      height: 35px;
    }

    .tab-btn.csgowin-tab img {
      width: 130px;
      height: 17px;
    }

    .tab-btn.roobet-tab img {
      width: 130px;
      height: 35px;
    }

    .tab-btn.active img {
      filter: brightness(1);
    }

    .actual-lb {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      gap: 65px;
      width: 100%;
      max-width: 908.63px;
      flex-wrap: nowrap;
      position: relative;
      z-index: 5;
    }

    .lb-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      isolation: isolate;
      position: relative;
    }

    .lb-card-1 {
      width: 269.01px;
      height: 480.1px;
    }

    .lb-card-2 {
      width: 258.96px;
      height: 466.74px;
    }

    .lb-card-3 {
      width: 250.66px;
      height: 451.35px;
    }

    .card-frame {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 23.3921px;
      gap: 38.99px;
      isolation: isolate;
      width: 100%;
      height: 100%;
      background: #080A0C;
      border: 1.29956px solid #24374b;
      border-radius: 6.4978px;
      position: relative;
      overflow: hidden;
      z-index: 2;
      transition: border-color 0.7s ease;
    }

    .card-frame-2 {
      padding: 22.5182px;
      gap: 37.53px;
      border-radius: 6.25506px;
    }

    .card-frame-3 {
      padding: 21.7964px;
      gap: 36.33px;
      border-radius: 6.05456px;
    }

    .crown {
      position: absolute;
      z-index: 3;
      pointer-events: none;
    }

    .crown-1 {
      width: 17px;
      height: 14px;
      left: 126px;
      top: 5.75px;
    }

    .crown-2 {
      width: 17px;
      height: 14px;
      left: 121.98px;
      top: 4.98px;
    }

    .crown-3 {
      width: 15.79px;
      height: 13px;
      left: 117.83px;
      top: 5.78px;
    }

    .crown img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .card-lights {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      border-radius: inherit;
    }

    .card-lights .ellipse-7,
    .card-lights .ellipse-8,
    .card-lights .ellipse-9 {
      position: absolute;
      transition: transform 0.7s ease, background 0.7s ease;
      border-radius: 50%;
    }

    .card-lights .ellipse-7 {
      width: 518.25px;
      height: 348.04px;
      background: #4C5864;
      opacity: 0.23;
      filter: blur(210.5px);
      transform: rotate(-5.3deg);
    }

    .card-lights .ellipse-8 {
      width: 704.57px;
      height: 473.17px;
      background: #00A6FD;
      opacity: 0.18;
      filter: blur(210.5px);
      transform: rotate(-5.3deg);
    }

    .card-lights .ellipse-9 {
      width: 439.51px;
      height: 192.69px;
      background: #00A6FD;
      opacity: 0.23;
      filter: blur(85.95px);
      transform: rotate(-5.3deg);
    }

    .lb-card-1 .card-lights .ellipse-7 {
      left: calc(50% - 259.125px + 222.51px);
      top: calc(50% - 174.02px + 4.87px);
    }
    .lb-card-1 .card-lights .ellipse-8 {
      left: calc(50% - 352.285px + 217.13px);
      top: calc(50% - 236.585px - 3.46px);
      background: #0083FD;
    }
    .lb-card-1 .card-lights .ellipse-9 {
      left: calc(50% - 219.755px + 229.51px);
      top: calc(50% - 96.345px + 48.03px);
      background: #0083FD;
    }

    .lb-card-2 .card-lights .ellipse-7 {
      left: calc(50% - 259.125px + 227.56px);
      top: calc(50% - 174.02px + 11.55px);
    }
    .lb-card-2 .card-lights .ellipse-8 {
      left: calc(50% - 352.285px + 222.18px);
      top: calc(50% - 236.585px + 3.22px);
      background: #0094FD;
    }
    .lb-card-2 .card-lights .ellipse-9 {
      left: calc(50% - 219.755px + 234.56px);
      top: calc(50% - 96.345px + 54.71px);
      background: #0094FD;
    }

    .lb-card-3 .card-lights .ellipse-7 {
      left: calc(50% - 259.125px + 231.73px);
      top: calc(50% - 174.02px + 19.24px);
    }
    .lb-card-3 .card-lights .ellipse-8 {
      left: calc(50% - 352.285px + 226.35px);
      top: calc(50% - 236.585px + 10.91px);
      background: #006EFD;
    }
    .lb-card-3 .card-lights .ellipse-9 {
      left: calc(50% - 219.755px + 238.73px);
      top: calc(50% - 96.345px + 62.4px);
      background: #006EFD;
    }

    .lb-card:hover .card-lights .ellipse-7 {
      transform: translate(-380px, 120px) rotate(-5.3deg);
    }
    .lb-card:hover .card-lights .ellipse-8 {
      transform: translate(-370px, 110px) rotate(-5.3deg);
    }
    .lb-card:hover .card-lights .ellipse-9 {
      transform: translate(-400px, 130px) rotate(-5.3deg);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px;
      gap: 5.2px;
      width: 100%;
      flex: 1;
      z-index: 2;
      position: relative;
    }
    .card-content-2 {
      gap: 5px;
    }
    .card-content-3 {
      gap: 4.84px;
    }

    .text-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 51.98px;
      width: 100%;
      flex: 1;
    }
    .text-wrap-2 {
      gap: 50.04px;
    }
    .text-wrap-3 {
      gap: 48.44px;
    }

    .inside-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 27.29px;
      width: 100%;
    }
    .inside-wrap-2 {
      gap: 26.27px;
    }
    .inside-wrap-3 {
      gap: 25.43px;
    }

    .pic-circle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 !important;
      width: 115.66px;
      height: 115.66px;
      background: #16283abe;
      box-shadow: 0px 5.19824px 5.19824px rgba(0, 0, 0, 0.25), inset 0px 1.29956px 0px 1.29956px rgba(217, 217, 217, 0.22);
      border-radius: 50% !important;
      overflow: hidden;
      position: relative;
      transition: background 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s ease;
    }

    .pic-circle .profile-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .pic-circle .profile-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.3s ease;
    }

    .pic-circle .profile-wrapper .profile-default {
      opacity: 1;
    }

    .pic-circle .profile-wrapper .profile-gem {
      opacity: 0;
    }

    .pic-circle .profile-wrapper .profile-win {
      opacity: 0;
    }

    .gem-theme .pic-circle .profile-wrapper .profile-default {
      opacity: 0;
    }

    .gem-theme .pic-circle .profile-wrapper .profile-gem {
      opacity: 1;
    }

    .gem-theme .pic-circle .profile-wrapper .profile-win {
      opacity: 0;
    }

    .csgowin-theme .pic-circle .profile-wrapper .profile-default {
      opacity: 0;
    }

    .csgowin-theme .pic-circle .profile-wrapper .profile-gem {
      opacity: 0;
    }

    .csgowin-theme .pic-circle .profile-wrapper .profile-win {
      opacity: 1;
    }

    .gem-theme .pic-circle {
      background: rgba(68, 27, 126, 0.062) !important;
      box-shadow: 0px 5.19824px 5.19824px rgba(0, 0, 0, 0.25), inset 0px 1.29956px 0px 1.29956px rgba(98, 7, 226, 0.4) !important;
    }

    .csgowin-theme .pic-circle {
      background: rgba(231, 201, 104, 0.062) !important;
      box-shadow: 0px 5.19824px 5.19824px rgba(0, 0, 0, 0.25), inset 0px 1.29956px 0px 1.29956px rgba(226, 175, 7, 0.4) !important;
    }

    .pic-circle-2 {
      padding: 0 !important;
      width: 111.34px;
      height: 111.34px;
      border-radius: 55.67px !important;
    }
    .pic-circle-3 {
      padding: 0 !important;
      width: 107.77px;
      height: 107.77px;
      border-radius: 53.8856px !important;
    }

    .text-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 23.39px;
      width: 100%;
    }
    .text-block-2 {
      gap: 22.52px;
    }
    .text-block-3 {
      gap: 21.8px;
    }

    .name-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0px;
      width: 100%;
    }
    .name-row span {
      font-weight: 700;
      font-size: 20.7929px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    }
    .name-row-2 span {
      font-size: 20.0162px;
      line-height: 25px;
    }
    .name-row-3 span {
      font-size: 19.3746px;
      line-height: 24px;
    }

    .stats {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 2.6px;
      width: 100%;
    }
    .stats-2 {
      gap: 2.5px;
    }
    .stats-3 {
      gap: 2.42px;
    }

    .stats-label {
      font-weight: 700;
      font-size: 18.1938px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #7e7e7e;
    }
    .stats-label-2 {
      font-size: 17.5142px;
      line-height: 25px;
    }
    .stats-label-3 {
      font-size: 16.9528px;
      line-height: 24px;
    }

    .stats-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-weight: 700;
      font-size: 20.7929px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }
    .stats-value-2 {
      font-size: 20.0162px;
      line-height: 25px;
    }
    .stats-value-3 {
      font-size: 19.3746px;
      line-height: 24px;
    }

    .stats-value-lg {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-weight: 700;
      font-size: 25.9912px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }
    .stats-value-lg-2 {
      font-size: 25.0202px;
      line-height: 25px;
    }
    .stats-value-lg-3 {
      font-size: 24.2182px;
      line-height: 24px;
    }

    .podium-wagered-text,
    .podium-prize-text {
      transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    }

    .coin-icon-img {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      position: relative;
    }

    .coin-icon-img .coin-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .coin-icon-img .coin-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .coin-icon-img .coin-wrapper .coin-default {
      opacity: 1;
    }

    .coin-icon-img .coin-wrapper .coin-gem {
      opacity: 0;
    }

    .coin-icon-img .coin-wrapper .coin-win {
      opacity: 0;
    }

    .gem-theme .coin-icon-img .coin-wrapper .coin-default {
      opacity: 0;
    }

    .gem-theme .coin-icon-img .coin-wrapper .coin-gem {
      opacity: 1;
    }

    .gem-theme .coin-icon-img .coin-wrapper .coin-win {
      opacity: 0;
    }

    .csgowin-theme .coin-icon-img .coin-wrapper .coin-default {
      opacity: 0;
    }

    .csgowin-theme .coin-icon-img .coin-wrapper .coin-gem {
      opacity: 0;
    }

    .csgowin-theme .coin-icon-img .coin-wrapper .coin-win {
      opacity: 1 !important;
    }

    .place-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px;
      gap: 10.4px;
      width: 76.67px;
      height: 56.4px;
    }
    .place-wrap-2 {
      width: 73.81px;
      height: 54.01px;
      gap: 10.01px;
    }
    .place-wrap-3 {
      width: 71.44px;
      height: 52.69px;
      gap: 9.69px;
    }

    .place-number {
      font-weight: 700;
      font-size: 46.7841px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #E7E7DA;
    }
    .place-number-2 {
      font-size: 45.0364px;
      line-height: 25px;
    }
    .place-number-3 {
      font-size: 43.5928px;
      line-height: 24px;
    }

    .place-label {
      font-weight: 700;
      font-size: 18.1938px;
      line-height: 26px;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }
    .place-label-2 {
      font-size: 17.5142px;
      line-height: 25px;
    }
    .place-label-3 {
      font-size: 16.9528px;
      line-height: 24px;
    }

    .timer-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 17px;
      width: 315px;
      max-width: 100%;
    }

    .timer-section .ending {
      width: 100%;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      color: #7e7e7e;
      z-index: 5;
      transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    }

    .timer-blocks {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 17px;
      width: 100%;
      justify-content: center;
    }

    .time-block {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 8px;
      gap: 2px;
      width: 51px;
      height: 47px;
      background-color: #0000009a !important;
      border: 1px solid #0000009a;
      border-radius: 5px;
      flex: none;
      z-index: 5;
    }

    .time-block .num {
      font-weight: 700;
      font-size: 16px;
      line-height: 20px;
      text-align: center;
      color: #D9D9D9;
      transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    }

    .time-block .label {
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      color: #00A6FD;
      transition: color 0.7s ease;
    }

    .colon {
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      color: #4E5B69;
      width: 4px;
      z-index: 5;
    }

    .check-full {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 26px;
      gap: 10px;
      width: 262px;
      max-width: 100%;
      height: 40px;
      background: #00A6FD;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.7s ease;
      text-decoration: none;
    }

    .check-full:hover {
      background: #0088dd;
    }

    .check-full span {
      font-weight: 700;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .bonuses-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 65px;
      width: 1026px;
      max-width: 100%;
      position: relative;
      scroll-margin-top: 100px;
    }

    .bonuses-lights {
      position: absolute;
      width: 850px;
      height: 612px;
      left: 50%;
      top: 120%;
      transform: translate(-50%, -50%) rotate(180deg);
      pointer-events: none;
      z-index: -1;
      overflow: visible;
    }

    .bonuses-lights .ellipse-8 {
      position: absolute;
      width: 800px;
      height: 540px;
      left: calc(50% - 400px - 31.85px);
      top: calc(50% - 270px + 313.48px);
      background: #00A6FD;
      opacity: 0.01;
      filter: blur(210.5px);
      transform: rotate(174.7deg);
      border-radius: 50%;
    }

    .bonuses-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      width: 491.46px;
      max-width: 100%;
      z-index: 1;
      position: relative;
    }

    .bonuses-text .frame-389 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      isolation: isolate;
      width: 491.46px;
      max-width: 100%;
      position: relative;
      margin-top: 105px;
    }

    .bonuses-text .check-out-exclusive {
      width: 230px;
      height: 11px;
      font-style: italic;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
    }

    .bonuses-title {
      width: 100%;
      max-width: 487px;
      height: 67px;
      font-style: italic;
      font-weight: 900;
      font-size: clamp(48px, 12vw, 96px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: #00A6FD;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
      white-space: nowrap;
      z-index: 1;
      margin-bottom: 15px;
    }

    .bonuses-text .ellipse-bonus-bg {
      position: absolute;
      width: 353px;
      max-width: 90%;
      height: 55px;
      left: 52.49px;
      top: 34px;
      background: #00A6FD;
      mix-blend-mode: screen;
      filter: blur(65.45px);
      transform: rotate(-2.76deg);
      z-index: 2;
      pointer-events: none;
      border-radius: 50%;
    }

    .bonus-tabs {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 26px;
      width: 1026px;
      max-width: 100%;
      flex-wrap: wrap;
      z-index: 1;
      position: relative;
    }

    .bonus-cards-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 60px;
      width: 1026px;
      max-width: 100%;
      flex-wrap: wrap;
    }

    .bonus-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      isolation: isolate;
      width: 280px;
      height: 380px;
      margin-top: 30px;
      position: relative;
      cursor: default;
      overflow: visible;
    }

    .bonus-card .bonus-top {
      width: 280px;
      height: 140px;
      background: #0B0D0F;
      border-radius: 20px 20px 0px 0px;
      margin: -15px 0px;
      position: relative;
      overflow: hidden;
      z-index: 2;
      flex-shrink: 0;
      transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  border-radius 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: height;
    }

    .bonus-card:hover .bonus-top {
      height: 200px;
      border-radius: 20px 20px 0px 0px;
    }

    .bonus-top .bonus-images {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .bonus-top .bonus-images img {
      position: absolute;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform, left, top, width, height, filter, opacity;
      object-fit: contain;
    }

    .bonus-card .bonus-images .img-caseTITAN {
      right: -45px;
      top: 100px;
      width: 130px;
      height: auto;
      transform: translate(-50%, -50%) rotate(8deg);
      filter: blur(0px);
      opacity: 0.6;
      z-index: 3;
    }
    .bonus-card .bonus-images .img-caseDLORE {
      left: 102px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card .bonus-images .img-GUNGNIR {
      right: -95px;
      top: 75px;
      width: 140px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-20deg);
      filter: blur(3px);
      opacity: 0.35;
      z-index: 1;
    }
    .bonus-card .bonus-images .img-TITAN {
      left: 50px;
      top: 80px;
      width: 110px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-12deg);
      filter: blur(3px);
      opacity: 0.45;
      z-index: 0;
    }

    .bonus-card.csgogem .bonus-images .img-caseHOWL {
      left: 102px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card.csgogem .bonus-images .img-caseVULCAN {
      right: -75px;
      top: 100px;
      width: 160px;
      height: auto;
      transform: translate(-50%, -50%) rotate(8deg);
      filter: blur(0px);
      opacity: 0.6;
      z-index: 3;
    }
    .bonus-card.csgogem .bonus-images .img-TALON {
      right: -55px;
      top: 55px;
      width: 100px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(3px);
      opacity: 0.35;
      z-index: 1;
    }
    .bonus-card.csgogem .bonus-images .img-VICE {
      left: 60px;
      top: 70px;
      width: 90px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(3px);
      opacity: 0.45;
      z-index: 0;
    }

    .bonus-card.roobet .bonus-images .img-HADES {
      right: -22px;
      top: 90px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(0px);
      opacity: 0.7;
      z-index: 3;
    }
    .bonus-card.roobet .bonus-images .img-SMOKEY {
      left: 77px;
      top: 110px;
      width: 120px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-8deg);
      filter: blur(0px);
      opacity: 0.5;
      z-index: 2;
    }
    .bonus-card.roobet .bonus-images .img-SHROOM {
      left: 138px;
      top: 45px;
      width: 70px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg) scaleX(-1);
      filter: blur(2px);
      opacity: 0.5;
      z-index: 0;
    }
    .bonus-card.roobet .bonus-images .img-1000X {
      right: 3px;
      top: 45px;
      width: 50px;
      height: auto;
      transform: translate(-50%, -50%) rotate(-15deg);
      filter: blur(1px);
      opacity: 0.5;
      z-index: 1;
    }

    .bonus-card:hover .bonus-images .img-caseTITAN {
      right: -95px;
      top: 150px;
      width: 180px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-8deg);
    }
    .bonus-card:hover .bonus-images .img-caseDLORE {
      left: 102px;
      top: 130px;
      width: 170px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(7deg);
    }
    .bonus-card:hover .bonus-images .img-GUNGNIR {
      right: -75px;
      top: 75px;
      width: 170px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-30deg) scaleX(-1);
    }
    .bonus-card:hover .bonus-images .img-TITAN {
      left: 50px;
      top: 60px;
      width: 140px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-12deg);
    }

    .bonus-card.csgogem:hover .bonus-images .img-caseHOWL {
      left: 55px;
      top: 130px;
      width: 170px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(16deg);
    }
    .bonus-card.csgogem:hover .bonus-images .img-caseVULCAN {
      right: -135px;
      top: 150px;
      width: 210px;
      filter: blur(0px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-15deg);
    }
    .bonus-card.csgogem:hover .bonus-images .img-TALON {
      right: -75px;
      top: 75px;
      width: 150px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-120deg) scaleX(-1);
    }
    .bonus-card.csgogem:hover .bonus-images .img-VICE {
      left: 100px;
      top: 110px;
      width: 140px;
      filter: blur(2px);
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-22deg);
    }

    .bonus-card.roobet:hover .bonus-images .img-HADES {
      right: -122px;
      top: 90px;
      width: 180px;
      transform: translate(-50%, -50%) rotate(0deg);
      filter: blur(0px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-SMOKEY {
      left: 57px;
      top: 90px;
      width: 160px;
      transform: translate(-50%, -50%) rotate(-8deg);
      filter: blur(0px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-SHROOM {
      left: 138px;
      top: 133px;
      width: 100px;
      transform: translate(-50%, -50%) rotate(15deg) scaleX(-1);
      filter: blur(1px);
      opacity: 1;
    }
    .bonus-card.roobet:hover .bonus-images .img-1000X {
      right: 75px;
      top: 45px;
      width: 70px;
      transform: translate(-50%, -50%) rotate(15deg);
      filter: blur(1px);
      opacity: 0.8;
    }

    .bonus-card .bonus-top .top-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }

    .bonus-card .bonus-top .top-lights .ellipse-7 {
      position: absolute;
      width: 340px;
      height: 200px;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #25405a;
      opacity: 0.18;
      filter: blur(210.5px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card .bonus-top .top-lights .ellipse-8 {
      position: absolute;
      width: 420px;
      height: 250px;
      left: 50%;
      bottom: -50px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.18;
      filter: blur(210.5px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card .bonus-top .top-lights .ellipse-9 {
      position: absolute;
      width: 280px;
      height: 120px;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.18;
      filter: blur(85.95px);
      border-radius: 50%;
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bonus-card:hover .bonus-top .top-lights .ellipse-7 {
      opacity: 0.32;
    }
    .bonus-card:hover .bonus-top .top-lights .ellipse-8 {
      opacity: 0.34;
    }
    .bonus-card:hover .bonus-top .top-lights .ellipse-9 {
      opacity: 0.34;
    }

    .bonus-card .bonus-top .bonus-icon {
      position: absolute;
      width: 120px;
      height: 50px;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
      z-index: 5;
      object-fit: contain;
    }

    .bonus-card.csgogem .bonus-top .bonus-icon {
      width: 180px;
      height: 35px;
    }

    .bonus-card.roobet .bonus-top .bonus-icon {
      width: 190px;
      height: 45px;
    }

    .bonus-card .bonus-frame {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 25px 25px;
      gap: 30px;
      isolation: isolate;
      width: 280px;
      height: 260px;
      background: #080A0C;
      border: 1px solid #152638cb;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin-top: -15px;
      z-index: 3;
      transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  padding-top 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform-origin: bottom center;
      will-change: height, padding-top;
    }

    .bonus-card:hover .bonus-frame {
      height: 200px;
      padding-top: 10px;
    }

    .bonus-card .bonus-frame .frame-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-7 {
      position: absolute;
      width: 320px;
      height: 220px;
      left: 78%;
      top: 68%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #4C5864;
      opacity: 0.15;
      filter: blur(80px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-8 {
      position: absolute;
      width: 360px;
      height: 250px;
      left: 82%;
      top: 72%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.12;
      filter: blur(80px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-lights .ellipse-9 {
      position: absolute;
      width: 270px;
      height: 125px;
      left: 82%;
      top: 82%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #00A6FD;
      opacity: 0.12;
      filter: blur(40px);
      border-radius: 50%;
    }

    .bonus-card .bonus-frame .frame-23 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 15px;
      width: 100%;
      z-index: 2;
      position: relative;
      transition: gap 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      flex-shrink: 0;
    }

    .bonus-card:hover .bonus-frame .frame-23 {
      gap: 4px;
      transform: translateY(-10px);
    }

    .bonus-card .bonus-frame .frame-23 .bonus-percent {
      width: 100%;
      font-weight: 700;
      font-size: 24px;
      line-height: 1.2;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .bonus-card .bonus-frame .frame-23 .bonus-desc {
      width: 100%;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.4;
      text-align: center;
      letter-spacing: -0.02em;
      color: #B3BBC4;
    }

    .bonus-card .bonus-frame .frame-21 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 8px;
      width: 100%;
      z-index: 3;
      position: absolute;
      bottom: 25px;
      left: 0;
      padding-left: 25px;
      padding-right: 25px;
    }

    .bonus-card .bonus-frame .frame-21 .code-box {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 44px;
      gap: 10px;
      width: 100%;
      height: 45px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 7px;
      cursor: default;
      user-select: none;
    }

    .bonus-card .bonus-frame .frame-21 .code-box span {
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #B3BBC4;
      text-align: center;
      white-space: nowrap;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 44px;
      gap: 10px;
      width: 100%;
      height: 45px;
      background: #00A6FD;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.2s;
      text-decoration: none;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn:hover {
      background: #0088dd;
    }

    .bonus-card .bonus-frame .frame-21 .claim-btn span {
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
    }

    .socials-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      width: 1026px;
      max-width: 100%;
      position: relative;
      margin-top: 100px;
      margin-bottom: -20px;
    }

    .socials-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      isolation: isolate;
      width: 442.46px;
      max-width: 100%;
      position: relative;
    }

    .socials-text .follow-our {
      width: 113px;
      height: 11px;
      font-style: italic;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      text-align: center;
    }

    .socials-title {
      width: 100%;
      max-width: 438px;
      height: 67px;
      font-style: italic;
      font-weight: 900;
      font-size: clamp(48px, 12vw, 96px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: #00A6FD;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
      white-space: nowrap;
      z-index: 1;
    }

    .socials-text .ellipse-social-bg {
      position: absolute;
      width: 363.62px;
      max-width: 90%;
      height: 55px;
      left: 38.54px;
      top: 27.78px;
      background: #00A6FD;
      mix-blend-mode: screen;
      filter: blur(65.45px);
      transform: rotate(-2.76deg);
      z-index: 2;
      pointer-events: none;
      border-radius: 50%;
    }

    .socials-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 80px;
      width: 1026px;
      max-width: 100%;
      flex-wrap: wrap;
    }

    .social-card {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 30px 25px;
      gap: 30px;
      isolation: isolate;
      width: 220px;
      height: 320px;
      background: #080A0C;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin-top: 30px;
      transition: box-shadow 0.8s ease;
    }

    .social-card .social-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .social-card .social-lights .ellipse-7 {
      position: absolute;
      width: 280px;
      height: 180px;
      left: 80%;
      top: 70%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      background: #4C5864;
      opacity: 0.15;
      filter: blur(70px);
      border-radius: 50%;
    }

    .social-card .social-lights .ellipse-8 {
      position: absolute;
      width: 320px;
      height: 210px;
      left: 85%;
      top: 75%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      opacity: 0.12;
      filter: blur(70px);
      border-radius: 50%;
    }

    .social-card .social-lights .ellipse-9 {
      position: absolute;
      width: 230px;
      height: 100px;
      left: 85%;
      top: 85%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
      opacity: 0.12;
      filter: blur(35px);
      border-radius: 50%;
    }

    .social-card.discord .social-lights .ellipse-8,
    .social-card.discord .social-lights .ellipse-9 {
      background: #4D41F2;
    }
    .social-card.twitter .social-lights .ellipse-8,
    .social-card.twitter .social-lights .ellipse-9 {
      background: #188DB2;
    }
    .social-card.kick .social-lights .ellipse-8,
    .social-card.kick .social-lights .ellipse-9 {
      background: #189A2E;
    }

    .social-card .social-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 18px;
      width: 100%;
      z-index: 1;
      position: relative;
    }

    .social-card .social-icon-circle {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 44px;
      gap: 10px;
      width: 110px;
      height: 110px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 80px;
      overflow: hidden;
    }

    .social-card .social-icon-circle img {
      width: 55px;
      height: 55px;
      object-fit: contain;
    }

    .social-card .social-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 12px;
      width: 100%;
    }

    .social-card .social-info .social-name {
      width: 100%;
      font-weight: 600;
      font-size: 18px;
      line-height: 1.2;
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .social-card .social-info .social-desc {
      width: 100%;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.4;
      text-align: center;
      letter-spacing: -0.02em;
      color: #B3BBC4;
    }

    .social-card .social-btn {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 14px 57px;
      gap: 10px;
      width: 100%;
      height: 50px;
      border-top: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 7px;
      z-index: 2;
      cursor: pointer;
      transition: opacity 0.8s ease;
      text-decoration: none;
      font-weight: 700;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.02em;
      color: #FFFFFF;
    }

    .social-card .social-btn:hover {
      opacity: 0.55;
    }
    .social-card.discord .social-btn {
      background: #4D41F2;
    }
    .social-card.twitter .social-btn {
      background: #188DB2;
    }
    .social-card.kick .social-btn {
      background: #189A2E;
    }

    .social-card.discord:hover {
      box-shadow: 0 0 20px 3px rgba(77, 65, 242, 0.15);
    }

    .social-card.twitter:hover {
      box-shadow: 0 0 20px 3px rgba(24, 141, 178, 0.15);
    }

    .social-card.kick:hover {
      box-shadow: 0 0 20px 3px rgba(24, 154, 46, 0.15);
    }

    .social-card:hover {
      border-color: rgba(255, 255, 255, 0.05);
    }

    .footer-lights {
      position: absolute;
      width: 100%;
      height: 500px;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }

    .footer-lights .ellipse-7 {
      position: absolute;
      width: 787px;
      height: 400px;
      left: 50%;
      top: 50px;
      background: #4C5864;
      opacity: 0.25;
      filter: blur(150px);
      transform: translateX(-50%) rotate(-5.3deg);
      border-radius: 50%;
    }

    .footer-lights .ellipse-9 {
      position: absolute;
      width: 667px;
      height: 300px;
      left: 50%;
      top: 100px;
      background: #00A6FD;
      opacity: 0.25;
      filter: blur(80px);
      transform: translateX(-50%) rotate(-5.3deg);
      border-radius: 50%;
    }

    .footer {
      box-sizing: border-box;
      width: 100%;
      background: #080A0C;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin-top: 60px;
      z-index: 5;
      flex-shrink: 0;
      padding: 75px 40px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 421px;
    }

    .footer .footer-main {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      width: 100%;
      max-width: 1451px;
      z-index: 1;
      position: relative;
      gap: 40px;
      flex: 1;
    }

    .footer .footer-left {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 60px;
      flex-wrap: wrap;
    }

    .footer .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 17px;
    }

    .footer .footer-griff-rewards {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-style: italic;
      font-weight: 900;
      font-size: 48px;
      line-height: 90%;
      letter-spacing: -0.02em;
      transform: matrix(1, 0, -0.07, 1, 0, 0);
      text-align: center;
      margin-right: 125px;
    }

    .footer .footer-griff-rewards .griff {
      color: #FFFFFF;
      display: block;
    }

    .footer .footer-griff-rewards .rewards {
      color: #00A6FD;
      display: block;
      margin-top: -5px;
      transition: color 0.7s ease;
    }

    .footer .footer-copyright-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
    }

    .footer .footer-copyright-text {
      font-weight: 700;
      font-size: 13px;
      line-height: 16px;
      color: #4E5B69;
      white-space: nowrap;
    }

    .footer .footer-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 11px;
    }

    .footer .footer-nav-title {
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      color: #B3BBC4;
    }

    .footer .footer-nav a {
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      color: #4E5B69;
      text-decoration: none;
      transition: color 0.25s ease;
    }

    .footer .footer-nav a:hover {
      color: #00A6FD;
    }

    .footer .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 27px;
    }

    .footer .footer-socials-block {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
    }

    .footer .footer-socials-label {
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      color: #B3BBC4;
    }

    .footer .footer-social-icons {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 15px;
    }

    .footer .footer-social-icons a {
      display: inline-flex;
      line-height: 0;
    }

    .footer .footer-social-icons img {
      width: 21px;
      height: 21px;
      object-fit: contain;
      opacity: 0.8;
      transition: opacity 0.3s ease;
      filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(1000%) hue-rotate(165deg);
    }

    .footer .footer-social-icons img:hover {
      opacity: 1;
    }

    .footer .footer-credits {
      width: 242px;
      height: 15px;
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      text-align: left;
      text-transform: uppercase;
      margin-bottom: -15px;
      transform: translateX(50px);
      color: #4C5864;
    }

    .footer .footer-credits .credit-link {
      color: #4C5864;
      text-decoration: none;
      transition: color 0.25s ease;
    }

    .footer .footer-credits .credit-link:hover {
      color: #00A6FD;
    }

    .footer .footer-disclaimer {
      width: 100%;
      max-width: 714px;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      color: #4E5B69;
      opacity: 0.5;
      z-index: 1;
      position: relative;
      margin-top: 40px;
      padding-top: 20px;
    }

    .lb-lights-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
      overflow: visible;
    }

    .lb-lights-container .lb-lights-outside {
      position: sticky;
      top: 50%;
      width: 2150px;
      height: 1970px;
      margin: 0 auto;
      transform: translateY(-87.5%) translateX(-5%);
      pointer-events: none;
      overflow: visible;
    }

    .lb-lights-container .lb-lights-outside .ellipse-7,
    .lb-lights-container .lb-lights-outside .ellipse-8,
    .lb-lights-container .lb-lights-outside .ellipse-9 {
      position: absolute;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-5.3deg);
    }

    .lb-lights-container .lb-lights-outside .ellipse-7 {
      width: 810px;
      height: 540px;
      background: #4C5864;
      opacity: 0.31;
      filter: blur(170px);
    }

    .lb-lights-container .lb-lights-outside .ellipse-8 {
      width: 1100px;
      height: 740px;
      background: #00A6FD;
      opacity: 0.25;
      filter: blur(170px);
      transition: background 0.7s ease;
    }

    .lb-lights-container .lb-lights-outside .ellipse-9 {
      width: 690px;
      height: 300px;
      background: #00A6FD;
      opacity: 0.30;
      filter: blur(70px);
      transition: background 0.7s ease;
    }

    .content-fade {
      opacity: 0.15 !important;
      transform: scale(0.97);
    }

    .pic-circle.profile-fade,
    .avatar.profile-fade {
      transform: scale(0.95) !important;
    }

    .pic-circle.profile-fade .profile-wrapper img,
    .avatar.profile-fade .profile-wrapper img {
      opacity: 0.15 !important;
    }

    .gem-theme .leaderboard-title {
      color: #6207E2;
      text-shadow: 0 0 28px rgba(98, 7, 226, 0.6), 0 0 60px rgba(98, 7, 226, 0.3);
    }
    .gem-theme .top-text .ellipse-bg {
      background: #6207E2;
    }
    .gem-theme .tab-btn.active {
      border-color: #6207E2;
    }
    .gem-theme .time-block .label {
      color: #6207E2;
    }
    .gem-theme .check-full {
      background: #6207E2;
    }
    .gem-theme .check-full:hover {
      background: #4a05b0;
    }
    .gem-theme .card-lights .ellipse-8,
    .gem-theme .card-lights .ellipse-9 {
      background: #6207E2 !important;
    }
    .gem-theme .lb-card-1 .card-lights .ellipse-8,
    .gem-theme .lb-card-1 .card-lights .ellipse-9 {
      background: #6207E2 !important;
    }
    .gem-theme .lb-card-2 .card-lights .ellipse-8,
    .gem-theme .lb-card-2 .card-lights .ellipse-9 {
      background: #6207E2 !important;
    }
    .gem-theme .lb-card-3 .card-lights .ellipse-8,
    .gem-theme .lb-card-3 .card-lights .ellipse-9 {
      background: #6207E2 !important;
    }
    .gem-theme .lb-lights-outside .ellipse-8,
    .gem-theme .lb-lights-outside .ellipse-9 {
      background: #6207E2 !important;
    }
    .gem-theme .card-frame {
      border-color: #4a1a8a;
    }

    .csgowin-theme .leaderboard-title {
      color: #E2AF07;
      text-shadow: 0 0 28px rgba(226, 175, 7, 0.6), 0 0 60px rgba(226, 175, 7, 0.3);
    }
    .csgowin-theme .top-text .ellipse-bg {
      background: #E2AF07;
    }
    .csgowin-theme .tab-btn.active {
      border-color: #E2AF07;
    }
    .csgowin-theme .time-block .label {
      color: #E2AF07;
    }
    .csgowin-theme .check-full {
      background: #E2AF07;
    }
    .csgowin-theme .check-full:hover {
      background: #b89005;
    }
    .csgowin-theme .card-lights .ellipse-8,
    .csgowin-theme .card-lights .ellipse-9 {
      background: #E2AF07 !important;
    }
    .csgowin-theme .lb-card-1 .card-lights .ellipse-8,
    .csgowin-theme .lb-card-1 .card-lights .ellipse-9 {
      background: #E2AF07 !important;
    }
    .csgowin-theme .lb-card-2 .card-lights .ellipse-8,
    .csgowin-theme .lb-card-2 .card-lights .ellipse-9 {
      background: #E2AF07 !important;
    }
    .csgowin-theme .lb-card-3 .card-lights .ellipse-8,
    .csgowin-theme .lb-card-3 .card-lights .ellipse-9 {
      background: #E2AF07 !important;
    }
    .csgowin-theme .lb-lights-outside .ellipse-8,
    .csgowin-theme .lb-lights-outside .ellipse-9 {
      background: #E2AF07 !important;
    }
    .csgowin-theme .card-frame {
      border-color: #8a6a04;
    }

    .page-wrapper {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }