:root {
  --bg: #050509;
  --bg2: #0b0818;
  --panel: rgba(255,255,255,.03);
  --line: rgba(255,255,255,.09);
  --em: #7c3aed;
  --em2: #a78bfa;
  --gold: #f5c451;
  --ink: #f5f3ff;
  --mut: rgba(245,243,255,.72);
  --mut2: rgba(245,243,255,.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--em) 16%, transparent), transparent 40%),
    radial-gradient(circle at 8% 30%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 34%),
    linear-gradient(180deg, #050509, #0b0818 55%, #050509);
}
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
a { color: var(--em2); text-decoration: none; transition: .2s; }
a:hover { color: #fff; }

header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5,5,9,.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.nav { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { font-size: 23px; font-weight: 900; letter-spacing: -.5px; color: #fff; }
.logo em { font-style: normal; color: #fff; }
.logo sup { font-size: 11px; color: var(--mut2); font-weight: 600; }
.logo img { height: 26px; width: auto; display: block; }
footer .logo img { height: 22px; }
.nav-links { display: flex; gap: 22px; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--mut); }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 22px;
  font-weight: 800; font-size: 14.5px; background: rgba(255,255,255,.04); color: #fff;
  cursor: pointer; transition: .25s; font-family: inherit;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; }
.btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--em) 85%, black), var(--em)); border: 0; box-shadow: 0 16px 44px color-mix(in srgb, var(--em) 28%, transparent); }
.btn-primary:hover {
  background: linear-gradient(135deg, var(--em), color-mix(in srgb, var(--em) 80%, white));
  box-shadow: 0 18px 52px color-mix(in srgb, var(--em) 42%, transparent);
}
.btn-gold { background: linear-gradient(135deg, #d9a72e, #f5c451); border: 0; color: #221a04; box-shadow: 0 16px 44px rgba(245,196,81,.22); }
.btn-gold:hover {
  background: linear-gradient(135deg, #e8b83c, #ffd76a);
  color: #221a04;
  box-shadow: 0 18px 52px rgba(245,196,81,.38);
}

.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--em2);
  border: 1px solid color-mix(in srgb, var(--em) 35%, transparent); border-radius: 999px; padding: 7px 16px;
  background: color-mix(in srgb, var(--em) 8%, transparent); margin-bottom: 22px;
}
h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.07; letter-spacing: -1.8px; font-weight: 950; margin-bottom: 20px; }
h1 .grad, h2 .grad { background: linear-gradient(90deg, var(--em2) 10%, var(--gold) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -1.3px; font-weight: 900; line-height: 1.12; margin: 10px 0 16px; }
h3 { font-size: 20px; font-weight: 800; margin: 18px 0 8px; }
.lede { font-size: 18px; color: var(--mut); max-width: 58ch; margin-bottom: 28px; }

.hero { padding: 84px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 40px 120px color-mix(in srgb, var(--em) 18%, transparent); }
.hero-glow { position: absolute; inset: -8%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--em) 22%, transparent), transparent 60%); filter: blur(30px); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.stats { display: flex; gap: 32px; flex-wrap: wrap; }
.stat strong { display: block; font-size: 25px; font-weight: 900; letter-spacing: -1px; color: #fff; }
.stat span { font-size: 13px; color: var(--mut2); }

section { padding: 78px 0; }
.mantra { padding: 84px 0 10px; text-align: center; }
.mantra p { font-size: clamp(26px, 3.8vw, 46px); font-weight: 900; letter-spacing: -1.4px; line-height: 1.3; color: var(--mut); }
.mantra p.m3 { background: linear-gradient(90deg, var(--em2) 20%, var(--gold) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { max-width: 780px; margin-bottom: 42px; }
.sec-head p { color: var(--mut); font-size: 16.5px; }
.dark { background: rgba(0,0,0,.28); border-block: 1px solid var(--line); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.split p { color: var(--mut); margin-bottom: 12px; }

.ticks { list-style: none; margin: 18px 0; }
.ticks li { padding: 9px 0 9px 30px; position: relative; color: var(--mut); border-bottom: 1px solid rgba(255,255,255,.05); }
.ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--em2); font-weight: 900; }
.ticks li b { color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--panel); transition: .28s; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--em) 45%, transparent); background: color-mix(in srgb, var(--em) 5%, transparent); }
.card .ic {
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #d946ef, #7c3aed);
  font-size: 24px; margin-bottom: 20px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--em) 30%, transparent);
  animation: scale-in .6s cubic-bezier(.34,.1,.64,.94) backwards;
}
.card:nth-child(1) .ic { animation-delay: .4s; }
.card:nth-child(2) .ic { animation-delay: .45s; }
.card:nth-child(3) .ic { animation-delay: .5s; }
.card:nth-child(4) .ic { animation-delay: .55s; }
@keyframes scale-in { from { opacity: 0; transform: scale(.95); } }
.card .ic svg { width: 26px; height: 26px; display: block; }
.drop-item .di svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
.eyebrow svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.card h3 { font-size: 17.5px; font-weight: 800; margin: 0 0 8px; }
.card p { font-size: 14px; color: var(--mut2); line-height: 1.55; }
.card .tag { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--gold); background: rgba(245,196,81,.08); border: 1px solid rgba(245,196,81,.25); padding: 4px 10px; border-radius: 999px; }
a.card { display: block; color: inherit; }
a.card .go { margin-top: 14px; font-size: 13.5px; font-weight: 800; color: var(--em2); }

.spec-table { width: 100%; border-collapse: collapse; margin: 26px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spec-table th { background: color-mix(in srgb, var(--em) 12%, transparent); padding: 13px 16px; text-align: left; font-weight: 800; font-size: 14px; }
.spec-table td { padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.07); color: var(--mut); font-size: 14.5px; }
.spec-table td:first-child { color: #fff; font-weight: 700; white-space: nowrap; }

.steps { counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 34px; }
.step { border-left: 3px solid var(--em); padding: 4px 0 4px 20px; }
.step::before { counter-increment: st; content: "0" counter(st); font-size: 13px; font-weight: 900; color: var(--gold); letter-spacing: .12em; }
.step h4 { font-size: 16.5px; font-weight: 800; margin: 6px 0; }
.step p { font-size: 14px; color: var(--mut2); }

.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; text-align: center; }
.num { padding: 28px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.num strong { display: block; font-size: 32px; font-weight: 950; letter-spacing: -1.5px; background: linear-gradient(90deg, var(--em2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num span { font-size: 13.5px; color: var(--mut2); }

details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 12px; overflow: hidden; }
summary { cursor: pointer; padding: 18px 22px; font-weight: 800; font-size: 15.5px; list-style: none; position: relative; }
summary::after { content: "+"; position: absolute; right: 22px; color: var(--em2); font-size: 20px; font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { padding: 0 22px 18px; color: var(--mut); font-size: 14.5px; }

.cta {
  border: 1px solid color-mix(in srgb, var(--em) 35%, transparent); border-radius: 24px; padding: 52px 40px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--em) 12%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
}
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--mut); max-width: 62ch; margin: 0 auto 26px; }

.crumbs { padding: 22px 0 0; font-size: 13.5px; color: var(--mut2); }
.crumbs a { color: var(--mut2); }
.crumbs a:hover { color: #fff; }

footer { border-top: 1px solid var(--line); padding: 42px 0 28px; color: var(--mut2); font-size: 13.5px; }
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--mut2); }
.foot-links a:hover { color: #fff; }
.disclaimer { margin-top: 20px; font-size: 12px; color: rgba(245,243,255,.4); }

.vframe {
  max-width: 340px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--em) 35%, transparent); box-shadow: 0 30px 90px color-mix(in srgb, var(--em) 22%, transparent); position: relative; background: #0b0818;
}
.vframe video { display: block; width: 100%; height: auto; }
.video-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }

.nav-burger { display: none; }

@media (max-width: 900px) {
  .hero-grid, .split, .video-band { grid-template-columns: 1fr; gap: 34px; }
  .nav-links { display: none; }
  .hero { padding: 52px 0 40px; }
  section { padding: 56px 0; }

  /* ---- mobile menu ---- */
  .nav { justify-content: flex-start; gap: 10px; }
  header .logo { min-width: 0; flex: 0 1 auto; }
  header .logo img { height: auto; width: min(40vw, 190px); max-width: 100%; }
  .nav .btn-gold { margin-left: auto; padding: 10px 13px; font-size: 13px; white-space: nowrap; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px; font-size: 20px; line-height: 1; color: #fff;
    background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  }
  body.nav-open .nav-burger { background: color-mix(in srgb, var(--em) 25%, transparent); border-color: var(--em2); }
  body.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 74px; left: 0; right: 0;
    background: rgba(5,5,9,.98); border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px; backdrop-filter: blur(18px);
    font-size: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.55);
  }
  body.nav-open .nav-links > a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  body.nav-open .nav-drop > a { display: block; padding: 13px 0; }
  body.nav-open .drop-menu {
    display: block; position: static; min-width: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 8px; backdrop-filter: none;
  }
  body.nav-open .drop-item { padding: 9px 10px; }
}

/* ---- game themes ---- */
body.theme-tap, body.theme-race, body.theme-digitx, .themed-hero { position: relative; }
.themed-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(transparent, color-mix(in srgb, var(--em) 10%, transparent)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--em2) 14%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--em2) 12%, transparent) 0 1px, transparent 1px 36px);
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
}

/* ---- games dropdown ---- */
.nav-drop { position: relative; }
.nav-drop > a::after { content: " ▾"; font-size: 11px; color: var(--mut2); }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: -14px; min-width: 280px;
  background: rgba(5,5,9,.97); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; display: none; box-shadow: 0 24px 70px rgba(0,0,0,.6);
  backdrop-filter: blur(18px);
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: block; }
.drop-menu::before { content:""; position:absolute; top:-10px; left:0; right:0; height:12px; }
.drop-item { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 11px; }
.drop-item:hover { background: color-mix(in srgb, var(--em) 9%, transparent); }
.drop-item .di {
  font-size: 17px; width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, #d946ef, #7c3aed);
}
.drop-item b { display: block; color: #fff; font-size: 14px; }
.drop-item span { display: block; font-size: 12px; color: var(--mut2); line-height: 1.35; }

/* ---- mega hero (art-direction recreation) ---- */
.mega-hero {
  position: relative; overflow: hidden;
  min-height: 88vh; display: flex; align-items: center;
  background:
    radial-gradient(ellipse 90% 70% at 12% 55%, rgba(124,58,237,.42), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(88,28,135,.35), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(30,10,60,.8), transparent 50%),
    linear-gradient(180deg, #0a0313, #120524 55%, #08020f);
}
.mega-hero::before {
  content:""; position:absolute; inset:-20%;
  background:
    linear-gradient(100deg, transparent 38%, rgba(196,165,253,.14) 46%, rgba(233,213,255,.30) 50%, rgba(196,165,253,.14) 54%, transparent 62%),
    linear-gradient(96deg, transparent 30%, rgba(167,139,250,.10) 45%, rgba(196,165,253,.16) 49%, transparent 60%);
  filter: blur(6px); transform: rotate(-6deg); pointer-events:none;
}
.mega-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(233,213,255,.9), transparent 100%),
    radial-gradient(1px 1px at 34% 64%, rgba(196,165,253,.8), transparent 100%),
    radial-gradient(2px 2px at 56% 30%, rgba(233,213,255,.7), transparent 100%),
    radial-gradient(1px 1px at 68% 74%, rgba(196,165,253,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 44%, rgba(233,213,255,.8), transparent 100%),
    radial-gradient(1px 1px at 44% 12%, rgba(196,165,253,.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 82%, rgba(233,213,255,.6), transparent 100%),
    radial-gradient(1px 1px at 8% 84%, rgba(196,165,253,.7), transparent 100%);
}
.mega-hero .container { position: relative; z-index: 3; }
.mh-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.mh-video video { width: 100%; display: block; border-radius: 20px; border: 1px solid rgba(167,139,250,.4);
  box-shadow: 0 40px 120px color-mix(in srgb, var(--em) 32%, transparent), 0 0 60px color-mix(in srgb, var(--em) 22%, transparent); }
.mh-content { max-width: 620px; }
.float-box {
  position: absolute; z-index: 2; border-radius: 20px; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  font-weight: 900; color: #fff; letter-spacing: -.5px; line-height: 1.15;
  background: linear-gradient(160deg, #9d6bff 0%, #7c3aed 55%, #5b21b6 100%);
  box-shadow: 0 0 70px rgba(139,92,246,.75), 0 0 24px rgba(196,165,253,.55), inset 0 0 26px rgba(233,213,255,.28);
  animation: mh-float 7s ease-in-out infinite alternate;
  pointer-events: none;
}
.float-box small { display:block; font-weight: 800; opacity:.95; }
.fb-1 { width: 150px; height: 150px; left: 46%; top: 7%; font-size: 28px; transform: rotate(-7deg); opacity: .55; }
.fb-1 small { font-size: 21px; }
.fb-2 { width: 110px; height: 110px; right: 2%; top: 9%; font-size: 21px; animation-delay: 1.6s; transform: rotate(9deg); opacity: .5; }
.fb-2 small { font-size: 19px; }
.fb-3 { width: 86px; height: 86px; left: 5%; bottom: 9%; font-size: 17px; animation-delay: 3s; transform: rotate(-12deg); opacity: .5; }
.fb-3 small { font-size: 13px; }
@keyframes mh-float {
  from { margin-top: 0; } to { margin-top: 26px; }
}
.float-char {
  position: absolute; z-index: 1; --rot: 0deg;
  pointer-events: none; user-select: none;
  animation: fc-float 7.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.55));
}
@keyframes fc-float {
  from { transform: rotate(var(--rot)) translateY(0); }
  to   { transform: rotate(var(--rot)) translateY(-24px); }
}
.fc-main    { width: min(20vw, 280px); right: -1%; bottom: -6px; opacity: .75; }
.fc-female  { width: min(12vw, 165px); right: 13%; top: 4%; animation-delay: 2.1s; --rot: 5deg; opacity: .8; }
.fc-african { width: min(11vw, 150px); left: 38%; bottom: 4%; animation-delay: 3.8s; --rot: -6deg; opacity: .7; }
.mh-mark {
  position: absolute; right: 4%; bottom: 5%; z-index: 2; text-align: right;
  font-weight: 950; font-style: italic; line-height: .88; letter-spacing: -2px;
  background: linear-gradient(180deg, #ffffff 8%, #d8c8ff 40%, #a78bfa 62%, #6d28d9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 44px rgba(139,92,246,.55);
  pointer-events: none; user-select: none;
}
.mh-mark .l1 { display:block; font-size: clamp(64px, 8.5vw, 128px); }
.mh-mark .l2 { display:block; font-size: clamp(30px, 4vw, 60px); letter-spacing: 2px; }
@media (max-width: 900px) {
  .mega-hero { min-height: 80vh; }
  .mh-grid { grid-template-columns: 1fr; gap: 34px; }
  .fb-1 { width: 130px; height: 130px; font-size: 25px; left: auto; right: 8%; top: 6%; }
  .fb-1 small { font-size: 19px; }
  .fb-2 { width: 84px; height: 84px; right: 4%; top: 46%; font-size: 16px; }
  .fb-2 small { font-size: 12px; }
  .fb-3 { display: none; }
  .fc-female, .fc-african { display: none; }
  .fc-main { width: 180px; right: 0; bottom: 0; opacity: .8; }
  .mh-mark .l1 { font-size: 52px; } .mh-mark .l2 { font-size: 25px; }
}

/* ---- shared hero background (originated on integration page) ---- */
.hero-bg {
  background:
    linear-gradient(180deg, rgba(11,8,24,.86) 0%, rgba(11,8,24,.62) 45%, var(--bg, #0b0818) 100%),
    url('tap_background.jpg') center 30%/cover no-repeat;
}

/* ---- Games mega menu (two grouped submenus) ---- */
.drop-menu.drop-mega { min-width: 640px; padding: 14px; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.nav-drop:hover .drop-menu.drop-mega, .nav-drop:focus-within .drop-menu.drop-mega { display: grid; }
.drop-group + .drop-group { border-left: 1px solid var(--line); padding-left: 16px; }
.drop-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut2); padding: 6px 12px 8px; }
.drop-label b { color: var(--em2); font-weight: 800; }
.drop-item .di.di-gold { background: linear-gradient(135deg, #f5c451, #d97706); }
@media (max-width: 900px) {
  body.nav-open .drop-menu.drop-mega { display: block; min-width: 0; padding: 0 0 8px; }
  body.nav-open .drop-group + .drop-group { border-left: 0; padding-left: 0; margin-top: 8px; }
  body.nav-open .drop-label { padding: 8px 10px 4px; }
}