@font-face {
        font-family: "Inter";
        src: url("./assets/inter-400-latin.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 400;
      }

      @font-face {
        font-family: "Inter";
        src: url("./assets/inter-500-latin.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 500;
      }

      @font-face {
        font-family: "Inter";
        src: url("./assets/inter-600-latin.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 600;
      }

      @font-face {
        font-family: "Inter";
        src: url("./assets/inter-700-latin.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 700;
      }

      @font-face {
        font-family: "Inter Display";
        src: url("./assets/inter-display-500-latin.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 500;
      }

      @font-face {
        font-family: "Oswald";
        src: url("./assets/oswald-600.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 600;
      }

      @font-face {
        font-family: "Oswald";
        src: url("./assets/oswald-700.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 700;
      }

      :root {
        --indiex-bg: #0a0a1a;
        --indiex-ink: #15153a;
        --indiex-text: #eafcff;
        --indiex-muted: #96a2cc;
        --indiex-green: #35FFFF;
        --indiex-border: rgba(0, 0, 0, 0);
        --header-max: min(1560px, 94vw);
        --menu-width: 1300px;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--indiex-bg);
      }

      html.lenis {
        height: auto;
      }

      .lenis.lenis-smooth {
        scroll-behavior: auto !important;
      }

      .lenis.lenis-smooth [data-lenis-prevent] {
        overscroll-behavior: contain;
      }

      .lenis.lenis-stopped {
        overflow: hidden;
      }

      .lenis.lenis-scrolling iframe {
        pointer-events: none;
      }

      body {
        color: var(--indiex-text);
        font-size: 12px;
      }

      body.menu-open {
        overflow: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      .sr-only {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }

      .site-shell {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: flex-start;
        min-height: 100vh;
        overflow-x: clip;
        position: relative;
        width: 100%;
      }

      .indiex-header {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: center;
        order: -1000;
        overflow: visible;
        padding: 0 30px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
        will-change: transform;
      }

      .indiex-header.is-scrolled {
        background-color: rgba(10, 10, 26, 0.72);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      }

      .indiex-header.is-hidden {
        transform: translateY(-100%);
      }

      .header-frame {
        flex: none;
        height: auto;
        max-width: var(--header-max);
        position: relative;
        width: 100%;
      }

      .large-menu {
        align-content: center;
        align-items: center;
        background-color: transparent;
        border-color: var(--indiex-border);
        border-style: solid;
        border-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: flex-start;
        margin: 0 auto;
        max-width: 100%;
        overflow: visible;
        padding: 24px 0;
        position: relative;
        width: 100%;
      }

      .brand-area {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .brand-link {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      /* The wrapper used to claim 64x50 while the logo actually rendered 242x46
         and overflowed it. It sizes to the logo now, so the header measures what
         is really there. */
      .brand-logo {
        flex: none;
        height: 58px;
        position: relative;
        width: auto;
      }

      .brand-logo img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: contain;
        object-position: left center;
        width: auto;
      }

      .menu-toggle {
        background: transparent;
        border: 0;
        color: var(--indiex-text);
        cursor: pointer;
        display: none;
        flex: none;
        height: 40px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 40px;
      }

      .menu-toggle span {
        background: currentColor;
        border-radius: 999px;
        display: block;
        height: 2px;
        left: calc(50% - 10px);
        overflow: hidden;
        position: absolute;
        width: 20px;
      }

      .menu-toggle span:first-child {
        top: calc(37.5% - 1px);
      }

      .menu-toggle span:last-child {
        top: calc(62.5% - 1px);
      }

      .indiex-header.is-open .menu-toggle span:first-child {
        top: calc(50% - 1px);
        transform: rotate(45deg);
      }

      .indiex-header.is-open .menu-toggle span:last-child {
        top: calc(50% - 1px);
        transform: rotate(-45deg);
      }

      .menu-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 64px;
        height: min-content;
        justify-content: flex-end;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .nav-links {
        align-content: center;
        align-items: center;
        cursor: pointer;
        display: flex;
        flex: 1 0 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 42px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        scrollbar-width: none;
        width: 1px;
      }

      .nav-links::-webkit-scrollbar {
        height: 0;
        width: 0;
      }

      .nav-link,
      .dropdown-label {
        color: var(--indiex-text);
        display: inline-flex;
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 120%;
        position: relative;
        text-transform: uppercase;
        transition: color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
        user-select: none;
        white-space: pre;
        width: auto;
      }

      .nav-link:hover,
      .nav-link[aria-current="page"],
      .dropdown-trigger:hover .dropdown-label {
        color: var(--indiex-green);
      }

      .dropdown-trigger {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 5px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .dropdown-trigger svg {
        flex: none;
        height: 14px;
        width: 14px;
      }

      .button-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: flex-end;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .primary-button {
        align-content: center;
        align-items: center;
        background: linear-gradient(95deg, #35FFFF 0%, #F933BD 100%);
        border: 0;
        border-radius: 50px;
        box-shadow: 0 6px 16px rgba(0,0,0,.32);
        color: var(--indiex-ink);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 7px 24px 7px 7px;
        position: relative;
        text-decoration: none;
        width: min-content;
      }

      .primary-button::before {
        background-color: var(--indiex-ink);
        border-radius: 35px;
        content: "";
        flex: none;
        height: 44px;
        left: 5px;
        overflow: visible;
        position: absolute;
        top: calc(50% - 22px);
        transition: width 0.35s cubic-bezier(0.44, 0, 0.56, 1);
        width: 44px;
        z-index: 0;
      }

      .primary-button:hover::before {
        width: 95%;
      }

      .arrow-mask {
        align-content: center;
        align-items: center;
        border-radius: 35px;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 11px;
        position: relative;
        width: min-content;
        z-index: 1;
      }

      .arrow-track {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: 18px;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        transition: transform 0.35s cubic-bezier(0.44, 0, 0.56, 1);
        width: 18px;
      }

      .arrow-track svg {
        flex: 0 0 18px;
        height: 18px;
        width: 18px;
      }

      .primary-button:hover .arrow-track {
        transform: translateX(-28px);
      }

      .text-mask {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 5px;
        height: 20px;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: min-content;
        z-index: 1;
      }

      .text-track {
        display: flex;
        flex-direction: column;
        gap: 5px;
        transform: translateY(0);
        transition: transform 0.35s cubic-bezier(0.44, 0, 0.56, 1);
      }

      .primary-button:hover .text-track {
        transform: translateY(-25px);
      }

      .button-text {
        color: var(--indiex-ink);
        flex: none;
        font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        white-space: pre;
        width: auto;
      }

      .button-text.is-hover {
        color: var(--indiex-text);
      }

      .page-fill {
        flex: none;
        width: 100%;
      }

      .hero-section {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: center;
        overflow: visible;
        padding: 260px 30px 213px;
        position: relative;
        width: 100%;
        z-index: 4;
      }

      .hero-lines {
        align-content: center;
        align-items: center;
        bottom: 0;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 200px;
        height: 100%;
        justify-content: center;
        left: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
      }

      .hero-line,
      .hero-line-wrap {
        background-color: rgba(34, 34, 34, 0.06);
        flex: none;
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 2px;
      }

      .hero-line-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        justify-content: center;
        width: min-content;
      }

      .hero-shimmer {
        background: linear-gradient(180deg, var(--indiex-green) 0%, rgba(255, 255, 255, 0) 100%);
        flex: none;
        height: 100px;
        overflow: hidden;
        position: relative;
        width: 2px;
        z-index: 1;
      }

      .hero-shimmer.is-tall {
        height: 200px;
      }

      .hero-shimmer.is-one {
        animation: shimmer-one 8s linear infinite;
      }

      .hero-shimmer.is-two {
        animation: shimmer-two 9s linear infinite;
      }

      .hero-shimmer.is-three {
        animation: shimmer-three 7.5s linear infinite;
      }

      .hero-overlay {
        background-color: var(--indiex-bg);
        flex: none;
        height: 100%;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
      }

      .hero-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .hero-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .hero-copy {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 50px;
        height: min-content;
        justify-content: center;
        max-width: 560px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
        z-index: 2;
      }

      .hero-title-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .hero-title-row {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 34px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .hero-title-row.is-main {
        gap: 14px;
      }

      .hero-outline,
      .hero-title {
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 58px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 64px;
        margin: 0;
        position: relative;
        text-transform: uppercase;
        white-space: nowrap;
        width: auto;
      }

      .hero-outline {
        color: rgba(102, 102, 102, 0);
        -webkit-text-stroke: 1px var(--indiex-green);
        text-stroke: 1px var(--indiex-green);
      }

      .hero-title {
        color: var(--indiex-text);
        text-align: left;
      }

      .hero-title span {
        display: inline-block;
      }

      .hero-description {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: flex-start;
        left: auto;
        max-width: 480px;
        overflow: hidden;
        padding: 0;
        position: relative;
        top: auto;
        width: 100%;
        z-index: 1;
      }

      .hero-description p {
        color: var(--indiex-muted);
        flex: 1 0 0;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        white-space: pre-wrap;
        width: 1px;
        word-break: break-word;
        word-wrap: break-word;
      }

      .hero-button-wrap {
        flex: none;
        height: auto;
        position: relative;
        width: auto;
      }

      .hero-visual {
        align-content: center;
        align-items: center;
        bottom: -213px;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: 0;
        width: min-content;
        z-index: 0;
      }

      .hero-character {
        aspect-ratio: 0.7150537634 / 1;
        flex: none;
        height: 790px;
        overflow: visible;
        position: relative;
        width: 565px;
        z-index: 5;
      }

      .hero-character img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: contain;
        object-position: center top;
        width: 100%;
      }

      .hero-shape {
        background: linear-gradient(224deg, var(--indiex-ink) 0%, var(--indiex-text) 100%);
        border-radius: 50%;
        flex: none;
        height: 652px;
        left: 13px;
        opacity: 0.04;
        overflow: hidden;
        position: absolute;
        right: 7px;
        top: 39px;
        z-index: 1;
      }

      .about-section {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 120px 30px 60px;
        position: relative;
        width: 100%;
      }

      .about-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .about-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 120px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .about-wrapper {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .about-media {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0 190px 180px 0;
        position: relative;
        width: min-content;
      }

      .about-image {
        border-radius: 12px;
        flex: none;
        overflow: hidden;
        position: relative;
      }

      .about-image img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .about-image-primary {
        height: 520px;
        width: 450px;
      }

      .about-image-primary img {
        object-position: center top;
      }

      .about-image-secondary {
        bottom: 0;
        height: 453px;
        position: absolute;
        right: 0;
        width: 400px;
        z-index: 1;
      }

      .about-copy {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 50px;
        height: min-content;
        justify-content: center;
        max-width: 530px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .about-title-and-text,
      .about-title-wrap {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .about-title-and-text {
        gap: 30px;
      }

      .about-title-wrap {
        gap: 24px;
      }

      .section-label {
        align-content: center;
        align-items: center;
        color: var(--indiex-green);
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 600;
        gap: 4px;
        line-height: 100%;
        margin: 0;
        text-transform: uppercase;
        white-space: pre;
        width: auto;
      }

      .about-heading {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-align: left;
        text-transform: uppercase;
        width: 100%;
      }

      .about-body,
      .about-backers p {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-weight: 400;
        margin: 0;
        position: relative;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .about-body {
        font-size: 16px;
        line-height: 26px;
        text-align: left;
      }

      .about-divider {
        background: linear-gradient(270deg, #0a0a1a 0%, #F933BD 100%);
        flex: none;
        height: 1px;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .about-facts {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 140px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .fact-card {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .fact-icon {
        flex: none;
        height: 114px;
        position: relative;
        width: 79px;
      }

      .fact-icon img {
        display: block;
        height: 100%;
        object-fit: contain;
        object-position: center;
        width: 100%;
      }

      .fact-text {
        align-content: flex-start;
        align-items: flex-start;
        align-self: stretch;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 18px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: auto;
      }

      .fact-number {
        color: #fff;
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 100%;
        margin: 0;
        text-align: left;
        text-transform: uppercase;
        white-space: pre;
        width: auto;
      }

      .fact-label {
        color: #fff;
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 100%;
        margin: 0;
        opacity: 0.65;
        text-align: left;
        text-transform: uppercase;
        white-space: pre;
        width: auto;
      }

      .about-brand-panel {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .brand-strip {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0 0 60px;
        position: relative;
        width: 100%;
      }

      .brand-strip::after {
        background-color: var(--indiex-text);
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        opacity: 0.1;
        position: absolute;
        width: 100%;
        z-index: 1;
      }

      .brand-marquee {
        flex: 1 0 0;
        height: 35px;
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
        overflow: hidden;
        position: relative;
        width: 1px;
      }

      .brand-track {
        align-items: center;
        animation: brand-marquee 28s linear infinite;
        display: flex;
        flex-direction: row;
        gap: 130px;
        height: 100%;
        position: relative;
        width: max-content;
        will-change: transform;
      }

      .brand-set {
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        gap: 130px;
        height: 34px;
      }

      .partner-logo {
        display: block;
        flex: none;
        height: 34px;
        overflow: hidden;
        position: relative;
      }

      .partner-logo img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .partner-logo-1 {
        width: 159px;
      }

      .partner-logo-2 {
        width: 154px;
      }

      .partner-logo-3 {
        width: 140px;
      }

      .partner-logo-4 {
        width: 141px;
      }

      .partner-logo-5 {
        width: 138px;
      }

      .about-backers {
        flex: none;
        height: auto;
        position: relative;
        width: 100%;
      }

      .about-backers p {
        font-size: 14px;
        line-height: 24px;
        text-align: center;
      }

      .about-backers a {
        color: var(--indiex-green);
        transition: color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
      }

      .about-backers a:hover {
        color: var(--indiex-text);
      }

      .video-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-ink);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 60px 30px 120px;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .video-top-cover {
        background-color: var(--indiex-bg);
        flex: none;
        height: 150px;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }

      .video-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .video-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .video-hero-row {
        align-content: flex-end;
        align-items: flex-end;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .video-side-art {
        flex: none;
        overflow: visible;
        position: relative;
        width: 253px;
        z-index: 2;
      }

      .video-side-art img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: contain;
        width: 100%;
      }

      .video-side-left {
        aspect-ratio: 0.64497 / 1;
        height: 392px;
      }

      .video-side-left img {
        object-position: center bottom;
      }

      .video-side-right {
        aspect-ratio: 0.58551 / 1;
        height: 432px;
      }

      .video-side-right img {
        object-position: center bottom;
      }

      .video-copy {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        max-width: 485px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
        z-index: 1;
      }

      .video-title-group,
      .video-title-text {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .video-title-group {
        gap: 50px;
      }

      .video-title-text {
        gap: 24px;
      }

      .video-heading {
        color: #fff;
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
      }

      .video-button-wrap {
        flex: none;
        height: auto;
        position: relative;
        width: auto;
      }

      .video-wrapper {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .video-frame {
        flex: 1 0 0;
        height: 600px;
        max-width: 1200px;
        overflow: hidden;
        position: relative;
        transform: none;
        transform-origin: center top;
        width: 1px;
      }

      .video-frame video {
        background-color: transparent;
        border-radius: 12px;
        cursor: auto;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        width: 100%;
      }

      .service-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 120px 30px 60px;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .service-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .service-content {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .service-copy {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 50px;
        height: min-content;
        justify-content: center;
        max-width: 550px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .service-title-group,
      .service-title-wrap {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .service-title-group {
        gap: 30px;
      }

      .service-title-wrap {
        gap: 24px;
      }

      .service-heading {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-align: left;
        text-transform: uppercase;
        width: 100%;
      }

      .service-body {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        text-align: left;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .service-cards {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        max-width: 624px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .service-column {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .service-column.is-offset {
        padding-top: 24px;
      }

      .service-card {
        align-content: flex-start;
        align-items: flex-start;
        background-color: var(--indiex-ink);
        border: 1px solid rgba(53, 255, 255, 0.2);
        border-radius: 12px;
        color: inherit;
        cursor: pointer;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 40px;
        position: relative;
        text-decoration: none;
        transition:
          background-color 0.35s cubic-bezier(0.44, 0, 0.56, 1),
          border-color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
        width: 100%;
      }

      .service-card:hover {
        background-color: #20204e;
        border-color: rgba(53, 255, 255, 0.65);
      }

      .service-icon {
        flex: none;
        height: 114px;
        position: relative;
        width: 91px;
      }

      .service-icon img {
        display: block;
        height: 100%;
        object-fit: contain;
        object-position: center;
        width: 100%;
      }

      .service-card-copy {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .service-card-text {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .service-number {
        align-content: center;
        align-items: center;
        color: var(--indiex-green);
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 400;
        gap: 4px;
        height: min-content;
        justify-content: flex-start;
        line-height: 24px;
        margin: 0;
        overflow: visible;
        padding: 0;
        position: relative;
        white-space: pre;
        width: 100%;
      }

      .service-card-title {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 30px;
        margin: 0;
        position: relative;
        text-align: left;
        text-transform: uppercase;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .service-card-body {
        color: var(--indiex-text);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin: 0;
        opacity: 0.75;
        position: relative;
        text-align: left;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .game-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 60px 30px;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .game-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 120px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .game-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-title-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        max-width: 490px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-title-wrap .section-label {
        justify-content: center;
      }

      .game-heading {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
      }

      .game-tabs-layout {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-tabs {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: flex-start;
        max-width: 250px;
        overflow: visible;
        padding: 0;
        position: sticky;
        top: 10px;
        width: 1px;
      }

      .game-tab {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-ink);
        border: 0;
        border-radius: 10px;
        color: var(--indiex-text);
        cursor: pointer;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: space-between;
        overflow: hidden;
        padding: 16px 24px;
        position: relative;
        text-align: left;
        transition:
          background-color 0.3s cubic-bezier(0.44, 0, 0.56, 1),
          color 0.3s cubic-bezier(0.44, 0, 0.56, 1);
        width: 100%;
      }

      .game-tab.is-active {
        background-color: var(--indiex-green);
        color: var(--indiex-bg);
      }

      .game-tab:hover {
        background-color: #20204e;
      }

      .game-tab.is-active:hover {
        background-color: var(--indiex-green);
      }

      .game-tab span {
        flex: 1 1 auto;
        min-width: 0;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        margin: 0;
        white-space: normal;
        overflow-wrap: break-word;
      }

      .game-tab svg {
        flex: none;
        height: 18px;
        width: 18px;
      }

      .game-panel-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: center;
        min-width: 0;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .game-feature-card {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-ink);
        border-radius: 12px;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 30px;
        position: relative;
        width: 100%;
      }

      .game-feature-image {
        border-radius: 12px;
        flex: none;
        height: 491px;
        overflow: hidden;
        position: relative;
        width: 400px;
      }

      .game-feature-image img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .game-feature-copy {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 64px;
        height: min-content;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .game-feature-text {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 40px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-feature-description {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        text-align: left;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .game-feature-list {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 15px;
        height: min-content;
        justify-content: center;
        list-style: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-feature-item {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        height: min-content;
        justify-content: flex-start;
        max-width: 303px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .game-feature-dot {
        background-color: var(--indiex-text);
        border-radius: 50%;
        flex: 0 0 auto;
        height: 8px;
        width: 8px;
      }

      .game-feature-item span:last-child {
        color: var(--indiex-text);
        flex: 1 0 0;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        white-space: pre-wrap;
        width: 1px;
        word-break: break-word;
        word-wrap: break-word;
      }

      .game-button-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .character-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 60px 30px 160px;
        position: relative;
        width: 100%;
      }

      .character-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: 1800px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .character-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 34px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .character-title-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        max-width: 490px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 1;
      }

      .character-title-wrap .section-label {
        justify-content: center;
      }

      .character-heading {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
      }

      .character-carousel-stage {
        --character-radius: 700px;
        --character-card-width: 260px;
        --character-card-height: 370px;
        --character-arm-height: 240px;
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 430px;
        justify-content: center;
        overflow: visible;
        padding: 0;
        perspective: 700px;
        position: relative;
        transform-style: preserve-3d;
        user-select: none;
        width: 100%;
      }

      .character-carousel {
        align-content: center;
        align-items: center;
        animation: character-carousel-spin 38s linear infinite;
        cursor: grab;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        transform-style: preserve-3d;
        width: 1200px;
      }

      .character-arms {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: var(--character-arm-height);
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        transform-style: preserve-3d;
        width: calc(var(--character-radius) * 2);
      }

      .character-arm {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: var(--character-arm-height);
        justify-content: space-between;
        left: 0;
        overflow: visible;
        padding: 0;
        position: absolute;
        top: 0;
        transform: rotateY(var(--rotation));
        transform-style: preserve-3d;
        width: calc(var(--character-radius) * 2);
        z-index: 1;
      }

      .character-card {
        backface-visibility: hidden;
        border-radius: 20px;
        flex: none;
        height: var(--character-card-height);
        overflow: hidden;
        position: relative;
        width: var(--character-card-width);
        will-change: transform;
      }

      .character-card.is-start {
        transform: rotateY(90deg);
      }

      .character-card.is-end {
        transform: rotateY(-90deg);
      }

      .character-card img {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .character-card::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%);
        border-radius: inherit;
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
      }

      .testimonial-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 60px 30px 120px;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .testimonial-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 120px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .testimonial-content {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .testimonial-title-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        max-width: 550px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
              align-self: center;
      }

      .testimonial-title-inner {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .testimonial-heading,
      .faq-heading,
      .contact-heading,
      .overview-heading {
        color: var(--indiex-text);
        flex: none;
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 58px;
        margin: 0;
        position: relative;
        text-transform: uppercase;
        width: 100%;
      }

      .testimonial-heading {
        text-align: center;
      }

      .testimonial-grid {
        display: grid;
        flex: none;
        gap: 20px;
        grid-template-columns: repeat(3, minmax(50px, 1fr));
        grid-template-rows: repeat(2, min-content);
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .testimonial-card {
        align-content: flex-start;
        align-items: flex-start;
        background-color: var(--indiex-ink);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 50px;
        height: 100%;
        justify-content: flex-start;
        min-height: 360px;
        overflow: hidden;
        padding: 40px;
        position: relative;
        width: 100%;
        will-change: transform;
      }

      .testimonial-review {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .testimonial-stars {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .testimonial-stars svg {
        flex: none;
        height: 18px;
        width: 18px;
      }

      .testimonial-quote {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        text-align: left;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .testimonial-bio {
        align-content: flex-end;
        align-items: flex-end;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        margin-top: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .testimonial-avatar {
        border-radius: 50%;
        flex: none;
        height: 50px;
        overflow: hidden;
        position: relative;
        width: 50px;
      }

      .testimonial-avatar img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .testimonial-person {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .testimonial-role {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin: 0;
        opacity: 0.8;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .testimonial-name {
        color: var(--indiex-text);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        margin: 0;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
      }

      .testimonial-media-card {
        align-content: flex-start;
        align-items: flex-start;
        align-self: start;
        border-radius: 10px;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 50px;
        height: 100%;
        justify-content: flex-end;
        justify-self: start;
        min-height: 360px;
        overflow: hidden;
        padding: 40px;
        position: relative;
        width: 100%;
        will-change: transform;
      }

      .testimonial-media-card > img {
        border-radius: inherit;
        display: block;
        height: 100%;
        inset: 0;
        object-fit: cover;
        object-position: center;
        position: absolute;
        width: 100%;
      }

      .testimonial-media-card::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--indiex-bg) 112%);
        content: "";
        height: 100%;
        inset: 0;
        position: absolute;
        width: 100%;
        z-index: 0;
      }

      .testimonial-media-bottom {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 1;
      }

      .testimonial-play {
        align-content: center;
        align-items: center;
        aspect-ratio: 1 / 1;
        background-color: var(--indiex-text);
        border: 0;
        border-radius: 50%;
        color: var(--indiex-bg);
        cursor: pointer;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: 50px;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 50px;
      }

      .testimonial-play svg {
        height: 18px;
        transform: translateX(1px);
        width: 18px;
      }

      .testimonial-video-card {
        align-self: start;
        border-radius: 10px;
        flex: none;
        height: 360px;
        justify-self: start;
        overflow: hidden;
        position: relative;
        width: 100%;
        will-change: transform;
      }

      .testimonial-video-card video {
        background-color: transparent;
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        width: 100%;
      }

      .faq-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-ink);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 120px 30px;
        position: relative;
        width: 100%;
      }

      .faq-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: 1320px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-content {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 80px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-title-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-title-wrap .section-label {
        justify-content: center;
      }

      .faq-heading {
        text-align: center;
      }

      .faq-list {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: center;
        max-width: 800px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-item {
        cursor: pointer;
        display: block;
        flex: none;
        height: min-content;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-item summary {
        align-content: flex-start;
        align-items: flex-start;
        cursor: pointer;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        height: min-content;
        justify-content: flex-start;
        list-style: none;
        outline: none;
        width: 100%;
      }

      .faq-item summary::-webkit-details-marker {
        display: none;
      }

      .faq-icon-wrap {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        border-radius: 8px;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: 65px;
        justify-content: center;
        padding: 0;
        position: relative;
        width: 60px;
      }

      .faq-icon {
        color: var(--indiex-green);
        flex: none;
        height: 20px;
        position: relative;
        width: 20px;
      }

      .faq-icon::before,
      .faq-icon::after {
        background-color: currentColor;
        content: "";
        height: 2px;
        left: 2px;
        position: absolute;
        top: 9px;
        transition: transform 0.25s cubic-bezier(0.44, 0, 0.56, 1);
        width: 16px;
      }

      .faq-icon::after {
        transform: rotate(90deg);
      }

      .faq-item[open] .faq-icon::after {
        transform: rotate(0deg);
      }

      .faq-row {
        align-content: flex-start;
        align-items: flex-start;
        background-color: var(--indiex-bg);
        border-radius: 8px;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 20px;
        position: relative;
        width: 1px;
      }

      .faq-item[open] .faq-row {
        border-radius: 8px 8px 0 0;
      }

      .faq-question-row {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .faq-question {
        color: var(--indiex-text);
        flex: 1 0 0;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        margin: 0;
        position: relative;
        white-space: pre-wrap;
        width: 1px;
        word-break: break-word;
        word-wrap: break-word;
      }

      .faq-answer {
        align-content: flex-start;
        align-items: flex-start;
        background-color: var(--indiex-bg);
        border-radius: 0 0 8px 8px;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        margin-left: 66px;
        padding: 5px 20px 20px;
        position: relative;
        width: calc(100% - 66px);
      }

      .faq-answer p {
        color: var(--indiex-muted);
        flex: 1 0 0;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        white-space: pre-wrap;
        width: 1px;
        word-break: break-word;
        word-wrap: break-word;
      }

      .faq-answer-image {
        border-radius: 10px;
        flex: none;
        height: 104px;
        overflow: hidden;
        position: relative;
        width: 200px;
      }

      .faq-answer-image img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      .contact-section,
      .overview-section {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .contact-section {
        padding: 60px 0;
        scroll-margin-top: 80px;
      }

      .overview-section {
        padding: 60px 0 120px;
      }

      .contact-container,
      .overview-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-content,
      .overview-content {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-content {
        gap: 50px;
      }

      .overview-content {
        gap: 80px;
      }

      .contact-title-wrap,
      .overview-title-wrap {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-heading,
      .overview-heading {
        max-width: 531px;
        text-align: left;
      }

      .contact-layout {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 150px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-info {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 40px;
        height: min-content;
        justify-content: center;
        max-width: 200px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .contact-info-title,
      .overview-card-title,
      .rating-title {
        color: var(--indiex-text);
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 32px;
        margin: 0;
        text-transform: uppercase;
      }

      .contact-details {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-detail-stack {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .contact-link,
      .contact-copy,
      .overview-card-copy,
      .overview-metric-label,
      .form-label {
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
      }

      .contact-link,
      .contact-copy,
      .overview-card-copy,
      .overview-metric-label {
        color: var(--indiex-muted);
      }

      .contact-link {
        transition: color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
      }

      .contact-link:hover {
        color: var(--indiex-green);
      }

      .contact-divider {
        background-color: var(--indiex-text);
        flex: none;
        height: 1px;
        opacity: 0.1;
        position: relative;
        width: 100%;
      }

      .contact-form {
        border-radius: 10px;
        display: grid;
        flex: 1 0 0;
        gap: 24px 20px;
        grid-auto-rows: min-content;
        grid-template-columns: repeat(2, minmax(50px, 1fr));
        height: min-content;
        justify-content: center;
        max-width: 1301px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .form-field {
        align-content: flex-start;
        align-items: flex-start;
        align-self: start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 14px;
        height: min-content;
        justify-content: flex-start;
        justify-self: start;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .form-field.is-message {
        grid-column: span 2;
      }

      .form-label {
        color: var(--indiex-text);
      }

      .form-input,
      .form-textarea {
        background-color: var(--indiex-ink);
        border: 1px solid transparent;
        border-radius: 10px;
        color: var(--indiex-text);
        display: block;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 100%;
        outline: none;
        padding: 20px;
        position: relative;
        transition: border-color 0.25s cubic-bezier(0.44, 0, 0.56, 1);
        width: 100%;
      }

      .form-input {
        height: 58px;
      }

      .form-textarea {
        line-height: 24px;
        min-height: 150px;
        resize: vertical;
      }

      .form-input::placeholder,
      .form-textarea::placeholder {
        color: rgba(234, 252, 255, 0.4);
        opacity: 1;
      }

      .form-input:focus,
      .form-textarea:focus {
        border-color: rgba(53, 255, 255, 0.4);
      }

      .contact-submit {
        align-self: start;
        justify-self: start;
      }

      .overview-facts {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .overview-left {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .overview-card-row {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .experience-card,
      .success-card,
      .social-card,
      .rating-card {
        background-color: var(--indiex-ink);
        border-radius: 12px;
        position: relative;
      }

      .experience-card {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 36px;
        width: 1px;
      }

      .experience-card > img {
        border-radius: inherit;
        display: block;
        height: 100%;
        inset: 0;
        object-fit: cover;
        object-position: center;
        position: absolute;
        width: 100%;
        z-index: 0;
      }

      .experience-card::after {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000 74.8%);
        border-radius: inherit;
        content: "";
        inset: 0;
        opacity: 0.9;
        position: absolute;
        z-index: 1;
      }

      .experience-content {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 64px;
        height: min-content;
        justify-content: flex-start;
        max-width: 250px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .success-card {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 40px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 35px 40px;
        width: 1px;
      }

      .success-icon {
        aspect-ratio: 1 / 1;
        flex: none;
        height: 66px;
        overflow: hidden;
        position: relative;
        width: 66px;
        z-index: 1;
      }

      .success-icon img,
      .success-figure img {
        display: block;
        height: 100%;
        object-fit: contain;
        object-position: center;
        width: 100%;
      }

      .success-figure {
        aspect-ratio: 1 / 1;
        bottom: -28px;
        flex: none;
        height: 180px;
        opacity: 0.15;
        overflow: hidden;
        position: absolute;
        right: -34px;
        width: 180px;
        z-index: 1;
      }

      .overview-metric {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .overview-metric-value {
        color: var(--indiex-text);
        font-family: "Oswald", "Oswald Placeholder", sans-serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 42px;
        margin: 0;
        text-transform: uppercase;
      }

      .social-card {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 40px 36px 40px 30px;
        width: 100%;
      }

      .overview-text-block {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
        z-index: 2;
      }

      .overview-card-title {
        max-width: 265px;
      }

      .overview-card-copy {
        max-width: 390px;
      }

      .social-grid {
        display: grid;
        flex: 1 0 0;
        gap: 12px;
        grid-auto-rows: min-content;
        grid-template-columns: repeat(3, minmax(50px, 1fr));
        height: min-content;
        justify-content: start;
        max-width: 210px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .social-link {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        border-radius: 100%;
        color: var(--indiex-green);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 50px;
        justify-content: center;
        padding: 0;
        position: relative;
        text-decoration: none;
        width: 50px;
      }

      .social-link svg {
        display: block;
        flex: none;
        height: 18px;
        width: 18px;
      }

      .rating-card {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 40px;
        height: min-content;
        justify-content: center;
        max-width: 425px;
        overflow: visible;
        padding: 30px 0 0;
        width: 1px;
      }

      .avatar-rows {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .avatar-row {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0));
        flex: none;
        height: 60px;
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0));
        overflow: hidden;
        padding: 10px;
        position: relative;
        width: 100%;
      }

      .avatar-track {
        align-items: center;
        animation: avatar-marquee 26s linear infinite;
        display: flex;
        gap: 20px;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        width: max-content;
      }

      .avatar-row:nth-child(2) .avatar-track {
        animation-direction: reverse;
        animation-duration: 30s;
      }

      .avatar-row:nth-child(3) .avatar-track {
        animation-duration: 34s;
      }

      .avatar-track img {
        aspect-ratio: 1 / 1;
        border-radius: 100%;
        display: block;
        flex: 0 0 auto;
        height: 60px;
        object-fit: cover;
        object-position: center;
        width: 60px;
      }

      .rating-copy {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 30px 36px;
        position: relative;
        width: 100%;
      }

      .rating-stars {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .rating-stars svg {
        flex: none;
        height: 18px;
        opacity: 0.65;
        width: 18px;
      }

      .rating-text {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      @keyframes avatar-marquee {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-480px);
        }
      }

      .site-footer {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-bg);
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 120px 30px 30px;
        position: relative;
        width: 100%;
      }

      .site-footer::before {
        background-color: var(--indiex-text);
        content: "";
        height: 1px;
        left: calc(50% - min(1300px, 100%) / 2);
        max-width: 1300px;
        opacity: 0.1;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }

      .footer-container {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        height: min-content;
        justify-content: center;
        max-width: var(--header-max);
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-inner {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 120px;
        height: min-content;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-content {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-column {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 40px;
        height: min-content;
        justify-content: center;
        max-width: 180px;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 1px;
      }

      .footer-column.is-subscribe {
        max-width: 320px;
      }

      .footer-links {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-link,
      .footer-sponsor-label,
      .footer-bottom-link {
        color: var(--indiex-muted);
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 26px;
        margin: 0;
        text-transform: uppercase;
        transition: color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
      }

      .footer-link:hover,
      .footer-bottom-link:hover,
      .footer-copy a:hover {
        color: var(--indiex-green);
      }

      .footer-subscribe-copy {
        color: var(--indiex-muted);
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
      }

      .footer-form {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-form label {
        display: block;
        width: 100%;
      }

      .footer-input {
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--indiex-text);
        display: block;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 100%;
        outline: none;
        padding: 20px 0;
        width: 100%;
      }

      .footer-input::placeholder {
        color: var(--indiex-muted);
        opacity: 1;
      }

      .footer-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 48px;
        width: 100%;
        padding: 28px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 28px;
      }
      .trust-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .trust-label {
        color: var(--indiex-green);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin: 0;
      }
      .trust-logos {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
      }
      .trust-logos img {
        height: 30px;
        width: auto;
        opacity: 0.9;
      }

      .footer-logo-wrap {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: 100%;
      }

      .footer-logo-bar {
        align-content: center;
        align-items: center;
        background-color: var(--indiex-ink);
        border-radius: 12px;
        border-top: 1px solid rgba(234, 252, 255, 0.1);
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        height: min-content;
        justify-content: space-between;
        overflow: visible;
        padding: 22px;
        position: relative;
        width: 100%;
      }

      .footer-sponsors {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .footer-sponsor-logos {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .footer-sponsor-logo {
        display: block;
        flex: none;
        height: 20px;
        object-fit: contain;
        object-position: center;
        width: auto;
      }

      .footer-bottom-links {
        align-content: center;
        align-items: center;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        height: min-content;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: relative;
        width: min-content;
      }

      .footer-copy {
        color: var(--indiex-muted);
        flex: none;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin: 0;
        position: relative;
        text-align: center;
        width: 100%;
      }

      .footer-copy a {
        color: var(--indiex-text);
        transition: color 0.35s cubic-bezier(0.44, 0, 0.56, 1);
      }

      .reveal-item {
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.8s cubic-bezier(0.44, 0, 0.56, 1),
          transform 0.8s cubic-bezier(0.44, 0, 0.56, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      .reveal-item.is-visible {
        opacity: 1;
        transform: none;
      }

      .video-frame.reveal-item {
        transform: translateY(48px);
      }

      .video-frame.reveal-item.is-visible {
        transform: none;
      }

      @keyframes brand-marquee {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-1382px);
        }
      }

      @keyframes shimmer-one {
        0% {
          opacity: 0;
          transform: translateY(-500px);
        }

        50% {
          opacity: 0.75;
        }

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

      @keyframes shimmer-two {
        0% {
          opacity: 0;
          transform: translateY(-800px);
        }

        55% {
          opacity: 0.7;
        }

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

      @keyframes shimmer-three {
        0% {
          opacity: 0.6;
          transform: translateY(-311px);
        }

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

      @keyframes character-carousel-spin {
        0% {
          transform: rotateY(0deg);
        }

        100% {
          transform: rotateY(-360deg);
        }
      }

      @media (max-width: 1359.98px) {
        .indiex-header {
          left: 0;
          padding: 0 30px;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 100;
        }

        .header-frame {
          max-width: var(--header-max);
          margin: 0 auto;
        }

        .large-menu {
          flex-direction: column;
          gap: 0;
          justify-content: center;
          overflow: hidden;
          padding: 20px 0;
          width: 100%;
          max-width: unset;
        }

        .brand-area {
          gap: unset;
          justify-content: space-between;
          order: 0;
          width: 100%;
          z-index: 2;
        }

        .menu-toggle {
          display: block;
          height: 44px;
          order: 1;
          width: 44px;
        }

        .menu-wrap {
          display: none;
          flex: 1 1 auto;
          min-height: 0;
          flex-direction: column;
          justify-content: space-between;
          gap: 24px;
          order: 1;
          width: 100%;
          padding: 12px 0 44px;
          overflow-y: auto;
        }

        .indiex-header.is-open {
          height: calc(var(--vh, 1vh) * 100);
          background: linear-gradient(165deg, #141438 0%, #0a0a1a 55%, #060614 100%);
        }

        .indiex-header.is-open .large-menu {
          justify-content: flex-start;
          height: calc(var(--vh, 1vh) * 100);
        }

        .indiex-header.is-open .menu-wrap {
          display: flex;
        }

        .nav-links {
          align-items: stretch;
          flex-direction: column;
          gap: 2px;
          width: 100%;
          padding: 16px 0 0;
        }

        .nav-link,
        .dropdown-label {
          font-family: "Oswald", "Oswald Placeholder", sans-serif;
          font-size: 30px;
          font-weight: 600;
          line-height: 1.2;
          text-transform: uppercase;
          color: var(--indiex-text);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 2px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          transition: color 0.25s ease, padding-left 0.25s ease;
        }

        .nav-link::after {
          content: "\2192";
          color: var(--indiex-green);
          opacity: 0;
          transform: translateX(-10px);
          transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .nav-link:hover,
        .nav-link:active {
          color: var(--indiex-green);
          padding-left: 10px;
        }

        .nav-link:hover::after,
        .nav-link:active::after {
          opacity: 1;
          transform: translateX(0);
        }

        .indiex-header.is-open .nav-link {
          animation: navLinkIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .indiex-header.is-open .nav-link:nth-child(1) { animation-delay: 0.08s; }
        .indiex-header.is-open .nav-link:nth-child(2) { animation-delay: 0.15s; }
        .indiex-header.is-open .nav-link:nth-child(3) { animation-delay: 0.22s; }

        .button-wrap {
          display: flex;
          width: 100%;
        }

        .button-wrap .primary-button {
          width: 100%;
        }

        .indiex-header.is-open .button-wrap {
          animation: navLinkIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
          animation-delay: 0.3s;
        }

        @keyframes navLinkIn {
          from { opacity: 0; transform: translateY(18px); }
          to { opacity: 1; transform: none; }
        }

        .dropdown-trigger svg {
          height: 20px;
          width: 20px;
        }

        .page-fill {
          min-height: 0;
        }

        .hero-section {
          gap: 80px;
          padding: 120px 30px 50px;
          z-index: 1;
        }

        .hero-content {
          align-content: flex-end;
          align-items: flex-end;
        }

        .hero-copy {
          gap: 40px;
          max-width: unset;
          order: 0;
        }

        .hero-title-wrap {
          gap: 0;
        }

        .hero-title-row {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
        }

        .hero-title,
        .hero-outline {
          font-size: 56px;
          line-height: 64px;
          white-space: normal;
        }

        .hero-title {
          width: 100%;
          word-break: normal;
          word-wrap: normal;
        }

        .hero-description {
          left: unset;
          position: relative;
          top: unset;
        }

        .hero-visual {
          bottom: unset;
          order: 1;
          position: relative;
          right: unset;
          width: 42%;
        }

        .hero-character {
          flex: 1 0 0;
          height: 441px;
          width: 1px;
        }

        .hero-shape {
          display: none;
        }

        .about-section {
          padding: 50px 30px 100px;
        }

        .about-content {
          gap: 100px;
        }

        .about-wrapper {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 60px;
          justify-content: flex-start;
        }

        .about-media {
          align-content: flex-end;
          align-items: flex-end;
          padding: 0;
          width: 100%;
        }

        .about-image-primary,
        .about-image-secondary {
          aspect-ratio: 0.8653846154 / 1;
          flex: 1 0 0;
          height: auto;
          width: 1px;
        }

        .about-image-secondary {
          bottom: unset;
          position: relative;
          right: unset;
        }

        .about-copy {
          flex: none;
          max-width: 500px;
          width: 100%;
        }

        .about-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .about-facts {
          gap: 80px;
        }

        .video-section {
          padding: 100px 30px;
        }

        .video-content {
          gap: 50px;
        }

        .video-hero-row {
          align-content: center;
          align-items: center;
          flex-direction: column;
          gap: 50px;
        }

        .video-side-art {
          display: none;
        }

        .video-copy {
          flex: none;
          gap: 50px;
          max-width: unset;
          order: 0;
          width: 100%;
        }

        .video-title-group {
          gap: 40px;
          max-width: 600px;
        }

        .video-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .video-frame {
          aspect-ratio: 1.6666666667 / 1;
          flex: none;
          height: auto;
          max-width: unset;
          width: 100%;
        }

        .service-section {
          gap: 80px;
          padding: 100px 30px 50px;
        }

        .service-content {
          flex-direction: column;
          gap: 50px;
          justify-content: center;
        }

        .service-copy {
          flex: none;
          gap: 40px;
          width: 100%;
        }

        .service-title-group {
          gap: 40px;
        }

        .service-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .service-cards {
          flex: none;
          max-width: unset;
          width: 100%;
        }

        .service-column.is-offset {
          padding-top: 0;
        }

        .game-section {
          gap: 80px;
          padding: 50px 30px;
        }

        .game-content {
          gap: 50px;
        }

        .game-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .game-tabs-layout {
          flex-direction: column;
          max-width: 750px;
          width: 100%;
        }

        .game-tabs {
          display: grid;
          flex: none;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          max-width: unset;
          position: relative;
          top: unset;
          width: 100%;
        }

        .game-tab {
          width: 100%;
        }

        .game-panel-wrap {
          flex: none;
          width: 100%;
        }

        .game-feature-card {
          gap: 50px;
          padding: 30px 24px;
        }

        .game-feature-image {
          aspect-ratio: 0.6382978723 / 1;
          flex: 1 0 0;
          height: auto;
          width: 1px;
        }

        .game-feature-copy {
          gap: 40px;
        }

        .game-feature-text {
          gap: 30px;
        }

        .game-feature-list {
          gap: 12px;
        }

        .game-button-wrap {
          flex-wrap: wrap;
        }

        .character-section {
          padding: 50px 30px 100px;
        }

        .character-content {
          gap: 28px;
        }

        .character-title-wrap {
          gap: 20px;
        }

        .character-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .character-carousel-stage {
          --character-radius: 520px;
          --character-card-width: 210px;
          --character-card-height: 300px;
          --character-arm-height: 200px;
          height: 340px;
        }

        .character-carousel {
          width: 900px;
        }

        .testimonial-section {
          gap: 80px;
          padding: 50px 30px 100px;
        }

        .testimonial-content {
          gap: 50px;
        }

        .testimonial-title-wrap {
          gap: 40px;
          max-width: 550px;
        }

        .testimonial-title-inner {
          gap: 20px;
        }

        .testimonial-heading,
        .faq-heading,
        .contact-heading,
        .overview-heading {
          font-size: 38px;
          line-height: 48px;
        }

        .testimonial-grid {
          grid-template-columns: repeat(2, minmax(50px, 1fr));
        }

        .testimonial-grid > :nth-child(1) {
          order: 0;
        }

        .testimonial-grid > :nth-child(2) {
          order: 1;
        }

        .testimonial-grid > :nth-child(3) {
          order: 5;
        }

        .testimonial-grid > :nth-child(4) {
          order: 2;
        }

        .testimonial-grid > :nth-child(5) {
          order: 3;
        }

        .testimonial-grid > :nth-child(6) {
          order: 4;
        }

        .testimonial-card,
        .testimonial-media-card {
          min-height: 368px;
          padding: 20px;
        }

        .testimonial-video-card {
          height: 368px;
          order: 2;
        }

        .testimonial-media-bottom {
          align-content: flex-end;
          align-items: flex-end;
        }

        .testimonial-person {
          flex: none;
          width: 100%;
        }

        .testimonial-play {
          height: 60px;
          width: 60px;
        }

        .faq-section {
          padding: 100px 30px;
        }

        .faq-content {
          gap: 50px;
        }

        .faq-title-wrap {
          gap: 20px;
        }

        .faq-list {
          max-width: unset;
        }

        .contact-section {
          overflow: visible;
          padding: 50px 30px;
        }

        .contact-layout {
          gap: 60px;
        }

        .overview-section {
          padding: 50px 30px 100px;
        }

        .overview-content {
          gap: 50px;
        }

        .overview-title-wrap {
          gap: 20px;
        }

        .overview-facts {
          flex-direction: column;
        }

        .overview-left,
        .rating-card {
          flex: none;
          max-width: unset;
          width: 100%;
        }

        .site-footer {
          padding: 100px 30px 30px;
        }

        .footer-inner {
          gap: 100px;
        }

        .footer-content {
          align-content: unset;
          align-items: unset;
          display: grid;
          gap: 40px 24px;
          grid-auto-rows: min-content;
          grid-template-columns: repeat(3, minmax(50px, 1fr));
          grid-template-rows: repeat(2, min-content);
          justify-content: center;
        }

        .footer-column {
          align-self: start;
          flex: none;
          justify-self: start;
          max-width: unset;
          width: 100%;
        }

        .footer-column.is-subscribe {
          gap: 30px;
          grid-column: span 2;
          max-width: unset;
        }
      }

      @media (max-width: 809.98px) {
        .indiex-header {
          padding: 0;
        }

        .large-menu {
          padding: 20px;
          width: 100%;
        }

        .nav-links {
          padding: 20px 20px 120px;
        }

        .hero-section {
          gap: 60px;
          padding: 130px 20px 40px;
          z-index: 1;
        }

        .hero-line-wrap:first-child {
          min-width: 1px;
        }

        .hero-line-wrap,
        .hero-line {
          min-width: 2px;
        }

        .hero-shimmer {
          display: none;
        }

        .hero-content {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 30px;
          justify-content: center;
        }

        .hero-copy {
          flex: none;
          gap: 30px;
          max-width: unset;
          width: 100%;
        }

        .hero-title-wrap {
          gap: 0;
        }

        .hero-title-row {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 30px;
        }

        .hero-title-row.is-main {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 20px;
        }

        .hero-outline,
        .hero-title {
          font-size: 48px;
          line-height: 58px;
          white-space: pre-wrap;
          width: 100%;
          word-break: break-word;
          word-wrap: break-word;
        }

        .hero-description {
          left: unset;
          max-width: unset;
          position: relative;
          top: unset;
          width: 100%;
        }

        .hero-description p {
          width: 1px;
        }

        .hero-visual {
          bottom: unset;
          position: relative;
          right: unset;
          width: 90%;
        }

        .hero-character {
          flex: 1 0 0;
          height: 280px;
          width: 1px;
        }

        .hero-shape {
          display: none;
        }

        .about-section {
          padding: 40px 20px 80px;
        }

        .about-content {
          gap: 80px;
        }

        .about-wrapper {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 50px;
          justify-content: flex-start;
        }

        .about-media {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          padding: 0;
          width: 100%;
        }

        .about-image-primary {
          aspect-ratio: 0.9459459459 / 1;
          height: auto;
          width: 100%;
        }

        .about-image-secondary {
          aspect-ratio: 1 / 1;
          bottom: unset;
          height: auto;
          position: relative;
          right: unset;
          width: 100%;
        }

        .about-copy {
          flex: none;
          gap: 40px;
          width: 100%;
        }

        .about-title-wrap {
          gap: 20px;
        }

        .about-heading {
          font-size: 32px;
          line-height: 42px;
        }

        .about-facts {
          flex-wrap: wrap;
          gap: 60px;
        }

        .brand-strip {
          padding: 0 0 40px;
        }

        .video-section {
          gap: 60px;
          padding: 80px 20px;
        }

        .video-content {
          gap: 50px;
        }

        .video-copy {
          gap: 40px;
        }

        .video-title-group {
          gap: 30px;
        }

        .video-heading {
          font-size: 32px;
          line-height: 42px;
        }

        .video-wrapper {
          flex-direction: column;
        }

        .video-frame {
          aspect-ratio: 1.25 / 1;
          flex: none;
          height: auto;
          max-width: unset;
          width: 100%;
        }

        .service-section {
          gap: 60px;
          padding: 80px 20px 40px;
        }

        .service-content {
          flex-direction: column;
          gap: 50px;
          justify-content: center;
        }

        .service-copy {
          flex: none;
          gap: 40px;
          max-width: unset;
          width: 100%;
        }

        .service-cards {
          flex: none;
          flex-direction: column;
          max-width: unset;
          width: 100%;
        }

        .service-column {
          flex: none;
          width: 100%;
        }

        .service-column.is-offset {
          padding-top: 0;
        }

        .service-card {
          gap: 50px;
          padding: 20px;
        }

        .service-icon {
          aspect-ratio: 0.798245614 / 1;
          height: 80px;
          width: 64px;
        }

        .game-section {
          gap: 60px;
          padding: 40px 20px;
        }

        .game-title-wrap {
          gap: 20px;
          max-width: unset;
        }

        .game-heading {
          font-size: 32px;
          line-height: 42px;
        }

        .game-tabs-layout {
          max-width: 350px;
        }

        .game-tab {
          padding: 16px 18px;
        }

        .game-feature-card {
          flex-direction: column;
          gap: 40px;
          padding: 30px 20px;
        }

        .game-feature-image {
          aspect-ratio: 0.9393939394 / 1;
          flex: none;
          height: auto;
          width: 100%;
        }

        .game-feature-copy {
          flex: none;
          gap: 30px;
          width: 100%;
        }

        .game-feature-text {
          gap: 24px;
        }

        .game-feature-item {
          max-width: unset;
        }

        .character-section {
          padding: 40px 20px;
        }

        .character-content {
          gap: 22px;
        }

        .character-title-wrap {
          gap: 20px;
          max-width: unset;
        }

        .character-heading {
          font-size: 32px;
          line-height: 42px;
        }

        .character-carousel-stage {
          --character-radius: 440px;
          --character-card-width: 150px;
          --character-card-height: 214px;
          --character-arm-height: 150px;
          height: 245px;
          perspective: 560px;
        }

        .character-carousel {
          width: 760px;
        }

        .testimonial-section {
          gap: 60px;
          padding: 40px 20px 80px;
        }

        .testimonial-content {
          gap: 50px;
        }

        .testimonial-title-wrap {
          gap: 40px;
          max-width: unset;
        }

        .testimonial-title-inner {
          gap: 20px;
        }

        .testimonial-heading,
        .faq-heading,
        .contact-heading,
        .overview-heading {
          font-size: 32px;
          line-height: 42px;
        }

        .testimonial-grid {
          display: flex;
          flex-direction: column;
        }

        .testimonial-card,
        .testimonial-media-card {
          min-height: 336px;
          padding: 20px;
          width: 100%;
        }

        .testimonial-video-card {
          aspect-ratio: 1.0416666667 / 1;
          height: auto;
          order: 5;
          width: 100%;
        }

        .testimonial-card {
          gap: 24px;
        }

        .testimonial-review {
          gap: 20px;
        }

        .testimonial-bio,
        .testimonial-media-bottom .testimonial-bio {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          gap: 16px;
        }

        .testimonial-person {
          flex: none;
          width: 100%;
        }

        .faq-section {
          padding: 80px 20px;
        }

        .faq-content {
          gap: 50px;
        }

        .faq-title-wrap {
          gap: 20px;
        }

        .faq-item,
        .faq-item summary {
          width: 100%;
        }

        .faq-row {
          gap: 0;
          padding: 20px;
        }

        .faq-question-row {
          gap: 20px;
        }

        .faq-question {
          font-size: 18px;
          line-height: 24px;
        }

        .faq-answer {
          flex-direction: column;
          gap: 20px;
          margin-left: 66px;
          padding: 0 20px 20px;
          width: calc(100% - 66px);
        }

        .faq-answer p {
          flex: none;
          width: 100%;
        }

        .faq-answer-image {
          aspect-ratio: 2.1379310345 / 1;
          height: auto;
          width: 100%;
        }

        .contact-section {
          overflow: visible;
          padding: 40px 20px;
        }

        .overview-section {
          padding: 40px 20px 80px;
        }

        .contact-content,
        .overview-content {
          gap: 50px;
        }

        .contact-title-wrap,
        .overview-title-wrap {
          gap: 20px;
        }

        .contact-layout {
          flex-direction: column;
          gap: 50px;
        }

        .contact-info {
          flex: none;
          gap: 30px;
          max-width: unset;
          width: 100%;
        }

        .contact-details {
          gap: 16px;
        }

        .contact-form {
          flex: none;
          grid-template-columns: repeat(1, minmax(50px, 1fr));
          width: 100%;
        }

        .form-field.is-message {
          grid-column: span 1;
        }

        .form-textarea {
          min-height: 180px;
        }

        .overview-facts,
        .overview-card-row {
          flex-direction: column;
        }

        .overview-left,
        .experience-card,
        .success-card,
        .rating-card {
          flex: none;
          max-width: unset;
          width: 100%;
        }

        .social-card {
          align-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          padding: 30px;
        }

        .overview-text-block {
          flex: none;
          width: 100%;
        }

        .social-grid {
          align-content: center;
          align-items: center;
          display: flex;
          flex: none;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          max-width: unset;
          width: 100%;
        }

        .rating-copy {
          padding: 30px;
        }

        .site-footer {
          padding: 80px 20px 30px;
        }

        .footer-inner {
          gap: 80px;
          max-width: 350px;
        }

        .footer-content {
          display: flex;
          flex-direction: column;
          gap: 50px;
          justify-content: flex-start;
        }

        .footer-column,
        .footer-column.is-subscribe {
          flex: none;
          gap: 30px;
          max-width: unset;
          width: 100%;
        }

        .footer-logo-bar {
          gap: 20px;
          justify-content: center;
        }

        .footer-sponsors {
          flex: 1 0 0;
          flex-direction: column;
          width: 1px;
        }

        .footer-sponsor-logo {
          height: 20px;
        }

        .footer-bottom-links {
          flex-wrap: wrap;
          gap: 16px 24px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-shimmer,
        .brand-track,
        .character-carousel,
        .avatar-track {
          animation: none;
        }

        .primary-button::before,
        .arrow-track,
        .text-track,
        .reveal-item {
          transition: none;
        }

        .reveal-item {
          opacity: 1;
          transform: none;
        }
      }
    
/* ===== EpicWin games list + detail (reuses site tokens/modules) ===== */
.eg-main{max-width:var(--header-max,1300px);margin:0 auto;padding:0}
.eg-head{padding:calc(var(--nav-h,90px) + 46px) 0 6px}
.eg-head .section-label{margin-bottom:8px}
.eg-head h1{font-family:'Oswald','Oswald Placeholder',sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(2rem,5vw,52px);color:var(--indiex-text)}
.eg-head p{color:var(--indiex-muted);margin:6px 0 0}
.eg-filters{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 28px}
.eg-pill{border:1px solid rgba(255,255,255,.12);background:var(--indiex-ink);color:var(--indiex-muted);padding:9px 20px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.eg-pill.on{background:linear-gradient(95deg,#35FFFF,#F933BD);color:#071018;border-color:transparent}
.eg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px;padding:8px 0 72px}
.eg-card{background:var(--indiex-ink);border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;transition:.22s;color:var(--indiex-text)}
.eg-card:hover{transform:translateY(-4px);border-color:rgba(53,255,255,.5);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 22px rgba(53,255,255,.16)}
.eg-thumb{position:relative;aspect-ratio:1/1;overflow:hidden}
.eg-thumb img{width:100%;height:100%;object-fit:cover}
.eg-ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:14px;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:18px;line-height:1.1}
.eg-badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:#071018}
.eg-badge.new{background:#35FFFF}.eg-badge.hot{background:#F933BD;color:#fff}.eg-badge.featured{background:linear-gradient(95deg,#35FFFF,#F933BD)}
.eg-meta{padding:14px 16px 16px}
.eg-meta h3{font-size:16px;font-weight:600;font-family:'Inter',sans-serif;color:var(--indiex-text)}
.eg-cat{display:inline-block;margin-top:8px;font-size:12px;color:var(--indiex-muted);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 10px}
.eg-detail{padding:calc(var(--nav-h,90px) + 34px) 0 20px}
.eg-crumb{color:var(--indiex-muted);font-size:13px;margin-bottom:22px}
.eg-crumb a:hover{color:#35FFFF}
.eg-hero{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.eg-poster{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:270/433;background:var(--indiex-ink);box-shadow:0 0 46px rgba(210,0,255,.22)}
.eg-poster img{width:100%;height:100%;object-fit:cover}.eg-poster .eg-ph{aspect-ratio:270/433}
.eg-info h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(1.8rem,4vw,44px);text-transform:uppercase;color:var(--indiex-text);margin:4px 0 0}
.eg-desc{color:var(--indiex-muted);max-width:60ch;margin:14px 0}
.eg-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.eg-chip{background:var(--indiex-ink);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 16px}
.eg-chip .k{font-size:12px;color:var(--indiex-muted);text-transform:uppercase;letter-spacing:.05em}
.eg-chip .v{font-weight:700;font-size:16px;margin-top:3px;color:var(--indiex-text)}
.eg-feats{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.eg-feat{background:var(--indiex-bg);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--indiex-text)}
.eg-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px 0}
.eg-shots img{border-radius:14px;border:1px solid rgba(255,255,255,.1);width:100%}
.eg-more{margin:52px 0 20px}.eg-more .section-label{margin-bottom:18px}
@media(max-width:820px){.eg-hero{grid-template-columns:1fr}.eg-poster{max-width:280px}.eg-shots{grid-template-columns:1fr}}

/* ===== Excon (Fontshare, self-hosted) — games listing font, matches Roobet ===== */
@font-face{font-family:'Excon';src:url('assets/fonts/excon/excon-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Excon';src:url('assets/fonts/excon/excon-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Excon';src:url('assets/fonts/excon/excon-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ===== EpicWin game listing (Roobet-style) ===== */
.gl-main{max-width:var(--header-max);margin:0 auto;padding:0 0 84px;font-family:'Excon','Inter',sans-serif}
.gl-head{padding:calc(var(--nav-h,90px) + 42px) 0 4px}
.gl-kick{color:#8ea0d8;font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 10px;font-weight:500}
.gl-head h1{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,52px);margin:0;letter-spacing:-.01em;color:var(--indiex-text)}
.gl-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:24px 0 26px}
.gl-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.09);background:rgba(18,18,46,.72);color:#c3cbf0;font-family:inherit;font-weight:500;font-size:14px;padding:11px 18px;border-radius:12px;cursor:pointer;transition:.15s}
.gl-pill svg{width:17px;height:17px}
.gl-pill:hover{border-color:rgba(53,255,255,.4);color:#eafcff}
.gl-pill.on{background:linear-gradient(95deg,#35FFFF,#F933BD);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(6,4,20,.45);box-shadow:0 6px 18px rgba(249,51,189,.28)}
.gl-search{margin-left:auto;background:rgba(18,18,46,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238ea0d8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 15px center;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 18px 12px 42px;color:#eafcff;font-family:inherit;font-size:14px;min-width:230px}
.gl-search::placeholder{color:#8290bd}
.gl-sort{background:rgba(18,18,46,.72);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 16px;color:#eafcff;font-family:inherit;font-size:14px;cursor:pointer}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px}
/* listing grid: smaller game tiles (more per row); detail "more games" grid keeps 152px */
#gl-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.gl-card{position:relative;display:block;border-radius:13px;overflow:hidden;aspect-ratio:2/3;background:#12122e;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;color:inherit;text-decoration:none}
.gl-card:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(53,255,255,.5);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 24px rgba(249,51,189,.25)}
.gl-art{position:absolute;inset:0}
.gl-art img{width:100%;height:100%;object-fit:cover;object-position:top}
.gl-ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:14px;font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:17px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.gl-info{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 11px;background:linear-gradient(180deg,transparent,rgba(4,4,14,.92));z-index:2;pointer-events:none}
.gl-name{font-family:'Excon',sans-serif;font-weight:700;font-size:13.5px;line-height:1.08;color:#fff;text-transform:uppercase;letter-spacing:.01em}
.gl-prov{display:block;margin-top:3px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8ea0d8}
.gl-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:8px;z-index:3}
.gl-badge.new{background:#35FFFF;color:#04121a}
.gl-badge.hot{background:#F933BD;color:#fff}
.gl-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;z-index:4;background:linear-gradient(180deg,rgba(4,4,16,.12),rgba(4,4,16,.5))}
.gl-card:hover .gl-play{opacity:1}
.gl-playbtn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(95deg,#35FFFF,#F933BD);color:#fff;font-family:'Excon',sans-serif;font-weight:700;font-size:12.5px;padding:9px 18px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 1px 2px rgba(6,4,20,.5);box-shadow:0 6px 18px rgba(249,51,189,.42);border:0;cursor:pointer}
.gl-playbtn svg{width:12px;height:12px}
.gl-empty{grid-column:1/-1;text-align:center;color:#8ea0d8;padding:48px 0;font-size:15px}
/* Play Demo modal (in-page iframe) */
.gl-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(3,3,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gl-modal.open{display:flex}
.gl-panel{width:min(1000px,96vw);background:#0b0b1e;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 120px rgba(0,0,0,.65)}
.gl-mbar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.gl-mbar .ic{width:36px;height:36px;border-radius:9px;overflow:hidden;flex:none;background:linear-gradient(135deg,#35FFFF,#F933BD)}
.gl-mbar .ic img{width:100%;height:100%;object-fit:cover}
.gl-mbar h3{margin:0;font-family:'Excon',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff}
.gl-mbar .newtab{margin-left:auto;font-size:12px;color:#a9b4de;text-decoration:none;padding:8px 13px;border:1px solid rgba(255,255,255,.14);border-radius:9px;font-family:'Inter',sans-serif}
.gl-mbar .newtab:hover{color:#35FFFF;border-color:rgba(53,255,255,.5)}
.gl-mbar .x{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#eafcff;font-size:18px;line-height:1;cursor:pointer}
.gl-mbody{position:relative;background:#05050f}
.gl-mbody iframe{width:100%;height:min(78vh,760px);border:0;display:block}
@media(max-width:600px){.gl-mbody iframe{height:80vh}}

/* ===== Roobet-matched controls + Phosphor duotone icons + skeleton (overrides) ===== */
.gl-tools{display:block;margin:24px 0 26px}
.gl-pills{display:flex;gap:8px;flex-wrap:wrap}
.gl-row2{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.gl-pill{height:40px;padding:0 16px;border-radius:10px;background:#191939;border:0;color:#fff;font-family:'Excon','Inter',sans-serif;font-weight:700;font-size:13px;gap:8px}
.gl-pill:hover{background:#20204a;color:#fff}
.gl-pill.on{background:linear-gradient(95deg,#35FFFF,#F933BD);color:#fff;box-shadow:0 6px 18px rgba(249,51,189,.30)}
.gl-pill svg{width:20px;height:20px}
.gl-pill .ic-all{color:#35FFFF}.gl-pill .ic-hot{color:#ff8a3d}.gl-pill .ic-new{color:#c48bff}
.gl-pill.on svg{color:#fff}
.gl-searchwrap{display:flex;align-items:center;flex:1;min-width:220px;background:#191939 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238ea0d8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 15px center;border-radius:12px;height:44px;padding:0 6px 0 42px}
.gl-searchwrap input{flex:1;min-width:0;background:transparent;border:0;color:#eafcff;font-family:'Excon','Inter',sans-serif;font-size:14px;height:100%}
.gl-searchwrap input::placeholder{color:#8290bd}
.gl-searchwrap input:focus{outline:none}
.gl-random{height:32px;border:0;border-radius:8px;background:#262657;color:#fff;font-family:'Excon','Inter',sans-serif;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;cursor:pointer;flex:none}
.gl-random:hover{background:#31316a}
.gl-random svg{width:16px;height:16px;color:#35FFFF}
.gl-sort{height:44px;border:0;border-radius:12px;background:#191939 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9b4de' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;color:#fff;font-family:'Excon','Inter',sans-serif;font-weight:600;font-size:13.5px;padding:0 38px 0 16px;cursor:pointer;-webkit-appearance:none;appearance:none;flex:none}
.gl-prov{display:none}
/* skeleton pulse (Roobet MuiSkeleton: #2c2852, pulse) */
.gl-art{background:#2c2852}
.gl-skel{position:absolute;inset:0;background:#2c2852;animation:gl-pulse 1.6s ease-in-out .25s infinite;z-index:1}
.gl-art img{position:relative;z-index:2;opacity:0;transition:opacity .35s ease}
.gl-art.imgok img{opacity:1}
.gl-art.imgok .gl-skel{display:none}
@keyframes gl-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.gl-skel{animation:none}}

/* ===== dark-on-neon buttons (per client: dark text on the gradient, not white) ===== */
.gl-playbtn{color:var(--indiex-ink);text-shadow:none}
.gl-pill.on{color:var(--indiex-ink);text-shadow:none}
.gl-pill.on svg{color:var(--indiex-ink)}

/* ===== Game detail page (Excon, matches listing) ===== */
.gd-main{max-width:1300px;margin:0 auto;padding:calc(var(--nav-h,90px) + 34px) 30px 40px;font-family:'Excon','Inter',sans-serif}
.gd-crumb{color:#8ea0d8;font-size:13px;margin-bottom:22px;font-family:'Inter',sans-serif}
.gd-crumb a{color:#8ea0d8}.gd-crumb a:hover{color:#35FFFF}
.gd-hero{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.gd-poster{position:relative;border-radius:18px;overflow:hidden;background:#12122e;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 46px rgba(210,0,255,.22)}
/* The frame used to be locked to aspect-ratio:270/433 with object-fit:cover, but
   72 of the 73 posters are narrower than that (most are 447x794), so the frame
   cropped roughly 10% off the top and bottom of nearly every game, and 15% off
   FIFA 26. Posters carry the game logo at the top, so that is what got cut.
   The poster is the only thing in its column and nothing lines up with it, so it
   is free to take its own shape: full artwork, no crop and no letterbox bars. */
.gd-poster img{width:100%;height:auto;display:block}
.gd-poster .gl-ph{width:100%;aspect-ratio:270/433}
.gd-eyebrow{color:#35FFFF;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.gd-info h1{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4vw,46px);line-height:1;margin:0 0 14px;color:var(--indiex-text);letter-spacing:-.01em}
.gd-desc{color:#aab4dd;font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;max-width:70ch;margin:0 0 22px}
.gd-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px}
.gd-chip{background:#12122e;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 16px}
.gd-chip .k{font-size:11px;color:#8ea0d8;text-transform:uppercase;letter-spacing:.08em;font-family:'Inter',sans-serif}
.gd-chip .v{font-weight:700;font-size:17px;margin-top:4px;color:#fff;font-family:'Excon',sans-serif}
.gd-feats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.gd-feat{background:#12122e;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 15px;font-size:13px;color:#dfe6ff;font-family:'Inter',sans-serif}
.gd-section{margin-top:54px}
.gd-section .gd-eyebrow{margin-bottom:16px;font-size:13px}
/* Screenshots keep their own shape. A fixed 16/9 frame cut three quarters off the
   phone-portrait captures (330x717) and a fifth off the wide ones (1533x685), so
   the tile takes the shot's ratio instead. The max-width pairs with that ratio to
   cap a tall portrait at 560px without letterboxing it. */
.gd-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;justify-items:center}
.gd-shot{padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden;position:relative;
  aspect-ratio:var(--shot-ratio,16/9);width:100%;max-width:calc(560px * var(--shot-ratio,1.778))}
.gd-shot img{width:100%;height:100%;object-fit:contain;background:var(--indiex-ink);border-radius:14px;border:1px solid rgba(255,255,255,.1);display:block;transition:transform .35s ease}
.gd-shot:hover img{transform:scale(1.04)}
.gd-shot:focus-visible{outline:2px solid var(--acc-solid,#F933BD);outline-offset:2px}
.gd-lb{position:fixed;inset:0;z-index:99999;background:rgba(5,5,26,.94);display:flex;align-items:center;justify-content:center}
.gd-lb[hidden]{display:none}
.gd-lb img{max-width:min(1400px,92vw);max-height:84vh;border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gd-lb-close{position:absolute;top:22px;right:26px;color:#fff;background:rgba(10,10,40,.82);border:1px solid rgba(255,255,255,.22);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s}
.gd-lb-close svg{width:20px;height:20px}
.gd-lb-close:hover{background:color-mix(in srgb,var(--acc-solid,#F933BD) 24%,transparent);border-color:var(--acc-solid,#F933BD)}
.gd-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);color:#fff;background:rgba(10,10,40,.82);border:1px solid rgba(255,255,255,.22);border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.gd-lb-arrow svg{width:26px;height:26px}
.gd-lb-arrow:hover{background:color-mix(in srgb,var(--acc-solid,#F933BD) 24%,transparent);border-color:var(--acc-solid,#F933BD)}
.gd-lb-arrow:active{transform:translateY(-50%) scale(.94)}
.gd-lb-prev{left:26px}
.gd-lb-next{right:26px}
.gd-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:14px;letter-spacing:1px}
@media(max-width:820px){.gd-lb-arrow{width:44px;height:44px;font-size:36px}.gd-lb-prev{left:10px}.gd-lb-next{right:10px}}
@media(max-width:820px){.gd-hero{grid-template-columns:1fr;gap:26px}.gd-poster{max-width:280px}.gd-shots{grid-template-columns:1fr}}

/* ===== fix: themed text selection (was default browser blue), clean CTA pills ===== */
::selection{background:rgba(53,255,255,.32);color:#ffffff}
::-moz-selection{background:rgba(53,255,255,.32);color:#ffffff}
/* (arrow-circle + hover animation kept as original indiex button) */

/* eyebrow (section-label) spacing in the games section */
.gl-head .section-label{margin-bottom:14px}
.gd-info .section-label{margin-bottom:12px}
.gd-section .section-label{margin-bottom:16px}

/* ===== client asset wiring: mascots, detail backdrop, licence badges ===== */
/* mascots are square 1000x1000 -> square slots, larger, grounded (no awkward float/overlap) */
.video-side-art{width:320px}
.video-side-left,.video-side-right{aspect-ratio:1/1;height:320px}
.video-side-left img,.video-side-right img{object-fit:contain;object-position:center bottom}
/* game detail: blurred banner backdrop behind the hero (uses the landscape/portrait banner) */
.gd-main{position:relative}
.gd-backdrop{position:absolute;left:0;right:0;top:0;height:540px;z-index:0;background-size:cover;background-position:center 28%;filter:blur(34px) saturate(1.15);opacity:.42;pointer-events:none}
.gd-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,16,.35) 0%,rgba(6,6,16,.72) 62%,var(--indiex-bg) 100%)}
.gd-main > *:not(.gd-backdrop){position:relative;z-index:1}
/* footer licence badges on light chips (client logos vary in colour, must read on dark) */
.trust-logos img.lic{height:26px;width:auto;background:#fff;border-radius:7px;padding:6px 10px;box-sizing:content-box;object-fit:contain}

/* white licence logos (e.g. BeGambleAware) show on dark, no chip */
.trust-logos img.lic-w{height:26px;width:auto;object-fit:contain}
/* homepage stats strip (client stat-icons) */
.ew-stats{max-width:1300px;margin:0 auto;padding:30px 30px 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ew-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ew-stat img{width:84px;height:84px;object-fit:contain}
.ew-stat span{font-family:'Oswald','Oswald Placeholder',sans-serif;font-weight:600;text-transform:uppercase;font-size:18px;letter-spacing:.01em;color:var(--indiex-text)}
@media(max-width:700px){.ew-stats{grid-template-columns:1fr;gap:26px}}

/* ===== tweaks: unify mascot section + clearer detail backdrop ===== */
.video-top-cover{display:none}                 /* remove the dark band -> one solid section, no overlap look */
.gd-backdrop{filter:blur(15px) saturate(1.2);opacity:.6;height:560px}
.gd-backdrop::after{background:linear-gradient(180deg,rgba(6,6,16,.12) 0%,rgba(6,6,16,.5) 55%,var(--indiex-bg) 100%)}

/* ===== EpicWin brand palette (client identity) + live accent switcher ===== */
:root{
  --primary-1:#35FFFF; --primary-2:#F933BD;
  --secondary-1:#113EEB; --secondary-2:#D200FF;
  --brandtext-1:#E0FFF9; --brandtext-2:#FECCFE;
  --acc-a:#35FFFF; --acc-b:#F933BD;
  --indiex-green:var(--acc-a);
}
html[data-accent="secondary"]{--acc-a:#113EEB; --acc-b:#D200FF}
html[data-accent="cyan-purple"]{--acc-a:#35FFFF; --acc-b:#D200FF}
html[data-accent="blue-pink"]{--acc-a:#113EEB; --acc-b:#F933BD}
/* accent-driven surfaces follow the switcher */
.primary-button{background:linear-gradient(95deg,var(--acc-a),var(--acc-b))!important}
.gl-pill.on{background:linear-gradient(95deg,var(--acc-a),var(--acc-b))!important}
.gl-playbtn,.gd-play{background:linear-gradient(95deg,var(--acc-a),var(--acc-b))!important}
.gl-badge.new{background:var(--acc-a)!important;color:#04121a}
.gl-badge.hot{background:var(--acc-b)!important}
/* floating switcher widget (staging tool) */
.ew-swatch{position:fixed;right:16px;bottom:16px;z-index:400;display:flex;align-items:center;gap:6px;background:rgba(10,10,26,.92);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:8px 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:'Inter',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ew-swatch .lbl{color:#c3cbf0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-right:2px}
.ew-swatch button{width:32px;height:32px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.ew-swatch button[aria-pressed="true"]{border-color:#fff}

/* detail backdrop: FULL-BLEED width + lighter blur (per client) */
.gd-backdrop{left:50%;right:auto;transform:translateX(-50%);width:100vw;filter:blur(7px) saturate(1.2);opacity:.5;height:600px}

/* Solutions cards: tighten the big gap + bigger square stat-icons */
.service-card{gap:26px}
.service-icon{width:120px;height:120px}

/* About fact-card icons now use character art -> square, contained */
.fact-icon{width:88px;height:88px}
.fact-icon img{width:100%;height:100%;object-fit:contain}

/* featured game image: box hugs the art (fixed height, auto width) so a portrait
   poster has no side padding and a square tile no letterbox. Cap the copy column
   so the right side does not sprawl. */
.game-feature-image{width:auto!important;height:440px!important;background:transparent!important;border-radius:14px}
.game-feature-image img{width:auto!important;height:100%!important;object-fit:contain}
.game-feature-copy{flex:0 1 480px!important;max-width:480px}
.game-feature-card{gap:56px}
@media(max-width:1359.98px){
  .game-feature-image{aspect-ratio:auto!important;flex:none!important;width:auto!important;height:400px!important}
  .game-feature-copy{flex:0 1 440px!important;max-width:440px}
}

/* About: single image now, center it in the left area (was hugging far-left).
   Zero flex-basis so the copy column reaches its full 530px (2-line heading),
   then the image centers in the leftover space. Desktop-only; responsive stacks. */
@media(min-width:1360px){
  .about-media{flex:1 0 0;justify-content:center}
}
/* Below desktop the old two-image rules made the single banker fill the whole
   column (flex:1 0 0; width:1px) so it ballooned. Cap it and center, natural aspect. */
@media(max-width:1359.98px){
  .about-media{justify-content:center;align-items:center}
  .about-image-primary{flex:none!important;width:100%!important;max-width:360px;height:auto!important;aspect-ratio:auto!important}
  .about-image-primary img{height:auto!important;width:100%!important;object-fit:contain}
}

/* ===== Game listing: SOLID accent on filter pills + play demo (switchable),
   instead of the neon gradient. Homepage buttons stay gradient. ===== */
:root{--acc-solid:#35FFFF;--acc-solid-ink:#04121a}
html[data-accent="p1"]{--acc-a:#35FFFF;--acc-b:#F933BD;--acc-solid:#35FFFF;--acc-solid-ink:#04121a}
html[data-accent="p2"]{--acc-a:#35FFFF;--acc-b:#F933BD;--acc-solid:#F933BD;--acc-solid-ink:#fff}
html[data-accent="s1"]{--acc-a:#113EEB;--acc-b:#D200FF;--acc-solid:#113EEB;--acc-solid-ink:#fff}
html[data-accent="s2"]{--acc-a:#113EEB;--acc-b:#D200FF;--acc-solid:#D200FF;--acc-solid-ink:#fff}

.gl-pill.on{background:var(--acc-solid)!important;color:var(--acc-solid-ink)!important;box-shadow:0 6px 16px rgba(0,0,0,.30)}
.gl-pill.on svg{color:var(--acc-solid-ink)!important}
.gl-playbtn{background:var(--acc-solid)!important;color:var(--acc-solid-ink)!important;text-shadow:none;box-shadow:0 8px 22px rgba(0,0,0,.42)}
.gl-playbtn svg{width:15px!important;height:15px!important}

/* results counter now lives in the toolbar, not orphaned under the grid */
.gl-count{margin-left:auto;color:#8ea0d8;font-family:'Inter',sans-serif;font-size:13px;white-space:nowrap;padding:0 6px}

/* ============================= ABOUT US PAGE ============================= */
.au-wrap{max-width:1200px;margin:0 auto;padding:0 30px 60px;font-family:'Excon','Inter',sans-serif;overflow-x:clip}
.au-crumb{padding-top:calc(var(--nav-h,90px) + 30px);margin:0;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.02em;color:#8ea0d8}
.au-crumb a{color:#8ea0d8;text-decoration:none}
.au-crumb a:hover{color:var(--acc-a)}
.au-h2{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3vw,38px);line-height:1.05;letter-spacing:-.01em;color:var(--indiex-text);margin:0 0 18px}
.au-copy{font-family:'Inter',sans-serif;font-size:16px;line-height:27px;color:var(--indiex-muted);max-width:60ch;margin:0}

/* hero intro panel */
.au-hero{position:relative;margin-top:22px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 150% at 100% 0,rgba(249,51,189,.16),transparent 55%),radial-gradient(120% 150% at 0 100%,rgba(53,255,255,.14),transparent 55%),linear-gradient(180deg,#14143a,#0c0c26);
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:end;padding:54px 54px 0}
.au-hero-copy{padding-bottom:54px}
.au-hero h1{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4.4vw,50px);line-height:1.02;letter-spacing:-.01em;color:var(--indiex-text);margin:16px 0 22px;max-width:15ch}
.au-lead{font-family:'Inter',sans-serif;font-size:16px;line-height:27px;color:var(--indiex-muted);max-width:58ch;margin:0}
.au-hero-fig{justify-self:center;align-self:end}
.au-hero-fig img{display:block;width:100%;max-width:340px;height:auto;filter:drop-shadow(0 30px 55px rgba(0,0,0,.5))}

/* brand statement */
.au-brand{position:relative;overflow:hidden;margin-top:90px;border-radius:20px;padding:52px 48px;text-align:center;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(20,20,54,.55),rgba(10,10,32,.55))}
.au-brand::before,.au-brand::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(80px);opacity:.45;z-index:0}
.au-brand::before{background:var(--acc-a);top:-70px;left:-50px}
.au-brand::after{background:var(--acc-b);bottom:-80px;right:-50px}
.au-brand>*{position:relative;z-index:1}
.au-brand .section-label{justify-content:center;margin-bottom:14px}
.au-brand .au-copy{margin:0 auto;max-width:72ch;font-size:17px;line-height:29px;color:#cdd6f5}

/* alternating image + text rows with faded watermark */
.au-row{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:92px}
.au-row.rev{grid-template-columns:1.1fr .9fr}
.au-fig{position:relative;display:flex;justify-content:center;align-items:center;min-width:0}
.au-fig img{display:block;width:100%;max-width:400px;height:auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.au-fig.glow::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,var(--acc-a),transparent 62%);opacity:.14;filter:blur(34px);z-index:-1}
.au-body{position:relative;min-width:0}
.au-body>*{position:relative;z-index:1}
.au-watermark{position:absolute;left:0;right:0;bottom:-.32em;z-index:0;text-align:left;white-space:nowrap;font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(72px,11vw,150px);line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none}

/* team = three mascots */
.au-team-figs{display:flex;justify-content:center;align-items:flex-end;gap:2px;flex-wrap:wrap}
.au-team-figs img{width:150px;height:auto;filter:drop-shadow(0 16px 32px rgba(0,0,0,.5))}

/* clients / partners */
.au-clients{margin:112px 0 10px;text-align:center}
.au-clients .section-label{justify-content:center;margin-bottom:14px}
.au-clients h2{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3vw,38px);color:var(--indiex-text);margin:0 0 34px}
.au-stat{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:42px}
.au-stat .num{font-family:'Excon',sans-serif;font-weight:700;font-size:64px;line-height:1;background:linear-gradient(95deg,var(--acc-a),var(--acc-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.au-stat .lbl{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8ea0d8}
.au-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:760px;margin:0 auto}
.au-logos .logo{background:#fff;border-radius:12px;height:66px;min-width:158px;display:flex;align-items:center;justify-content:center;padding:14px 24px}
.au-logos .logo img{max-height:36px;max-width:120px;width:auto;object-fit:contain}
.au-partners-sub{margin-top:30px;font-family:'Inter',sans-serif;font-size:13px;color:#8290bd}

@media(max-width:900px){
  .au-hero{grid-template-columns:1fr;padding:42px 26px 0;align-items:start}
  .au-hero-copy{padding-bottom:0}
  .au-hero-fig{margin-top:18px}
  .au-hero-fig img{max-width:240px}
  .au-row,.au-row.rev{grid-template-columns:1fr;gap:22px;margin-top:64px}
  .au-row.rev .au-fig{order:-1}
  .au-fig img{max-width:300px}
  .au-team-figs img{width:110px}
  .au-brand{padding:34px 24px;margin-top:64px}
  .au-watermark{font-size:60px;position:static;text-align:left;-webkit-text-stroke:1px rgba(255,255,255,.09);display:block;margin-bottom:-.1em}
}

/* ===================== NEWS / NEWSROOM ===================== */
.nw-main{max-width:var(--header-max);margin:0 auto;padding:0 0 84px;font-family:'Excon','Inter',sans-serif}
.nw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.nw-card{display:flex;flex-direction:column;background:#12122e;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.nw-card:hover{transform:translateY(-4px);border-color:rgba(53,255,255,.45);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.nw-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0e0e2a}
.nw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nw-body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 22px}
.nw-meta{display:flex;align-items:center;gap:12px}
.nw-tag{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-a,#35FFFF);background:rgba(53,255,255,.12);border:1px solid rgba(53,255,255,.28);padding:3px 10px;border-radius:999px}
.nw-date{font-family:'Inter',sans-serif;font-size:12px;color:#8ea0d8;letter-spacing:.02em}
.nw-title{font-family:'Excon',sans-serif;font-weight:700;font-size:19px;line-height:1.2;color:var(--indiex-text);text-transform:none;letter-spacing:0;margin:0}
.nw-excerpt{font-family:'Inter',sans-serif;font-size:14px;line-height:22px;color:var(--indiex-muted);margin:0}
.nw-empty{grid-column:1/-1;text-align:center;color:#8ea0d8;padding:48px 0;font-size:15px}

/* Featured (layout A) */
/* Featured article: the art carries it, so the image fills the card and the copy
   sits over a scrim. The old 1.25fr/1fr split cropped through faces and left the
   text half mostly empty. */
.nw-featured{position:relative;display:block;min-height:clamp(340px,34vw,460px);margin-bottom:26px;border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;background:#12122e;text-decoration:none;color:inherit;isolation:isolate;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.nw-featured:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 55%,transparent);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.nw-featured__media{position:absolute;inset:0;z-index:0}
.nw-featured__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.nw-featured:hover .nw-featured__media img{transform:scale(1.045)}
.nw-featured__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(8,8,22,.94) 0%,rgba(8,8,22,.86) 34%,rgba(8,8,22,.42) 62%,rgba(8,8,22,.12) 100%),
  linear-gradient(0deg,rgba(8,8,22,.72) 0%,rgba(8,8,22,0) 58%)}
.nw-featured__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:min(60ch,58%);padding:clamp(28px,3.4vw,48px)}
.nw-featured__kicker{margin:0;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-solid,#F933BD)}
.nw-featured__title{margin:0;font-family:'Excon',sans-serif;font-weight:700;font-size:clamp(26px,3.1vw,42px);line-height:1.08;letter-spacing:-.01em;color:var(--indiex-text)}
.nw-featured__excerpt{margin:0;font-family:'Inter',sans-serif;font-size:15px;line-height:25px;color:var(--indiex-muted);max-width:54ch}
.nw-featured__cta{display:inline-flex;align-items:center;gap:9px;margin-top:6px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--indiex-text)}
.nw-featured__cta svg{width:17px;height:17px;transition:transform .3s ease}
.nw-featured:hover .nw-featured__cta svg{transform:translateX(5px)}
@media(max-width:860px){
  .nw-featured{min-height:0}
  .nw-featured__media{position:relative;aspect-ratio:16/10}
  .nw-featured__scrim{background:linear-gradient(0deg,rgba(8,8,22,.96) 22%,rgba(8,8,22,.35) 70%,rgba(8,8,22,.1) 100%)}
  .nw-featured__body{max-width:none;margin-top:-64px;padding:22px}
  .nw-featured__excerpt{display:none}
}


/* Editorial rows (layout C) */
.nw-rows{display:flex;flex-direction:column}
.nw-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;align-items:center;padding:26px 0;border-top:1px solid rgba(255,255,255,.1);text-decoration:none;color:inherit;transition:.2s}
.nw-row:first-of-type{border-top:0}
.nw-row:hover .nw-title{color:var(--acc-a,#35FFFF)}
.nw-row .nw-thumb{aspect-ratio:16/10;border-radius:12px}
.nw-row .nw-body{padding:0}
.nw-row .nw-title{font-size:24px}
@media(max-width:680px){.nw-row{grid-template-columns:1fr;gap:14px}}

/* ===================== NEWS ARTICLE (detail) ===================== */
.na-main{max-width:min(1560px,94vw);margin:0 auto;padding:calc(var(--nav-h,90px) + 46px) 30px 8px;font-family:'Excon','Inter',sans-serif}
.na-crumb{font-family:'Inter',sans-serif;font-size:13px;color:#8ea0d8;margin:0 0 26px}
.na-crumb a{color:#8ea0d8;text-decoration:none}
.na-crumb a:hover{color:var(--acc-a,#35FFFF)}
.na-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.na-title{font-family:'Excon',sans-serif;font-weight:700;font-size:clamp(1.9rem,3.8vw,44px);line-height:1.08;letter-spacing:-.01em;color:var(--indiex-text);margin:0 0 18px}
.na-lead{font-family:'Inter',sans-serif;font-size:18px;line-height:29px;color:#cdd6f5;margin:0 0 30px;max-width:64ch}
.na-cover{border-radius:16px;overflow:hidden;margin:0 0 34px;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/9;background:#0e0e2a}
.na-cover img{width:100%;height:100%;object-fit:cover;display:block}
.na-body{font-family:'Inter',sans-serif;font-size:16px;line-height:28px;color:var(--indiex-muted)}
.na-body p{margin:0 0 20px}
.na-back{display:inline-block;margin-top:14px;font-family:'Inter',sans-serif;font-size:14px;color:var(--acc-a,#35FFFF);text-decoration:none}
.na-back:hover{text-decoration:underline}
.na-more{max-width:min(1180px,94vw);margin:56px auto 0;padding:44px 30px 84px;border-top:1px solid rgba(255,255,255,.08)}
.na-more .section-label{margin-bottom:18px}

/* ===================== LEGAL / PROSE PAGES ===================== */
/* ===== legal pages =====
   A contents rail beside the text: the body still sits on a readable measure, but
   the page uses the width it is given instead of leaving two thirds empty. */
.lg-main{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,250px);gap:48px;align-items:start;
  max-width:var(--header-max);margin:0 auto;padding:8px 0 96px;font-family:'Inter',sans-serif;color:var(--indiex-muted)}
.lg-toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;padding:20px;border:1px solid rgba(255,255,255,.09);
  border-radius:16px;background:rgba(18,18,46,.5)}
.lg-toc-title{margin:0 0 10px;font-family:'Excon',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indiex-muted)}
.lg-toc a{padding:7px 10px;border-radius:9px;font-size:13.5px;line-height:19px;color:var(--indiex-muted);text-decoration:none;
  border-left:2px solid transparent;transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.lg-toc a:hover{color:var(--indiex-text);background:rgba(255,255,255,.05)}
.lg-toc a.is-current{color:var(--indiex-text);background:rgba(249,51,189,.12);border-left-color:var(--acc-solid,#F933BD)}
.lg-body{min-width:0;max-width:74ch;font-size:16px}
.lg-updated{display:inline-block;margin:0 0 34px;padding:6px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;
  font-family:'Inter',sans-serif;font-size:12.5px;color:#8ea0d8}
.lg-body h2{font-family:'Excon',sans-serif;font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.18;color:var(--indiex-text);
  margin:44px 0 14px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);text-transform:none;letter-spacing:0;scroll-margin-top:110px}
.lg-body h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.lg-body h3{font-family:'Excon',sans-serif;font-weight:700;font-size:17px;line-height:1.25;color:var(--indiex-text);margin:24px 0 10px}
.lg-body p{font-size:16px;line-height:29px;margin:0 0 18px}
.lg-body ul,.lg-body ol{margin:0 0 20px;padding-left:22px}
.lg-body li{font-size:16px;line-height:29px;margin:0 0 10px}
.lg-body a{color:var(--acc-a,#35FFFF);text-decoration:underline;text-underline-offset:2px}
.lg-body strong{color:var(--indiex-text)}
/* a way out of the page, where docs sites usually put one */
.lg-aside{position:sticky;top:110px;padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:16px;
  background:linear-gradient(180deg,rgba(21,21,58,.75),rgba(13,13,34,.85))}
.lg-aside-title{margin:0 0 8px;font-family:'Excon',sans-serif;font-weight:700;font-size:15px;line-height:1.25;color:var(--indiex-text)}
.lg-aside-copy{margin:0 0 14px;font-family:'Inter',sans-serif;font-size:13.5px;line-height:21px;color:var(--indiex-muted)}
.lg-aside-link{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--acc-a,#35FFFF);text-decoration:none}
.lg-aside-link::after{content:"›";font-size:17px;line-height:1}
.lg-aside-link:hover{text-decoration:underline}

@media(max-width:1200px){
  .lg-main{grid-template-columns:minmax(0,210px) minmax(0,1fr)}
  .lg-aside{display:none}
}
@media(max-width:980px){
  .lg-main{grid-template-columns:1fr;gap:26px;padding-left:16px;padding-right:16px}
  .lg-toc{position:static;top:auto}
  .lg-body{max-width:none}
}

.lg-main a{color:var(--acc-a,#35FFFF)}
.lg-note{margin-top:34px;padding:14px 18px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(18,18,46,.5);font-size:13px;line-height:22px;color:#8ea0d8}

/* ===================== 404 ===================== */
.nf-wrap{min-height:min(72vh,620px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:calc(var(--nav-h,90px) + 40px) 30px 90px}
.nf-code{font-family:'Excon',sans-serif;font-weight:700;font-size:clamp(96px,18vw,190px);line-height:1;letter-spacing:-.02em;background:linear-gradient(95deg,var(--acc-a,#35FFFF),var(--acc-b,#F933BD));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-title{font-family:'Excon',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,3vw,30px);color:var(--indiex-text);margin:0}
.nf-text{font-family:'Inter',sans-serif;font-size:16px;line-height:26px;color:var(--indiex-muted);max-width:46ch;margin:0 0 14px}
.nf-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* contact page: drop the section's own top gap since a banner sits above it */
.ct-page .contact-section{padding-top:8px}

/* ===================== LAYOUT FIXES ===================== */
/* Contact: left-align email/phone under the left-aligned "Catch us here" */
.ct-page .contact-detail-stack{align-items:flex-start;align-content:flex-start;text-align:left}

/* Footer bottom links: each link on one line, row centered across the bar */
.footer-bottom-links{flex:1 1 auto}
.footer-bottom-link{flex:0 0 auto;white-space:nowrap}

/* Header: truly center the primary nav in the bar (desktop only; mobile keeps the hamburger menu) */
@media (min-width:1360px){
  .large-menu{position:relative}
  .menu-wrap{position:static}
  .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none;width:auto}
}

/* Center the whole article column (must be last: .na-* margin shorthands override otherwise) */
.na-main>*{max-width:var(--na-measure,760px);margin-left:auto;margin-right:auto}

/* Scalable header language menu */
.language-menu{position:relative;flex:none;font-family:'Inter',sans-serif;color:var(--indiex-text)}
.language-menu summary{display:flex;align-items:center;gap:8px;min-width:82px;height:40px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(18,18,46,.54);cursor:pointer;list-style:none;transition:border-color .2s ease,background-color .2s ease}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu summary:hover,.language-menu[open] summary{border-color:rgba(255,255,255,.25);background:rgba(25,25,57,.92)}
.language-menu__globe,.language-menu__chevron,.language-menu__option svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.language-menu__globe{width:17px;height:17px;color:var(--acc-a,#35FFFF)}
.language-menu__current{font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.language-menu__chevron{width:14px;height:14px;margin-left:auto;color:#8ea0d8;transition:transform .2s ease}
.language-menu[open] .language-menu__chevron{transform:rotate(180deg)}
.language-menu__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:120;min-width:210px;padding:8px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:#12122e;box-shadow:0 18px 50px rgba(0,0,0,.42)}
.language-menu__label{margin:0;padding:8px 10px 7px;color:#8290bd;font-size:10px;font-weight:700;text-transform:uppercase}
.language-menu__option{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;padding:0 10px;border-radius:5px;color:#dbe2ff;font-size:13px;font-weight:600;text-decoration:none;transition:background-color .18s ease,color .18s ease}
.language-menu__option:hover{background:rgba(255,255,255,.07);color:#fff}
.language-menu__option.is-current{background:rgba(53,255,255,.08);color:var(--acc-a,#35FFFF)}
.language-menu__option svg{width:17px;height:17px}
@media (max-width:1359.98px){
  .indiex-header.is-open .language-menu{width:min(100%,420px);margin:0 auto}
  .indiex-header.is-open .language-menu summary{width:100%;height:48px;padding:0 14px}
  .indiex-header.is-open .language-menu__panel{position:static;width:100%;margin-top:8px;box-shadow:none}
  .indiex-header.is-open .language-menu__option{min-height:46px;font-size:15px}
}

/* Website form feedback */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.form-status{grid-column:1/-1;margin:2px 0 0;max-width:620px;color:var(--indiex-muted);font-family:'Inter',sans-serif;font-size:13px;line-height:1.5}
.form-status[data-state="success"]{color:#75e8ae}
.form-status[data-state="error"]{color:#ff9aa8}
.form-status[data-state="loading"]{color:#aeb8dc}
.footer-form-status{width:100%;margin-top:-8px}
.primary-button:disabled{cursor:wait;opacity:.58;pointer-events:none}

/* Hero: fill the viewport and vertically center the character so it never
   tucks under the fixed nav (was bottom-anchored with a fixed 790px height). */
@media (min-width: 1360px) {
  .hero-section { min-height: 100dvh; justify-content: center; }
  .hero-visual { bottom: auto; top: 50%; transform: translateY(-50%); }
  .hero-character { height: min(790px, calc(100dvh - 220px)); }
}

/* ===== hero carousel (CMS heroSlides; milestone.it 1:1 layout, EpicWin fonts) ===== */
/* display:block because this is the <hc-carousel> custom element */
.hero-carousel{display:block;position:relative;height:100svh;min-height:620px;overflow:hidden;background:#05051a}
.hc-track,.hc-slide{position:absolute;inset:0}
/* visibility, not just opacity: a transparent slide is still painted and
   composited every frame. It flips back only after the fade has finished, so the
   outgoing slide stays visible for its whole transition. */
.hc-slide{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;pointer-events:none}
.hc-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .9s ease}
.hc-slide .hc-content{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.hc-slide.is-active .hc-content{opacity:1;transform:none;transition-delay:.45s}
.hc-slide img,.hc-slide video{width:100%;height:100%;object-fit:cover;display:block}
.hc-scrim{position:absolute;inset:0;background:radial-gradient(rgba(10,10,26,.25),rgba(10,10,26,.25)),linear-gradient(0deg,#0a0a1a 0%,rgba(10,10,26,.62) 40%,rgba(10,10,26,0) 85%)}
.hc-content{position:absolute;left:0;right:0;margin:0 auto;max-width:var(--header-max);bottom:9vh;z-index:2}
.hc-heading{font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:clamp(44px,5.3vw,96px);font-weight:700;line-height:1.08;color:#fff;margin:0;max-width:1000px}
/* The hero CTA is the shared .primary-button now, so it inherits the fill and the
   hover sweep. All it needs from here is where it sits (deck 0827 slide 3). */
.hc-action{margin-top:44px}
.hc-next-card{position:absolute;right:calc((100% - var(--header-max)) / 2);bottom:70px;z-index:3;width:260px;aspect-ratio:1/0.6;border:0;padding:0;overflow:hidden;cursor:pointer;background:#05060f;text-align:left;display:flex}
.hc-next-media{position:absolute;inset:0;opacity:.2;transition:opacity .3s}
.hc-next-card:hover .hc-next-media{opacity:.42}
.hc-next-media img,.hc-next-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hc-next-card:hover .hc-next-media img,.hc-next-card:hover .hc-next-media video{transform:scale(1.1)}
.hc-next-text{position:relative;margin-top:auto;padding:14px;z-index:2;display:grid;gap:3px;width:100%}
.hc-next-label{font-family:"Inter","Inter Placeholder",sans-serif;font-size:14px;font-weight:500;color:#fff}
.hc-next-name{font-family:"Inter","Inter Placeholder",sans-serif;font-size:16px;font-weight:500;line-height:1.25;color:#9aa1b4;transition:color .3s;max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-next-card:hover .hc-next-name{color:#fff}
.hc-next-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.6);transform-origin:left;transform:scaleX(0);z-index:3;animation:hcFill 7s linear forwards}
.hc-next-card:hover .hc-next-progress{animation-play-state:paused}
/* Manual controls. The carousel no longer advances on its own (deck 0911
   slide 1), so it needs visible ways to move. One each side, the way the
   reference does it, rather than a pair in one corner. */
.hc-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  display:grid;width:56px;height:56px;place-items:center;padding:0;
  cursor:pointer;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;
  background:rgba(10,10,32,.55);backdrop-filter:blur(10px);
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease}
.hc-nav:hover{transform:translateY(-50%) scale(1.06);
  border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 62%,transparent);
  background:color-mix(in srgb,rgba(10,10,32,.55) 74%,var(--acc-solid,#F933BD))}
.hc-nav:active{transform:translateY(-50%) scale(.97)}
.hc-nav:focus-visible{outline:2px solid var(--acc-solid,#F933BD);outline-offset:3px}
.hc-nav svg{width:22px;height:22px}
.hc-prev{left:calc((100% - var(--header-max)) / 2)}
.hc-next{right:calc((100% - var(--header-max)) / 2)}
@media(max-width:1100px){.hc-prev{left:18px}.hc-next{right:18px}}
@media(max-width:820px){.hc-nav{width:46px;height:46px}.hc-nav svg{width:19px;height:19px}
  .hc-prev{left:10px}.hc-next{right:10px}}

.hc-dots{position:absolute;right:calc((100% - var(--header-max)) / 2);bottom:30px;display:flex;align-items:center;gap:8px;z-index:3}
.hc-dot{width:22px;height:22px;background:none;border:0;padding:0;position:relative;cursor:pointer;transition:width .3s}
.hc-dot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s}
.hc-dot.is-active{width:38px}
.hc-dot.is-active::before{width:30px;border-radius:65px;background:#fff}
@keyframes hcFill{to{transform:scaleX(1)}}
@media(max-width:820px){.hero-carousel{min-height:520px}.hc-heading{font-size:clamp(34px,9.5vw,54px)}.hc-action{margin-top:26px}.hc-next-card{display:none}.hc-dots{right:20px;bottom:4vh}}

/* ===== signature games: single source of truth (fachai geometry, EpicWin dark) ===== */
.sg-section{padding:96px 0;position:relative}
.sg-inner{max-width:var(--header-max);margin:0 auto}
.sg-head{display:flex;align-items:center;justify-content:center;max-width:1180px;margin:0 auto 34px;text-align:center}
.sg-head .game-heading{width:auto;margin:0;text-align:center}
.sg-nav{position:absolute;top:50%;z-index:5;display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(21,21,58,.92);color:var(--indiex-text);cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(10px);transition:border-color .2s ease,background-color .2s ease,opacity .2s ease}
.sg-nav:hover:not(:disabled){border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 60%,transparent);background:color-mix(in srgb,var(--indiex-ink) 88%,var(--acc-solid,#F933BD))}
.sg-nav:disabled{cursor:default;opacity:.32}
.sg-nav svg{display:block;width:18px;height:18px}
.sg-prev{left:6px}
.sg-next{right:6px}
.sg-prev svg{transform:rotate(180deg)}
/* display:block because this is the <sg-carousel> custom element, and unknown
   elements are inline until told otherwise */
.sg-carousel{display:block;position:relative;max-width:1240px;margin:0 auto;padding:0 30px;overflow:visible}
.sg-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-inline:contain;padding:7px 2px 24px;cursor:grab;scroll-behavior:smooth;scroll-padding-inline:2px;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}
.sg-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.sg-track img{-webkit-user-drag:none;user-select:none}
.sg-track::-webkit-scrollbar{display:none}
.sg-footer{display:flex;justify-content:center;margin-top:22px}
/* shared game card: homepage Signature Games, the games grid and "more games" */
/* 244/420 is the shape the client actually authors their tiles in: 68 of the 73
   covers measure 0.56-0.58, so the old 285/430 (0.663) frame left a blurred gap
   on almost every card. Matching it fills the frame edge to edge with nothing
   cropped and nothing padded. */
.game-card{position:relative;display:block;aspect-ratio:244/420;border-radius:18px;overflow:hidden;isolation:isolate;background:#0e0e26;border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s,box-shadow .35s}
/* Three full cards. The old 28% left 40% of a fourth card showing, sliced
   straight through its icon and title, which the client read as broken art
   rather than as a scroll cue (deck 0827 slide 5). The arrows and dots carry
   that job instead. */
.sg-track .game-card{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start;scroll-snap-stop:always}
.game-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 60%,transparent);box-shadow:0 22px 48px color-mix(in srgb,var(--acc-solid,#F933BD) 20%,rgba(0,0,0,.4))}
/* The client's posters are 0.56-0.58 portrait, the frame is 0.66, so cover was
   slicing 12% off the sides (deck 0827 slide 10). The artwork is contained now
   and a blurred, scaled copy of it fills the rest, so the frame is always full
   and the poster is always whole, whatever ratio arrives. */
.gc-cover{position:absolute;inset:0;overflow:hidden}
.gc-cover::before{content:"";position:absolute;inset:-8%;z-index:0;
  background-image:var(--cover);background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.15) brightness(.55);transform:scale(1.08)}
/* Art within 8% of the frame fills it edge to edge: the crop is a few pixels of
   border, and it keeps the grid uniform. Anything further off keeps contain, so
   a genuinely different shape is never sliced. */
.gc-cover.is-snug img{object-fit:cover}
.gc-cover.is-snug::before{display:none}
.gc-cover img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.game-card:hover .gc-cover img{transform:scale(1.06)}
.gc-badge{position:absolute;top:14px;left:14px;z-index:4;padding:5px 13px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.gc-badge.new{background:linear-gradient(92deg,#ff6d2d,#ff265a)}
.gc-badge.hot{background:linear-gradient(92deg,#ff265a,#c2185b)}
.gc-panel{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:visible;padding:16px 18px 15px;display:grid;gap:8px;background:rgba(10,10,32,.82);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.09);border-radius:0 0 18px 18px}
/* The badge is a fixed plate and the artwork sits inside it with a little
   breathing room, so a square tile and a portrait poster both look deliberate
   rather than cropped (deck 0827 slide 10). */
/* The plate takes the badge artwork's own shape, sized from a fixed WIDTH so a
   portrait icon grows taller rather than turning into a narrow sliver.
   bottom:100% + a negative margin anchors it by its lower edge, so a fixed
   amount always sits inside the panel and the extra height rises over the
   artwork. That keeps the title's position identical on every card whatever
   shape the icon is. */
.gc-icon-frame{position:absolute;top:auto;bottom:100%;margin-bottom:-52px;left:16px;
  width:80px;height:auto;aspect-ratio:var(--icon-ratio,1);border-radius:15px;z-index:3;
  display:grid;place-items:center;padding:4px;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(24,24,58,.96),rgba(12,12,32,.96));
  border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.45);overflow:hidden}
/* A normalised icon is already square, so it fills the plate. object-fit stays
   contain for the raw-CMS fallback, where the source may be portrait. */
.gc-icon{width:100%;height:100%;object-fit:cover;border-radius:11px}
.gc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:44px}
.gc-head h3{color:#fff!important;font-size:1.18rem;font-weight:800;margin:0;line-height:1.2;text-transform:uppercase;min-width:0;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.gc-chev{color:var(--acc-solid,#F933BD)!important;font-size:1.5rem;line-height:1;flex:none;transition:transform .3s}
.game-card:hover .gc-chev{transform:translateX(4px)}
.gc-cat{color:#b9bdd8!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-flex;width:max-content;margin:0}
.gc-cat img{display:none}
.gc-specs{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;max-height:0;opacity:0;transform:translateY(10px);overflow:hidden;margin:0;padding-top:0;border-top:1px solid transparent;transition:max-height .38s ease,opacity .3s ease,transform .38s ease,padding-top .38s ease,border-top-color .3s ease}
.game-card:hover .gc-specs{max-height:150px;opacity:1;transform:none;padding-top:10px;border-top-color:rgba(255,255,255,.09)}
.gc-spec{display:grid;gap:1px}
.gc-spec-label{color:rgba(255,255,255,.45)!important;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}
.gc-spec-val{color:#fff!important;font-size:.84rem;font-weight:700}
@media(max-width:1100px){.sg-track .game-card{flex-basis:40%}}
@media(max-width:820px){.sg-section{padding:64px 20px}.sg-head{margin-bottom:28px}.sg-carousel{padding:0}.sg-nav{width:44px;height:44px}.sg-prev{left:6px}.sg-next{right:6px}.sg-track{gap:14px}.sg-track .game-card{flex-basis:80%}.sg-footer{margin-top:18px}.gc-icon-frame{width:64px;margin-bottom:-44px}.gc-head{margin-top:34px}.gc-head h3{font-size:.9rem}}

/* ===== Innovation metrics: FA CHAI content in the EpicWin/Indiex system ===== */
.innovation-overview .overview-content{gap:60px}
.innovation-overview .overview-heading{max-width:720px}
.io-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;width:100%}
.io-card{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:var(--indiex-ink);box-shadow:0 18px 48px rgba(0,0,0,.18)}
.io-grid .reveal-item:nth-child(2){--reveal-delay:80ms}
.io-grid .reveal-item:nth-child(3){--reveal-delay:120ms}
.io-grid .reveal-item:nth-child(4){--reveal-delay:160ms}
.io-grid .reveal-item:nth-child(5){--reveal-delay:200ms}
.io-grid .reveal-item:nth-child(6){--reveal-delay:240ms}
.io-grid .reveal-item:nth-child(7){--reveal-delay:280ms}
.io-games{grid-column:1/4;grid-row:1;display:grid;grid-template-columns:minmax(190px,.66fr) minmax(0,1.8fr);min-height:250px}
.io-games-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px 20px 30px 34px;position:relative;z-index:2}
.io-kicker,.io-label,.io-small-label{margin:0;color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:16px;font-weight:400;line-height:1.35}
.io-kicker{margin-bottom:16px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:uppercase}
.io-value,.io-small-value{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-weight:700;letter-spacing:0;text-transform:uppercase}
.io-value{font-size:64px;line-height:.95}
.io-label{margin-top:10px;font-size:21px}
.io-game-marquee{display:grid;grid-template-columns:repeat(5,96px);justify-content:center;column-gap:8px;min-width:0;height:250px;overflow:hidden;padding:0 10px;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}
.io-game-column{height:100%;overflow:hidden}
.io-game-track{display:flex;height:max-content;flex-direction:column;align-items:center;gap:8px;animation:io-game-vertical 20s linear infinite}
.io-game-column:nth-child(even) .io-game-track{animation-direction:reverse;animation-duration:24s}
.io-game-column:nth-child(3) .io-game-track{animation-duration:22s}
.io-game-column:nth-child(4) .io-game-track{animation-duration:26s}
.io-game-column:nth-child(5) .io-game-track{animation-duration:23s}
.io-game-track img{display:block;width:96px;height:96px;flex:0 0 auto;border:1px solid rgba(53,255,255,.32);border-radius:10px;object-fit:cover;object-position:center top;box-shadow:0 8px 18px rgba(0,0,0,.28)}
/* The artwork is 0.58 portrait and the frame was a square, so 42% of every tile
   was cut off. The frame now matches the poster, which is the client's
   "make the frame cater to game icon size without cropping it". */
.is-uncropped .io-game-track img{height:166px}
.is-uncropped .io-game-marquee{height:330px}
.io-compare-label{margin:0 0 14px;padding:7px 14px;display:inline-block;border-radius:999px;
  background:rgba(249,51,189,.16);border:1px solid color-mix(in srgb,var(--acc-solid,#F933BD) 55%,transparent);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indiex-text)}
.io-customers{grid-column:4;grid-row:1/3;display:flex;min-height:496px;flex-direction:column;padding:22px 18px}
.io-customer-heading{display:flex;align-items:center;gap:11px;color:var(--indiex-text);text-transform:uppercase}
.io-customer-heading strong{font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:52px;line-height:1}
.io-customer-heading span{padding-left:11px;border-left:2px solid var(--indiex-green);font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;font-weight:700;line-height:1.3}
.io-donut-wrap{position:relative;width:min(208px,92%);aspect-ratio:1;margin:16px auto 8px}
.io-donut{display:block;width:100%;height:100%;overflow:visible;transform:rotate(0deg)}
.io-donut-track,.io-donut-segment{fill:none;stroke-width:15}
.io-donut-track{stroke:rgba(255,255,255,.07)}
.io-donut-segment{cursor:pointer;transform:rotate(-90deg);transform-origin:60px 60px;transition:opacity .22s ease,stroke-width .22s ease,filter .22s ease}
.io-donut-segment:focus{outline:none}
.io-customers.has-active .io-donut-segment{opacity:.22}
.io-customers.has-active .io-donut-segment.is-active{opacity:1;stroke-width:18;filter:drop-shadow(0 0 5px currentColor)}
.io-donut-center{position:absolute;inset:31%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.io-donut-center strong{color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:30px;line-height:1}
.io-donut-center span{margin-top:4px;color:var(--indiex-muted);font-size:10px;line-height:1.1;text-transform:uppercase}
.io-region-list{display:grid;gap:3px;margin-top:4px}
.io-region{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--indiex-muted);padding:5px 0;cursor:pointer;font-family:"Inter","Inter Placeholder",sans-serif;font-size:11px;text-align:left;text-transform:uppercase;transition:color .2s ease,transform .2s ease}
.io-region:hover,.io-region:focus-visible,.io-region.is-active{color:var(--indiex-text);transform:translateX(3px);outline:none}
.io-region-swatch{width:9px;height:9px;flex:0 0 auto;border-radius:2px;background:var(--region-color)}
.io-region strong{margin-left:auto;color:inherit;font-size:11px}
.io-small{display:flex;min-height:230px;flex-direction:column;justify-content:space-between;padding:24px 0 27px}
.io-currencies{grid-column:1;grid-row:2}
.io-languages{grid-column:2;grid-row:2}
.io-devices{grid-column:3;grid-row:2}
.io-icon-marquee{position:relative;width:100%;overflow:hidden;padding:10px 0;mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent)}
.io-icon-track{display:flex;width:max-content;animation:io-icon-marquee 18s linear infinite}
.io-languages .io-icon-track{animation-duration:24s;animation-direction:reverse}
.io-devices .io-icon-track{animation-duration:21s}
.io-icon-set{display:flex;align-items:center;gap:12px;padding-right:12px}
.io-icon{display:grid;flex:0 0 auto;width:52px;height:52px;overflow:hidden;place-items:center;border:1px solid color-mix(in srgb,var(--acc-solid,#F933BD) 54%,transparent);border-radius:10px;background:color-mix(in srgb,var(--acc-solid,#F933BD) 11%,transparent);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.io-icon img{display:block;width:100%;height:100%;object-fit:contain}
.io-flags .io-icon{width:72px;height:50px;border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 68%,transparent);border-radius:10px;background:rgba(255,255,255,.92)}
.io-flags .io-icon img{object-fit:cover}
.io-small-copy{text-align:center;padding:0 20px}
.io-small-value{font-size:40px;line-height:1}
.io-small-label{margin-top:8px;font-size:13px}
.io-card-bg,.io-card-shade{position:absolute;inset:0;width:100%;height:100%}
.io-card-bg{z-index:0;display:block;object-fit:cover}
.io-card-shade{z-index:1;background:rgba(8,8,25,.58)}
.io-operators{grid-column:5;grid-row:1;min-height:250px;padding:0}
.io-operator-bg{object-fit:contain;object-position:center;opacity:.55;transform:scale(1.55);filter:saturate(1.15) contrast(1.08)}
.io-operators .io-card-shade{background:rgba(8,8,25,.56)}
.io-operator-content{position:relative;z-index:2;display:grid;grid-template-columns:auto 2px minmax(0,1fr);align-items:center;gap:12px;min-height:250px;padding:28px 22px}
.io-operator-value,.io-operator-label{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-weight:700;text-transform:uppercase}
.io-operator-value{font-size:52px;line-height:1}
.io-operator-rule{width:2px;height:64px;background:var(--indiex-green)}
.io-operator-label{font-size:19px;line-height:1.28}
.io-promo{grid-column:5;grid-row:2;display:flex;min-height:230px;flex-direction:column;justify-content:flex-end;padding:24px 22px 26px}
.io-promo-bg{object-position:center;opacity:.82}
.io-promo .io-card-shade{background:rgba(8,8,25,.64)}
.io-promo-copy{position:relative;z-index:2}
.io-promo-copy p{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:23px;font-weight:700;line-height:1.2;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.7)}
/* was --indiex-green, the only green text in the section (deck 0827 slide 4) */
.io-promo-copy span{display:block;margin-top:10px;color:var(--indiex-muted);font-size:11px;font-weight:600;line-height:1.35;text-transform:uppercase}
@keyframes io-game-vertical{to{transform:translateY(-416px)}}
@keyframes io-icon-marquee{to{transform:translateX(-25%)}}

@media(max-width:1100px){
  .io-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .io-games{grid-column:1/-1}
  .io-customers{grid-column:1/3;grid-row:3/5;min-height:476px}
  .io-operators{grid-column:3;grid-row:3;min-height:230px}
  .io-promo{grid-column:3;grid-row:4;min-height:230px}
}

@media(max-width:820px){
  .innovation-overview .overview-content{gap:40px}
  .io-grid{display:flex;flex-direction:column;gap:16px}
  .io-games{display:flex;min-height:0;flex-direction:column}
  .io-game-marquee{order:1;grid-template-columns:repeat(3,96px);height:354px;padding:0 8px}
  .io-game-column-extra{display:none}
  .io-games-copy{order:2;align-items:center;padding:26px 24px 32px;text-align:center}
  .io-kicker{margin-bottom:14px}
  .io-value{font-size:64px}
  .io-label{font-size:21px}
  .io-small{min-height:220px;padding:26px 0 28px}
  .io-small-value{font-size:42px}
  .io-currencies{order:2}.io-languages{order:3}.io-devices{order:4}
  .io-customers{order:5;min-height:500px;padding:28px 30px}
  .io-donut-wrap{width:min(210px,75%)}
  .io-region{font-size:11px}
  .io-operators{order:6;min-height:190px;padding:0}
  .io-operator-content{min-height:190px;padding:28px}
  .io-operator-value{font-size:56px}
  .io-promo{order:7;min-height:210px;padding:26px 28px}
}

/* ===== Our Clients: dedicated CMS-driven section after Who We Are ===== */
.clients-section{position:relative;width:100%;overflow:hidden;background:transparent;padding:82px 0 92px}
.clients-inner{width:100%;max-width:var(--header-max);margin:0 auto}
.clients-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:end;gap:64px}
.clients-title-wrap{display:grid;gap:22px}
.clients-title-wrap .section-label{margin:0}
.clients-heading{max-width:780px;margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:48px;font-weight:700;line-height:58px;letter-spacing:0;text-transform:uppercase}
.clients-intro{display:grid;justify-items:start;gap:24px;padding-bottom:3px}
.clients-intro p{max-width:500px;margin:0;color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:16px;line-height:1.65}
.clients-marquee{width:100%;margin-top:54px;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.clients-track{display:flex;width:max-content;align-items:center;gap:24px;animation:clients-marquee var(--marquee-duration,26s) linear infinite;will-change:transform}
.clients-set{display:flex;flex:none;align-items:center;gap:24px}
.client-logo{display:grid;width:210px;height:88px;flex:none;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:var(--indiex-ink);transition:border-color .25s ease,background-color .25s ease}
.client-logo:hover{border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 58%,transparent);background:color-mix(in srgb,var(--indiex-ink) 90%,var(--acc-solid,#F933BD))}
.client-logo img{display:block;width:auto;max-width:170px;height:auto;max-height:44px;object-fit:contain}
@keyframes clients-marquee{to{transform:translateX(calc(-25% - 6px))}}

@media(max-width:820px){
  .clients-section{padding:64px 20px 72px}
  .clients-head{grid-template-columns:1fr;gap:28px}
  .clients-title-wrap{gap:18px}
  .clients-heading{font-size:38px;line-height:46px}
  .clients-intro{gap:20px}
  .clients-intro p{font-size:15px}
  .clients-marquee{margin-top:40px}
  .clients-track,.clients-set{gap:16px}
  .client-logo{width:180px;height:80px}
  .client-logo img{max-width:145px;max-height:40px}
  @keyframes clients-marquee{to{transform:translateX(calc(-25% - 4px))}}
}

@media(prefers-reduced-motion:reduce){.io-game-track,.io-icon-track,.clients-track{animation-play-state:paused}}

/* ===== media & affiliate partners: grouped logo cloud (odyssey logocloud-4 motion) ===== */
.mp-section{padding:88px 0 96px;position:relative}
.mp-inner{max-width:var(--header-max);margin:0 auto}
.mp-head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:46px}
.mp-head .section-label{align-self:center}
.mp-heading{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:48px;font-weight:700;line-height:58px;letter-spacing:0;text-transform:uppercase;text-align:center}
/* The partner row IS the clients marquee now (deck 0907), so the only rules left
   are the ones that row cannot infer: these are press logos supplied dark on
   transparent, so they get rendered white to read on the dark tile. */
.mp-section .client-logo img{filter:brightness(0) invert(1);opacity:.82;transition:opacity .25s ease}
.mp-section .client-logo:hover img{opacity:1}

@media(max-width:820px){
  .mp-section{padding:64px 20px 72px}
  .mp-heading{font-size:38px;line-height:46px}
}

/* centred section headers: keep the eyebrow on the same axis as the heading */
.testimonial-title-wrap .section-label,.faq-title-wrap .section-label{align-self:center}

/* ===== milestone: PG Soft composition, EpicWin visual system ===== */
.ms-section{position:relative;overflow:hidden;padding:88px 0 30px;background:var(--indiex-bg)}
ms-timeline,.ms-stage{display:block}
.ms-stage{position:relative;width:100%;min-width:0}
.ms-inner{max-width:var(--header-max);margin:0 auto}
.ms-head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:18px;text-align:center}
.ms-head .section-label{align-self:center}
.ms-heading{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:48px;font-weight:700;letter-spacing:0;line-height:58px;text-transform:uppercase;text-align:center}
.ms-cover{position:relative;width:100%;height:400px;padding-bottom:34px;overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.ms-cover::-webkit-scrollbar{display:none}
.ms-cover.is-grabbing{cursor:grabbing}
.ms-cover:focus-visible{outline:2px solid var(--acc-solid,#F933BD);outline-offset:-3px}
.ms-drag-hint{position:sticky;left:calc(100% - 170px);top:4px;z-index:5;display:flex;width:max-content;align-items:center;gap:7px;color:rgba(234,252,255,.45);font-size:12px;font-weight:600;line-height:1;text-transform:uppercase;transition:opacity .35s ease}
.ms-drag-hint.is-done{opacity:0}
.ms-hint-arrows{display:flex;align-items:center;gap:2px}
.ms-hint-arrows svg{width:13px;height:13px;flex:none}
.ms-hint-arrows svg:first-child{transform:rotate(180deg)}
.ms-track{position:absolute;top:50%;left:0;display:flex;width:max-content;height:290px;align-items:flex-start;padding:0 280px 0 180px;transform:translateY(-50%);user-select:none}
.ms-item{position:relative;display:block;width:200px;height:200px;flex:none;transition:width .5s ease,height .5s ease}
.ms-item:is(.is-active,:focus-within){width:400px}
.ms-item-body{position:absolute;bottom:0;left:0;width:100%;height:auto}
.ms-story{position:relative;display:block;width:100%;height:110px;margin:0 0 10px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;transition:height .5s ease}
.ms-story-body{position:absolute;top:0;right:0;display:block;width:100%;height:100%;transition:width .5s ease}
.ms-media{position:absolute;top:0;left:0;display:block;width:80px;height:53px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:var(--indiex-ink);box-shadow:0 8px 20px rgba(0,0,0,.2);transition:left .5s ease,width .5s ease,height .5s ease,border-color .25s ease}
.ms-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.ms-item:is(.is-active,:focus-within) .ms-media{border-color:color-mix(in srgb,var(--c) 70%,transparent)}
.ms-story-copy{position:absolute;bottom:0;left:0;display:block;width:140px;height:48px;transition:left .5s ease,width .5s ease,height .5s ease}
.ms-title{display:-webkit-box;height:48px;overflow:hidden;color:var(--indiex-text);font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;font-weight:700;line-height:16px;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.ms-description{display:block;width:170px;height:72px;overflow:hidden;margin-top:9px;color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;line-height:18px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.ms-line{position:relative;display:block;width:100%;height:30px;margin:0 0 5px}
.ms-stem{position:absolute;bottom:0;left:0;z-index:2;display:block;width:2px;height:30px;border-radius:2px;background:var(--c);transition:left .5s ease,height .5s ease}
.ms-stem i{position:absolute;top:-4px;left:50%;width:0;height:0;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 16%,transparent);transform:translateX(-50%);transition:width .35s ease,height .35s ease}
.ms-ruler{position:absolute;right:0;bottom:0;left:0;display:block;height:10px;background:repeating-linear-gradient(90deg,rgba(234,252,255,.33) 0 1px,transparent 1px 10px)}
.ms-segment{display:block;width:100%;height:10px;margin:0 0 20px;background:linear-gradient(90deg,var(--c),var(--next))}
.ms-item:first-child .ms-segment{border-radius:999px 0 0 999px}
.ms-item:last-child .ms-segment{border-radius:0 999px 999px 0}
/* the year keeps its segment's colour, lifted towards white: the raw ramp hits
   #113EEB, which is unreadable on the near-black section background */
.ms-date{display:block;height:16px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#EAFCFF),color-mix(in srgb,var(--next) 55%,#EAFCFF));background-clip:text;-webkit-background-clip:text;color:transparent;font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:16px;font-weight:700;line-height:16px}
.ms-item:is(.is-active,:focus-within) .ms-story{height:199px}
.ms-item:is(.is-active,:focus-within) .ms-story-body{width:200px}
.ms-item:is(.is-active,:focus-within) .ms-media{left:-200px;width:180px;height:120px;border-color:color-mix(in srgb,var(--c) 70%,transparent);border-radius:8px}
.ms-item:is(.is-active,:focus-within) .ms-story-copy{top:0;bottom:auto;left:15px;width:170px;height:auto}
.ms-item:is(.is-active,:focus-within) .ms-title{height:58px;padding-top:3px;font-size:14px;line-height:18px;-webkit-line-clamp:3}
.ms-item:is(.is-active,:focus-within) .ms-description{opacity:1;visibility:visible;transition-delay:.5s}
.ms-item:is(.is-active,:focus-within) .ms-stem{left:50%;height:240px;transition-delay:0s,.2s}
.ms-item:is(.is-active,:focus-within) .ms-stem i{width:8px;height:8px}
.ms-progress{position:absolute;bottom:8px;left:50%;z-index:6;display:block;width:140px;height:12px;overflow:hidden;padding:3px;border-radius:30px;background:rgba(255,255,255,.1);opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity .35s ease}
.ms-progress.is-visible{opacity:1}
.ms-progress i{position:absolute;top:3px;left:3px;height:6px;border-radius:30px;background:color-mix(in srgb,var(--acc-solid,#F933BD) 48%,transparent)}
.ms-progress b{position:absolute;top:3px;left:3px;width:46px;height:6px;border-radius:30px;background:var(--acc-solid,#F933BD);transition:transform .08s linear}
@media(prefers-reduced-motion:reduce){.ms-item{transition:none}}
@media(min-width:992px){.ms-cover{overflow:hidden}/* var() is the no-JS starting point only; the script writes transform directly,   otherwise every frame of the slide re-rasters the whole track */.ms-track{top:calc(40% + 90px);transform:translate3d(var(--ms-x,0px),-50%,0);backface-visibility:hidden}.ms-track.is-moving{will-change:transform}}
@media(max-width:991px){
  .ms-section{display:block;min-height:auto;padding:120px 0}
  .ms-inner{padding:0 25px}
  .ms-cover{height:394px}
  .ms-track{top:52%;padding-right:240px;padding-left:70px}
  .ms-item{height:290px}
  .ms-drag-hint,.ms-progress{display:none}
}
@media(max-width:575px){
  .ms-section{padding:90px 0 30px}
  .ms-head{margin-bottom:20px}
  .ms-heading{max-width:270px;font-size:40px;line-height:50px}
  .ms-track{padding-left:50px}
}

/* The legacy homepage sections this rule used to hide were deleted along
   with src/partials/home.html; the class names below are still used by the
   About and Contact pages, which is why they are not removed wholesale. */

/* ...but the rule above is meant for the ported homepage blocks only, and two
   pages reuse those class names to inherit their styling: the contact page's form
   is a .contact-section and the About page's studio block is an .about-section.
   Both were being hidden along with the homepage sections. */
.ct-page .contact-section{display:block!important}
.about-section.abt-studio{display:flex!important}
/* the ported container centres its children, which left the intro and the form
   floating in the middle instead of starting on the site's column */
.ct-page .contact-container{align-items:stretch}
.ct-page .ct-intro{width:100%}

/* milestone entries that link to a news article */
.ms-story.is-link{cursor:pointer;text-decoration:none}
.ms-story.is-link:hover .ms-title{color:var(--acc-solid,#F933BD)}

/* ============================================================
   FOOTER REBUILD (0729 deck slide) + floating contact button
   Structure follows the reference footer: a "get in touch" band with the
   mascot rising above it, then connect / sitemap / games / certification
   columns, then a full-bleed legal bar.
   ============================================================ */

/* ---- call-to-action band ---- */
/* The box is taller than the painted panel (::before starts lower down), so the
   mascot rises above the panel edge without any ancestor needing overflow. */
.ft-cta{position:relative;width:100%}
.ft-cta::before{content:"";position:absolute;top:104px;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(234,252,255,.055),rgba(234,252,255,.02) 62%,transparent);
  border-top:1px solid rgba(234,252,255,.09)}
.ft-cta-inner{position:relative;display:grid;max-width:var(--header-max);margin:0 auto;padding:0;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);align-items:end;gap:0 30px}
.ft-cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:104px 0 74px}
/* one line on desktop: the size follows the viewport so it never wraps */
.ft-cta-heading{margin:0;color:var(--indiex-text);white-space:nowrap;
  font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:clamp(28px,3.05vw,48px);
  font-weight:700;line-height:1.2;text-transform:uppercase}
.ft-cta-art{position:relative;align-self:end;justify-self:end;line-height:0;pointer-events:none}
.ft-cta-art::before{content:"";position:absolute;top:12%;right:6%;width:74%;height:74%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc-b) 34%,transparent),transparent 68%);
  filter:blur(34px)}
.ft-cta-art img{position:relative;display:block;width:auto;height:clamp(270px,26vw,410px);
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}

/* ---- footer columns ---- */
.site-footer{padding:0}
.ft-grid{display:grid;width:100%;max-width:var(--header-max);margin:0 auto;padding:72px 0 0;
  grid-template-columns:minmax(240px,1.05fr) minmax(140px,.72fr) minmax(160px,.86fr) minmax(260px,1.08fr);
  gap:44px 40px;align-items:start;text-align:left}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%}
.ft-col .section-label{margin-bottom:4px}

.ft-col-brand{gap:22px}
.ft-logo{display:block;line-height:0}
.ft-logo img{display:block;height:42px;width:auto}
.ft-col-heading{margin:0 0 2px;color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:17px;font-weight:700;line-height:26px}
.ft-socials{display:flex;flex-wrap:wrap;gap:10px}
.ft-social{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(234,252,255,.16);
  border-radius:50%;color:var(--indiex-muted);
  transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease}
.ft-social svg{width:16px;height:16px}
.ft-social:hover{color:var(--acc-b);background:color-mix(in srgb,var(--acc-b) 14%,transparent);
  border-color:color-mix(in srgb,var(--acc-b) 55%,transparent);transform:translateY(-2px)}
.ft-email{color:var(--indiex-text);font-family:"Inter","Inter Placeholder",sans-serif;font-size:15px;
  line-height:24px;transition:color .3s ease}
.ft-email:hover{color:var(--acc-b)}
.ft-subscribe-copy{margin:0;color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:15px;line-height:24px}
.ft-col-connect .footer-form{gap:16px;width:100%;margin-top:2px}

.ft-links{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.ft-link{color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:15px;
  line-height:24px;transition:color .3s ease}
.ft-link:hover{color:var(--indiex-text)}
.ft-link.is-all{color:var(--indiex-text);font-weight:600}
.ft-link.is-all:hover{color:var(--acc-b)}

/* certification blocks: dark boxes, light chips behind the dark vendor marks
   (BeGambleAware ships as a white wordmark, so it stays chip-free) */
.ft-col-trust{gap:14px}
.ft-trust-box{width:100%;padding:16px 18px;border:1px solid rgba(234,252,255,.09);border-radius:14px;
  background:var(--indiex-ink)}
.ft-trust-label{margin:0 0 12px;color:var(--acc-a);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.ft-trust-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ft-trust-logos .lic{height:34px;width:auto;padding:5px 9px;border-radius:8px;background:#fff}
.ft-trust-logos .lic-w{height:26px;width:auto;opacity:.92}

/* ---- legal bar ---- */
.ft-legal{width:100%;margin-top:60px;border-top:1px solid rgba(234,252,255,.08);background:var(--indiex-ink)}
.ft-legal-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  max-width:var(--header-max);margin:0 auto;padding:20px 0;gap:10px 40px}
.ft-legal-links{display:flex;flex-wrap:wrap;gap:12px 30px}
.ft-legal-link{color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.04em;line-height:24px;text-transform:uppercase;transition:color .3s ease}
.ft-legal-link:hover{color:var(--indiex-text)}
.ft-copy{margin:0;color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:13px;line-height:24px;text-align:right;width:auto}

@media(max-width:1200px){
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .ft-col-trust{grid-column:span 2;flex-direction:row;flex-wrap:wrap}
  .ft-trust-box{flex:1 1 260px;min-width:0}
}
@media(max-width:991px){
  /* back to a column here, where a 260px basis would size HEIGHT and leave a
     large void under the logos */
  .ft-col-trust{flex-direction:column}
  .ft-trust-box{flex:0 0 auto}
}
@media(max-width:991px){
  .ft-cta::before{top:0}
  .ft-cta-inner{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:56px}
  /* .ft-cta-inner already adds padding-top:56px above; this added another 56,
     which is the gap above the heading the client flagged. The bottom value is
     the breathing room between the button and the mascot below it. */
  .ft-cta-copy{align-items:center;padding:0 0 30px;text-align:center}
  .ft-cta-heading{white-space:normal;font-size:34px;line-height:44px}
  /* stacked, the mascot sat flush on the footer's top edge with no gap.
     On desktop it still bleeds to the band edge, which is the design. */
  .ft-cta-art{justify-self:center;margin-bottom:30px}
  .ft-cta-art img{height:clamp(220px,44vw,300px)}
  .ft-grid{padding-top:56px}
  .ft-legal-inner{justify-content:center;text-align:center}
  .ft-legal-links{justify-content:center}
  .ft-copy{width:100%;text-align:center}
}
@media(max-width:575px){
  .ft-grid{grid-template-columns:1fr}
  .ft-col-trust{grid-column:auto;flex-direction:column}
  .ft-cta-heading{white-space:normal;font-size:26px;line-height:36px}
}

/* ============================================================
   Floating contact button: one button, hover (or tap) reveals the
   chat channels above it.
   ============================================================ */
.fc{position:fixed;right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  /* the wrapper spans the closed channel stack too, and a transparent box still
     swallows the pointer, so only its real controls take events */
  pointer-events:none}
.fc-toggle{pointer-events:auto}
.fc-channels{display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.fc-channel{display:flex;align-items:center;gap:10px;opacity:0;text-decoration:none;
  transform:translateY(14px) scale(.86);transform-origin:85% 50%;
  transition:opacity .26s ease,transform .34s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
.fc.is-open .fc-channels{pointer-events:auto}
.fc.is-open .fc-channel{opacity:1;transform:none;transition-delay:calc(var(--i,1) * 55ms)}
.fc-channel-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.45);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.fc-channel-icon svg{width:22px;height:22px}
.fc-channel:hover .fc-channel-icon{transform:scale(1.08)}
.fc-channel.is-whatsapp .fc-channel-icon{background:#25D366;color:#06301a}
.fc-channel.is-telegram .fc-channel-icon{background:#229ED9}
.fc-channel.is-email .fc-channel-icon{background:linear-gradient(95deg,var(--acc-a),var(--acc-b));color:#08081a}
.fc-channel-label{padding:7px 12px;border:1px solid rgba(234,252,255,.1);border-radius:9px;
  background:rgba(10,10,32,.9);color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;
  line-height:1;text-transform:uppercase;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.fc-toggle{position:relative;display:grid;width:58px;height:58px;place-items:center;padding:0;border:0;
  border-radius:50%;background:linear-gradient(95deg,var(--acc-a),var(--acc-b));color:#08081a;
  cursor:pointer;box-shadow:0 14px 34px rgba(249,51,189,.34)}
.fc-toggle::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--acc-b) 60%,transparent);
  animation:fc-pulse 2.6s ease-out infinite;pointer-events:none}
.fc-toggle:focus-visible{outline:2px solid var(--acc-a);outline-offset:3px}
.fc-toggle-icon{position:relative;display:grid;width:26px;height:26px;place-items:center}
.fc-toggle-icon svg{position:absolute;width:26px;height:26px;
  transition:opacity .24s ease,transform .34s cubic-bezier(.22,.61,.36,1)}
.fc-ic-close{opacity:0;transform:rotate(-90deg) scale(.7)}
.fc.is-open .fc-ic-chat{opacity:0;transform:rotate(90deg) scale(.7)}
.fc.is-open .fc-ic-close{opacity:1;transform:none}
.fc.is-open .fc-toggle::after{animation:none;opacity:0}
@keyframes fc-pulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

@media(max-width:575px){
  .fc-channel-label{display:none}
  .fc-toggle{width:52px;height:52px}
  .fc-channel-icon{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .fc-channel{transition:opacity .2s ease}
  .fc.is-open .fc-channel{transform:none;transition-delay:0s}
  .fc-toggle::after{animation:none}
  .fc-toggle-icon svg{transition:opacity .2s ease}
  .fc-ic-close,.fc.is-open .fc-ic-chat{transform:none}
}

/* ============================================================
   GAMES PAGE (0729 deck slide 2)
   4 cards a row instead of 8, Load more instead of the whole catalogue,
   and a featured carousel on top. The cards themselves are the shared
   .game-card / .gc-* design from the homepage Signature Games section.
   ============================================================ */

/* the listing grid drops the old 132px tiles for the wide Fa Chai-style card */
#gl-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.gc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gc-date{color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#gl-grid .game-card{width:auto;min-width:0}
/* "more games" on a game page shares the card, so it needs room for the panel
   text too - 6 tiny 163px columns cramped it */
.gl-grid:not(#gl-grid){grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
@media(max-width:719px){.gl-grid:not(#gl-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:1279px){#gl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){#gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:559px){#gl-grid{grid-template-columns:1fr}}

.gl-more{display:flex;justify-content:center;margin:44px 0 8px}
.gl-more-btn{padding:13px 34px;border:1px solid color-mix(in srgb,var(--acc-b) 45%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--acc-b) 12%,transparent);color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.gl-more-btn:hover{background:color-mix(in srgb,var(--acc-b) 22%,transparent);
  border-color:var(--acc-b);transform:translateY(-2px)}
.gl-more-btn:focus-visible{outline:2px solid var(--acc-a);outline-offset:3px}

/* ---- featured carousel ----
   Backdrop is the game's own gameplay screenshot (1533x688, every game has
   three); the poster stands on the right like a shelf card. One treatment for
   every game so the slides do not look like different components. */
.gf{width:100%;padding:6px 0 30px}
.gf-inner{position:relative;max-width:var(--header-max);margin:0 auto}
.gf-viewport{position:relative;overflow:hidden;border:1px solid rgba(234,252,255,.1);border-radius:20px;
  background:var(--indiex-ink)}
.gf-track{position:relative;display:block;width:100%;height:clamp(340px,30vw,420px)}
.gf-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;text-decoration:none;
  transition:opacity .5s ease,visibility .5s ease}
.gf-slide.is-active{opacity:1;visibility:visible}

.gf-art{position:absolute;inset:0;display:block;overflow:hidden}
/* the screenshots are gameplay reels: blurred they give the game's own colour
   and scenery without showing spin buttons and demo balances */
.gf-art img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.12);filter:blur(11px) saturate(1.15) brightness(.92)}
.gf-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,22,.95) 0%,rgba(8,8,22,.86) 42%,rgba(8,8,22,.6) 72%,rgba(8,8,22,.5) 100%)}

.gf-body{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:28px;height:100%;padding:clamp(22px,2.6vw,38px) clamp(24px,3vw,44px)}
.gf-panel{display:flex;flex-direction:column;align-items:flex-start;gap:13px;max-width:min(560px,58%)}
.gf-top{display:flex;align-items:center;gap:14px}
.gf-icon{width:60px;height:60px;flex:none;border:2px solid rgba(255,255,255,.85);border-radius:15px;
  object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.gf-titles{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.gf-name{color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:clamp(24px,2.4vw,36px);font-weight:700;line-height:1.1;text-transform:uppercase}
.gf-cat{padding:3px 11px;border:1px solid rgba(234,252,255,.18);border-radius:999px;
  color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:10px;
  font-weight:600;letter-spacing:.1em;line-height:1.7;text-transform:uppercase}
.gf-desc{display:-webkit-box;overflow:hidden;max-width:46ch;color:var(--indiex-muted);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:14px;line-height:22px;
  -webkit-box-orient:vertical;-webkit-line-clamp:2}
.gf-specs{display:flex;flex-wrap:wrap;gap:8px}
.gf-spec{display:flex;flex-direction:column;gap:3px;padding:8px 13px;border:1px solid rgba(234,252,255,.08);
  border-radius:11px;background:rgba(234,252,255,.06);color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:700;line-height:1.3}
.gf-spec b{color:var(--indiex-muted);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.gf-cta{display:inline-flex;align-items:center;gap:9px;margin-top:3px;padding:11px 20px;border-radius:999px;
  background:linear-gradient(95deg,var(--acc-a),var(--acc-b));color:#08081a;
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;
  line-height:1;text-transform:uppercase;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.gf-cta svg{width:16px;height:16px}
.gf-slide:hover .gf-cta{transform:translateX(4px)}

.gf-shot{position:relative;flex:none;display:block;height:100%;line-height:0}
.gf-shot img{height:100%;width:auto;border-radius:14px;object-fit:contain;
  box-shadow:0 20px 46px rgba(0,0,0,.55)}
.gf-slide:hover .gf-shot img{transform:translateY(-4px)}
.gf-shot img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}

.gf-badge{position:absolute;top:18px;right:18px;z-index:4;padding:5px 13px;border-radius:999px;
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  line-height:1.6;text-transform:uppercase}
.gf-badge.hot{background:var(--acc-b);color:#0a0a20}
.gf-badge.new{background:var(--acc-a);color:#04121a}

.gf-nav{position:absolute;top:50%;z-index:5;display:grid;width:40px;height:40px;place-items:center;
  border:1px solid rgba(234,252,255,.18);border-radius:50%;background:rgba(8,8,26,.66);
  color:var(--indiex-text);font-size:21px;line-height:1;cursor:pointer;transform:translateY(-50%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s ease,border-color .3s ease}
.gf-nav:hover{background:color-mix(in srgb,var(--acc-b) 32%,rgba(8,8,26,.7));border-color:var(--acc-b)}
.gf-prev{left:14px}
.gf-next{right:14px}
.gf-dots{position:absolute;bottom:14px;left:50%;z-index:5;display:flex;gap:7px;transform:translateX(-50%)}
.gf-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(234,252,255,.3);
  cursor:pointer;transition:background .3s ease,width .3s ease}
.gf-dot.is-on{width:24px;border-radius:999px;background:var(--acc-b)}

@media(max-width:1100px){
  .gf-desc{display:none}
  .gf-panel{max-width:64%}
}
@media(max-width:899px){
  .gf-track{height:auto;min-height:0}
  .gf-slide{position:relative;display:none}
  .gf-slide.is-active{display:block}
  .gf-art{position:absolute;inset:0}
  .gf-art::after{background:linear-gradient(180deg,rgba(8,8,22,.55),rgba(8,8,22,.95))}
  .gf-body{flex-direction:column-reverse;align-items:stretch;height:auto;padding:20px}
  .gf-panel{max-width:none}
  .gf-desc{display:-webkit-box}
  .gf-shot{height:auto;align-self:center;margin-bottom:16px}
  .gf-shot img{height:170px}
  .gf-nav{top:auto;bottom:16px;transform:none}
  .gf-prev{left:16px}
  .gf-next{right:16px}
  .gf-dots{position:relative;bottom:auto;left:auto;justify-content:center;margin-top:12px;transform:none}
}

/* labelled filter dropdowns */
.gl-field{display:flex;flex-direction:column;gap:5px}
.gl-field-label{color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.1em;line-height:1;text-transform:uppercase}

/* ===== Games page: refined featured banner and library toolbar ===== */
.gf{width:100%;padding:16px 0 34px}
.gf-inner{position:relative;max-width:var(--header-max);margin:0 auto}
.gf-viewport{position:relative;overflow:hidden;border:1px solid rgba(234,252,255,.14);border-radius:8px;
  background:#11112e;box-shadow:0 22px 60px rgba(0,0,0,.28)}
.gf-viewport:focus-visible{outline:2px solid var(--acc-solid,#F933BD);outline-offset:3px}
.gf-track{position:relative;display:block;width:100%;height:clamp(330px,27vw,380px)}
.gf-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;pointer-events:none;text-decoration:none;
  transition:opacity .45s ease,visibility .45s ease}
.gf-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.gf-art{position:absolute;inset:0;display:block;overflow:hidden;background:#12122e}
.gf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.08) brightness(.82);transform:scale(1.035);transition:transform 6s ease,filter .45s ease}
.gf-slide.is-active .gf-art img{transform:scale(1)}
.gf-art::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,7,24,.96) 0%,rgba(7,7,24,.86) 39%,rgba(7,7,24,.28) 70%,rgba(7,7,24,.12) 100%),
  /* taller foot so the screenshot's demo balance bar stays out of sight */
  linear-gradient(0deg,rgba(7,7,24,.94) 0%,rgba(7,7,24,.6) 22%,transparent 52%)}
.gf-body{position:relative;z-index:2;display:flex;height:100%;align-items:flex-end;justify-content:flex-start;
  padding:42px 72px 48px}
.gf-panel{display:flex;width:min(660px,72%);max-width:none;flex-direction:column;align-items:flex-start;gap:12px}
.gf-eyebrow{display:flex;align-items:center;gap:5px;color:var(--acc-solid,#F933BD);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:11px;font-weight:700;letter-spacing:0;
  line-height:1;text-transform:uppercase}
.gf-top{display:flex;min-width:0;align-items:center;gap:16px}
.gf-icon{width:72px;height:72px;flex:none;border:1px solid rgba(255,255,255,.78);border-radius:8px;
  object-fit:cover;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.gf-titles{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:7px}
.gf-name{color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:clamp(30px,3.2vw,46px);font-weight:700;letter-spacing:0;line-height:1.04;text-transform:uppercase}
.gf-cat{padding:0;border:0;border-radius:0;color:#c6ccec;font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0;line-height:1.4;text-transform:uppercase}
.gf-desc{display:-webkit-box;overflow:hidden;max-width:58ch;color:#d2d8f0;
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:14px;line-height:21px;
  -webkit-box-orient:vertical;-webkit-line-clamp:2}
.gf-specs{display:flex;flex-wrap:wrap;gap:0}
.gf-spec{display:flex;min-width:108px;flex-direction:column;gap:3px;padding:0 16px;border:0;border-left:1px solid rgba(234,252,255,.2);
  border-radius:0;background:transparent;color:var(--indiex-text);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0;line-height:1.3}
.gf-spec:first-child{padding-left:0;border-left:0}
.gf-spec b{color:#aeb7dc;font-size:9px;font-weight:600;letter-spacing:0;text-transform:uppercase}
.gf-cta{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:9px 9px 9px 20px;
  border:1px solid color-mix(in srgb,var(--acc-solid,#F933BD) 55%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--acc-solid,#F933BD) 12%,transparent);color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  line-height:1;text-transform:uppercase;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.gf-cta svg{width:16px;height:16px}
.gf-slide:hover .gf-cta{transform:translateX(3px)}
.gf-badge{position:absolute;top:18px;right:18px;z-index:4;padding:5px 11px;border-radius:5px;
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:10px;font-weight:800;letter-spacing:0;
  line-height:1.5;text-transform:uppercase}
.gf-badge.hot{background:var(--acc-solid,#F933BD);color:#08081a}
.gf-badge.new{background:var(--acc-a,#35FFFF);color:#04121a}
.gf-nav{position:absolute;top:50%;z-index:5;display:grid;width:42px;height:42px;place-items:center;padding:0;
  border:1px solid rgba(234,252,255,.2);border-radius:50%;background:rgba(8,8,26,.74);color:var(--indiex-text);
  cursor:pointer;transform:translateY(-50%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .25s ease,border-color .25s ease,transform .2s ease}
.gf-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gf-nav:hover{border-color:var(--acc-solid,#F933BD);background:rgba(249,51,189,.3)}
.gf-nav:active{transform:translateY(-50%) scale(.94)}
.gf-nav:focus-visible,.gf-dot:focus-visible{outline:2px solid var(--acc-a,#35FFFF);outline-offset:3px}
.gf-prev{left:14px}.gf-next{right:14px}
.gf-dots{position:absolute;bottom:18px;left:50%;z-index:5;display:flex;gap:7px;transform:translateX(-50%)}
.gf-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(234,252,255,.38);cursor:pointer;
  transition:background-color .25s ease,width .25s ease}
.gf-dot.is-on{width:24px;border-radius:99px;background:var(--acc-solid,#F933BD)}

.gl-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:6px 0 16px}
.gl-library-kicker{margin:0 0 6px;color:var(--acc-solid,#F933BD);font-family:"Inter","Inter Placeholder",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}
.gl-library-head h2{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:0;line-height:1;text-transform:uppercase}
.gl-count{flex:none;color:#b9c2e5;font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:600;letter-spacing:0}
.gl-tools{display:flex;align-items:center;gap:12px;margin:0 0 24px;padding:10px;border:1px solid rgba(234,252,255,.1);
  border-radius:8px;background:rgba(18,18,46,.58)}
.gl-pills{display:flex;flex:none;gap:6px;flex-wrap:nowrap}
.gl-pill{display:inline-flex;height:44px;align-items:center;gap:7px;padding:0 14px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:#c8d0ee;font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0;white-space:nowrap;cursor:pointer;box-shadow:none;text-shadow:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.gl-pill:hover{border-color:rgba(234,252,255,.12);background:rgba(234,252,255,.07);color:var(--indiex-text)}
.gl-pill.on{border-color:var(--acc-solid,#F933BD);background:var(--acc-solid,#F933BD);color:#08081a;box-shadow:none;text-shadow:none}
.gl-pill svg{width:18px;height:18px;flex:none;color:inherit}
.gl-pill.on svg{color:inherit}
.gl-filter-controls{display:flex;min-width:0;flex:1;align-items:center;justify-content:flex-end;gap:8px}
.gl-searchwrap{display:flex;min-width:240px;max-width:440px;height:44px;flex:1;align-items:center;padding:0 7px 0 42px;
  border:1px solid rgba(234,252,255,.1);border-radius:6px;background:#10102b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238ea0d8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 14px center;
  transition:border-color .2s ease,background-color .2s ease}
.gl-searchwrap:focus-within{border-color:var(--acc-solid,#F933BD);background-color:#151536}
.gl-searchwrap input{height:100%;min-width:0;flex:1;border:0;background:transparent;color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:14px;letter-spacing:0}
.gl-searchwrap input::placeholder{color:#858fb9}.gl-searchwrap input:focus{outline:0}
.gl-search-clear{display:grid;width:30px;height:30px;flex:none;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;
  color:#9ca7cf;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.gl-search-clear[hidden]{display:none}
.gl-search-clear:hover{background:rgba(234,252,255,.09);color:var(--indiex-text)}
.gl-search-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gl-field{display:block;min-width:0}
.gl-sort{width:auto;height:44px;border:1px solid rgba(234,252,255,.1);border-radius:6px;
  background:#10102b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9b4de' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--indiex-text);font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:600;letter-spacing:0;
  padding:0 34px 0 13px;cursor:pointer;-webkit-appearance:none;appearance:none}
.gl-sort:focus-visible,.gl-pill:focus-visible,.gl-random:focus-visible,.gl-search-clear:focus-visible{outline:2px solid var(--acc-a,#35FFFF);outline-offset:2px}
.gl-random{display:grid;width:44px;height:44px;flex:none;place-items:center;padding:0;border:1px solid rgba(234,252,255,.1);
  border-radius:6px;background:#10102b;color:var(--acc-a,#35FFFF);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.gl-random:hover{border-color:var(--acc-solid,#F933BD);background:rgba(249,51,189,.12)}
.gl-random svg{width:18px;height:18px;color:inherit}

@media(max-width:1100px){
  .gf-panel{width:min(620px,78%);max-width:none}
  .gf-desc{display:none}
  .gl-tools{align-items:stretch;flex-direction:column}
  .gl-pills{align-self:flex-start}
  .gl-filter-controls{width:100%;justify-content:stretch}
  .gl-searchwrap{max-width:none}
}
@media(max-width:899px){
  .gf-track{height:360px;min-height:0}
  .gf-slide{position:absolute;display:block}
  .gf-art{position:absolute;inset:0}
  .gf-art::after{background:linear-gradient(90deg,rgba(7,7,24,.94),rgba(7,7,24,.47) 75%),linear-gradient(0deg,rgba(7,7,24,.72),transparent 55%)}
  .gf-body{height:100%;align-items:flex-end;padding:34px 58px 48px}
  .gf-panel{width:min(560px,84%);max-width:none}
  .gf-desc{display:none}
  .gf-nav{top:50%;bottom:auto;transform:translateY(-50%)}
  .gf-nav:active{transform:translateY(-50%) scale(.94)}
  .gf-prev{left:42px}.gf-next{right:42px}
  .gf-dots{position:absolute;bottom:17px;left:50%;margin:0;transform:translateX(-50%)}
}
@media(max-width:700px){
  .gf{padding:10px 0 28px}
  .gf-inner{max-width:none;padding:0 16px}
  .gf-track{height:390px}
  .gf-body{padding:28px 24px 50px}
  .gf-panel{width:100%;gap:10px}
  .gf-top{gap:12px}
  .gf-icon{width:56px;height:56px}
  .gf-name{font-size:30px}
  .gf-spec{min-width:92px;padding:0 10px;font-size:12px}
  .gf-spec:nth-child(n+4){display:none}
  .gf-nav{width:38px;height:38px;top:46%}
  .gf-prev{left:24px}.gf-next{right:24px}
  .gf-badge{top:12px;right:12px}
  .gl-library-head{margin-top:4px}
  .gl-tools{gap:10px;padding:9px}
  .gl-pills{width:100%;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
  .gl-pills::-webkit-scrollbar{display:none}
  .gl-filter-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px}
  .gl-searchwrap{grid-column:1/-1;width:100%;min-width:0}
  .gl-field,.gl-sort{width:100%}
}
@media(max-width:440px){
  .gf-track{height:410px}
  .gf-name{font-size:27px}
  .gf-spec{min-width:82px;font-size:11px}
  .gf-cta{padding:10px 15px;font-size:12px}
  .gl-library-head{align-items:flex-end}
  .gl-count{font-size:12px}
  .gl-filter-controls{grid-template-columns:minmax(0,1fr) 44px}
  .gl-field{grid-column:1/2}
  .gl-field + .gl-field{grid-column:1/2}
  .gl-random{grid-column:2/3;grid-row:2/4;height:100%;min-height:44px}
}

/* the library shares the section width used everywhere else on the site */
.gl-main{max-width:var(--header-max);padding:0 0 84px}

/* arrow sits in its own disc and fills on hover, matching the site's buttons */
.gf-cta svg{width:15px;height:15px;padding:8px;border-radius:50%;box-sizing:content-box;
  background:var(--acc-solid,#F933BD);color:#08081a;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.gf-slide:hover .gf-cta{background:var(--acc-solid,#F933BD);border-color:var(--acc-solid,#F933BD);color:#08081a}
.gf-slide:hover .gf-cta svg{background:#08081a;color:var(--acc-solid,#F933BD);transform:translateX(3px)}

/* the toolbar sits on the same panel treatment as the featured slide */
.gl-tools{align-items:center;gap:10px;margin:20px 0 26px;padding:12px;
  border:1px solid rgba(234,252,255,.14);border-radius:8px;background:#11112e;
  box-shadow:0 22px 60px rgba(0,0,0,.28)}
@media(max-width:899px){.gl-tools{padding:12px 10px}}

/* five a row: the cards were reading heavier than the featured banner */
#gl-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1439px){#gl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1179px){#gl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:849px){#gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:479px){#gl-grid{grid-template-columns:1fr}}

/* Mobile game library reads as a list, not a wall of posters: a poster grid one
   card wide means a whole screen per game. Thumbnail, name and category on one
   row, separated by hairlines, so a phone shows six or seven titles at once. */
@media(max-width:639px){
  #gl-grid{grid-template-columns:1fr;gap:0}
  #gl-grid .game-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    align-items:center;align-content:center;column-gap:14px;aspect-ratio:auto;min-width:0;
    padding:12px 2px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;
    background:none;box-shadow:none;overflow:visible}
  #gl-grid .game-card:last-child{border-bottom:0}
  #gl-grid .game-card:hover{transform:none;box-shadow:none}
  /* 72x124 is the catalogue's own 0.581, so the poster fills the thumbnail with
     nothing cropped and nothing padded. */
  #gl-grid .gc-cover{grid-column:1;grid-row:1/3;position:relative;inset:auto;
    width:72px;height:124px;border-radius:12px;overflow:hidden;
    border:1px solid rgba(255,255,255,.09)}
  #gl-grid .gc-cover.is-empty{padding:8px}
  #gl-grid .gc-ph{font-size:10px}
  #gl-grid .gc-badge{grid-column:2;grid-row:1;position:static;justify-self:start;
    margin:0 0 7px;padding:3px 10px;font-size:10px;box-shadow:none}
  #gl-grid .gc-panel{grid-column:2;grid-row:2;position:static;padding:0;gap:7px;
    background:none;backdrop-filter:none;border:0;border-radius:0;min-width:0}
  /* the poster is the thumbnail now, so the small overlapping badge is redundant */
  #gl-grid .gc-icon-frame{display:none}
  #gl-grid .gc-head{margin-top:0;align-items:center}
  #gl-grid .gc-head h3{font-size:17px}
  #gl-grid .gc-chev{font-size:1.5rem}
  #gl-grid .gc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #gl-grid .gc-specs{display:none}
}
/* the panel text has less room at five across */
#gl-grid .gc-head h3{font-size:17px}
#gl-grid .gc-icon-frame{width:72px;margin-bottom:-48px}
#gl-grid .gc-head{margin-top:40px}
#gl-grid .gc-spec-label{font-size:10px}
#gl-grid .gc-spec-val{font-size:12px}

/* Games whose artwork has not arrived yet still belong in the catalogue: the
   cover becomes a tinted plate with the game's name instead of the card being
   dropped. Delete nothing when the art lands - it simply takes over. */
.gc-cover.is-empty{display:grid;place-items:center;padding:18px;
  background:
    radial-gradient(120% 90% at 50% 0%,hsl(var(--ph) 62% 34% / .85),transparent 70%),
    linear-gradient(160deg,#191940,#0d0d24)}
.gc-cover.is-empty::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px)}
.gc-ph{position:relative;z-index:1;padding-bottom:52px;color:rgba(234,252,255,.9);
  font-family:"Oswald","Oswald Placeholder",sans-serif;font-size:19px;font-weight:700;
  line-height:1.25;text-align:center;text-transform:uppercase;text-wrap:balance}

/* ============================================================
   GET TO KNOW EPICWIN - switchable tabs on the About page
   (0729 deck slide 3). Follows the reference: a pill group over a panel
   that swaps heading, copy, link and art. Same surface treatment as the
   games page's featured slide so the site reads as one system.
   ============================================================ */
/* 76px on top of the studio panel's own spacing read as a gap (deck 0911
   slide 7). */
.gtk{width:100%;padding:56px 0 12px;background:var(--indiex-bg)}
.gtk-inner{max-width:var(--header-max);margin:0 auto}
.gtk-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px;text-align:center}
.gtk-heading{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:clamp(28px,3.2vw,48px);font-weight:700;line-height:1.2;text-transform:uppercase}

.gtk-tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto 26px;padding:6px;
  width:max-content;max-width:100%;border:1px solid rgba(234,252,255,.12);border-radius:10px;background:#11112e}
.gtk-tab{padding:0 26px;height:44px;border:1px solid transparent;border-radius:6px;background:transparent;
  color:var(--indiex-muted);font-family:"Inter","Inter Placeholder",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;line-height:1;text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.gtk-tab:hover{background:rgba(234,252,255,.07);color:var(--indiex-text)}
.gtk-tab.is-on{background:var(--acc-solid,#F933BD);border-color:var(--acc-solid,#F933BD);color:#08081a}
.gtk-tab:focus-visible{outline:2px solid var(--acc-a);outline-offset:2px}

.gtk-panels{position:relative}
.gtk-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(24px,2.6vw,40px);border:1px solid rgba(234,252,255,.12);border-radius:12px;
  background:linear-gradient(120deg,#141433,#101028)}
.gtk-panel[hidden]{display:none}
.gtk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.gtk-panel-title{margin:0;color:var(--indiex-text);font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:clamp(26px,2.6vw,38px);font-weight:700;line-height:1.15;text-transform:uppercase}
.gtk-panel-body{margin:0;max-width:52ch;color:var(--indiex-muted);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:15px;line-height:26px}
.gtk-more{display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 20px;
  border:1px solid color-mix(in srgb,var(--acc-solid,#F933BD) 55%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--acc-solid,#F933BD) 12%,transparent);color:var(--indiex-text);
  font-family:"Inter","Inter Placeholder",sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  line-height:1;text-transform:uppercase;text-decoration:none;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.gtk-more svg{width:15px;height:15px;padding:8px;border-radius:50%;box-sizing:content-box;
  background:var(--acc-solid,#F933BD);color:#08081a;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.gtk-more:hover{background:var(--acc-solid,#F933BD);border-color:var(--acc-solid,#F933BD);color:#08081a}
.gtk-more:hover svg{background:#08081a;color:var(--acc-solid,#F933BD);transform:translateX(3px)}

.gtk-art{position:relative;justify-self:center;line-height:0}
.gtk-art::before{content:"";position:absolute;inset:8% 10%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc-b) 30%,transparent),transparent 68%);filter:blur(38px)}
.gtk-art img{position:relative;display:block;width:100%;max-width:300px;height:auto;
  border-radius:12px;filter:drop-shadow(0 22px 44px rgba(0,0,0,.5))}

@media(max-width:899px){
  .gtk{padding:52px 0 8px}
  .gtk-panel{grid-template-columns:1fr;gap:24px}
  .gtk-art{order:-1}
  .gtk-art img{max-width:260px;margin:0 auto}
  .gtk-tab{padding:0 18px;height:40px;font-size:12px}
}

/* ============================================================
   Pause looping animations while their section is off screen. The compositor
   was updating a dozen marquee layers every frame no matter where the page
   was scrolled to, which is felt as stutter everywhere. Layout is untouched,
   so nothing shifts - the tracks simply hold still until they are in view.
   ============================================================ */
[data-anim="off"] .io-game-track,
[data-anim="off"] .io-icon-track,
[data-anim="off"] .clients-track,
[data-anim="off"] .brand-track,
[data-anim="off"] .avatar-track,
[data-anim="off"] .character-carousel,
[data-anim="off"] .hero-shimmer{animation-play-state:paused}


/* ===== one column for the whole site =====
   Everything above shares .header-frame's box (--header-max, no inner padding)
   so section edges line up with the logo and nav. On a phone that box is 94vw,
   which is too tight for text, so the gutter comes back here. */
@media (max-width: 820px) {
  /* the header comes along, so the logo and the content still start on the same
     line: 94vw would leave only about 12px of gutter on a phone */
  .header-frame,
  .pb-hero__inner, .ms-inner, .ft-cta-inner, .ft-grid, .ft-legal-inner,
  .gl-main, .gtk-inner, .nw-main, .eg-main, .gf-inner {
    padding-left: 16px;
    padding-right: 16px;
    max-width: none;
  }
}

/* ===== contact page (deck slide 4) =====
   One column, centred, no side art: a form reads better as a single narrow
   measure than split across a page-wide row. */
/* width:100% because auto side margins on a flex item cancel align-items:stretch,
   which left the column collapsed to its content width */
.ct-shell{width:100%;max-width:880px;margin:0 auto}

/* the ways to reach a person, before the form asks anything */
/* every way to reach a person, as equal tiles across the top */
.ct-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:26px}
.ct-channel{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 20px;border:1px solid rgba(255,255,255,.1);
  border-radius:16px;background:rgba(18,18,46,.5);text-decoration:none;color:inherit;
  transition:border-color .25s ease,background-color .25s ease,transform .2s ease}
.ct-channel.is-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc-solid,#F933BD) 55%,transparent);
  background:rgba(249,51,189,.1)}
.ct-channel-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--acc-a,#35FFFF)}
.ct-channel-icon svg{width:20px;height:20px;fill:none}
.ct-channel.is-link .ct-channel-icon svg{fill:currentColor;stroke:none}
.ct-channel-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-channel-label{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--indiex-text)}
.ct-channel-value{font-family:'Inter',sans-serif;font-size:14px;line-height:21px;color:var(--acc-a,#35FFFF);text-decoration:none;word-break:break-word}
.ct-channel a.ct-channel-value:hover{text-decoration:underline}
.ct-channel.is-link .ct-channel-value{color:var(--indiex-muted)}
.ct-channel-chev{margin-left:auto;font-size:20px;line-height:1;color:var(--indiex-muted)}

.ct-card{display:block;padding:clamp(26px,3vw,46px);border:1px solid rgba(255,255,255,.09);border-radius:20px;
  background:linear-gradient(180deg,rgba(21,21,58,.9),rgba(13,13,34,.94));box-shadow:0 24px 60px rgba(0,0,0,.34)}
.ct-card-title{margin:0 0 8px;font-family:'Excon',sans-serif;font-weight:700;font-size:clamp(24px,2.5vw,34px);line-height:1.12;color:var(--indiex-text)}
.ct-card-lede{margin:0 0 28px;font-family:'Inter',sans-serif;font-size:15.5px;line-height:25px;color:var(--indiex-muted)}
.ct-form{display:flex;flex-direction:column;gap:20px}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ct-field{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;padding:0;margin:0}
.ct-label{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--indiex-text)}
.ct-label i{font-style:normal;font-weight:400;font-size:12px;color:var(--indiex-muted)}
.ct-input{width:100%;padding:15px 16px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(8,8,26,.6);
  color:var(--indiex-text);font-family:'Inter',sans-serif;font-size:15.5px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.ct-input::placeholder{color:rgba(142,160,216,.62)}
.ct-input:hover{border-color:rgba(255,255,255,.24)}
.ct-input:focus{outline:none;border-color:var(--acc-solid,#F933BD);background:rgba(8,8,26,.85);box-shadow:0 0 0 3px rgba(249,51,189,.16)}
.ct-textarea{resize:vertical;min-height:150px;line-height:24px}
.ct-selectwrap{position:relative}
.ct-select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.ct-select:invalid{color:rgba(142,160,216,.62)}
.ct-select option{background:#12122e;color:var(--indiex-text)}
.ct-select-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--indiex-muted)}
.ct-select-chev svg{display:block;width:18px;height:18px}
.ct-field.is-hidden{display:none}
.ct-fieldset{min-width:0}
.ct-radios{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ct-radio{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(8,8,26,.5);cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;color:var(--indiex-text);
  transition:border-color .2s ease,background-color .2s ease}
.ct-radio:hover{border-color:rgba(255,255,255,.3)}
.ct-radio input{accent-color:var(--acc-solid,#F933BD);width:15px;height:15px;margin:0}
.ct-radio:has(input:checked){border-color:var(--acc-solid,#F933BD);background:rgba(249,51,189,.14)}
.ct-radio:has(input:focus-visible){outline:2px solid var(--acc-a,#35FFFF);outline-offset:2px}
/* Sized to itself, not to the form. Stretching it made the whole 787px row a
   hover target, and the disc that grows on hover had a full column to cross. */
.ct-submit{align-self:flex-start;width:auto;margin-top:6px}
.ct-terms{margin:0;font-family:'Inter',sans-serif;font-size:12.5px;line-height:20px;color:var(--indiex-muted)}
.ct-terms a{color:var(--acc-a,#35FFFF);text-decoration:underline;text-underline-offset:2px}

@media(max-width:620px){
  .ct-row{grid-template-columns:1fr}
  .ct-channels{grid-template-columns:1fr;gap:12px}
  .ct-channel{padding:15px 16px}
}

/* the two custom elements on the games page: unknown elements are inline */
gl-library{display:block}
gf-carousel{display:block;position:relative}
gtk-tabs{display:block}
gd-lightbox[hidden]{display:none}
nw-filter{display:block}
lg-doc{display:grid}
lg-doc.is-plain{grid-template-columns:minmax(0,1fr)}

/* ---- Arrival popup -----------------------------------------------------------
   Three layouts, because the right one depends on the artwork:
     image      the artwork IS the panel, edge to edge. Wants a finished promo
                graphic with its own wording and background.
     character  a cut-out subject that breaks out past the panel edge. Wants a
                transparent PNG with the subject cleanly separated.
     split      artwork one side, a panel of real text the other. Wants art with
                no wording baked in, since the words live in HTML and stay crisp. */
.pp{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:20px;
  opacity:0;transition:opacity .26s ease}
.pp.is-open{opacity:1}
.pp[hidden]{display:none}
.pp-scrim{position:absolute;inset:0;background:rgba(4,4,16,.72);backdrop-filter:blur(4px)}
.pp-panel{position:relative;z-index:1;transform:translateY(14px) scale(.98);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.pp.is-open .pp-panel{transform:none}
.pp-body{display:block;position:relative;text-decoration:none;color:inherit}
.pp-art{display:block;width:100%;height:auto}

.pp-close{position:absolute;z-index:6;top:-16px;right:-16px;display:grid;width:40px;height:40px;
  place-items:center;padding:0;cursor:pointer;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;color:#fff;background:rgba(12,12,32,.9);backdrop-filter:blur(8px);
  transition:transform .2s ease,background-color .2s ease}
.pp-close:hover{transform:scale(1.08);background:color-mix(in srgb,rgba(12,12,32,.9) 70%,var(--acc-solid,#F933BD))}
.pp-close svg{width:17px;height:17px}

/* image: artwork fills a rounded panel */
.pp--image .pp-panel{width:auto;max-width:min(620px,92vw);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.pp--image .pp-art{max-height:84vh;width:auto;max-width:100%}
.pp--image .pp-body{border-radius:16px;overflow:hidden}

/* character: the panel is a plate and the art overflows it */
.pp--character .pp-panel{width:min(560px,90vw);border-radius:20px;
  background:radial-gradient(120% 120% at 50% 20%,rgba(249,51,189,.22),transparent 62%),
    linear-gradient(180deg,rgba(24,24,58,.96),rgba(10,10,28,.96));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6);
  padding:0 0 26px}
.pp--character .pp-art{margin-top:-56px;width:86%;max-height:66vh;object-fit:contain;margin-inline:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}

/* split: art beside a text panel */
.pp--split .pp-panel{width:min(1000px,94vw);border-radius:18px;
  background:linear-gradient(180deg,rgba(22,22,54,.98),rgba(10,10,28,.98));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.pp--split .pp-body{border-radius:18px;overflow:hidden;max-height:86vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.pp--split .pp-art{height:100%;object-fit:cover}
.pp-side{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:34px 32px}
.pp-side h3{margin:0;color:#fff;font-family:"Oswald","Oswald Placeholder",sans-serif;
  font-size:30px;line-height:1.14;text-transform:uppercase}
.pp-side p{margin:0;color:#b9c3e6;font-size:15px;line-height:1.6}

@media(max-width:720px){
  .pp{padding:16px}
  .pp-close{top:-10px;right:-10px;width:34px;height:34px}
  .pp--split .pp-panel{width:min(420px,92vw)}
  /* stacked on a phone: side by side leaves both halves too narrow */
  .pp--split .pp-body{grid-template-columns:1fr}
  .pp--split .pp-art{max-height:230px}
  .pp-side{padding:22px 20px}
  .pp-side h3{font-size:23px}
}
@media(prefers-reduced-motion:reduce){.pp,.pp-panel{transition:none}}