/* ═══════════════════════════════════════════
     BASE RESET & TOKENS
  ═══════════════════════════════════════════ */
       *,
       *::before,
       *::after {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       :root {
           --bg: #080a0f;
           --sur: #0d1017;
           --bdr: rgba(255, 255, 255, 0.07);
           --acc: #fff600;
           /* --acc: #00e5ff; */
           --red: #ff3d3d;
           --txt: #e8edf5;
           --mut: rgba(232, 237, 245, 0.45);
           --disp: 'Bebas Neue', sans-serif;
           --body: 'Noto Sans SC', sans-serif;

           /* spacing scale */
           --s4: 4px;
           --s8: 8px;
           --s12: 12px;
           --s16: 16px;
           --s20: 20px;
           --s24: 24px;
           --s32: 32px;
           --s40: 40px;
           --s48: 48px;
           --s64: 64px;
           --s80: 80px;
           --s96: 96px;
           --s120: 120px;

           --header-h: 64px;
       }

       html {
           scroll-behavior: smooth;
       }

       body {
           background: var(--bg);
           color: var(--txt);
           font-family: var(--body);
           font-weight: 300;
           line-height: 1.6;
           overflow-x: hidden;
       }

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

       img {
           display: block;
           max-width: 100%;
       }

       /* ═══════════════════════════════════════════
     CANVAS
  ═══════════════════════════════════════════ */
       #hc {
           position: fixed;
           inset: 0;
           pointer-events: none;
           z-index: 0;
       }

       /* ═══════════════════════════════════════════
     LAYOUT HELPERS
  ═══════════════════════════════════════════ */
       .wrap {
           max-width: 1280px;
           margin: 0 auto;
           padding: 0 var(--s48);
       }

       /* Shared section rhythm */
       .s-label {
           display: flex;
           align-items: center;
           gap: var(--s12);
           font-size: 11px;
           letter-spacing: 0.22em;
           text-transform: uppercase;
           color: var(--acc);
           margin-bottom: var(--s16);
       }

       .s-label::before {
           content: '';
           width: 28px;
           height: 1px;
           background: var(--acc);
           flex-shrink: 0;
       }

       .s-title {
           font-family: var(--disp);
           font-size: clamp(40px, 5vw, 72px);
           line-height: 1;
           letter-spacing: 0.03em;
       }

       /* Shared buttons */
       .btn-prime {
           display: inline-flex;
           align-items: center;
           gap: var(--s8);
           background: var(--acc);
           color: #000;
           font-family: var(--body);
           font-size: 12px;
           font-weight: 700;
           letter-spacing: 0.12em;
           text-transform: uppercase;
           padding: 14px 32px;
           clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
           transition: background .2s, transform .15s;
           white-space: nowrap;
           cursor: pointer;
       }

       .btn-prime:hover {
           background: #fff;
           transform: translateY(-2px);
       }

       .btn-prime:active {
           transform: translateY(0);
       }

       .btn-ghost {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           font-size: 13px;
           color: var(--mut);
           letter-spacing: 0.06em;
           border-bottom: 1px solid rgba(255, 255, 255, 0.15);
           padding-bottom: 2px;
           transition: color .2s, border-color .2s;
           white-space: nowrap;
       }

       .btn-ghost:hover {
           color: var(--txt);
           border-color: var(--txt);
       }


       /* ═══════════════════════════════════════════
     HEADER
  ═══════════════════════════════════════════ */
       header {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           height: var(--header-h);
           z-index: 200;
           display: flex;
           align-items: center;
           background: rgba(8, 10, 15, 0.92);
           backdrop-filter: blur(12px);
           -webkit-backdrop-filter: blur(12px);
           border-bottom: 1px solid var(--bdr);
       }

       .h-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           width: 100%;
       }

       .logo-img {
           height: 32px;
           width: auto;
       }

       /* Desktop nav */
       .nav-desktop {
           display: flex;
           gap: var(--s32);
           align-items: center;
       }

       .nav-desktop a {
           font-size: 12px;
           letter-spacing: 0.14em;
           text-transform: uppercase;
           color: var(--mut);
           transition: color .2s;
           position: relative;
       }

       .nav-desktop a::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: -3px;
           width: 0;
           height: 1px;
           background: var(--acc);
           transition: width .3s;
       }

       .nav-desktop a:hover {
           color: var(--txt);
       }

       .nav-desktop a:hover::after {
           width: 100%;
       }

       .nav-dl {
           border: 1px solid var(--acc) !important;
           color: var(--acc) !important;
           padding: 7px 20px !important;
           clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
           transition: background .2s, color .2s !important;
       }

       .nav-dl:hover {
           background: var(--acc) !important;
           color: #000 !important;
       }

       .nav-dl::after {
           display: none !important;
       }

       /* Hamburger (mobile only) */
       .hamburger {
           display: none;
           flex-direction: column;
           gap: 5px;
           background: none;
           border: none;
           cursor: pointer;
           padding: var(--s8);
           z-index: 300;
       }

       .hamburger span {
           display: block;
           width: 24px;
           height: 1.5px;
           background: var(--txt);
           transition: transform .3s, opacity .3s;
       }

       .hamburger.open span:nth-child(1) {
           transform: translateY(6.5px) rotate(45deg);
       }

       .hamburger.open span:nth-child(2) {
           opacity: 0;
       }

       .hamburger.open span:nth-child(3) {
           transform: translateY(-6.5px) rotate(-45deg);
       }

       /* Mobile drawer */
       .nav-mobile {
           display: none;
           position: fixed;
           inset: 0;
           top: var(--header-h);
           background: rgba(8, 10, 15, 0.98);
           backdrop-filter: blur(16px);
           -webkit-backdrop-filter: blur(16px);
           z-index: 150;
           flex-direction: column;
           padding: var(--s48) var(--s24);
           gap: var(--s4);
           border-top: 1px solid var(--bdr);
           transform: translateX(100%);
           transition: transform .35s cubic-bezier(.4, 0, .2, 1);
       }

       .nav-mobile.open {
           transform: translateX(0);
       }

       .nav-mobile a {
           font-family: var(--disp);
           font-size: 36px;
           letter-spacing: 0.04em;
           color: var(--mut);
           padding: var(--s12) 0;
           border-bottom: 1px solid var(--bdr);
           transition: color .2s;
       }

       .nav-mobile a:hover,
       .nav-mobile a:active {
           color: var(--txt);
       }

       .nav-mobile .nm-dl {
           color: var(--acc) !important;
           font-size: 36px;
       }


       /* ═══════════════════════════════════════════
     HERO  (PC: 2-col split | Mobile: single col)
  ═══════════════════════════════════════════ */
       .hero {
           position: relative;
           z-index: 1;
           min-height: 100vh;
           display: grid;
           grid-template-columns: 55fr 45fr;
           grid-template-rows: 1fr auto;
           padding-top: var(--header-h);
       }

       .hero-l {
           grid-column: 1;
           grid-row: 1;
           display: flex;
           flex-direction: column;
           justify-content: center;
           padding: var(--s80) var(--s64) var(--s64) 0;
           border-right: 1px solid var(--bdr);
       }

       .eyebrow {
           display: flex;
           align-items: center;
           gap: var(--s12);
           font-size: 11px;
           letter-spacing: 0.22em;
           text-transform: uppercase;
           color: var(--acc);
           margin-bottom: var(--s24);
       }

       .eyebrow-ln {
           width: 32px;
           height: 1px;
           background: var(--acc);
           flex-shrink: 0;
       }

       .hero-title {
           font-family: var(--disp);
           font-size: clamp(64px, 8vw, 120px);
           line-height: 0.9;
           letter-spacing: 0.02em;
           margin-bottom: var(--s32);
       }

       .ht-ol {
           color: transparent;
           -webkit-text-stroke: 1.5px var(--acc);
       }

       .ht-red {
           color: var(--red);
       }

       .hero-sub {
           font-size: 15px;
           color: var(--mut);
           max-width: 420px;
           line-height: 1.85;
           margin-bottom: var(--s40);
       }

       .hero-btns {
           display: flex;
           align-items: center;
           gap: var(--s20);
           flex-wrap: wrap;
       }

       /* Right ghost stats */
       .hero-r {
           grid-column: 2;
           grid-row: 1;
           display: flex;
           flex-direction: column;
           justify-content: center;
           padding: var(--s80) 0 var(--s64) var(--s64);
           gap: var(--s12);
       }

       .g-stat-num {
           font-family: var(--disp);
           font-size: clamp(70px, 9vw, 140px);
           line-height: 1;
           /* color: transparent;
           -webkit-text-stroke: 1px rgba(239, 235, 235, 0.1); */
           color: #e8e8e868;
           -webkit-text-stroke: none;
           letter-spacing: 0.02em;
       }

       .g-stat-lbl {
           font-size: 11px;
           letter-spacing: 0.2em;
           text-transform: uppercase;
           color: var(--acc);
           margin-top: 2px;
           margin-bottom: var(--s16);
       }

       /* Ticker bar */
       .ticker {
           grid-column: 1 / -1;
           grid-row: 2;
           border-top: 1px solid var(--bdr);
           display: grid;
           grid-template-columns: repeat(4, 1fr);
       }

       .tick {
           padding: var(--s20) var(--s32);
           border-right: 1px solid var(--bdr);
           display: flex;
           align-items: center;
           gap: var(--s12);
       }

       .tick:last-child {
           border-right: none;
       }

       .tick-v {
           font-family: var(--disp);
           font-size: 28px;
           color: var(--acc);
           letter-spacing: 0.04em;
           white-space: nowrap;
       }

       .tick-d {
           font-size: 11px;
           letter-spacing: 0.08em;
           text-transform: uppercase;
           color: var(--mut);
       }


       /* ═══════════════════════════════════════════
     FEATURES
  ═══════════════════════════════════════════ */
       .features {
           position: relative;
           z-index: 1;
           padding: var(--s120) 0;
           border-top: 1px solid var(--bdr);
       }

       .feat-grid {
           display: grid;
           grid-template-columns: 5fr 4fr 4fr;
           grid-template-rows: 1fr 1fr;
           gap: 1px;
           background: var(--bdr);
           margin-top: var(--s64);
       }

       .feat {
           background: var(--bg);
           padding: var(--s48) var(--s40);
           position: relative;
           overflow: hidden;
           transition: background .3s;
       }

       .feat:hover {
           background: var(--sur);
       }

       .feat-big {
           grid-column: 1;
           grid-row: 1 / 3;
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
           padding: var(--s64) var(--s48);
           min-height: 360px;
       }

       .feat-ghost {
           font-family: var(--disp);
           font-size: 130px;
           line-height: 1;
           color: transparent;
           -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
           position: absolute;
           top: 10px;
           right: 14px;
           pointer-events: none;
           letter-spacing: -0.02em;
           user-select: none;
       }

       .feat-icon {
           width: 42px;
           height: 42px;
           border: 1px solid rgba(0, 229, 255, 0.2);
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--acc);
           background: rgba(0, 229, 255, 0.04);
           clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
           margin-bottom: var(--s20);
           flex-shrink: 0;
       }

       .feat-name {
           font-family: var(--disp);
           letter-spacing: 0.04em;
           margin-bottom: var(--s8);
       }

       .feat-big .feat-name {
           font-size: 42px;
       }

       .feat .feat-name {
           font-size: 26px;
       }

       .feat-desc {
           font-size: 13px;
           color: var(--mut);
           line-height: 1.75;
           max-width: 280px;
       }

       .feat-big .feat-desc {
           max-width: 340px;
           font-size: 14px;
       }


       /* ═══════════════════════════════════════════
     GAMES
  ═══════════════════════════════════════════ */
       .games {
           position: relative;
           z-index: 1;
           padding: var(--s120) 0;
           border-top: 1px solid var(--bdr);
       }

       .games-head {
           display: grid;
           grid-template-columns: 1fr 1fr;
           align-items: end;
           gap: var(--s48);
           margin-bottom: var(--s48);
       }

       .games-head p {
           font-size: 14px;
           color: var(--mut);
           line-height: 1.85;
       }

       .games-grid {
           display: grid;
           grid-template-columns: repeat(6, 1fr);
           gap: 1px;
           background: var(--bdr);
       }

       .game-cell {
           background: var(--bg);
           padding: var(--s24) var(--s12);
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: var(--s8);
           transition: background .25s;
       }

       .game-cell:hover {
           background: var(--sur);
       }

       .game-cell:nth-child(3n+2) {
           padding-top: var(--s40);
           padding-bottom: var(--s40);
       }

       .game-icon {
           width: 52px;
           height: 52px;
           border-radius: 12px;
           object-fit: cover;
           filter: saturate(.65) brightness(.85);
           transition: filter .25s;
       }

       .game-cell:hover .game-icon {
           filter: saturate(1) brightness(1);
       }

       .game-name {
           font-size: 11px;
           letter-spacing: 0.04em;
           color: var(--mut);
           text-align: center;
           line-height: 1.4;
       }

       .games-foot {
           margin-top: var(--s24);
           padding-top: var(--s20);
           border-top: 1px solid var(--bdr);
           display: flex;
           align-items: baseline;
           justify-content: space-between;
       }

       .gf-n {
           font-family: var(--disp);
           font-size: 48px;
           color: transparent;
           -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
       }

       .gf-t {
           font-size: 13px;
           color: var(--mut);
           letter-spacing: 0.08em;
       }


       /* ═══════════════════════════════════════════
     CTA / DOWNLOAD
  ═══════════════════════════════════════════ */
       .cta {
           position: relative;
           z-index: 1;
           border-top: 1px solid var(--bdr);
       }

       .cta-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           min-height: 460px;
       }

       .cta-l {
           padding: var(--s96) var(--s64) var(--s96) 0;
           border-right: 1px solid var(--bdr);
           display: flex;
           flex-direction: column;
           justify-content: center;
       }

       .cta-h {
           font-family: var(--disp);
           font-size: clamp(52px, 6.5vw, 100px);
           line-height: 0.92;
           letter-spacing: 0.02em;
           margin-bottom: var(--s20);
       }

       .cta-h span {
           color: var(--acc);
       }

       .cta-p {
           font-size: 15px;
           color: var(--mut);
           line-height: 1.8;
           margin-bottom: var(--s40);
       }

       .cta-meta {
           font-size: 11px;
           letter-spacing: 0.16em;
           text-transform: uppercase;
           color: var(--mut);
           margin-top: var(--s16);
       }

       .cta-r {
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
           overflow: hidden;
           padding: var(--s64);
       }

       .cta-glow {
           position: absolute;
           inset: 0;
           background: radial-gradient(circle at 60% 50%, rgba(0, 229, 255, 0.08) 0%, transparent 65%);
           pointer-events: none;
       }

       .cta-logo {
           width: 160px;
           height: 160px;
           object-fit: contain;
           position: relative;
           z-index: 1;
           filter: drop-shadow(0 0 48px rgba(0, 229, 255, 0.25));
           animation: flt 5s ease-in-out infinite;
       }

       @keyframes flt {

           0%,
           100% {
               transform: translateY(0);
           }

           50% {
               transform: translateY(-12px);
           }
       }


       /* ═══════════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════════ */
       footer {
           position: relative;
           z-index: 1;
           border-top: 1px solid var(--bdr);
       }

       .foot-top {
           display: grid;
           grid-template-columns: 2fr 1fr 1fr 1fr;
           gap: var(--s48);
           padding: var(--s64) 0 var(--s48);
       }

       .fb p {
           font-size: 13px;
           color: var(--mut);
           margin-top: var(--s16);
           line-height: 1.75;
           max-width: 240px;
       }

       .fc h5 {
           font-size: 10px;
           letter-spacing: 0.2em;
           text-transform: uppercase;
           color: var(--mut);
           margin-bottom: var(--s16);
       }

       .fc ul {
           list-style: none;
           display: flex;
           flex-direction: column;
           gap: var(--s8);
       }

       .fc a {
           font-size: 14px;
           color: var(--mut);
           transition: color .2s;
       }

       .fc a:hover {
           color: var(--txt);
       }

       .foot-btm {
           border-top: 1px solid var(--bdr);
           padding: var(--s20) 0;
           display: flex;
           align-items: center;
           justify-content: space-between;
           font-size: 11px;
           color: rgba(232, 237, 245, 0.28);
           letter-spacing: 0.06em;
       }

       .beian {
           display: flex;
           align-items: center;
           gap: var(--s16);
           flex-wrap: wrap;
       }

       .beian a {
           color: rgba(232, 237, 245, 0.28);
           display: flex;
           align-items: center;
           gap: 5px;
           transition: color .2s;
       }

       .beian a:hover {
           color: var(--mut);
       }


       /* ═══════════════════════════════════════════
     MOBILE BOTTOM DOWNLOAD BAR
  ═══════════════════════════════════════════ */
       .mob-dl-bar {
           display: none;
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           z-index: 190;
           background: rgba(8, 10, 15, 0.96);
           backdrop-filter: blur(12px);
           -webkit-backdrop-filter: blur(12px);
           border-top: 1px solid var(--bdr);
           padding: var(--s12) var(--s20);
           gap: var(--s12);
           align-items: center;
       }

       .mob-dl-bar .btn-prime {
           flex: 1;
           justify-content: center;
           padding: 14px 20px;
       }

       .mob-dl-bar .btn-ghost {
           flex-shrink: 0;
       }


       /* ═══════════════════════════════════════════
     ── TABLET  768px – 1023px ──
  ═══════════════════════════════════════════ */
       @media (max-width: 1023px) {
           .wrap {
               padding: 0 var(--s32);
           }

           /* Header */
           .nav-desktop .nav-link-hide {
               display: none;
           }

           /* Hero: single col, no right ghost */
           .hero {
               grid-template-columns: 1fr;
               grid-template-rows: 1fr auto;
               min-height: auto;
               padding-bottom: 0;
           }

           .hero-l {
               grid-column: 1;
               grid-row: 1;
               border-right: none;
               padding: var(--s64) 0 var(--s48);
           }

           .hero-r {
               display: none;
           }

           /* Ticker 2×2 */
           .ticker {
               grid-template-columns: repeat(2, 1fr);
           }

           .tick:nth-child(3) {
               border-top: 1px solid var(--bdr);
           }

           .tick:nth-child(4) {
               border-top: 1px solid var(--bdr);
           }

           .tick:nth-child(2) {
               border-right: none;
           }

           .tick:nth-child(4) {
               border-right: none;
           }

           /* Features: big top, 3 below */
           .feat-grid {
               grid-template-columns: 1fr 1fr;
               grid-template-rows: auto auto auto;
           }

           .feat-big {
               grid-column: 1 / -1;
               grid-row: 1;
               min-height: 280px;
           }

           /* Games: 3-col grid */
           .games-grid {
               grid-template-columns: repeat(4, 1fr);
           }

           .games-head {
               grid-template-columns: 1fr;
               gap: var(--s20);
           }

           /* CTA: single col */
           .cta-grid {
               grid-template-columns: 1fr;
               min-height: auto;
           }

           .cta-l {
               border-right: none;
               padding: var(--s64) 0;
           }

           .cta-r {
               display: none;
           }

           /* Footer */
           .foot-top {
               grid-template-columns: 1fr 1fr;
               gap: var(--s32);
           }
       }


       /* ═══════════════════════════════════════════
     ── MOBILE  ≤ 767px ──
  ═══════════════════════════════════════════ */
       @media (max-width: 767px) {
           :root {
               --header-h: 56px;
               --s120: 64px;
               --s96: 48px;
               --s80: 40px;
               --s64: 32px;
               --s48: 24px;
           }

           .wrap {
               padding: 0 var(--s20);
           }

           /* Header: show hamburger, hide desktop nav */
           .nav-desktop {
               display: none;
           }

           .hamburger {
               display: flex;
           }

           .nav-mobile {
               display: flex;
           }

           /* Hero */
           .hero {
               grid-template-columns: 1fr;
               min-height: calc(100svh - var(--header-h));
               padding-bottom: 0;
           }

           .hero-l {
               padding: var(--s48) 0 var(--s32);
               border-right: none;
           }

           .hero-r {
               display: none;
           }

           .hero-title {
               font-size: clamp(60px, 16vw, 80px);
               margin-bottom: var(--s24);
           }

           .hero-sub {
               font-size: 14px;
               max-width: 100%;
               margin-bottom: var(--s32);
           }

           .hero-btns {
               gap: var(--s16);
           }

           /* Ticker: 2×2 with compact padding */
           .ticker {
               grid-template-columns: repeat(2, 1fr);
           }

           .tick {
               padding: var(--s16) var(--s20);
               gap: var(--s8);
           }

           .tick:nth-child(3) {
               border-top: 1px solid var(--bdr);
           }

           .tick:nth-child(4) {
               border-top: 1px solid var(--bdr);
           }

           .tick:nth-child(2) {
               border-right: none;
           }

           .tick:nth-child(4) {
               border-right: none;
           }

           .tick-v {
               font-size: 22px;
           }

           .tick-d {
               font-size: 10px;
           }

           /* Features: single col stack */
           .feat-grid {
               grid-template-columns: 1fr;
               grid-template-rows: auto;
               margin-top: var(--s40);
           }

           .feat-big {
               grid-column: 1;
               grid-row: 1;
               min-height: auto;
           }

           .feat-big .feat-name {
               font-size: 32px;
           }

           .feat-ghost {
               font-size: 80px;
           }

           .feat {
               padding: var(--s32) var(--s24);
           }

           .feat-big {
               padding: var(--s40) var(--s24);
           }

           .s-title {
               margin-bottom: 0;
           }

           .features .s-title {
               margin-bottom: 0;
           }

           /* Games: 3 col, smaller icons */
           .games-grid {
               grid-template-columns: repeat(3, 1fr);
           }

           .games-head {
               grid-template-columns: 1fr;
               gap: var(--s16);
               margin-bottom: var(--s32);
           }

           .game-icon {
               width: 44px;
               height: 44px;
               border-radius: 10px;
           }

           .game-cell {
               padding: var(--s20) var(--s8);
           }

           .game-cell:nth-child(3n+2) {
               padding-top: var(--s28);
               padding-bottom: var(--s28);
           }

           /* CTA */
           .cta-l {
               padding: var(--s48) 0;
           }

           .cta-r {
               display: none;
           }

           .cta-h {
               font-size: clamp(48px, 14vw, 72px);
           }

           /* Footer */
           .foot-top {
               grid-template-columns: 1fr 1fr;
               gap: var(--s32) var(--s24);
               padding: var(--s48) 0 var(--s32);
           }

           .fb {
               grid-column: 1 / -1;
           }

           .foot-btm {
               flex-direction: column;
               gap: var(--s12);
               align-items: flex-start;
               padding: 0px 0px 80px 0px;
               /* padding: var(--s10) 0 var(--s80); */
           }

           .beian {
               flex-direction: column;
               gap: var(--s8);
           }

           /* Mobile download bar */
           .mob-dl-bar {
               display: flex;
           }

           /* Push footer content above bar */
           footer {
               padding-bottom: 0;
           }
       }


       /* ═══════════════════════════════════════════
     ── VERY SMALL  ≤ 374px ──
  ═══════════════════════════════════════════ */
       @media (max-width: 374px) {
           .hero-title {
               font-size: 52px;
           }

           .btn-prime {
               font-size: 11px;
               padding: 12px 22px;
           }

           .hero-btns {
               flex-direction: column;
               align-items: flex-start;
           }

           .games-grid {
               grid-template-columns: repeat(3, 1fr);
           }
       }