* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
:root {
  --bg: #070a10;
  --panel: rgba(255, 255, 255, 0.06);
  --panel2: rgba(255, 255, 255, 0.09);
  --stroke: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);
  --muted2: rgba(255, 255, 255, 0.52);
  --accent: #6ee7ff;
  --accent2: #8b5cf6;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(
      1200px 700px at 20% 10%,
      rgba(139, 92, 246, 0.16),
      transparent 55%
    ),
    radial-gradient(
      1000px 600px at 80% 20%,
      rgba(110, 231, 255, 0.14),
      transparent 60%
    ),
    var(--bg);
  color: var(--text);
}
a {
  color: inherit;
  text-decoration: none;
}
.app {
  min-height: 100vh;
}
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, #070a10db, #070a108c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navWrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: 0.2px;
}
.brandDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent2));
  box-shadow: 0 0 22px #6ee7ff59;
}
.nav {
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-weight: 600;
}
.nav a {
  padding: 10px;
  border-radius: 999px;
}
.nav a:hover {
  background: #ffffff0f;
  color: var(--text);
}
.navRight {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 255, 0.28);
  background: #6ee7ff14;
  font-weight: 700;
}
.cta:hover {
  background: #6ee7ff1f;
}
.mobileToggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff0d;
  color: var(--text);
  cursor: pointer;
}
.mobileToggle svg {
  font-size: 18px;
}
.mobileMenu {
  display: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px 14px;
  gap: 10px;
}
.mobileMenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-weight: 800;
}
.mobileMenu a:hover {
  background: #ffffff12;
}
.mobileMenu .mobileCta {
  border-color: #6ee7ff47;
  background: #6ee7ff1a;
}
.mobileMenu.open {
  display: flex;
  flex-direction: column;
}
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.heroInner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 18px 54px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff0d;
  color: var(--muted);
  font-weight: 650;
  width: fit-content;
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.9px;
  margin-bottom: 12px;
}
.glow {
  background: linear-gradient(90deg, #6ee7fff2, #8b5cf6f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(110, 231, 255, 0.18);
}
.hero p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.heroBtns {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.btnPrimary,
.btnGhost {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.15s ease, background 0.15s ease;
}
.btnPrimary {
  background: linear-gradient(90deg, #6ee7ff2e, #8b5cf624);
  border-color: #6ee7ff4d;
}
.btnGhost {
  background: #ffffff0d;
}
.btnPrimary:hover,
.btnGhost:hover {
  transform: translateY(-1px);
}
.btnPrimary:active,
.btnGhost:active {
  transform: translateY(0);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 150px;
}
.pillLabel {
  color: var(--muted2);
  font-weight: 700;
  font-size: 12px;
}
.pillValue {
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-top: 2px;
}
.heroRight {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.glassCard {
  width: 100%;
  max-width: 360px;
  padding: 16px;
  border-radius: 18px;
  background: #ffffff0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 70px #00000059;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.glassTitle {
  font-weight: 900;
  margin-bottom: 10px;
}
.glassLine {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 8px 0;
}
.miniDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6ee7ffe6;
  box-shadow: 0 0 18px #6ee7ff59;
}
.glassBtn {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(110, 231, 255, 0.28);
  background: #6ee7ff1a;
}
.glassBtn:hover {
  background: #6ee7ff21;
}
.bannerWall {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.95;
}
.bannerGrid {
  position: absolute;
  inset: -40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  transform: skewY(-6deg) translateY(-10px);
  filter: blur(0.2px);
}
.bannerTile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff0f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.bannerTile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}
.bannerFallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #6ee7ff1a, #8b5cf614);
}
.bannerShade {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 22% 35%, #0000000d, #000000bf 62%),
    linear-gradient(to bottom, #070a1026, #070a10eb);
}
.bannerVignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 220px #000000f2;
  pointer-events: none;
}
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 18px;
}
.sectionHead {
  margin-bottom: 18px;
}
.sectionHead h2 {
  font-size: 28px;
  letter-spacing: -0.4px;
}
.sectionHead p {
  color: var(--muted);
  margin-top: 6px;
}
.gamesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gameCard {
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 70px #00000047;
}
.gameMedia {
  background: #ffffff0d;
}
.gameMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.gameMediaFallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #6ee7ff1a, #8b5cf614);
}
.gameBody {
  padding: 14px;
}
.gameTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.gameName {
  font-weight: 900;
  letter-spacing: -0.2px;
}
.gameId {
  color: var(--muted2);
  font-size: 12px;
  font-weight: 700;
}
.gameStats {
  margin-top: 10px;
  display: flex;
  gap: 12px;
}
.stat {
  flex: 1;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.statLabel {
  display: block;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 750;
}
.statValue {
  display: block;
  margin-top: 2px;
  font-weight: 950;
}
.contactCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.contactCard {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: #ffffff0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.contactCard svg {
  font-size: 22px;
  opacity: 0.95;
}
.contactLabel {
  color: var(--muted2);
  font-weight: 800;
  font-size: 12px;
}
.contactValue {
  font-weight: 950;
  letter-spacing: -0.2px;
  margin-top: 2px;
}
.footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted2);
  font-weight: 700;
}
.footerDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffffff40;
}
@media (max-width: 980px) {
  .heroInner {
    grid-template-columns: 1fr;
    padding-top: 52px;
  }
  .heroRight {
    justify-content: flex-start;
  }
  .bannerGrid {
    grid-template-columns: repeat(4, 1fr);
  }
  .gamesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .nav,
  .cta {
    display: none;
  }
  .mobileToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .heroInner {
    padding: 54px 16px 44px;
  }
  .section {
    padding: 56px 16px;
  }
  .gamesGrid,
  .contactCards {
    grid-template-columns: 1fr;
  }
  .bannerGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .pill {
    min-width: 140px;
  }
}