html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
      background: #101420;
      color: #f4f7fa;
    }

    body {
      min-height: 100vh;
      line-height: 1.6;
    }

    .main-bg {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .header {
      background: rgba(10, 17, 32, 0.92);
      backdrop-filter: blur(6px);
      box-shadow: 0 8px 32px 0 rgba(20, 26, 46, 0.14);
      position: sticky;
      top: 0;
      z-index: 102;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 48px;
      height: auto;
    }

    .logo-area {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }

    .logo {
      height: 44px;
      width: auto;
      filter: drop-shadow(0 2px 8px rgba(0, 32, 64, 0.24));
    }

    .nav {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 40px;
      position: relative;
    }

    .menu {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      list-style: none;
      margin: 0;
      padding: 0;
      align-items: center;
    }

    .menu>li {
      position: relative;
    }

    .menu>li>a {
      display: inline-block;
      padding: 8px 18px;
      border-radius: 20px;
      background: rgba(21, 33, 56, 0.82);
      color: #fff;
      text-decoration: none;
      font-weight: 500;
      font-size: 16px;
      transition: background 0.18s, box-shadow 0.18s;
      box-shadow: 0 2px 8px rgba(21, 33, 56, 0.08);
    }

    .menu>li>a:hover,
    .menu>li:focus-within>a {
      background: linear-gradient(90deg, #26c6da 0%, #1779e6 100%);
      color: #fff;
      box-shadow: 0 3px 16px 0 rgba(23, 121, 230, 0.15);
    }

    .menu>li>a.active-menu-item {
            background: linear-gradient(90deg, #26c6da 0%, #1779e6 100%);
      color: #fff;
      box-shadow: 0 3px 16px 0 rgba(23, 121, 230, 0.15);
    }

    .menu li ul {
      display: none;
      position: absolute;
      top: 110%;
      left: 0;
      min-width: 170px;
      background: #182647;
      border-radius: 22px 22px 24px 24px;
      box-shadow: 0 8px 28px rgba(15, 35, 68, 0.18);
      padding: 12px 0;
      z-index: 40;
    }

    .menu li:hover>ul,
    .menu li:focus-within>ul {
      display: block;
      animation: slideDown .23s cubic-bezier(.27, .73, .49, .95);
    }

    .menu li ul li {
      width: 100%;
    }

    .menu li ul li a {
      padding: 10px 22px;
      background: none;
      border-radius: 16px;
      color: #e6f1fa;
      transition: background .16s;
      display: block;
      font-size: 15px;
    }

    .menu li ul li a:hover {
      background: rgba(38, 198, 218, 0.08);
      color: #26c6da;
    }

    .burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 46px;
      height: 46px;
      background: rgba(21, 33, 56, 0.85);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      gap: 5px;
      z-index: 105;
      transition: background .18s;
    }

    .burger span {
      display: block;
      width: 28px;
      height: 4px;
      background: #26c6da;
      border-radius: 5px;
      transition: transform .2s, opacity .2s;
    }

    @media(max-width:1024px) {
      .header-inner {
        padding: 0 18px;
      }

      .nav {
        margin-left: 20px;
      }
    }

    @media(max-width:840px) {
      .header-inner {
        padding: 0 6vw;
      }

      .logo {
        height: 36px;
      }

      .nav {
        margin-left: 12px;
      }

      table {
        display: block;
        overflow: auto;
      }
    }

    @media(max-width:700px) {
      .header-inner {
        padding: 0 8px;
      }

      .nav {
        margin-left: 10px;
      }

      .logo {
        height: 34px;
      }
    }

    @media(max-width:760px) {
      .menu {
        display: none;
      }

      .burger {
        display: flex;
      }

      ul#mobileMenuList a {
        color: #fff;
      }
    }

    @keyframes slideDown {
      0% {
        opacity: 0;
        transform: translateY(-16px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mobile-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(9, 19, 32, 0.63);
      z-index: 120;
      opacity: 0;
      transition: opacity .22s;
      pointer-events: none;
    }

    .mobile-overlay.active {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      width: 92vw;
      max-width: 340px;
      height: 100vh;
      background: linear-gradient(125deg, #1b2738 60%, #193c54 100%);
      box-shadow: -8px 0 32px rgba(12, 32, 54, 0.23);
      z-index: 121;
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.19, .84, .46, 1);
    }

    .mobile-menu.active {
      display: block;
      transform: translateX(0);
    }

    .mobile-menu-inner {
      padding: 34px 10px 24px 14px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .close-mobile {
      align-self: flex-end;
      background: none;
      border: none;
      font-size: 36px;
      color: #27c7db;
      line-height: 1;
      cursor: pointer;
      padding: 6px 10px 10px 0;
    }

    .mobile-menu-list {
      list-style: none;
      padding: 0;
      margin: 16px 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .mobile-menu-list>li {
      position: relative;
    }

    .mobile-menu-list>li>a {
      display: block;
      padding: 10px 16px;
      border-radius: 16px;
      background: rgba(33, 48, 77, 0.83);
      color: #fff;
      text-decoration: none;
      font-weight: 500;
      font-size: 17px;
      transition: background 0.18s;
    }

    .mobile-menu-list>li>a:hover {
      background: linear-gradient(90deg, #26c6da 0%, #1779e6 100%);
      color: #fff;
    }

    .mobile-menu-list li ul {
      display: none;
      flex-direction: column;
      gap: 11px;
      margin-top: 2px;
    }

    .mobile-menu-list li.open>ul {
      display: flex;
    }

    .mobile-menu-list li ul li a {
      padding: 10px 28px 10px 32px;
      border-radius: 14px;
      background: none;
      font-size: 16px;
      color: #e5f1fc;
    }

    .mobile-menu-list li ul li a:hover {
      background: rgba(38, 198, 218, 0.13);
      color: #26c6da;
    }

    .mobile-menu-list li.has-dropdown>a {
      position: relative;
    }

    .mobile-menu-list li.has-dropdown>a:after {
      content: '\25BC';
      font-size: 13px;
      color: #27c7db;
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%) rotate(0);
      transition: transform .22s;
    }

    .mobile-menu-list li.open>a:after {
      transform: translateY(-50%) rotate(-180deg);
    }

    .hero {
      position: relative;
      min-height: 350px;
      padding: 0;
      box-shadow: 0 12px 38px rgba(22, 34, 71, 0.18);
      overflow: hidden;
      z-index: 2;
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      background: radial-gradient(ellipse at 60% 38%, rgba(38, 198, 218, 0.56) 0%, rgba(23, 121, 230, 0.39) 55%, rgba(21, 33, 56, 0.92) 100%), url('https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
      filter: blur(1.2px) brightness(0.97);
      opacity: 0.97;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 480px;
      margin: 0 auto;
      padding: 76px 24px 56px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero h1 {
      font-size: 2.6rem;
      line-height: 1.14;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 4px 24px rgba(17, 67, 124, 0.22);
      letter-spacing: -1px;
      margin-bottom: 34px;
    }

    .hero .okkwlrkv {
      margin: 0 auto;
      margin-top: 0;
      font-size: 1.38rem;
      padding: 20px 74px 18px 74px;
      border: none;
      border-radius: 38px;
      background: linear-gradient(90deg, #26c6da 0%, #1779e6 100%);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 6px 38px 0 rgba(23, 121, 230, 0.18), 0 2px 10px 0 rgba(38, 198, 218, 0.12);
      cursor: pointer;
      transition: box-shadow .23s, transform .19s, background .2s;
      position: relative;
    }

    .hero .okkwlrkv:hover {
      background: linear-gradient(90deg, #1779e6 0%, #26c6da 100%);
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 10px 48px 0 rgba(23, 121, 230, 0.23), 0 2px 14px 0 rgba(38, 198, 218, 0.17);
    }

    @media (max-width:700px) {
      .hero-content {
        padding: 48px 10vw 38px 10vw;
      }

      .hero h1 {
        font-size: 1.49rem;
        padding: 0 2px;
      }
    }

    .content-wrapper {
      flex: 1;
      display: flex;
      justify-content: center;
      background: linear-gradient(180deg, #101420 0%, #142038 80%, #101420 100%);
    }

    .content-container {
      max-width: 820px;
      width: 100%;
      background: rgba(16, 20, 32, 0.92);
      box-shadow: 0 7px 26px rgba(21, 33, 56, 0.13), 0 1.5px 3px rgba(38, 198, 218, 0.04);
      border-radius: 22px 22px 38px 38px;
      margin-top: -40px;
      position: relative;
      padding: 44px 38px 36px 38px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 38px;
    }

    @media(max-width:700px) {
      .content-container {
        margin-top: -32px;
        padding: 20px 5vw 18px 5vw;
        gap: 21px;
        overflow: hidden;
      }
    }

    table p {
      margin: 0;
    }

    .okkwlrkv {
      display: inline-block;
      margin: 0 auto 28px auto;
      font-size: 1.14rem;
      padding: 17px 48px 15px 48px;
      border: none;
      border-radius: 32px;
      background: linear-gradient(90deg, #26c6da 0%, #1779e6 100%);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 5px 22px 0 rgba(23, 121, 230, 0.16), 0 1.2px 5px 0 rgba(38, 198, 218, 0.09);
      cursor: pointer;
      transition: box-shadow .22s, transform .18s, background .18s;
      position: relative;
    }

    .okkwlrkv:hover {
      background: linear-gradient(90deg, #1779e6 0%, #26c6da 100%);
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 8px 31px 0 rgba(23, 121, 230, 0.21), 0 2px 8px 0 rgba(38, 198, 218, 0.14);
    }

    .content-container img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 14px;
      box-shadow: 0 3px 18px rgba(23, 121, 230, 0.11);
    }

    .content-container table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 2px 12px rgba(21, 33, 56, 0.07);
      margin: 28px 0;
    }

    .content-container th,
    .content-container td {
      border: 1.5px solid #2a3b57;
      padding: 13px 18px;
      background: rgba(18, 25, 42, 0.96);
      color: #e5f5ff;
      vertical-align: middle;
      text-align: left;
      font-size: 1rem;
    }

    .content-container th {
      background: linear-gradient(90deg, #193c54 0%, #223c55 100%);
      color: #21b4e2;
      font-weight: 700;
    }

    .content-container tr:nth-child(even) td {
      background: rgba(30, 48, 71, 0.77);
    }

    .content-container h2 {
      font-size: 1.65rem;
      font-weight: 800;
      color: #26c6da;
      margin-top: 22px;
      letter-spacing: -0.5px;
    }

    .content-container h3 {
      font-size: 1.21rem;
      font-weight: 700;
      color: #21b4e2;
      margin-top: 14px;
      letter-spacing: -0.2px;
    }

    .rating-block {
      padding: 40px 0 26px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #161d2c 0%, #182647 100%);
      box-shadow: 0 -2px 18px rgba(21, 33, 56, 0.09);
    }

    .rating-stars {
      display: flex;
      gap: 14px;
    }

    .star {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .13s;
    }

    .star svg {
      width: 36px;
      height: 36px;
      fill: rgba(244, 247, 250, 0.23);
      filter: drop-shadow(0 2px 8px rgba(21, 33, 56, 0.09));
      transition: fill .13s;
    }

    .star.active svg,
    .star.selected svg {
      fill: #ffd700;
      filter: drop-shadow(0 1.5px 8px rgba(255, 215, 0, 0.15));
    }

    .star.selected svg {
      fill: #ffd700;
    }

    .star:hover svg,
    .star:focus svg {
      fill: #ffe066;
    }

    .rating-block.voted .star {
      cursor: default;
      pointer-events: none;
    }

    .rating-block.voted .star svg {
      filter: drop-shadow(0 1.5px 10px rgba(255, 215, 0, 0.13));
    }

    @media(max-width:700px) {
      .rating-stars {
        gap: 9px;
      }

      .star {
        width: 34px;
        height: 34px;
      }

      .star svg {
        width: 25px;
        height: 25px;
      }
    }

@media(max-width:760px) {
  #burgerBtn.burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 44px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 9999 !important;
}

#burgerBtn.burger::before,
#burgerBtn.burger::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    width: 30px !important;
    height: 3px !important;
    display: block !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    transition: transform .25s ease, top .25s ease, box-shadow .25s ease, background .25s ease !important;
}

#burgerBtn.burger::before {
    top: 10px !important;
    box-shadow: 0 9px 0 #ffffff !important;
}

#burgerBtn.burger::after {
    top: 28px !important;
}

#burgerBtn.burger:hover::before,
#burgerBtn.burger:focus::before {
    background: #ffffff !important;
    box-shadow: 0 9px 0 #ffffff !important;
}

#burgerBtn.burger:hover::after,
#burgerBtn.burger:focus::after {
    background: #ffffff !important;
}

#burgerBtn.burger[aria-expanded="true"]::before,
#burgerBtn.burger.active::before,
#burgerBtn.burger.is-active::before {
    top: 19px !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 0 0 transparent !important;
}

#burgerBtn.burger[aria-expanded="true"]::after,
#burgerBtn.burger.active::after,
#burgerBtn.burger.is-active::after {
    top: 19px !important;
    transform: rotate(-45deg) !important;
}

#burgerBtn.burger:focus {
    outline: none !important;
}
}

    .footer {
      background: #15233c;
      color: #b9e0f6;
      padding: 18px 0;
      box-shadow: 0 -1px 14px rgba(38, 198, 218, 0.04);
      margin-top: 0;
    }

    .footer-inner {
      text-align: center;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.1px;
    }
.mobile-menu-inner a {
    color: #fff;
    text-decoration: none;
}

.mobile-menu-list > li > a.mobile-menu-current {
    background: #ffffff !important;
    color: #21304d !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(255, 255, 255, .18), inset 4px 0 0 #ffffff;
    pointer-events: none;
}