/* ─────────────────────────────────────────────
   BASE & RESET
───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a0a0a;
  --accent: rgb(223, 73, 20);
  --accent-glow: rgba(160, 0, 255, 0.35);
  --text-muted: #888;
  --badge-gold: #f5c518;
  --font: 'Montserrat', system-ui, sans-serif;
  --nav-h: 72px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Stop iOS Safari from rubber-banding / panning the page sideways */
  overscroll-behavior-x: none;
}

body {
  background-color: var(--bg);
  color: #fff;
  font-family: var(--font);
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* optional */
}

/* ─────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────── */
#main-nav {
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 1000;
  height: var(--nav-h);
}

#main-nav.scrolled {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link-custom {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted) !important;
  text-transform: capitalize;
  padding: 0.4rem 0.6rem !important;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: #fff !important;
}

.nav-link-custom.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  border-radius: 0%;
  background: rgba(223, 73, 20, 0);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 6px;
  color: #aaa;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.social-icon:hover {
  color: #fff;
  border-color: rgb(0, 0, 0);
  background: rgba(192, 58, 255, 0.15);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0 !important;
}

/* Mobile nav: full-screen centered overlay with fade */
@media (max-width: 767.98px) {
  /* Remove backdrop-filter on scrolled navbar — it creates a containing block
     for the fixed overlay below and breaks the overlay's viewport anchoring */
  #main-nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #navbarContent {
    display: flex !important;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    padding: 2rem 1rem;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  #navbarContent.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }

  #navbarContent .navbar-nav {
    align-items: center;
    gap: 1.25rem;
    margin: 0 !important;
  }

  #navbarContent .nav-link-custom {
    font-size: 1.5rem;
  }
}


/* ─────────────────────────────────────────────
   HERO SECTION
   Full-height container — video covers entire
   section including games + meet-us rows.
───────────────────────────────────────────── */
.hero-section {
  position: relative;
  width: 100%;
  /* Tall enough for all left-column content */
  /* min-height: 100vh; */
  height: auto;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 4rem;
  overflow: hidden;
}

/* Background video — stretches to whatever height the section grows to */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
  background: #0d0010;
}

/* Mascot image that replaces the hero video on mobile (hidden on desktop) */
.hero-mascot-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .hero-video {
    display: none;
  }
  .hero-mascot-mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 0;
    background: #0d0010;
  }
}

/* Gradient overlay — crushes left so text is readable, right is open for character */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(5, 0, 15, 0.95) 0%,
      rgba(5, 0, 15, 0.85) 30%,
      rgba(5, 0, 15, 0.50) 55%,
      rgba(5, 0, 15, 0.12) 72%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      rgba(5, 0, 15, 0.4) 0%,
      transparent 15%
    );
  z-index: 1;
}

/* All content sits above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-heading {
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.8);
}


/* ─────────────────────────────────────────────
   SWIPER — HERO SLIDER
───────────────────────────────────────────── */
.hero-swiper {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 2.2rem !important;
}

.hero-swiper .swiper-slide { width: 100%; }

.slide-card {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	width: 100%;
	height: fit-content;
	background: #000000;
	transition: transform 0.3s ease, background 0.5s ease;
	cursor: pointer;
}

@media (max-width: 767.98px) {
  .slide-card { height: fit-content; }
}

.slide-card:hover {
  background: rgba(255, 255, 255, 0.5);
}

.slide-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000000;
}

/* Inner bottom vignette */
.slide-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 55%);
  pointer-events: none;
}

/* NEW RELEASE badge */
.slide-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(255, 0, 0, 1);
  color: #111;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(245, 197, 24, 0.45);
}

.skull-icon { font-size: 0.72rem; }

/* Active slide highlight */
.swiper-slide-active .slide-card {
  border: 1.5px solid rgba(223, 73, 20, 0);
}

/* Pagination */
.hero-swiper .swiper-pagination {
  bottom: 0;
  left: 0;
  text-align: left;
}

.hero-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: background 0.3s, width 0.3s;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}


/* ─────────────────────────────────────────────
   HERO INNER SECTIONS (Games + Meet Us At)
   These sit inside the hero — same video bg.
───────────────────────────────────────────── */

.section-header { margin-bottom: 0.75rem; }

.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.see-all-link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.see-all-link:hover { color: var(--accent); }


/* ─────────────────────────────────────────────
   GAMES ROW
───────────────────────────────────────────── */
.games-row {
  --row-gutter: clamp(12px, 2.5vw, 18px);
  display: flex;
  flex-direction: row;
  gap: clamp(0.75rem, 2vw, 0.75rem);
  overflow-x: auto;
  /* Horizontal gutter so the first/last thumbnails' glow ring isn't clipped
     by the row's overflow (auto on mobile, hidden on desktop). The matching
     negative margin pulls the row back out so the thumbnails still align with
     the "Games" / "See all" header above — the gutter lands in the section's
     own side padding and stays visible. */
  padding: 0.5rem var(--row-gutter);
  margin-inline: calc(-1 * var(--row-gutter));
  /* Hide the scrollbar on mobile while keeping horizontal scroll working. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/old Edge */
}

.games-row::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.game-thumb-wrapper {
  flex: 1 0 80px;
  max-width: 110px;
  display: flex;
  justify-content: center;
}

.game-thumb {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #000000;
  box-shadow: 0 0 0 2px rgba(192, 58, 255, 0.2), 0 4px 18px rgba(0,0,0,0.55);
}

@media (min-width: 576px) {
  .game-thumb { width: 100px; height: 100px; }
  .game-thumb-wrapper { max-width: 120px; }
}

@media (min-width: 992px) {
  .game-thumb { width: 130px; height: 150px; }
  .game-thumb-wrapper { max-width: 140px; }
  .games-row { overflow-x: hidden; justify-content: flex-start; }
}

.game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  background: #000000;
}

.game-thumb:hover {
  /* transform: scale(1.07); */
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 22px rgba(192, 58, 255, 0),
    0 6px 24px rgba(0,0,0,0);
}

.game-thumb:hover img {
  height: 100%;
  /* transform: scale(1.1); */
}

.game-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, transparent 100%);
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 4px 6px;
}


/* ─────────────────────────────────────────────
   LOGOS ROW (Meet Us At)
───────────────────────────────────────────── */
.logos-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.logos-row::-webkit-scrollbar { height: 3px; }
.logos-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.logo-item {
  flex: 1 0 80px;
  max-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  width: 100%;
  max-width: 110px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.65);
  opacity: 0.75;
  transition: filter 0.3s, opacity 0.3s;
  display: block;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

.logo-item img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

@media (min-width: 992px) {
  .logos-row { overflow-x: visible; justify-content: flex-start; }
}


/* ─────────────────────────────────────────────
   GAMES SHOWCASE SECTION
───────────────────────────────────────────── */
.gs-section {
  background: var(--bg); /* #0a0a0a — matches the mobile slider's black blur overlay */
  padding: 3rem 0;
}

/* ── Top row: [stat] [GAMES] [stat] ── */
.gs-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.gs-num {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.gs-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-top: 0.2rem;
}

/* Giant title */
.gs-title {
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
  text-align: center;
  flex: 1;
}

/* Skull-as-letter 'A' */
.gs-skull-letter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  vertical-align: middle;
  position: relative;
  top: -0.08em;
  line-height: 1;
  gap: 0;
}

.gs-skull-bar {
  display: block;
  width: 55%;
  height: clamp(2px, 0.6vw, 5px);
  background: #fff;
  border-radius: 2px;
  margin-bottom: 0.06em;
}

.gs-skull-letter .bi-skull {
  font-size: 0.82em;
  line-height: 1;
}

/* Mobile stats row */
.gs-mobile-stats .gs-num { font-size: 1.6rem; }
.gs-mobile-stats .gs-label { font-size: 0.8rem; }

/* ── Main layout row ── */
.gs-main-row {
  align-items: center;
  min-height: 500px;
}

/* ── Col 1: tabs ── */
.gs-tabs-col {
  padding-right: 1rem;
}

.gs-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Horizontal on mobile */
@media (max-width: 991.98px) {
  .gs-tabs {
    flex-direction: row;
    gap: 0.4rem;
    justify-content: space-between;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    margin-bottom: 0;
  }
  .gs-tabs::-webkit-scrollbar { display: none; }
  .gs-tabs-col { padding-right: 0; margin-bottom: 0; }
  /* Tighten the gap between the tabs and the slider on mobile */
  .gs-slider-outer { padding-top: 10px; }
}

.gs-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #555;
  text-align: left;
  white-space: nowrap;
  transition: color 0.2s;
}

.gs-tab:hover { color: #aaa; }

.gs-tab.active {
  font-weight: 800;
  color: #fff;
}

.gs-ast {
  color: #e83a00;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.gs-tab.active .gs-ast { opacity: 1; }

/* Mobile: button-style tabs */
@media (max-width: 991.98px) {
  .gs-tab {
    padding: 0.35rem 0.7rem;
    border: 1px solid #333;
    border-radius: 50px;
    font-size: 0.72rem;
  }
  .gs-tab.active {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
  }
  /* The asterisk is decorative and reserves width even when invisible, which
     pushed the third tab off-screen on narrow phones. The active pill already
     signals selection here, so drop the asterisk on mobile. */
  .gs-ast { display: none; }
}

/* See all button */
.gs-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.6rem;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  color: #fff;
  background: transparent;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s;
}

.gs-see-all:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

/* ── Col 2: slider ── */
.gs-slider-col {
  padding: 0;
}

.gs-slider-outer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 40px 0; /* vertical room for scaled-up active card */
}

.gs-swiper {
	flex: 1;
	min-width: 0;
	padding: 10px;
	overflow: hidden;
	position: relative;
}

/* Mobile only: soften the sharp cut-off edges of the peeking side slides with
   a dark, blurred overlay that fades toward the center. The mask fades both the
   tint and the blur out so the active center slide stays crisp and untouched. */
@media (max-width: 991.98px) {
  .gs-swiper::before,
  .gs-swiper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    z-index: 5; /* above peeking neighbour slides (z-index 2) */
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .gs-swiper::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, transparent 100%);
  }
  .gs-swiper::after {
    right: 0;
    background: linear-gradient(to left, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0) 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  }
}

/* Each slide — Swiper auto-sizes based on slidesPerView: 3 */
.gs-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height is driven by .gs-slide-inner */
}

/* Inner card — this is what we scale, not the slide itself */
.gs-slide-inner {
	width: 100%;
	height: auto;
	border-radius: 20px;
	overflow: hidden;
	transform: scale(0.82);
	transition:
		transform 0.45s ease,
		opacity   0.45s ease,
		box-shadow 0.45s ease;
	opacity: 0.55;
	cursor: pointer;
	background: #1a1a2e;
}

@media (max-width: 991.98px) {
  /* .gs-slide-inner { height: 320px; } */
}

/* Active slide pops forward */
.gs-swiper .swiper-slide-active .gs-slide-inner {
  transform: scale(1);
  opacity: 1;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.65),
    0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Immediate neighbours: slightly more visible than farther slides */
.gs-swiper .swiper-slide-prev .gs-slide-inner,
.gs-swiper .swiper-slide-next .gs-slide-inner {
  opacity: 0.72;
}

/* z-index layering so active card is on top of neighbours */
.gs-swiper .swiper-slide { z-index: 1; }
.gs-swiper .swiper-slide-prev,
.gs-swiper .swiper-slide-next { z-index: 2; }
.gs-swiper .swiper-slide-active { z-index: 3; }

.gs-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000000;
}

/* Desktop only: enlarge the showcase slider images a touch */
@media (min-width: 992px) {
  .gs-slide-inner { transform: scale(0.88); }
  .gs-swiper .swiper-slide-active .gs-slide-inner { transform: scale(1.1); }
  /* Extra vertical room inside the overflow:hidden swiper so the scaled-up
     active card isn't clipped at the top and bottom. */
  .gs-swiper { padding-top: 44px; padding-bottom: 44px; }
}

/* Navigation arrows */
.gs-arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color 0.2s;
  user-select: none;
}

.gs-arrow:hover { color: rgba(255, 255, 255, 0.9); }

/* ── Col 3: game info ── */
.gs-info-col {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (max-width: 991.98px) {
  .gs-info-col {
    padding-left: 0;
    padding-top: 1.5rem;
    align-items: center;
    text-align: center;
  }
}

/* "View game" button */
.gs-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 2rem;
  border: 2px solid #fff;
  border-radius: 50px;
  color: #fff;
  background: transparent;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.2s;
}

.gs-view-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Description text */
.gs-desc {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
  max-width: 300px;
  margin: 0;
  min-height: 5em; /* prevent layout jump when text changes */
  transition: opacity 0.3s ease;
}

.gs-desc.fading { opacity: 0; }

/* On mobile the description is centered and wraps within max-width: 300px, so
   longer game blurbs run to ~6–7 lines. Because the showcase autoplays through
   games every 2s, an unequal description height would continuously shift the
   sections below. Reserve enough height for the tallest blurb so it never does.
   Scoped to .gs-info-col .gs-desc (higher specificity) so it wins regardless of
   source order; tuned to the current longest short_description (~210 chars). */
@media (max-width: 991.98px) {
  .gs-info-col .gs-desc {
    min-height: 8em;
  }
}


/* ─────────────────────────────────────────────
   GET TO KNOW US MORE SECTION
───────────────────────────────────────────── */
.gtk-section {
  background: #0d0d0d;
  padding-top: 3rem;
  padding-bottom: 0;
  overflow: hidden;
}

/* Row 1 — Header bar */
.gtk-header-row {
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.gtk-news-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.gtk-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.gtk-arrow-btn:hover {
  background: #fff;
  color: #0d0d0d;
}

.gtk-see-all-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  color: #fff;
  background: transparent;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.gtk-see-all-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}

/* Row 2 — Headline + mascot */
.gtk-headline-row {
  margin-bottom: 3.5rem;
}

.gtk-headline {
  font-size: clamp(3rem, 8.5vw, 6.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

/* O-replacement glyph — small box with horizontal bars */
.gtk-o-glyph {
  display: inline-block;
  width: 0.6em;
  height: 0.55em;
  border: 3px solid #fff;
  border-radius: 3px;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
  box-sizing: border-box;
}

.gtk-o-glyph::before,
.gtk-o-glyph::after {
  content: '';
  display: block;
  position: absolute;
  left: 15%;
  width: 70%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.gtk-o-glyph::before { top: 28%; }
.gtk-o-glyph::after  { top: 58%; }

.gtk-mascot-wrap {
  max-width: 100%;
}

.gtk-mascot-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  background: #000000;
}

/* Rabbit video that replaces the mascot image on mobile (hidden on desktop) */
.gtk-mobile-video {
  display: none;
}

@media (max-width: 991.98px) {
  .gtk-mascot-img {
    display: none;
  }
  .gtk-mobile-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #0d0010;
  }
}

@media (max-width: 767.98px) {
  .gtk-mascot-wrap {
    margin-top: 2rem;
  }
}

/* Row 3 — Text columns */
.gtk-text-row {
  margin-bottom: 4rem;
  row-gap: 2rem;
}

.gtk-col-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}

.gtk-col-text {
  font-size: 0.83rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  text-align: justify;
  margin: 0;
}

/* Row 4 — Footer band */
.gtk-footer-band {
  padding-top: 0.5rem;
}

/* Part A — Ticker */
.gtk-ticker-swiper {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  padding: 0.9rem 0;
  margin-bottom: 2.5rem;
}

.gtk-ticker-slide {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  width: auto !important;
  white-space: nowrap;
  padding: 0 1.5rem;
}

.gtk-ticker-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4);
  transition: filter 0.2s;
}

.gtk-ticker-logo:hover {
  filter: grayscale(0) brightness(1);
}

.gtk-ticker-text {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
}

.gtk-ticker-sep {
  color: #e83a00;
  font-size: 0.95rem;
  line-height: 1;
}

/* Part B — Logo strip */
.gtk-logo-strip {
  padding: 0 1.5rem 3.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gtk-logo-strip::-webkit-scrollbar { display: none; }

.gtk-logo-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  /* Scroll animation start state */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.gtk-logo-strip-inner.gtk-logos-visible {
  opacity: 1;
  transform: translateY(0);
}

.gtk-logo-item {
  flex: 0 0 auto;
}

.gtk-logo-item img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.65);
  opacity: 0.75;
  display: block;
  transition: filter 0.3s, opacity 0.3s;
}

.gtk-logo-item img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .gtk-logo-strip { padding: 0 1rem 2.5rem; }
  .gtk-logo-strip-inner { gap: 1.5rem 2.5rem; }
  .gtk-logo-item img { height: 28px; }
}


/* ─────────────────────────────────────────────
   CAREER SECTION
───────────────────────────────────────────── */

/* Hand rock animations */
@keyframes hand-rock-cw {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

@keyframes hand-rock-ccw {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}

.career-section {
  position: relative;
  background: #E8491D;
  padding: 3rem 0px;
  overflow: visible; /* let hands bleed outside */
}

/* Decorative hand images */
.career-hand {
  position: absolute;
  width: 230px;
  z-index: 2;
  cursor: pointer;
}

.career-hand--brown {
  top: -60px;
  z-index: 999;
  cursor: pointer;
  left: 250px;
  transform-origin: top center;
  transition: transform 0.3s ease;
}

.career-hand--green {
  bottom: -70px;
  z-index: 999;
  cursor: pointer;
  right: clamp(1rem, 4vw, 4rem);
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}

.career-hand--brown:hover {
  animation: hand-rock-cw 3.5s ease-in-out infinite;
}

.career-hand--green:hover {
  animation: hand-rock-ccw 3.5s ease-in-out infinite;
}

/* Content sits above hands */
.career-inner {
  position: relative;
  z-index: 1;
}

/* ── Col 1: title ── */
.career-title-col {
  padding-top: 0.5rem;
}

.career-heading {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  margin-bottom: 1rem;
}

.career-subheading {
  font-size: 1.2rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* ── Job Cards ── */
.career-card-col {
  display: flex;
}

.career-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  background: transparent;
}

.career-ast {
  font-size: 2.4rem;
  color: #fff;
  line-height: 1;
}

.career-job-title {
  font-size: 1.45rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.career-job-desc {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  flex: 1;
}

.career-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.9rem;
  border: 2px solid #fff;
  border-radius: 50px;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 0.5rem;
}

.career-apply-btn:hover {
  background: #fff;
  color: #E8491D;
}

/* ── Responsive ── */

/* Hide hands on small screens to avoid overflow chaos */
@media (max-width: 767.98px) {
  .career-hand { display: none; }
  .career-section { padding: 3rem 0; }

  .career-title-col { text-align: center; }
  .career-heading { font-size: 2.8rem; }
  .career-subheading { font-size: 1.1rem; }

  .career-card { padding: 1.6rem 1.5rem; }
  .career-job-title { font-size: 1.2rem; }
}

/* Scale down but keep visible on mid-range screens */
@media (min-width: 768px) and (max-width: 991.98px) {
  .career-hand { width: 120px; }
  .career-hand--brown { top: -40px; }
  .career-hand--green { bottom: -45px; }
}


/* ─────────────────────────────────────────────
   SCROLL TO TOP BUTTON
───────────────────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
              background 0.2s ease, border-color 0.2s ease;
}

#scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scroll-top-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}


/* ─────────────────────────────────────────────
   PARTNERS SECTION
───────────────────────────────────────────── */
.partners-section {
  background: #111;
  padding: 3rem 0;
}

.partners-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 2.5rem;
}

.partners-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 170px;
}

.partners-logo-item img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1);
  opacity: 0.8;
  display: block;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.partners-logo-item:hover img {
  filter: grayscale(0) brightness(1.15);
  opacity: 1;
  transform: scale(1.05);
}


/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  padding-bottom: 3.5rem;
}

@media (max-width: 991.98px) {
  .site-footer { padding-bottom: 1rem; }
}

/* ── Full-width rule ── */
.footer-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 0 3rem;
}

/* ── Small brand logo (in links row) ── */
.footer-brand-logo-link {
  display: inline-block;
}

.footer-brand-logo-sm {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}

/* ── Links row ── */
.footer-links-row {
  align-items: flex-start;
}

/* ── Link columns ── */
.footer-col-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col-links a {
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col-links a:hover {
  color: #fff;
}

/* ── Legal / social column ── */
.footer-legal-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-social-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-social-icon:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0.08);
}

.footer-privacy-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-privacy-link:hover {
  color: #fff;
}

.footer-copy {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.footer-disclaimer {
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.35);
  max-width: 360px;
  margin: 0;
}

/* ── Mobile tweaks ── */
@media (max-width: 767.98px) {
  .footer-brand-logo-sm { max-width: 130px; }
  .footer-legal-col { margin-top: 0.5rem; }
  .footer-disclaimer { max-width: 100%; }
}


/* ─────────────────────────────────────────────
   GAMES PAGE
───────────────────────────────────────────── */

/* ── Page hero ── */
.gp-page-hero {
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 2rem;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.9rem;
  transition: color 0.2s;
}

.gp-back-link:hover { color: var(--accent); }

.gp-page-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

/* ── Section wrapper ── */
.gp-section {
  background: var(--bg);
  padding: 3rem 0;
}

.gp-category-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Game card (base) ── */
.gp-card {
  position: relative;
  border-radius: 40px;
  overflow: visible;
  background: #111;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gp-card:hover {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 28px rgba(255,255,255,0.15);
}

.gp-card-img {
  width: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  border-radius: 40px;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.gp-card .about-game-card-overlay {
  border-radius: 40px;
}

.gp-card:hover .gp-card-img {
  opacity: 0.9;
}

.gp-card:hover .about-game-card-overlay { opacity: 1; }

/* ── Featured card ── */
.gp-card--featured {
  height: 100%;
  min-height: 420px;
}

.gp-card--featured .gp-card-img {
  aspect-ratio: unset;
  height: 100%;
  min-height: 300px;
}

.gp-badge--new-release,
.gp-badge--arcade {
  z-index: 5;
}

@keyframes gp-badge-rock {
  0%, 100% { transform: translate(-50%, -30%) rotate(0deg); }
  25%       { transform: translate(-50%, -30%) rotate(5deg); }
  75%       { transform: translate(-50%, -30%) rotate(-5deg); }
}

.gp-badge--arcade {
  animation: gp-badge-rock 2.4s ease-in-out infinite;
}

/* ── Small card (2×2 grid) ── */
.gp-card--sm {
  height: 100%;
}

.gp-card--sm .gp-card-img {
  height: 100%;
}

/* ── Badge ── */
.gp-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 3;
}

.gp-badge img {
  height: 26px;
  width: auto;
  max-width: none;
  display: block;
}

.gp-card--featured .gp-badge img { height: 35px; }

.gp-badge--text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgb(255, 0, 0, 0.75);
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

/* ── Card body ── */
.gp-card-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
  justify-content: flex-end;
}

.gp-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.gp-card--featured .gp-card-title { font-size: 1.1rem; }

/* ── Card action buttons ── */
.gp-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gp-btn {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.38rem 0.85rem;
  border-radius: 5px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.gp-btn--primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.gp-btn--primary:hover {
  background: #a020e0;
  border-color: #a020e0;
  color: #fff;
}

.gp-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.2);
}

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

@media (max-width: 991.98px) {
  .gp-card--featured { min-height: unset; }
  .gp-card--featured .gp-card-img { height: auto; aspect-ratio: 4/3; }
}

@media (max-width: 575.98px) {
  .gp-card-title { font-size: 0.78rem; }
  .gp-btn { font-size: 0.62rem; padding: 0.32rem 0.65rem; }
}


/* ─────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────── */

/* ── About Hero ── */
.about-hero {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 4rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 40%, rgba(160,0,255,0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(224,64,251,0.1) 0%, transparent 55%),
              var(--bg);
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,0,15,0.85) 0%, transparent 70%);
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.about-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.about-hero-heading {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.about-hero-accent {
  color: var(--accent);
  -webkit-text-stroke: 1px var(--accent);
}

.about-hero-sub {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border-radius: 6px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.about-cta-btn:hover {
  background: #a020e0;
  color: #fff;
  box-shadow: 0 0 24px rgba(192,58,255,0.5);
}

.about-hero-img-wrap {
  position: relative;
  display: inline-block;
}

.about-hero-mascot {
  max-height: 520px;
  width: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 40px rgba(192,58,255,0.4));
}

.about-hero-glow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--accent-glow);
  filter: blur(60px);
  z-index: 1;
}

/* ── Stats Band ── */
.about-stats-band {
  background: #0f0f0f;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0;
}

.about-stats-row { border: none; }

.about-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}

.about-stat-item:last-child { border-right: none; }

@media (max-width: 767.98px) {
  .about-stat-item:nth-child(2) { border-right: none; }
  .about-stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.07); }
}

.about-stat-num {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.about-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ── Story Section ── */
.about-story-section {
  padding: 3rem 0;
  background: var(--bg);
}

.about-story-img-grid {
  position: relative;
  height: 600px;
}

.about-story-img {
  border-radius: 12px;
  object-fit: cover;
  position: absolute;
}

.about-story-img--main {
  width: 75%;
  height: 85%;
  top: 0;
  left: 0;
  z-index: 2;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

.about-story-img--accent {
	width: 55%;
	height: 55%;
	bottom: 0;
	right: 0;
	z-index: 3;
	border: 2px solid rgba(192,58,255,0);
	box-shadow: 0 0 32px rgba(192,58,255,0);
}

.about-section-heading {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.about-body-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
}

.about-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(192,58,255,0);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  background: rgba(192,58,255,0);
}

/* ── What We Do ── */
.about-what-section {
  padding: 3rem 0;
  background: #0c0c0c;
}

.about-pillar-card {
  background: #111;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-pillar-card:hover {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 32px rgba(192,58,255,0);
}

.about-pillar-card--accent {
  border-color: rgba(255,255,255,0.3);
  background: rgba(192,58,255,0);
}

.about-pillar-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.about-pillar-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.85rem;
}

.about-pillar-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ── Featured Games ── */
.about-games-section {
  padding: 3rem 0;
  background: var(--bg);
}

.about-see-all {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s;
  white-space: nowrap;
}

.about-see-all:hover { color: var(--accent); }

/* Clips the overflowing ticker track. Vertical padding gives the card
   hover-lift (translateY(-10px)) room so it isn't clipped at the edges. */
.about-games-viewport {
	overflow: hidden;
	padding: 15px 0;
}

/* Sized to its content so it overflows the viewport and can slide. main.js
   clones .about-games-set enough times to always exceed the viewport and sets
   --games-ticker-shift (one set width) + --games-ticker-duration for a constant
   pixel speed. Fallbacks keep a sane loop if JS is disabled. */
.about-games-ticker {
	display: flex;
	width: max-content;
	animation: gamesTicker var(--games-ticker-duration, 40s) linear infinite;
	/* main.js takes over as a grab/swipe-scrollable rAF loop: grab cursor,
	   pan-y keeps vertical page scroll working while horizontal drags move the
	   row, and no-select stops text/image drag-ghosting mid-swipe. */
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.about-games-ticker.is-dragging { cursor: grabbing; }
.about-games-ticker img { -webkit-user-drag: none; user-drag: none; }

/* Pause the loop on hover so a card can be inspected/clicked (JS marquee). */
.about-games-viewport:hover .about-games-ticker {
	animation-play-state: paused;
}

/* One repeatable run of cards. padding-right supplies the trailing gap so
   cloned sets tile with the same spacing as the internal `gap` — this is what
   keeps the loop seamless (a plain `gap` leaves no trailing space after the
   last card and desyncs the reset). */
.about-games-set {
	display: flex;
	gap: 10px;
	padding-right: 10px;
	flex: 0 0 auto;
}

@keyframes gamesTicker {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--games-ticker-shift, -50%)); }
}

.about-game-card {
  position: relative;
  flex: 0 0 280px;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid rgba(255,255,255,0);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.about-game-card:hover {
  border-color: rgba(255, 255, 255, 1);
  transform: translateY(-10px);
}

.about-game-card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.4s ease;
}

.about-game-card:hover img {
  transform: scale(1.04);
}

.about-game-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-game-card:hover .about-game-card-overlay { opacity: 1; }

.about-game-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(192,58,255,0.55);
  transition: transform 0.2s ease;
}

.about-game-play-btn:hover { transform: scale(1.1); color: #fff; }

/* ── Values Banner ── */
.about-values-section {
  background: var(--bg);
  overflow: hidden;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.about-values-ticker {
  display: flex;
  align-items: center;
  /* Sized to its content so it overflows the section and can slide. main.js
     clones .about-values-set enough times to always exceed the viewport and
     sets --ticker-shift (one set width) + --ticker-duration for constant speed.
     Fallbacks keep a sane loop if JS is disabled. */
  width: max-content;
  white-space: nowrap;
  animation: valuesTicker var(--ticker-duration, 25s) linear infinite;
}

/* One repeatable set of logos. padding-right supplies the trailing gap so
   cloned sets tile with the same spacing as the internal `gap` between logos —
   this is what keeps the loop seamless (a plain `gap` leaves no trailing
   space after the last logo and desyncs the reset). */
.about-values-set {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

@keyframes valuesTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ticker-shift, -50%)); }
}

.about-values-logo-link {
  display: inline-flex;
  align-items: center;
  /* Keep natural size so the ticker overflows and scrolls, instead of the
     flex items shrinking to fit the container width. */
  flex: 0 0 auto;
}

.about-values-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  /* Source logos are dark monochrome on transparent backgrounds. Invert the
     luminance so they read as light logos on the dark section background while
     keeping their internal detail/shading intact (no flat silhouette). */
  filter: invert(1);
  opacity: 0.85;
  transition: opacity 0.2s;
}

.about-values-logo:hover {
  opacity: 1;
}

.about-values-word {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* Spacing between logos is handled by the .about-values-set `gap`; no
   per-item margin (it would double the spacing). */

/* ── Meet Us At ── */
.about-meetat-section {
  padding: 3rem 0;
  background: #0c0c0c;
}

.about-logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
}

.about-logo-item {
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.about-logo-item:hover { opacity: 1; }

.about-logo-item img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.8);
}

@media (max-width: 767.98px) {
  .about-hero-mascot { max-height: 320px; }
  .about-story-img-grid { height: 470px; }
  .about-story-img--main { width: 80%; height: 80%; }
  .about-story-img--accent { width: 52%; height: 50%; }
  .about-game-card { flex: 0 0 180px; height: 100%; }
  .about-logos-row { gap: 1rem 2rem; }
}


/* ─────────────────────────────────────────────
   INNER PAGE HERO — shared sub-title
───────────────────────────────────────────── */
.gp-page-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.6rem;
  max-width: 520px;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────
   CAREERS PAGE
───────────────────────────────────────────── */

/* ── Culture section ── */
.cr-culture-section {
  background: #0c0c0c;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cr-culture-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

.cr-culture-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
}

.cr-perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.cr-perk {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

.cr-perk i {
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Positions header inside the orange section ── */
.cr-positions-header {
  margin-bottom: 0.5rem;
}

/* Make Apply Now work as a <button> matching the existing .career-apply-btn <a> style */
button.career-apply-btn {
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
}

button.career-apply-btn:hover {
  background: #fff;
  color: #E8491D;
}


/* ─────────────────────────────────────────────
   APPLY MODAL
───────────────────────────────────────────── */
.apply-modal .modal-content {
  background: #141414;
  border: 1px solid rgba(192,58,255,0.3);
  border-radius: 16px;
  color: #fff;
}

.apply-modal .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 1.5rem;
}

.apply-modal .modal-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.apply-modal .modal-body {
  padding: 1.5rem;
}

.apply-form .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.4rem;
}

.apply-required {
  color: var(--accent);
}

.apply-form .form-control {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 0.65rem 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.apply-form .form-control:focus {
  background: rgba(192,58,255,0.07);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(192,58,255,0.15);
  outline: none;
}

.apply-form .form-control::placeholder {
  color: rgba(255,255,255,0.25);
}

.apply-position-field {
  background: rgba(192,58,255,0.08) !important;
  border-color: rgba(192,58,255,0.3) !important;
  color: var(--accent) !important;
  font-weight: 600;
  cursor: default;
}

.apply-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
  justify-content: center;
}

.apply-submit-btn:hover {
  background: #a020e0;
  box-shadow: 0 0 24px rgba(192,58,255,0.4);
}


/* ─────────────────────────────────────────────
   PARTNERS PAGE
───────────────────────────────────────────── */
.partners-section--alt {
  background: #0e0e0e;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Become a partner CTA ── */
.prt-cta-section {
  background: var(--accent);
  padding: 3rem 0;
}

.prt-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.prt-cta-heading {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 0.5rem;
}

.prt-cta-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.prt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.prt-cta-btn:hover {
  background: rgba(255,255,255,0.85);
  color: var(--accent);
}


/* ─────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────── */
.ct-hero { padding-bottom: 3rem; }

.ct-section {
  background: var(--bg);
  padding: 3rem 0;
}

/* ── Form ── */
.ct-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.45rem;
}

.ct-required { color: var(--accent); }

.ct-input {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ct-input:focus {
  background: rgba(192,58,255,0.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192,58,255,0.15);
}

.ct-input::placeholder { color: rgba(255,255,255,0.22); }

.ct-textarea { resize: vertical; min-height: 160px; }

.ct-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  padding: 0.9rem 2.5rem;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.ct-submit-btn:hover {
  background: #a020e0;
  box-shadow: 0 0 28px rgba(192,58,255,0.45);
}

/* ── Side column ── */
.ct-side {
  padding-top: 0.5rem;
}

.ct-side-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ct-side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ct-side-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.15rem;
}

.ct-side-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.ct-side-link:hover { color: var(--accent); }

.ct-side-mascot {
  margin-top: 2.5rem;
  text-align: center;
}

.ct-side-mascot img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(192,58,255,0.3));
}

@media (max-width: 991.98px) {
  .ct-side-mascot { display: none; }
  .prt-cta-inner { flex-direction: column; align-items: flex-start; }
  .cr-perks-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .cr-perks-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────
   SINGLE GAME PAGE
───────────────────────────────────────────── */

/* ── Hero ── */
.sg-hero {
  position: relative;
  height: 40vh;
  min-height: 265px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.sg-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  filter: brightness(0.85);
  transform: scale(1);
}

.sg-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.8) 0%, transparent 50%, rgba(10,10,10,1) 100%),
    linear-gradient(to right, rgba(10,10,10,0) 0%, transparent 60%, rgba(10,10,10,0) 100%);
}

.sg-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--nav-h) + 1.5rem);
  padding-bottom: 2rem;
  width: 100%;
}

.sg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.sg-back-link:hover { color: #fff; }

.sg-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
}

.sg-hero-badge {
  height: 28px;
  width: auto;
}

.sg-hero-badge-text {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.sg-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.65);
  border-radius: 50px;
  padding: 0.6rem 1.75rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.sg-play-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* ── Game Info ── */
.sg-info-section {
  background: var(--bg);
  padding: 3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sg-cover-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

.sg-cover-img {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* Stats table */
.sg-stats {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sg-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sg-stat-row--last { border-bottom: none; }

.sg-stat-label {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,1);
  letter-spacing: 0.02em;
}

.sg-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #E8491D;
  letter-spacing: 0.02em;
}

/* Description */
.sg-desc-heading {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 1rem;
}

.sg-desc-text {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin: 0;
  text-align: justify;
}

/* ── Other Games ── */
.sg-other-section {
  background: #0c0c0c;
  padding: 3rem 0;
}

.sg-other-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sg-other-title {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0;
}

.sg-other-see-all {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  padding: 0.4rem 1.25rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sg-other-see-all:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff;
}

/* Clips the overflowing ticker track. Vertical padding gives the card
   hover-lift (translateY(-10px)) room so it isn't clipped at the edges. */
.sg-other-viewport {
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* Sized to its content so it overflows the viewport and can slide. main.js
   clones .sg-other-set enough times to always exceed the viewport and sets
   --sg-ticker-shift (one set width) + --sg-ticker-duration for a constant pixel
   speed. Fallbacks keep a sane loop if JS is disabled. */
.sg-other-ticker {
  display: flex;
  width: max-content;
  animation: sgOtherTicker var(--sg-ticker-duration, 40s) linear infinite;
  /* main.js takes over as a grab/swipe-scrollable rAF loop: grab cursor, pan-y
     keeps vertical page scroll working while horizontal drags move the row, and
     no-select stops text/image drag-ghosting mid-swipe. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.sg-other-ticker.is-dragging { cursor: grabbing; }
.sg-other-ticker img { -webkit-user-drag: none; user-drag: none; }

/* Pause the loop on hover so a card can be inspected/clicked (JS marquee). */
.sg-other-viewport:hover .sg-other-ticker {
  animation-play-state: paused;
}

/* One repeatable run of cards. padding-right supplies the trailing gap so
   cloned sets tile with the same spacing as the internal `gap` — this is what
   keeps the loop seamless (a plain `gap` leaves no trailing space after the
   last card and desyncs the reset). */
.sg-other-set {
  display: flex;
  gap: 0.5rem;
  padding-right: 0.5rem;
  flex: 0 0 auto;
}

@keyframes sgOtherTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sg-ticker-shift, -50%)); }
}

.sg-other-card {
  position: relative;
  flex: 0 0 246px;
  height: 430px;
  border-radius: 40px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border: 3px solid rgba(255, 255, 255, 0);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.sg-other-card:hover {
  border-color: rgba(255, 255, 255, 1);
  transform: translateY(-10px);
}

.sg-other-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

.sg-other-card:hover img { transform: scale(1.04); }

.sg-other-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 0.65rem;
}

.sg-other-card-name {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
}

/* ── Let's Get In Touch ── */
.sg-git-section {
  position: relative;
  background: #E8491D;
  padding: 3rem 0;
  overflow: hidden;
}

.sg-git-hand {
  position: absolute;
  width: 220px;
  bottom: -50px;
  left: 38%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}

.sg-git-section .container-fluid { position: relative; z-index: 2; }

.sg-git-headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
  margin: 0;
}

/* Form card */
.sg-git-form-card {
  background: #111;
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 28px 72px rgba(0,0,0,0.65);
}

.sg-git-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 0.6rem 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.sg-git-input::placeholder { color: rgba(255,255,255,0.3); }
.sg-git-input:focus { border-color: rgba(255,255,255,0.55); }

.sg-git-textarea {
  resize: none;
  min-height: 90px;
}

/* Checkbox row */
.sg-git-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.sg-git-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #E8491D;
  cursor: pointer;
}

.sg-git-check-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  cursor: pointer;
}

.sg-git-check-label a {
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}

.sg-git-check-label a:hover { color: #fff; }

.sg-git-submit {
  display: block;
  width: 100%;
  background: #fff;
  color: #E8491D;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  padding: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sg-git-submit:hover {
  background: rgba(255,255,255,0.88);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .sg-cover-wrap { position: static; }
  .sg-git-hand { display: none; }
  .sg-hero { height: 33vh; }
}

@media (max-width: 767.98px) {
  .sg-other-card { flex: 0 0 140px; height: 190px; }
  .sg-hero { height: 17vh; min-height: 107px; }
  .sg-hero-bg { background-position: center 35%; }
}


/* ─────────────────────────────────────────────
   404 PAGE
───────────────────────────────────────────── */
.notfound-section {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) 1.5rem 4rem;
}

.notfound-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.notfound-img {
  width: 100%;
  height: auto;
  display: block;
}

.notfound-sub {
	font-size: 1rem;
	color: rgba(255,255,255,1);
	letter-spacing: 0.02em;
	text-align: center;
}

.notfound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border-radius: 6px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.notfound-btn:hover {
  background: #a020e0;
  color: #fff;
  box-shadow: 0 0 24px rgba(192,58,255,0.45);
}


/* ─────────────────────────────────────────────
   AGE GATE OVERLAY
───────────────────────────────────────────── */
.ag-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.4s ease;
}

.ag-overlay.ag-hiding {
  opacity: 0;
  pointer-events: none;
}

.ag-card {
  background: #1c1c1c;
  border-radius: 24px;
  padding: 3rem 2.5rem 2.75rem;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.ag-logo {
  height: 56px;
  width: auto;
  display: block;
}

.ag-heading {
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1;
}

.ag-body {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  margin: 0;
  max-width: 340px;
}

.ag-btn {
  margin-top: 0.75rem;
  width: 100%;
  max-width: 340px;
  padding: 1rem;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ag-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}


/* ─────────────────────────────────────────────
   PRIVACY POLICY PAGE
───────────────────────────────────────────── */
.pp-section {
  background: var(--bg);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pp-title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: rgba(255, 255, 255, 0.08);
  margin-bottom: 0.5rem;
  user-select: none;
}

.pp-updated {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.pp-lead {
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: justify;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 3rem;
}

/* Table of contents */
.pp-toc {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 4rem;
  max-width: 640px;
}

.pp-toc-heading {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.pp-toc-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pp-toc-list li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.pp-toc-list a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.pp-toc-list a:hover { color: #fff; }

/* Body sections */
.pp-body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.pp-section-block {
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-heading {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1rem;
}

.pp-section-block p {
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: justify;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 2rem;
}

.pp-section-block p:last-child { margin-bottom: 0; }

.pp-list {
  padding-left: 1.4rem;
  margin: 0.5rem 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pp-list li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 1);
}

.pp-list strong { color: rgba(255, 255, 255, 0.75); }

.pp-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

.pp-link:hover { color: #fff; }

@media (max-width: 767.98px) {
  .ag-card { padding: 2.25rem 1.5rem 2rem; }
  .pp-toc { padding: 1.5rem; }
  .pp-body { gap: 2rem; }
}


/* ─────────────────────────────────────────────
   ADMIN LOGIN
───────────────────────────────────────────── */
.admin-login-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.admin-login-body::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.admin-login-body::after {
  content: "";
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(224, 64, 251, 0.20) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2rem;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(192, 58, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(160, 0, 255, 0.15);
}

.login-title {
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}

.login-accent { color: var(--accent); }

.login-card .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 0.4rem;
}

.login-card .form-control {
  background: #111;
  border: 1px solid #2a2a2a;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card .form-control:focus {
  background: #111;
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(192, 58, 255, 0.20);
}

.login-card .form-control::placeholder { color: #555; }

.btn-login {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-login:hover {
  background: #a72ee0;
  box-shadow: 0 0 20px rgba(192, 58, 255, 0.45);
}

.btn-login:active { transform: translateY(1px); }

.login-foot {
  text-align: center;
  color: #555;
  font-size: 0.75rem;
  margin-top: 1.5rem;
  letter-spacing: 1px;
}

.login-error {
  background: rgba(255, 64, 64, 0.10);
  border: 1px solid rgba(255, 64, 64, 0.35);
  color: #ff7070;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* ── NAVIGATION PROGRESS BAR ──────────────────────────────────────────────
   A slim top bar that fires the instant a link is tapped, so a slow next
   page (mobile Safari shows no loading UI over the page) still gives the user
   immediate feedback that the tap registered. Driven by main.js. */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2000;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Creep toward ~90% over several seconds — enough to feel responsive without
   ever appearing to "finish" before the real page swaps in. */
#nav-progress.loading {
  opacity: 1;
  transform: scaleX(0.9);
  transition: transform 8s cubic-bezier(0.1, 0.7, 0.2, 1);
}
/* Reset state (e.g. bfcache restore on Back): snap out with a quick fade. */
#nav-progress.done {
  opacity: 0;
  transform: scaleX(1);
  transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  #nav-progress.loading { transition: none; }
}