@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#mobile-menu-button {
      position: relative;
    }

    /* Keep decorative overflows from stretching page width, without clipping Y effects. */
    html,
    body {
      overflow-x: clip;
    }

    /* Custom Scrollbar for Reviews Modal */
    .custom-scroll::-webkit-scrollbar {
      width: 4px;
    }

    .custom-scroll::-webkit-scrollbar-track {
      background: rgba(67, 63, 163, 0.4);
      border-radius: 4px;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
      background: #908cff;
      border-radius: 2px;
    }

    /* Firefox fallback */
    .custom-scroll {
      scrollbar-width: thin;
      scrollbar-color: #908cff rgba(67, 63, 163, 0.4);
      overscroll-behavior: contain;
    }

    html.page-scroll-locked,
    body.page-scroll-locked {
      overflow: hidden;
      overscroll-behavior: none;
    }

    body.page-scroll-locked {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
    }

    #review-modal {
      overscroll-behavior: contain;
    }

    /* Force hidden to override responsive flex display */
    #review-modal.hidden {
      display: none !important;
    }

    #mobile-menu-button span {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 10px;
      background: #ededf8;
      transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
    }

    #mobile-menu-button span:nth-child(1) {
      top: calc(50% - 8px);
    }

    #mobile-menu-button span:nth-child(2) {
      top: 50%;
    }

    #mobile-menu-button span:nth-child(3) {
      top: calc(50% + 8px);
    }

    #mobile-menu-button.open span:nth-child(1),
    #mobile-menu-button.open span:nth-child(2),
    #mobile-menu-button.open span:nth-child(3) {
      top: 50%;
    }

    #mobile-menu-button.open span:nth-child(1) {
      transform: translateY(-50%) rotate(45deg);
    }

    #mobile-menu-button.open span:nth-child(2) {
      transform: translateY(-50%);
      opacity: 0;
    }

    #mobile-menu-button.open span:nth-child(3) {
      transform: translateY(-50%) rotate(-45deg);
    }

    :root {
      --shell-px-0: 16px;
      --shell-px-480: 24px;
      --shell-px-768: 32px;
      --shell-px-992: 40px;
      --shell-px-1440: 0px;
      --shell-px-1920: 0px;
    }

    .section-shell {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--section-px-0, var(--shell-px-0));
      padding-right: var(--section-px-0, var(--shell-px-0));
      max-width: var(--section-max-0, 100%);
    }

    @media (min-width: 480px) {
      .section-shell {
        padding-left: var(--section-px-480, var(--shell-px-480));
        padding-right: var(--section-px-480, var(--shell-px-480));
        max-width: var(--section-max-480, var(--section-max-0, 100%));
      }
    }

    @media (min-width: 768px) {
      .section-shell {
        padding-left: var(--section-px-768, var(--shell-px-768));
        padding-right: var(--section-px-768, var(--shell-px-768));
        max-width: var(--section-max-768,
            var(--section-max-480, var(--section-max-0, 100%)));
      }
    }

    @media (min-width: 992px) {
      .section-shell {
        padding-left: var(--section-px-992, var(--shell-px-992));
        padding-right: var(--section-px-992, var(--shell-px-992));
        max-width: var(--section-max-992,
            var(--section-max-768,
              var(--section-max-480, var(--section-max-0, 100%))));
      }
    }

    @media (min-width: 1440px) {
      .section-shell {
        padding-left: var(--section-px-1440, var(--shell-px-1440));
        padding-right: var(--section-px-1440, var(--shell-px-1440));
        max-width: var(--section-max-1440,
            var(--section-max-992,
              var(--section-max-768,
                var(--section-max-480, var(--section-max-0, 100%)))));
      }
    }

    @media (min-width: 1920px) {
      .section-shell {
        padding-left: var(--section-px-1920, var(--shell-px-1920));
        padding-right: var(--section-px-1920, var(--shell-px-1920));
        max-width: var(--section-max-1920,
            var(--section-max-1440,
              var(--section-max-992,
                var(--section-max-768,
                  var(--section-max-480, var(--section-max-0, 100%))))));
      }
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .hero-video-frame {
      background: #222057;
    }

    .hero-video-frame iframe {
      position: absolute;
      inset: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .hero-video-frame.is-loaded iframe {
      opacity: 1;
    }

    .hero-video-loader {
      background:
        radial-gradient(circle at 20% 28%, rgba(34, 32, 87, 0.14), transparent 18%),
        radial-gradient(circle at 72% 64%, rgba(34, 32, 87, 0.12), transparent 19%),
        linear-gradient(135deg, #c8dbfa 0%, #afc7ee 100%);
      color: #222057;
      opacity: 1;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .hero-video-loader::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
          transparent 0%,
          rgba(255, 255, 255, 0.12) 36%,
          rgba(255, 255, 255, 0.42) 50%,
          rgba(255, 255, 255, 0.12) 64%,
          transparent 100%);
      transform: translateX(-100%);
      animation: hero-video-shimmer 1.65s ease-in-out infinite;
    }

    .hero-video-frame.is-loaded .hero-video-loader {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .hero-video-loader__play {
      position: relative;
      width: 64px;
      height: 64px;
      border-radius: 999px;
      background: rgba(113, 118, 255, 0.78);
      box-shadow: 0 18px 48px rgba(67, 63, 163, 0.34);
      animation: hero-video-pulse 1.55s ease-in-out infinite;
    }

    .hero-video-loader__play::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      border-left: 18px solid rgba(237, 237, 248, 0.92);
      transform: translate(-38%, -50%);
    }

    .hero-video-loader__star {
      position: absolute;
      width: 86px;
      height: 86px;
      background: rgba(34, 32, 87, 0.28);
      clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
      filter: blur(6px);
      opacity: 0.55;
      animation: hero-video-star 2.2s ease-in-out infinite;
    }

    .hero-video-loader__star--left {
      left: 9%;
      top: 16%;
    }

    .hero-video-loader__star--top {
      left: 58%;
      top: -4%;
      width: 68px;
      height: 68px;
      animation-delay: 0.3s;
    }

    .hero-video-loader__star--right {
      right: 11%;
      top: 44%;
      animation-delay: 0.6s;
    }

    .hero-video-loader__star--bottom {
      left: 39%;
      bottom: 6%;
      width: 72px;
      height: 72px;
      animation-delay: 0.9s;
    }

    @keyframes hero-video-shimmer {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    @keyframes hero-video-pulse {
      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.06);
      }
    }

    @keyframes hero-video-star {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.42;
      }

      50% {
        transform: scale(1.08);
        opacity: 0.62;
      }
    }

    @media (min-width: 768px) {
      .hero-video-loader__play {
        width: 82px;
        height: 82px;
      }

      .hero-video-loader__play::before {
        border-top-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 23px;
      }

      .hero-video-loader__star {
        width: 118px;
        height: 118px;
      }

      .hero-video-loader__star--top {
        width: 92px;
        height: 92px;
      }

      .hero-video-loader__star--bottom {
        width: 98px;
        height: 98px;
      }
    }

    @media (min-width: 1920px) {
      .hero-video-loader__play {
        width: 109px;
        height: 109px;
      }

      .hero-video-loader__play::before {
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 31px;
      }

      .hero-video-loader__star {
        width: 157px;
        height: 157px;
      }

      .hero-video-loader__star--top {
        width: 122px;
        height: 122px;
      }

      .hero-video-loader__star--bottom {
        width: 130px;
        height: 130px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-video-loader::before,
      .hero-video-loader__play,
      .hero-video-loader__star {
        animation: none;
      }
    }

    [data-carousel] {
      --carousel-item-width-0: 300px;
      --carousel-item-width-768: 344px;
      --carousel-item-width-992: 444px;
      --carousel-item-width-1440: 364px;
      --carousel-item-width-1920: 524px;
      --carousel-slot-width: var(--carousel-item-width-0);
      --carousel-slot-height: var(--carousel-item-height-0, auto);
    }

    [data-carousel-track] > :not([data-carousel-tail]) {
      width: var(--carousel-slot-width);
      min-width: var(--carousel-slot-width);
      flex: 0 0 var(--carousel-slot-width);
      height: var(--carousel-slot-height);
    }

    @media (min-width: 768px) {
      [data-carousel] {
        --carousel-slot-width: var(--carousel-item-width-768);
        --carousel-slot-height: var(--carousel-item-height-768,
            var(--carousel-item-height-0, auto));
      }
    }

    @media (min-width: 992px) {
      [data-carousel] {
        --carousel-slot-width: var(--carousel-item-width-992);
        --carousel-slot-height: var(--carousel-item-height-992,
            var(--carousel-item-height-768,
              var(--carousel-item-height-0, auto)));
      }
    }

    @media (min-width: 1440px) {
      [data-carousel] {
        --carousel-slot-width: var(--carousel-item-width-1440);
        --carousel-slot-height: var(--carousel-item-height-1440,
            var(--carousel-item-height-992,
              var(--carousel-item-height-768,
                var(--carousel-item-height-0, auto))));
      }
    }

    @media (min-width: 1920px) {
      [data-carousel] {
        --carousel-slot-width: var(--carousel-item-width-1920);
        --carousel-slot-height: var(--carousel-item-height-1920,
            var(--carousel-item-height-1440,
              var(--carousel-item-height-992,
                var(--carousel-item-height-768,
                  var(--carousel-item-height-0, auto)))));
      }
    }

    .reviews-content {
      opacity: 0;
      visibility: hidden;
      height: 0;
      overflow: hidden;
      transition: opacity 0.5s ease;
    }

    .reviews-content.active {
      opacity: 1;
      visibility: visible;
      height: auto;
      overflow: visible;
    }

    .pagination-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-image: url("/assets/sections/reviews/pagination-dot.svg");
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.6;
      transition: all 0.3s ease;
    }

    .pagination-dot.active {
      width: 47px;
      background-image: none;
      background-color: #ededf8;
      border-radius: 60px;
      opacity: 1;
    }

    .pagination-ellipsis {
      min-width: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8380ba;
      font-size: 12px;
      line-height: 1;
    }

    .carousel-hidden {
      display: none !important;
    }

    .article-body {
      color: #ededf8;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
    }

    .article-body > * + * {
      margin-top: 24px;
    }

    .article-body h2 {
      margin-top: 48px;
      font-size: 32px;
      font-weight: 500;
      line-height: 32px;
      color: #ededf8;
    }

    .article-body h3 {
      margin-top: 36px;
      font-size: 24px;
      font-weight: 500;
      line-height: 24px;
      color: #ededf8;
    }

    .article-body p,
    .article-body li {
      color: #ededf8;
    }

    .article-body ul,
    .article-body ol {
      padding-left: 24px;
    }

    .article-body ul {
      list-style: disc;
    }

    .article-body ol {
      list-style: decimal;
    }

    .article-body li + li {
      margin-top: 12px;
    }

    .article-body > .w-full.h-28 {
      height: auto;
      min-height: 112px;
      max-width: 100%;
    }

    .article-body a {
      color: #6dffa3;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .article-table-scroll {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #908cff rgba(67, 63, 163, 0.4);
    }

    .article-table-scroll::-webkit-scrollbar {
      height: 4px;
    }

    .article-table-scroll::-webkit-scrollbar-track {
      background: rgba(67, 63, 163, 0.4);
      border-radius: 4px;
    }

    .article-table-scroll::-webkit-scrollbar-thumb {
      background: #908cff;
      border-radius: 2px;
    }

    .article-body table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid rgba(237, 237, 248, 0.6);
    }

    .article-body th,
    .article-body td {
      border: 1px solid rgba(237, 237, 248, 0.6);
      padding: 10px 12px;
      text-align: left;
      vertical-align: top;
    }

    .article-body th {
      font-weight: 700;
    }

    .article-body img {
      width: 100%;
      height: auto;
      border-radius: 24px;
      background: #2f2d69;
    }

    @media (min-width: 768px) {
      .article-body {
        font-size: 18px;
        line-height: 24px;
      }

      .article-body h2 {
        font-size: 32px;
        line-height: 32px;
      }

      .article-body h3 {
        font-size: 24px;
        line-height: 24px;
      }
    }

    @media (min-width: 1920px) {
      .pagination-dot {
        width: 16px;
        height: 16px;
      }

      .pagination-dot.active {
        width: 62.667px;
      }

      .pagination-ellipsis {
        min-width: 16px;
        font-size: 16px;
      }

      .article-body {
        font-size: 24px;
        line-height: 32px;
      }

      .article-body > * + * {
        margin-top: 32px;
      }

      .article-body h2 {
        margin-top: 64px;
        font-size: 42.667px;
        line-height: 42.667px;
      }

      .article-body h3 {
        margin-top: 48px;
        font-size: 32px;
        line-height: 32px;
      }

      .article-body th,
      .article-body td {
        padding: 13.333px 16px;
      }

      .article-body img {
        border-radius: 32px;
      }
    }

    /* FAQ Accordion Styles */
    .faq-answer-container {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease-out;
    }

    .faq-item.active .faq-answer-container {
      grid-template-rows: 1fr;
    }

    .faq-answer-content {
      overflow: hidden;
    }

    .faq-toggle-icon-minus {
      display: none;
    }

    .faq-item.active .faq-toggle-icon-minus {
      display: block;
    }

    .faq-item.active .faq-toggle-icon-plus {
      display: none;
    }