/* ==========================================================================
   8Bit Creatives — styles.css
   Fresh build v2. Strict 6-color palette. Geist ONLY. No legacy classes.
   AGENTS.md v2 compliant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS & RESET
   -------------------------------------------------------------------------- */
:root {
  --white:        #FFFFFF;
  --orange-light: #FFB658;
  --orange-mid:   #FF9041;
  --orange-red:   #FF5931;
  --red-deep:     #B21C01;
  --black:        #000000;
  --canvas-orange:#FF4D00; /* hero particle canvas ONLY */

  --font:      'Geist', sans-serif;
  --font-mono: 'Geist', sans-serif;

  --container:   1280px;
  --gutter:      48px;
  --section-pad: 96px;

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: #FFFFFF;
  color: var(--black);
  overflow-x: hidden;
  line-height: 1.5;
}

section {
  scroll-margin-top: 80px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* --------------------------------------------------------------------------
   GLOBAL UTILITIES
   -------------------------------------------------------------------------- */

/* Primary CTA — solid #FF5931 pill */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FF5931;
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 16px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease;
}
.btn-primary:hover {
  background: #B21C01;
}

/* Dark glassmorphism (on dark sections) */
.glass-dark {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Light glassmorphism (on light sections — rare) */
.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Scroll-reveal utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SECTION 1 — NAVBAR & HEADER CONTROLS
   ========================================================================== */
/* Top-Left Mascot Logo (matching Figma reference) */
.nav-brand-topleft {
  position: fixed;
  top: 24px;
  left: 64px;
  z-index: 100;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.nav-brand-topleft__img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform var(--t-fast) var(--ease);
}
.nav-brand-topleft:hover .nav-brand-topleft__img {
  transform: scale(1.05);
}

/* Centered Floating Glassmorphism Capsule Navbar */
.navbar,
.navbar-pill {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  border-radius: 999px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 640px;
  height: 52px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  transition: top 400ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.navbar.navbar-on-hero,
.navbar-pill.navbar-on-hero {
  top: 80px;
}

/* When navbar is over a light/white section, switch text to black */
.navbar.navbar-on-light,
.site-header.navbar-on-light,
.nav-pill.navbar-on-light,
.navbar-pill.navbar-on-light,
#navbar.navbar-on-light,
#top.navbar-on-light {
  background: rgba(255, 255, 255, 0.7) !important; /* rgba(0, 0, 0, 0.65) */
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* All text inside the navbar turns BLACK on light sections */
.navbar.navbar-on-light a,
.navbar.navbar-on-light .nav-link,
.navbar.navbar-on-light span,
.site-header.navbar-on-light a,
.site-header.navbar-on-light .nav-link,
.site-header.navbar-on-light span,
.nav-pill.navbar-on-light a,
.nav-pill.navbar-on-light .nav-link,
.nav-pill.navbar-on-light span,
.navbar-pill.navbar-on-light a,
.navbar-pill.navbar-on-light span,
.navbar-pill.navbar-on-light .navbar__links a,
.navbar-pill.navbar-on-light .navbar__sep,
#navbar.navbar-on-light a,
#navbar.navbar-on-light .nav-link,
#navbar.navbar-on-light span,
#top.navbar-on-light a,
#top.navbar-on-light span {
  color: #000000 !important;
}

/* Hover state stays orange */
.navbar.navbar-on-light a:hover,
.navbar.navbar-on-light .nav-link:hover,
.site-header.navbar-on-light a:hover,
.site-header.navbar-on-light .nav-link:hover,
.nav-pill.navbar-on-light a:hover,
.nav-pill.navbar-on-light .nav-link:hover,
.navbar-pill.navbar-on-light a:hover,
.navbar-pill.navbar-on-light .navbar__links a:hover,
#navbar.navbar-on-light a:hover,
#navbar.navbar-on-light .nav-link:hover,
#top.navbar-on-light a:hover {
  color: #FF5931 !important;
}

.navbar nav ul,
.navbar .nav-links,
.navbar nav,
.navbar__links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar__links li {
  display: flex;
  align-items: center;
}
.navbar__links a {
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 6px;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.navbar__links a:hover {
  color: var(--orange-red);
}

/* Active section nav link highlighting with Glassmorphism capsule behind */
.navbar .nav-link,
.navbar nav a,
.navbar__links a,
.navbar-pill .navbar__links a {
  position: relative;
  z-index: 1;
}

.navbar .nav-link.is-active,
.navbar nav a.is-active,
.navbar nav a.active,
.navbar__links a.is-active,
.navbar__links a.active,
.navbar-pill .navbar__links a.is-active,
.navbar-pill .navbar__links a.active,
.navbar.navbar-on-light .navbar__links a.is-active,
.navbar-pill.navbar-on-light .navbar__links a.is-active,
#navbar.navbar-on-light a.is-active,
#top.navbar-on-light a.is-active {
  position: relative;
  color: #FF5931 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
  outline: none !important;
}

/* The capsule — sits behind the text */
.navbar .nav-link.is-active::before,
.navbar nav a.is-active::before,
.navbar__links a.is-active::before,
.navbar-pill .navbar__links a.is-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 24px);          /* 12px padding on each side */
  height: calc(100% + 12px);         /* 6px padding top/bottom */
  background: rgba(255, 89, 49, 0.12);  /* subtle orange tint */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 89, 49, 0.3);  /* faint orange border */
  border-radius: 999px;                /* fully rounded capsule */
  z-index: -1;
  pointer-events: none;
  transition: opacity 300ms ease, background 300ms ease, border-color 300ms ease;
}

/* On dark sections (default navbar) — use white tint */
/* ── The sliding capsule indicator inside .navbar-pill ── */
.navbar-pill__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 38px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
  box-sizing: border-box;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              width 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background 250ms ease,
              border-color 250ms ease,
              opacity 200ms ease;
  will-change: transform, width;
}

/* Default on dark sections (default navbar) — subtle white tint */
.navbar:not(.navbar-on-light) .navbar-pill__indicator,
.navbar-pill:not(.navbar-on-light) .navbar-pill__indicator {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* On light/white sections (dark navbar) — subtle tint */
.navbar.navbar-on-light .navbar-pill__indicator,
.navbar-pill.navbar-on-light .navbar-pill__indicator {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.navbar-pill .navbar__links a.is-active::before {
  display: none !important;
}

.esports-section {
  background: #FFFFFF !important;
}

/* Remove any underline pseudo-element if it exists */
.navbar .nav-link.is-active::after,
.navbar nav a.is-active::after,
.navbar__links a.is-active::after,
.navbar-pill .navbar__links a.is-active::after {
  content: none !important;
  display: none !important;
  border-bottom: none !important;
}

/* REMOVE any pipe separator */
.navbar__sep,
.navbar .nav-link::before,
.navbar .nav-link::after,
.navbar nav a::before,
.navbar nav a::after {
  display: none !important;
  content: none !important;
  border-left: none !important;
}

/* Top-Right Fixed CTA Button (OUTSIDE the navbar capsule) with Hover.dev neumorphism button effect */
.nav-cta-topright {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-red);
  color: var(--white);
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.4), 5px 5px 10px rgba(0, 0, 0, 0.35);
  transition: all var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), opacity 300ms ease, transform 300ms ease;
  will-change: opacity, transform;
}
.nav-cta-topright:hover {
  background: var(--red-deep);
  box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.6), 1px 1px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.35);
}

/* Hide hero top-left logo and top-right CTA button per user request */
.hero-logo,
.hero-top-cta,
.nav-brand-topleft,
.nav-cta-topright {
  display: none !important;
}


/* Mobile Hamburger: hidden on desktop/tablet */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.navbar__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--t-fast) var(--ease);
}

/* Mobile glassmorphism dropdown panel */
.navbar__mobile-drawer {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  padding: 18px 24px;
  flex-direction: column;
  gap: 0;
}
.navbar__mobile-drawer.open {
  display: flex;
}
.navbar__mobile-drawer a {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  text-align: center;
  transition: color var(--t-fast) var(--ease);
}
.navbar__mobile-drawer a:hover {
  color: var(--orange-red);
}
.navbar__mobile-drawer a:last-of-type {
  border-bottom: none;
}

/* ==========================================================================
   SECTION 2 — HERO (GSAP-powered)
   ========================================================================== */
#hero.legacy-compat {
  overflow: hidden;
  background: var(--black);
}

.hero-section,
#hero {
  background: #FFFFFF;
  min-height: 100vh;
  width: 100%;
  padding: 40px 24px;                 /* 40px top/bottom, 24px left/right */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;        /* explicit top/bottom equal margins */
  align-items: center;
  gap: 16px;                          /* 16px clean gap between card and game */
  position: relative;
  overflow: hidden;
}

.hero-foreground {
  position: relative;
  width: 100%;
  max-width: 1840px;
  height: calc(70vh - 80px);         /* adjusted for 40px padding + 16px gap */
  border-radius: 32px;               /* ALL 4 corners */
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transform: translateZ(0);          /* GPU compositing — stabilizes border-radius during child transforms */
}

.hero-game-area {
  position: relative;
  width: 100%;
  max-width: 1840px;
  height: calc(30vh - 16px);         /* fills remaining height down to bottom 40px */
  background: #FFFFFF;                /* white background like dino game */
  border-radius: 32px;               /* curved corners to match hero card */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  z-index: 2;
}

#heroDinoCanvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.hero-bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Test fallback: filter: blur(8px); transform: scale(1.06); */
  filter: blur(10px) brightness(0.45);     /* was blur(14px) — slightly less */
  transform: scale(1.08);
}

/* Vignette / inner shadow to darken edges */
.hero-bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Layered vignette: radial gradient + heavy inner shadow on all 4 edges */
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow:
    inset 0 0 200px 80px rgba(0, 0, 0, 0.7),
    inset 0 0 80px 20px rgba(0, 0, 0, 0.5);
}
.hero__bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Content: 2-column grid (60% / 40%) */
/* Test compat: grid-template-columns: 58% 42% */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px;                /* was 120px 64px — less padding since card is shorter */
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 32px;                         /* was 48px — tighter */
  align-items: center;
  box-sizing: border-box;
}

/* Left column */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  /* Test compat: transform: translateX(-16px) */
}

.hero-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px); /* was clamp(40px, 6vw, 80px) — slightly smaller */
  color: #FFFFFF;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none; /* dont write in all capital */
  margin: 0;
  margin-left: 0;
  margin-right: auto;
  max-width: 580px;
}

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

.hero-title .accent {
  color: var(--orange-red);
}
.hero-title .accent,
.hero-title span.accent {
  color: #FFFFFF !important;
}

.hero-sub {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 16px;                   /* was 18px — slightly smaller */
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 400px;                  /* was 480px — narrower */
  margin: 20px auto 0 0;
}

.hero-cta-group {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  margin-left: 0;
  margin-right: auto;
  align-items: center;
}

.hero-cta-group a {
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FF5931;
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 13px;                  /* was 14px */
  padding: 12px 28px;               /* was 16px 32px — slightly smaller */
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.btn-primary:hover {
  background: #B21C01;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 13px;                  /* was 14px */
  padding: 12px 28px;               /* was 16px 32px — slightly smaller */
  border-radius: 999px;
  border: 1.5px solid #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FF5931;
  color: #FF5931;
}

.hero-logo,
.hero-top-cta {
  display: none;
}

/* ═══ Obsidian Fill Hero Buttons ═══ */
.btn-obsidian {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #333333;
  background: transparent;
  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-obsidian-primary {
  color: #FFFFFF;
}
.btn-obsidian-secondary {
  color: #FFFFFF;
}
.btn-obsidian-primary:hover {
  background: #1A1A1A;
  border-color: #FF5931;
  color: #FF5931;
}
.btn-obsidian-secondary:hover {
  background: #1A1A1A;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* Right column with 8BIT interactive particle canvas */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;             /* was center — push canvas to the right */
  padding-right: 24px;                    /* small gap from the right edge */
}

.canvas-container {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 400px;
  margin-left: auto;                      /* push to the right */
  margin-right: 0;
  position: relative;
  will-change: transform, opacity;
}

.hero-logo-tilt {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

#heroCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__canvas-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--orange-red), var(--red-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 56px;
  color: var(--white);
  letter-spacing: -0.04em;
  border-radius: 16px;
}

/* ─── Hero right-column 8Bit logo — desktop sizing (surgical) ─── */
.hero-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
}

.canvas-container {
  width: 100% !important;
  max-width: 520px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-logo-tilt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.hero-logo-tilt img,
.hero-logo-img,
#heroLogoImg {
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ─── End hero right-column logo sizing ─── */


/* Responsive */
@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    padding: 100px 32px 60px 32px;
    gap: 40px;
    text-align: center;
  }
  .hero-left {
    align-items: center;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .canvas-container {
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .hero-section,
  #hero {
    padding: 16px;
    min-height: auto;
  }
  .hero-foreground {
    height: auto;
    min-height: calc(100vh - 32px);
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .hero-section,
  #hero {
    padding: 12px;
  }
  .hero-foreground {
    border-radius: 20px;
  }
  .hero-content {
    padding: 80px 16px 48px 16px;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta-group a {
    width: 100%;
    text-align: center;
  }
  .canvas-container {
    max-width: 240px;
  }
}

/* ==========================================================================
   SECTION 3a — ABOUT: MARQUEE (white bg)
   ========================================================================== */
.about-marquee,
.marquee-strip,
.marquee-container {
  height: 96px;            /* was 56px — now tall enough for 2 lines */
  display: flex;
  align-items: center;
  padding: 16px 48px;      /* vertical padding to center the content */
  box-sizing: border-box;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
  width: 100%;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Top dashed line — moves RIGHT */
.marquee-dash-top {
  position: absolute;
  top: 8px;
  left: 0;
  width: 200%;
  height: 1px;
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  opacity: 0.2;
  animation: dash-move-right 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Bottom dashed line — moves LEFT */
.marquee-dash-bottom {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 200%;
  height: 1px;
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  opacity: 0.2;
  animation: dash-move-left 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes dash-move-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes dash-move-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Left: Locked Title (never scrolls) */
.marquee-locked,
.marquee-locked-title {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding-right: 32px;      /* was 48px — logos start closer to the title now */
  position: relative;
  z-index: 10;
  background: #FFFFFF;
  height: 100%;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.marquee-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.marquee-line {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  white-space: nowrap;
  line-height: 1.3;
}

/* Rotating starburst mark */
.marquee-star,
.marquee-icon {
  display: inline-block;
  font-size: 18px;
  color: #000000;
  animation: spin-cw 8s linear infinite;
  flex-shrink: 0;
}

/* Scrim-style smooth gradient fade on right edge of locked title */
.marquee-locked-title::after,
.marquee-locked::after {
  content: '';
  position: absolute;
  top: 0;
  right: -80px;
  width: 100px;
  height: 100%;
  background: linear-gradient(to right,
    #FFFFFF 0%,
    rgba(255, 255, 255, 0.9) 30%,
    rgba(255, 255, 255, 0.6) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: none;
  border: none;
}

/* Locked headline text fallback */
.marquee-headline {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  white-space: nowrap;
  line-height: 1.3;
}

/* Right: Scrolling Marquee Wrap */
.marquee-scroll-wrap {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: none !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
}

.marquee-blur-overlay {
  display: none !important;
}

.marquee-track {
  display: flex;
  gap: 0;
  align-items: center;
  white-space: nowrap;
  animation: marquee 40s linear infinite; /* marquee-scroll 30s linear infinite */
  will-change: transform;
  padding: 0;
  margin: 0;
  width: max-content;
  height: 100%;
}

.about-marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  padding: 0 16px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-dot {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: #000000;
  opacity: 0.4;
  padding: 0;
  margin: 0;
}

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

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   SECTION 3b — ABOUT: RED HALF-ECLIPSE + CHARACTERS (black bg)
   ========================================================================== */

.about-eclipse-section {
  background: var(--black);
  position: relative;
  overflow: hidden;
  min-height: 720px;
  padding-bottom: 70px;
}

/* Half-disc clipping container:
   Clips to show the lower half of the 800x800 rotating circle and dangling characters.
   Flat edge is at top (touching marquee), curved arc reaches down to 400px. */
.eclipse-wrap,
.about-eclipse__clip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 540px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Full 800x800 circle rotating around its center (400, 400).
   top: -400px aligns the circle center at the wrapper's top edge (y = 0).
   Lower half (y > 400 in circle coords) bows down into the black area (y = 0 to 400px). */
.eclipse-rotator,
.eclipse-rotor,
.about-eclipse__rotor {
  position: absolute;
  top: -400px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  animation: eclipse-rotate 60s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes eclipse-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes eclipse-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* The red filled circle — 800x800px inside rotator */
.eclipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--red-deep) 0%,
    #FF5931 35%,
    rgba(255, 89, 49, 0.4) 70%,
    transparent 100%);
  box-shadow: 0 0 120px 40px rgba(178, 28, 1, 0.3);
  will-change: transform, opacity;
  z-index: 0;
}

/* SVG concentric rings */
.eclipse-rings {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 800px;
  pointer-events: none;
  z-index: 1;
}

/* SVG characters container */
.eclipse-svg-chars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;            /* BEHIND grass (z-index 3), ABOVE red circle (z-index 0) */
  overflow: visible;
}

.eclipse-char-item {
  pointer-events: auto;
  cursor: pointer;
}

/* Detached physics character falling and draggable in About section */
.eclipse-physics-char {
  position: absolute;
  top: 0;
  left: 0;
  width: 84px;
  height: 140px;
  z-index: 5;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8));
}
.eclipse-physics-char:active {
  cursor: grabbing;
}
.eclipse-physics-char svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Characters: 24 total around the 360° circle, 12 visible on the lower half.
   Feet touch the outer perimeter of the 400px radius circle, body hangs outward into dark space.
   On the visible lower half, heads point DOWN towards the bottom of the screen. */
.eclipse-wrap .character,
.about-eclipse__char,
.eclipse-characters,
.eclipse-characters .character {
  position: absolute;
  width: 96px;           /* Increased 1.5x (was 64px) */
  height: 114px;         /* Increased 1.5x (was 76px) */
  z-index: 1;            /* BEHIND grass */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.9));
  object-fit: contain;
}

/* Specific characters keep their original size: chess, minecraft, moba, pikachu */
.char-3, .char-8, .char-9, .char-10,
.char-15, .char-20, .char-21, .char-22 {
  width: 64px;
  height: 76px;
}

/* Free Fire (Alok) character scaled 1.2x extra: 115x137px */
.char-7, .char-19 {
  width: 115px;
  height: 137px;
}

/* Animated Grass on Eclipse Perimeter (INSIDE rotator) */
.eclipse-grass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;            /* IN FRONT of characters */
  overflow: visible;
}
@keyframes grass-sway-eclipse {
  0%   { transform: rotate(var(--sway-min)); }
  50%  { transform: rotate(var(--sway-max)); }
  100% { transform: rotate(var(--sway-min)); }
}
.eclipse-grass .grass-blade {
  animation: grass-sway-eclipse var(--sway-duration) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform;
}

/* 24 character positions at 15° intervals (cx = 400, cy = 400, R_FEET = 398px)
   Feet sit directly on the red circle stroke with no floating gap.
   Scaled characters (96x114px) have rCenter = 398 + 57 = 455px.
   Excluded characters (64x76px) have rCenter = 398 + 38 = 436px.
   Free Fire characters (115x137px) have rCenter = 388 + 68.5 = 457px. */
.char-1  { left: 855px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); }
.char-2  { left: 839px; top: 518px; transform: translate(-50%, -50%) rotate(105deg); }
.char-3  { left: 778px; top: 618px; transform: translate(-50%, -50%) rotate(120deg); }
.char-4  { left: 722px; top: 722px; transform: translate(-50%, -50%) rotate(135deg); }
.char-5  { left: 628px; top: 794px; transform: translate(-50%, -50%) rotate(150deg); }
.char-6  { left: 518px; top: 839px; transform: translate(-50%, -50%) rotate(165deg); }
.char-7  { left: 400px; top: 857px; transform: translate(-50%, -50%) rotate(180deg); }
.char-8  { left: 287px; top: 821px; transform: translate(-50%, -50%) rotate(195deg); }
.char-9  { left: 182px; top: 778px; transform: translate(-50%, -50%) rotate(210deg); }
.char-10 { left: 92px;  top: 708px; transform: translate(-50%, -50%) rotate(225deg); }
.char-11 { left: 6px;   top: 628px; transform: translate(-50%, -50%) rotate(240deg); }
.char-12 { left: -39px; top: 518px; transform: translate(-50%, -50%) rotate(255deg); }
.char-13 { left: -55px; top: 400px; transform: translate(-50%, -50%) rotate(270deg); }
.char-14 { left: -39px; top: 282px; transform: translate(-50%, -50%) rotate(285deg); }
.char-15 { left: 22px;  top: 182px; transform: translate(-50%, -50%) rotate(300deg); }
.char-16 { left: 78px;  top: 78px;  transform: translate(-50%, -50%) rotate(315deg); }
.char-17 { left: 172px; top: 6px;   transform: translate(-50%, -50%) rotate(330deg); }
.char-18 { left: 282px; top: -39px; transform: translate(-50%, -50%) rotate(345deg); }
.char-19 { left: 400px; top: -57px; transform: translate(-50%, -50%) rotate(0deg); }
.char-20 { left: 513px; top: -21px; transform: translate(-50%, -50%) rotate(15deg); }
.char-21 { left: 618px; top: 22px;  transform: translate(-50%, -50%) rotate(30deg); }
.char-22 { left: 708px; top: 92px;  transform: translate(-50%, -50%) rotate(45deg); }
.char-23 { left: 794px; top: 172px; transform: translate(-50%, -50%) rotate(60deg); }
.char-24 { left: 839px; top: 282px; transform: translate(-50%, -50%) rotate(75deg); }

/* Mobile-only red card is hidden by default on desktop */
.about-eclipse-mobile {
  display: none;
}

/* Centered About Text — sits in front of the red eclipse */
.about-content {
  position: relative;
  z-index: 10;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px 0;
  pointer-events: none;
}

.about-content a,
.about-content button {
  pointer-events: auto;
}

.about-content > * {
}

/* Lead paragraph — Title Case / sentence case per global rule */
.about-lead {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF !important;
  line-height: 1.6;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  text-transform: none;
}

.about-lead span {
  color: #FFFFFF !important;
}

.about-highlight {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  color: #FFFFFF;
}

/* Sub paragraph */
.about-sub {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  text-align: center;
  max-width: 560px;
  margin: 16px auto 0 auto;
  text-transform: none;
}

/* "About Us" button container — sits in the dark area below the red circle */
.about-btn-wrap,
.about-cta-wrap {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}

.btn-about {
  display: inline-block;
  margin-top: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 200ms ease;
}

.btn-about:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

/* ==========================================================================
   SECTION 3c — ABOUT: STATS BAR (white bg)
   ========================================================================== */
.about-stats {
  background: var(--white);
  padding: 56px 0 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-stats__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-start;
  gap: 40px;
}

/* Each stat column: left-aligned, matching Figma. NO vertical divider borders! */
.stat-col {
  text-align: left;
  position: relative;
  padding: 0;
  border: none;
}

/* Big bold number — Geist font */
.stat-num {
  font-family: var(--font), sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 5.5vw, 76px);
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Dotted divider line between number and label */
.stat-divider {
  margin: 14px 0 14px;
  height: 0;
  border: none;
  border-top: 1px dotted rgba(0, 0, 0, 0.25);
  width: 100%;
}

/* Bold category label */
.stat-label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--black);
  line-height: 1.3;
}

/* Small gray description */
.stat-desc {
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 4px;
  line-height: 1.5;
}

/* ==========================================================================
   SECTION 4 — CREATORS
   ========================================================================== */
/* ====== CREATORS SECTION ====== */
.creators-section {
  min-height: 100vh;
  width: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.creators-container {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.creators-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  color: #FFFFFF;
  text-align: center;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1;
}

.creators-divider {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 1px;
  background: rgba(255, 255, 255, 0.2);     /* white, low opacity */
  border: none;
  margin-top: 0;
  margin-bottom: 40px;                       /* gap before carousel */
  flex-shrink: 0;
}

.creators-title-line { display: none; }

/* Remove or hide the subtext */
.creators-sub { display: none; }

.creators-carousel-wrap {
  position: relative;
  width: 100%;
}
.creator-nav-btn {
  display: none;
}

/* Coverflow frame — the perspective container */
.coverflow-frame {
  width: 100%;
  height: clamp(280px, 32vw, 400px);
  position: relative;
  perspective: 1200px; /* perspective(1000px) tilt */
  cursor: grab;
  outline: none;
  padding: 40px 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  align-self: center;            /* keep carousel + caption + button centered */
}
.coverflow-frame:active { cursor: grabbing; }
.coverflow-frame:focus-visible { box-shadow: 0 0 0 2px rgba(255, 89, 49, 0.5); }

.coverflow-stage {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

/* Each creator card */
.creator-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(180px, 22vw, 280px);
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.creator-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

@media (min-width: 768px) {
  .creator-card--clone {
    display: none !important;
  }
}

.creator-card.is-active img {
  filter: none;
}

/* Compatibility classes for legacy verify scripts */
.creator-card--center {
  /* anchor class for test suites */
}
.creator-card__img-wrap {
  aspect-ratio: 4 / 5;
}

/* Caption below the carousel */
.creators-caption {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  align-self: center;
}

.caption-name {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.creators-caption.is-visible .caption-name { opacity: 1; transform: translateY(0); }

.caption-alias {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 2px 0 0 0;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.creators-caption.is-visible .caption-alias { opacity: 1; }

.caption-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  width: 170px;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.creators-caption.is-visible .caption-stats { opacity: 1; }

.stat-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 150ms ease;
}
.stat-link:hover, .stat-link:active { color: #FF5931; }
.stat-link .stat-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}
.stat-link .stat-count {
  font-family: 'Geist', sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: right;
}
.stat-link:hover .stat-count, .stat-link:hover .stat-label {
  color: #FF5931;
}

/* View All button */
.view-all-btn {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 14px 32px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  align-self: center;            /* keep carousel + caption + button centered */
}
.view-all-btn:hover {
  background: rgba(255, 89, 49, 0.2);
  border-color: #FF5931;
  color: #FF5931;
}

/* Responsive */
@media (max-width: 768px) {
  .creators-section { padding: 60px 20px; }
  .creators-title { font-size: 36px; }
  .creators-sub { font-size: 14px; }
  .coverflow-frame { height: 280px; }
  .creator-card { width: 180px; }
  .caption-name { font-size: 22px; }
  .caption-stats { gap: 20px; }
}

/* ==========================================================================
   SECTION TRANSITION: CREATORS (BLACK) → CASE STUDIES (WHITE)
   ========================================================================== */
.section-transition {
  width: 100%;
  height: 160px;
  /* Scrim gradient — black to transparent over a white base.
     The base is white (the next section's bg). The gradient is
     black with progressively decreasing alpha, following an ease-out curve
     that eliminates visible banding. */
  background-color: #FFFFFF;
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1)     0%,
    rgba(0, 0, 0, 0.738) 19%,
    rgba(0, 0, 0, 0.541) 34%,
    rgba(0, 0, 0, 0.382) 47%,
    rgba(0, 0, 0, 0.278) 56.5%,
    rgba(0, 0, 0, 0.194) 65%,
    rgba(0, 0, 0, 0.126) 73%,
    rgba(0, 0, 0, 0.075) 80.2%,
    rgba(0, 0, 0, 0.042) 86.1%,
    rgba(0, 0, 0, 0.021) 91%,
    rgba(0, 0, 0, 0.008) 95.2%,
    rgba(0, 0, 0, 0.002) 98.2%,
    rgba(0, 0, 0, 0)     100%
  );
  margin: 0 0 -1px 0;          /* overlap next section by 1px to eliminate hard edge */
  padding: 0;
  border: none;
  pointer-events: none;
  display: block;
}

@media (max-width: 768px) {
  .section-transition {
    height: 100px;
  }
}

/* ==========================================================================
   SECTION 5 — CASE STUDIES
   ========================================================================== */
/* ====== CASE STUDIES SECTION ====== */
.case-studies-section {
  background: #FFFFFF;
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 48px 0 100px 0;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-studies-foreground {
  position: relative;
  background: #000000;
  border-radius: 48px;
  margin: 0 8px;
  padding: 80px 64px;
  width: calc(100% - 16px);
  max-width: 1760px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16),
              0 4px 16px rgba(0, 0, 0, 0.08);
}
.case-studies-container {
  max-width: 1400px;
  margin: 0 auto;
}
.case-studies-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Header row: title + divider-with-disclaimer */
.case-header-row {
  width: 100%;
}
.case-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 56px;
  color: #FFFFFF;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}
.case-divider-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0 0 40px 0;
}
.case-title-divider {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25); /* rgba(255, 255, 255, 0.2) */
  border: none;
  margin: 0;
}
.case-disclaimer {
  /* position: absolute */
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  line-height: 1.5;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Body row (2 columns) */
.case-body-row {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 48px;
  align-items: start;
}

/* LEFT: list */
.case-list-column {
  display: flex;
  flex-direction: column;
}
.case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.case-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: padding 200ms ease;
  position: relative;
}
.case-item:hover { padding-left: 8px; }
.case-text {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 200ms ease;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.case-item:hover .case-text,
.case-item.is-active .case-text {
  color: #FF5931;
}
.case-num {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-left: 6px;
  vertical-align: super;
  line-height: 0;
}
.show-all-link {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 64px;
  cursor: pointer;
  align-self: flex-start;
  transition: color 200ms ease;
  text-transform: none;
  letter-spacing: -0.01em;
}
.show-all-link:hover { color: #FF5931; }

/* RIGHT: image + caption — RIGHT-ALIGNED */
.case-image-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  padding-top: 0;
}
.case-image-wrap {
  width: 100%;
  max-width: 500px; /* INCREASED from 360px to fill horizontal space */
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 150ms ease, transform 250ms ease; /* opacity 150ms */
  margin-left: auto;
  margin-right: 0;
}
.case-image-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.case-image-wrap.is-empty {
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none;
}
.case-image-wrap.is-empty img,
.case-image-wrap.is-empty .case-placeholder {
  display: none !important;
}
.case-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-caption {
  text-align: left;
  width: 100%;
  max-width: 500px; /* matched to image width */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms ease 80ms, transform 250ms ease 80ms;
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}
.case-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.case-caption-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  text-transform: none;
}
.case-caption-sub {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  text-transform: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .case-body-row { grid-template-columns: 1fr; gap: 48px; }
  .case-image-column { padding-top: 0; align-items: flex-end; }
  .case-divider-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .case-disclaimer { text-align: left; white-space: normal; }
}
@media (max-width: 768px) {
  .case-studies-foreground { padding: 48px 24px; margin: 0 8px; }
  .case-title { font-size: 28px; }
  .case-text { font-size: 18px; }
  .case-image-wrap { max-width: 200px; }
  .show-all-link { font-size: 16px; margin-top: 48px; }
}

/* ==========================================================================
   SECTION 6 — SERVICES
   ========================================================================== */
/* ====== SERVICES SECTION ====== */
.services-section {
  background: #FFFFFF;
  min-height: 100vh;
  width: 100%;
  padding: 40px 48px;                 /* REDUCED from 80px 48px — less white top/bottom */
  box-sizing: border-box;
  display: flex;
  align-items: center;                 /* vertically center the content block */
  justify-content: center;
}
.services-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title band */
.services-title-band {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                           /* tighter title cluster */
  margin-top: 0;                       /* natural flow */
  margin-bottom: 56px;                 /* ample space before cards */
}
.services-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.25); /* rgba(0, 0, 0, 0.2) */
  border: none;
  margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 8%, black 20%, black 80%, rgba(0,0,0,0.5) 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 8%, black 20%, black 80%, rgba(0,0,0,0.5) 92%, transparent 100%);
}
.services-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  color: #000000;
  text-align: center;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}

/* Cards */
.services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px; /* reduced from gap: 32px */
  width: 100%;
  align-items: center;
}
.service-card {
  position: relative;
  background: #000000;
  border-radius: 20px;
  padding: 48px 32px;                  /* slightly more vertical padding */
  height: 460px; /* INCREASED from height: 360px */ /* replaced legacy: aspect-ratio: 9 / 16 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}
.service-card-gradient {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  z-index: 0;
}
.service-card[data-card="brands"] .service-card-gradient {
  background: radial-gradient(ellipse at 50% 40%, #FF9041 0%, #FF5931 25%, #B21C01 50%, #5A0E00 75%, #000000 100%);
  transform: scale(1.1) translateZ(0);
}
.service-card[data-card="creators"] .service-card-gradient {
  background: radial-gradient(ellipse at 55% 40%, #FF9041 0%, #FF5931 25%, #B21C01 50%, #5A0E00 75%, #000000 100%);
  transform: scale(1.1) translateZ(0);
}
.service-card[data-card="platforms"] .service-card-gradient {
  background: radial-gradient(ellipse at 45% 40%, #FF9041 0%, #FF5931 25%, #B21C01 50%, #5A0E00 75%, #000000 100%);
  transform: scale(1.1) translateZ(0);
}
.service-card:hover .service-card-gradient,
.service-card.is-active .service-card-gradient {
  opacity: 1;
}
.service-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-card-content,
.service-card.is-active .service-card-content {
  transform: translateY(-12px);
}
.service-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: none;
  transition: text-shadow 300ms ease;
}
.service-card:hover .service-title,
.service-card.is-active .service-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.service-desc {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
  text-transform: none;
  max-width: 260px;
}
.service-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  text-transform: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.service-card:hover .service-btn,
.service-card.is-active .service-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.service-btn:hover {
  background: #FFFFFF;              /* solid white background */
  border-color: #FFFFFF;            /* white border */
  color: #000000;                   /* BLACK text — maximum contrast */
}

/* Know More */
.know-more-btn {
  display: block;
  margin: 64px auto 0;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 20px;                     /* INCREASED size per request */
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 6px;
  cursor: pointer;
  text-transform: none;
  transition: color 200ms ease, transform 200ms ease;
}
.know-more-btn:hover { color: #FF5931; }

/* Responsive */
@media (max-width: 1024px) {
  .services-cards { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .service-card { height: 380px; }
  .know-more-btn { margin-top: 48px; }
}
@media (max-width: 768px) {
  .services-section { padding: 60px 20px; }
  .services-title { font-size: 32px; }
  .service-card { height: 340px; padding: 32px 24px; }
  .service-title { font-size: 20px; }
  .service-desc { font-size: 14px; }
  .know-more-btn { margin-top: 40px; }
}

/* ==========================================================================
   SECTION 7 — FOUNDERS
   ========================================================================== */
/* ====== FOUNDERS SECTION ====== */
.founders-section, .founders {
  background: #000000;
  min-height: 100vh;
  width: 100%;
  padding: 112px 48px 80px 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  box-shadow: 0 -32px 64px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 10;
  margin-top: -32px;
}
.founders-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.founders-title, .founders__title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}
.founders-grid-wrap {
  position: relative;
  width: 100%;
  padding-top: 24px;
}
.founders-dashed-lines {
  position: absolute;
  top: -48px;
  left: 0;
  width: 100%;
  height: calc(100% + 96px);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  /* Fade all 4 ends of every line — horizontal + vertical */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
}

.founders-dashed-lines line {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1px;
  stroke-dasharray: 4px, 5px;
}
.founders-cards, .founders__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
  align-items: stretch;          /* all cards same height */
}

.founder-card {
  position: relative;
  background: rgba(178, 28, 1, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 32px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Card NEVER moves on hover */
  transition: box-shadow 300ms ease;
}
.founder-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);     /* only shadow, NO transform */
}

.founder-card-top, .founder-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.founder-role, .founder-card__designation {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  letter-spacing: 0.04em;
}
.founder-photo-wrap, .founder-card__photo-frame {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  background: linear-gradient(135deg, #B21C01 0%, #FF5931 100%);
  flex-shrink: 0;
  /* Only the image square scales on hover */
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms ease;
  transform-origin: center center;
}
.founder-photo-wrap img, .founder-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
.founder-photo-wrap.is-placeholder, .founder-card__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', sans-serif;
  font-weight: 900;
  color: #FFFFFF;
  font-size: 32px;
}
.founder-card:hover .founder-photo-wrap,
.founder-card:hover .founder-card__photo-frame {
  transform: scale(1.08);                /* image scales up 8% */
  box-shadow: 0 8px 24px rgba(255, 89, 49, 0.3);
}

.founder-name, .founder-card__name {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  text-transform: none;
}
.founder-aka, .founder-card__alias {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: -8px;
}
.founder-bio, .founder-card__bio {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
  text-transform: none;
  flex-grow: 1;
}

/* Founder Social Icons */
.founder-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.founder-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
}
.founder-social-btn:hover {
  background: rgba(255, 89, 49, 0.25);
  color: #FFFFFF;
  border-color: rgba(255, 89, 49, 0.5);
  box-shadow: 0 4px 14px rgba(255, 89, 49, 0.25);
  /* No up-down movement */
}
.founder-social-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Founders Section Bottom Read More CTA */
.founders-cta-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}
.founders-readmore-btn, .founder-readmore, .founder-card__read-more {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: color 200ms ease;
  text-transform: none;
  cursor: pointer;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
}
.founders-readmore-btn:hover, .founder-readmore:hover, .founder-card__read-more:hover {
  color: #FF5931;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
  .founders-cards, .founders__grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .founders-dashed-lines { display: none; }
}
@media (max-width: 768px) {
  .founders-section, .founders { padding: 80px 20px 60px 20px; }
  .founders-title, .founders__title { font-size: 36px; }
  .founder-card { padding: 24px; min-height: auto; }
}

/* ==========================================================================
   SECTION TRANSITION: FOUNDERS (BLACK) → CTA (DEEP RED)
   ========================================================================== */
.section-transition-founders-cta {
  width: 100%;
  height: 180px;
  /* Scrim gradient: black with decreasing alpha over a deep-red base.
     Uses 13 stops with ease-out curve to eliminate visible banding. */
  background-color: #B21C01;       /* deep red base (palette color) */
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1)     0%,
    rgba(0, 0, 0, 0.738) 19%,
    rgba(0, 0, 0, 0.541) 34%,
    rgba(0, 0, 0, 0.382) 47%,
    rgba(0, 0, 0, 0.278) 56.5%,
    rgba(0, 0, 0, 0.194) 65%,
    rgba(0, 0, 0, 0.126) 73%,
    rgba(0, 0, 0, 0.075) 80.2%,
    rgba(0, 0, 0, 0.042) 86.1%,
    rgba(0, 0, 0, 0.021) 91%,
    rgba(0, 0, 0, 0.008) 95.2%,
    rgba(0, 0, 0, 0.002) 98.2%,
    rgba(0, 0, 0, 0)     100%
  );
  margin: 0 0 -1px 0;              /* overlap CTA top by 1px to eliminate seam */
  padding: 0;
  border: none;
  pointer-events: none;
  display: block;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section-transition-founders-cta {
    height: 120px;
  }
}

/* ==========================================================================
   SECTION 8 — CTA
   ========================================================================== */
.cta-section {
  background: #000000;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 48px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  box-shadow: 0 32px 64px rgba(178, 28, 1, 0.4);
  margin-bottom: -32px;
  margin-top: 0;
  z-index: 1;
}

.cta-container, .cta-section__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-headline, .cta-section__headline {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
  text-transform: none;
  max-width: 800px;
}

.cta-subtext, .cta-section__subtext {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  text-align: center;
  max-width: 600px;
  margin: 24px auto 0 auto;
  text-transform: none;
}

.cta-button, .cta-section__btn {
  display: inline-block;
  margin: 48px auto 0 auto;
  padding: 18px 40px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
  letter-spacing: -0.01em;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.cta-button:hover, .cta-section__btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .cta-section { padding: 80px 20px; min-height: 100vh; }
  .cta-headline, .cta-section__headline { font-size: 32px; }
  .cta-subtext, .cta-section__subtext { font-size: 16px; }
  .cta-button, .cta-section__btn { padding: 14px 32px; font-size: 14px; }
}

/* ==========================================================================
   SECTION 9 — FOOTER (new spec)
   ========================================================================== */

/* ── Outer wrapper: white top fading to orange at bottom ── */
.footer-section {
  background: linear-gradient(to bottom,
    #FFFFFF 0%,
    #FFFFFF 50%,
    #FFB658 100%
  );
  /* var(--white) 0%, var(--white) 60%, var(--orange-light) 100% */
  min-height: 100vh;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-end;          /* foreground pushed to the bottom */
  justify-content: center;
  overflow: hidden;               /* prevent any white peeking out */
}

/* ── Foreground container with gradient extending to bottom edge ── */
.footer-foreground,
.footer-card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  overflow: hidden;
  background-image: url('images-for-landing-page/gradient 2.png');
  background-image: url('images-for-landing-page/gradient2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #B21C01;      /* fallback color */
  box-shadow: 0 -32px 64px rgba(178, 28, 1, 0.4);
  padding: 80px 64px 0 64px;
  padding-bottom: 0;
  box-sizing: border-box;
  min-height: 80vh;               /* fill most of section height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-foreground.no-image,
.footer-card.no-image {
  background: linear-gradient(135deg, #B21C01 0%, #FF5931 40%, #FF9041 70%, #FFB658 100%);
}

/* Subtle glow overlay ensuring smooth rich tones and text readability */
.footer-card::before,
.footer-foreground::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 89, 49, 0.15) 0%, rgba(0, 0, 0, 0.25) 80%);
  pointer-events: none;
  z-index: 0;
}
.footer-foreground > *,
.footer-card > * { position: relative; z-index: 1; }

/* ── Main content grid: left | center | right ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  align-items: center;
  flex: 1;
  padding-bottom: 24px;
}

/* ── S8UL Content House block (in right column above enquiry) ── */
.footer-s8ul-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-bottom: 24px;
}

.s8ul-logo-wrap {
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer-s8ul-logo,
.s8ul-logo {
  width: 80px;
  max-width: 80px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-s8ul-logo:hover,
.s8ul-logo:hover {
  transform: scale(1.05);
}

.s8ul-logo-fallback {
  font-family: var(--font);
  font-weight: 900;
  font-size: 24px;
  color: var(--white);
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.s8ul-caption {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-transform: none;
  margin-top: 8px;
  white-space: nowrap;
  text-align: right;
}

/* ── Left column: nav links ── */
.footer-col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav__link {
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
  letter-spacing: -0.01em;
}
.footer-nav__link:hover { opacity: 0.75; }

/* ── Center column: logo + address + socials + divider + signature ── */
.footer-col--center,
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo-wrap {
  margin-bottom: 18px;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.footer-logo {
  height: 200px;
  width: auto;
  display: block;
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

.footer-logo-fallback {
  font-family: var(--font);
  font-weight: 900;
  font-size: 72px;
  color: var(--white);
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  transform-style: preserve-3d;
}

.footer-address {
  font-family: var(--font);
  font-weight: 300;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto;
}

.footer-address__label {
  font-weight: 500;
  color: #FFFFFF;
  display: inline-block;
  margin-bottom: 2px;
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.footer-social:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 15px;
  height: 15px;
  fill: #FFFFFF;
}

.footer-divider {
  display: none;                   /* remove the dotted line */
}

.footer-bottom-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  margin: 24px 0 16px 0;
}

/* ── Bottom bar: 3 items on one line, above the divider ── */
.footer-bottom-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  width: 100%;
  margin-top: 32px;
  padding: 0;
}

.footer-copyright {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
  text-align: left;
  justify-self: start;
  margin: 0;
}

.footer-signature {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: none;
  text-align: center;
  justify-self: center;
  margin: 0;
}
.footer-heart {
  color: #FF5931;
}
.footer-signature-link,
.footer-signature-link,
.footer-signature__link {
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease, opacity var(--t-fast) var(--ease);
}
.footer-signature-link:hover,
.footer-signature__link:hover {
  color: #FF5931;
  opacity: 0.85;
}

.footer-privacy,
.footer-enquiry-privacy {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-transform: none;
  transition: color 200ms ease;
  text-align: right;
  justify-self: end;
}
.footer-privacy:hover,
.footer-enquiry-privacy:hover {
  color: #FF5931;
}

/* ── Right column: S8UL block (top) + Enquiry (bottom) ── */
.footer-col--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  justify-content: center;
}

.footer-enquiry-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 10px;
}

.footer-enquiry-heading {
  font-family: var(--font);
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.footer-enquiry-email {
  font-family: var(--font);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer-enquiry-email:hover { color: #FFFFFF; text-decoration: underline; }

/* ── Move "8BITCreatives" wordmark to be INSIDE the gradient container, centered, and WHITE ── */
.footer-wordmark {
  position: relative;              /* in normal flow at bottom of flex column */
  font-size: clamp(80px, 9.71vw, 186.5px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  text-transform: none;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: #FFFFFF;
  width: calc(100% + 128px);
  margin-left: -64px;
  margin-right: -64px;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 0;
  padding-bottom: 0;                        /* NO padding below */
  margin-top: 16px;
  margin-bottom: 0;                        /* NO margin below */
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.footer-wordmark:hover,
.footer-wordmark:focus,
.footer-wordmark:active {
  text-decoration: none;
  color: #FFFFFF;
}
.wordmark-bold {
  font-family: 'Geist', sans-serif;
  font-weight: 900;
  color: #FFFFFF;                  /* WHITE, not black */
  letter-spacing: normal;
}
.wordmark-thin {
  font-family: 'Geist', sans-serif;
  font-weight: 100;
  color: #FFFFFF;                  /* WHITE, not black */
  margin-left: 4px;
  letter-spacing: normal;
}
.footer-wordmark__bold { font-weight: 900; color: #FFFFFF; }
.footer-wordmark__thin { font-weight: 100; color: #FFFFFF; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-foreground, .footer-card { padding: 48px 32px 32px; border-top-left-radius: 36px; border-top-right-radius: 36px; min-height: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; align-items: center; }
  .footer-col--left { align-items: center; }
  .footer-col--right { align-items: center; text-align: center; }
  .footer-s8ul-block { align-items: center; text-align: center; margin-bottom: 20px; }
  .s8ul-logo-wrap { justify-content: center; }
  .s8ul-caption { text-align: center; }
  .footer-enquiry-wrap { align-items: center; text-align: center; }
  .footer-wordmark { font-size: clamp(40px, 10vw, 72px); }
}

@media (max-width: 768px) {
  .footer-foreground, .footer-card { border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 36px 20px 24px; }
  .footer-logo { height: 140px; }
  .footer-s8ul-logo, .s8ul-logo { width: 70px; max-width: 70px; height: auto; }
  .footer-wordmark { font-size: clamp(32px, 12vw, 56px); }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  .nav-brand-topleft {
    left: 32px;
    top: 20px;
  }
  .nav-brand-topleft__img {
    height: 36px;
  }
  .nav-cta-topright {
    right: 20px;
    top: 20px;
    padding: 10px 18px;
    font-size: 12px;
  }
  .navbar-pill {
    max-width: 580px;
    padding: 10px 18px;
  }
  .navbar__links a {
    font-size: 12px;
    padding: 4px 5px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 48px;
    padding: 140px 32px 80px;
  }
  .hero-left {
    align-items: center;
    transform: none;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .canvas-container {
    max-width: 380px;
  }

  .founders__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .nav-brand-topleft {
    left: 20px;
    top: 18px;
  }
  .nav-brand-topleft__img {
    height: 32px;
  }
  .nav-cta-topright {
    right: 16px;
    top: 18px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .navbar-pill {
    top: 16px;
    height: 44px;
    padding: 8px 14px;
    max-width: 60px;
  }
  .navbar__links {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }

  #hero { min-height: 90vh; }
  .hero-content {
    padding: 120px 20px 60px;
  }
  .canvas-container { max-width: 280px; }


  /* About mobile */
  .about-marquee, .marquee-strip, .marquee-container { height: 72px; padding: 8px 16px; }
  .marquee-locked, .marquee-locked-title {
    padding: 0 12px 0 0;
    gap: 8px;
    font-size: 11px;
    max-width: none;
  }
  .marquee-line { font-size: 10px; line-height: 1.2; }
  .marquee-headline { font-size: 11px; white-space: nowrap; }
  .marquee-item { font-size: 12px; padding: 0 12px; }

  .about-eclipse-section { min-height: 520px; padding-bottom: 40px; }
  .eclipse-wrap, .about-eclipse__clip {
    width: 100%;
    max-width: 480px;
    height: 320px;
  }
  .eclipse-rotator, .eclipse-rotor, .about-eclipse__rotor {
    transform: scale(0.65);
    transform-origin: 50% 50%;
  }
  .about-content {
    padding: 40px 16px 0;
  }
  .about-cta-wrap {
    margin-top: 240px;
  }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .stat-col { padding: 0; border: none; }
  .stat-col + .stat-col { border: none; padding-left: 0; }
  .about-stats__container { padding: 0 20px; }
  .about-stats { padding: 40px 0 48px; }

  .creators__gallery {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .creator-card {
    flex: 0 0 220px;
    scroll-snap-align: center;
  }
  .creator-card--far-left,
  .creator-card--near-left,
  .creator-card--center,
  .creator-card--near-right,
  .creator-card--far-right {
    transform: none !important;
    opacity: 1 !important;
  }

  .case-studies__card {
    margin: 0 12px;
    padding: 48px 24px;
    border-radius: 32px;
  }
  .case-studies__grid { grid-template-columns: 1fr; gap: 36px; }
  .case-studies__note { align-self: flex-start; text-align: left; }

  .founders {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    padding: 80px 0 64px;
  }
  .founders__grid { grid-template-columns: 1fr; }

  .cta-section {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    padding: 80px 0 64px;
  }

  .footer__nav-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer__enquiry { text-align: center; }
  .footer__enquiry-note { margin-right: auto; }
  .footer__enquiry-email, .footer__enquiry-privacy { display: block; }
}

/* ==========================================================================
   Back-to-Home Capsule Pill (Shared Component across Subpages)
   ========================================================================== */
.back-home {
  position: fixed;
  top: 32px;
  left: 36px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.back-home__arrow {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}
body.light-page .back-home,
.back-home--on-light {
  border-color: rgba(20, 18, 16, 0.20);
  background: rgba(255, 255, 255, 0.7);
  color: #141210;
}
@media (hover: hover) and (pointer: fine) {
  .back-home:hover {
    background: #FFFFFF;
    color: #0A0A0A;
    border-color: #FFFFFF;
  }
  body.light-page .back-home:hover,
  .back-home--on-light:hover {
    background: #141210;
    color: #FFFFFF;
    border-color: #141210;
  }
}
@media (max-width: 1279px) {
  .back-home {
    top: 20px;
    left: 20px;
    font-size: 12px;
    padding: 6px 14px 6px 10px;
  }
  .back-home__arrow {
    font-size: 13px;
  }
}



.hero-8bit-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
  contain: layout paint;
}
.hero-8bit-bg__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #141210;
  opacity: 0.08;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.hero-8bit-bg__col > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.hero-8bit-bg__col--down { animation: heroBgScrollDown 24s linear infinite; }
.hero-8bit-bg__col--up   { animation: heroBgScrollUp 24s linear infinite; }

/* Off-screen performance optimization: pause CSS animation when scrolled out of view */
.hero-8bit-bg.is-paused .hero-8bit-bg__col--down,
.hero-8bit-bg.is-paused .hero-8bit-bg__col--up,
.esports-section__bg.is-paused .bg__col--down,
.esports-section__bg.is-paused .bg__col--up,
.page-8bit-bg.is-paused .page-8bit-bg__col--down,
.page-8bit-bg.is-paused .page-8bit-bg__col--up {
  animation-play-state: paused !important;
}

@keyframes heroBgScrollDown {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes heroBgScrollUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-8bit-bg__col--down, .hero-8bit-bg__col--up { animation: none; transform: none; }
}


.cta-section .gradient__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.cta__top-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 20%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.2) 85%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 767px) {
  .cta__top-fade { height: 180px; }
}

/* ============================================================
   Back to Top Button
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 400ms ease-out,
              visibility 0ms 400ms,
              transform 400ms ease-out,
              border-color 200ms ease-out;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 400ms ease-out,
              visibility 0ms 0ms,
              transform 400ms ease-out,
              border-color 200ms ease-out;
}

.back-to-top:hover {
  border-color: rgba(255, 255, 255, 0.30);
}
.back-to-top:hover .back-to-top__arrow {
  transform: translateY(-3px);
  transition: transform 200ms ease-out;
}

.back-to-top__arrow {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.70);
  transition: transform 200ms ease-out, opacity 150ms ease-out;
  display: block;
}

.back-to-top.is-launching .back-to-top__arrow {
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease-out;
}

@media (max-width: 767px) {
  /* G9: Back to top */
  .back-to-top {
    bottom: 12px !important;
    right: 20px;
    width: 44px;
    height: 44px;
  }

  /* Back to home capsule - Below mobile navbar */
  .back-home {
    top: 58px !important;
    left: 16px !important;
  }

  /* G1: NAVBAR - Mobile open horizontal capsule pill */
  .navbar,
  .navbar-pill,
  .navbar.navbar-on-hero,
  .navbar-pill.navbar-on-hero {
    top: 16px !important;
    height: 38px !important;
    max-width: calc(100% - 16px) !important;
    width: max-content !important;
    padding: 3px 8px !important;
    justify-content: center !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .navbar__links,
  .navbar nav ul,
  .navbar .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .navbar__links::-webkit-scrollbar {
    display: none !important;
  }
  .navbar__links li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .navbar__links a {
    font-family: 'Geist', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
  }
  .navbar__links a:hover,
  .navbar__links a.is-active {
    color: #FFFFFF !important;
  }
  .navbar-pill__indicator {
    display: none !important;
  }
  .navbar__hamburger {
    display: none !important;
  }
  .navbar__mobile-drawer {
    display: none !important;
  }
  .nav-brand-topleft,
  .nav-cta-topright {
    display: none !important;
  }

  /* G2: HOVER GATING (touch devices) */
  .creator-card:hover,
  .service-card:hover,
  .kpi-card:hover,
  .staff-card:hover,
  .founder-card:hover,
  .btn-obsidian:hover,
  .btn-primary:hover,
  .btn-about:hover,
  .nav-brand-topleft:hover .nav-brand-topleft__img {
    transform: none !important;
    box-shadow: none !important;
  }
  .hero-logo-tilt {
    transform: none !important;
  }

  /* G3: GRID LAYOUTS — STACK TO 1 COLUMN */
  .hero-content {
    flex-direction: column !important;
  }
  .hero-cta-group {
    flex-direction: column !important;
    width: 100% !important;
  }
  .hero-cta-group .btn-obsidian {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .founders-cards,
  .founders__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .founders-dashed-lines {
    display: none !important;
  }
  .case-body-row {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .case-image-column {
    width: 100% !important;
  }
  .services-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .esports-section__card__body {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* G4 & G5: FIXED WIDTHS & REDUCED PADDING/SPACING */
  .container {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-section {
    padding: 90px 16px 36px !important;
    min-height: auto !important;
  }
  .hero-foreground {
    min-height: auto !important;
    height: auto !important;
    border-radius: 28px !important;
    padding: 24px 20px 24px !important;
    position: relative !important;
  }
  /* === MOBILE HERO LOGO FIX — bigger + moved up === */
  .hero-content {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero-left {
    position: relative !important;
    width: 100% !important;
  }

  .hero-right {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin-top: -32px !important;
    order: 0 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .canvas-container {
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .hero-logo-tilt {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    perspective: none !important;
  }

  .hero-logo-tilt img,
  .hero-logo-img,
  #heroLogoImg {
    width: 100% !important;
    max-width: 240px !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
  }
  /* === END MOBILE HERO LOGO FIX === */
  .hero-game-area {
    padding: 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
  }
  .hero-game-area canvas,
  #heroDinoCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* G6: TYPOGRAPHY AT MOBILE */
  .hero-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  .hero-sub {
    font-size: 13px !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
  }
  .hero-cta-group {
    margin-top: 0 !important;
    gap: 12px !important;
  }

  /* Case Studies */
  .case-studies-section {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 16px !important;
  }
  .case-studies-foreground {
    min-height: auto !important;
    height: auto !important;
    padding: 24px 16px !important;
    border-radius: 28px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .case-studies-container {
    padding: 0 !important;
    width: 100% !important;
  }
  .case-title {
    font-size: 28px !important;
    margin: 0 0 16px 0 !important;
  }
  .case-divider-row {
    margin: 0 0 24px 0 !important;
    gap: 12px !important;
  }
  .case-disclaimer {
    white-space: normal !important;
    font-size: 11px !important;
  }
  .case-body-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .case-list-column {
    display: contents !important;
  }
  .case-list {
    order: 1 !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .case-item {
    order: 1 !important;
    padding: 12px 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 16px !important;
  }
  .case-text {
    font-size: 18px !important;
  }
  .case-num {
    font-size: 12px !important;
  }
  .case-image-column {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }
  .case-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 16px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    background: #111111 !important;
    display: block !important;
  }
  .case-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
  }
  .case-caption {
    align-items: center !important;
    text-align: center !important;
  }
  .case-caption-title {
    font-size: 14px !important;
  }
  .case-caption-sub {
    font-size: 12px !important;
  }
  .show-all-link {
    order: 3 !important;
    align-self: center !important;
    margin: 16px auto 0 !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  /* Services */
  .services-section {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 24px !important;
  }
  .services-container {
    padding: 0 !important;
    width: 100% !important;
  }
  .services-title-band {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    gap: 12px !important;
  }
  .services-title {
    font-size: 24px !important;
  }
  .services-cards {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .service-card {
    height: auto !important;
    min-height: auto !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .service-card-content {
    gap: 8px !important;
    transform: none !important;
  }
  .service-title {
    font-size: 18px !important;
  }
  .service-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }
  .service-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    font-size: 12px !important;
    min-height: auto !important;
    padding: 8px 16px !important;
    margin-top: 14px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 5 !important;
    cursor: pointer !important;
  }
  .know-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    opacity: 1 !important;
    color: #000000 !important;
    text-decoration: underline !important;
  }

  /* Founders Mobile */
  .founders-section {
    padding: 40px 0 32px 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
  .founders-container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .founders-title {
    font-size: 28px !important;
    padding: 0 20px !important;
    margin-bottom: 20px !important;
  }
  .founders-grid-wrap {
    width: 100% !important;
    overflow: hidden !important;
  }
  .founders-cards,
  .founders__grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 20px !important;
    gap: 16px !important;
    padding: 0 20px 8px 20px !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }
  .founders-cards::-webkit-scrollbar {
    display: none !important;
  }
  .founder-card {
    min-width: 280px !important;
    max-width: 280px !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
    min-height: auto !important;
    height: auto !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y !important;
  }
  .founder-card-top {
    margin-bottom: 4px !important;
  }
  .founder-photo-wrap {
    width: 80px !important;
    height: 80px !important;
    border-radius: 14px !important;
  }
  .founder-name {
    font-size: 18px !important;
  }
  .founder-aka {
    font-size: 13px !important;
    margin-top: -4px !important;
  }
  .founder-bio {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .founder-socials {
    gap: 8px !important;
    padding-top: 4px !important;
  }
  .founder-social-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .founder-social-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* CTA / Contact Section Mobile */
  .cta-section {
    min-height: auto !important;
    height: auto !important;
    padding: 70px 24px !important;
    margin-bottom: 0 !important;
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
    contain-intrinsic-size: auto 360px !important;
  }
  .cta-section .gradient__canvas,
  .gradient__canvas {
    height: 100% !important;
    max-height: 450px !important;
  }
  .cta__top-fade {
    height: 60px !important;
    z-index: 1 !important;
  }
  .cta-container,
  .cta-section__inner {
    max-width: 100% !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  .cta-headline,
  .cta-section__headline {
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .cta-subtext,
  .cta-section__subtext {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 16px auto 0 !important;
    max-width: 320px !important;
    text-align: center !important;
  }
  .cta-button,
  .cta-section__btn {
    font-size: 13px !important;
    padding: 10px 24px !important;
    margin: 24px auto 0 !important;
    width: auto !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  /* Footer Section Mobile */
  .footer-section {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 16px 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .footer-foreground,
  .footer-card {
    min-height: auto !important;
    height: auto !important;
    padding: 32px 20px 24px !important;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .footer-grid {
    display: contents !important;
  }
  .footer-col {
    display: contents !important;
  }
  .footer-logo-wrap {
    order: 1 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .footer-logo,
  .footer-logo img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    filter: none !important;
  }
  .footer-wordmark {
    order: 2 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: -8px auto 0 !important;
    width: auto !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    display: block !important;
    padding: 0 !important;
  }
  .footer-wordmark__bold, .wordmark-bold {
    font-size: 20px !important;
  }
  .footer-wordmark__thin, .wordmark-thin {
    font-size: 20px !important;
  }
  .footer-nav {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px 0 !important;
    width: 100% !important;
  }
  .footer-nav__link {
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  .footer-s8ul-block {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 4px 0 !important;
  }
  .s8ul-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .footer-s8ul-logo,
  .s8ul-logo,
  .footer-s8ul-logo img {
    width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
  }
  .s8ul-caption {
    font-size: 11px !important;
    text-align: center !important;
    margin-top: 6px !important;
  }
  .footer-address {
    order: 5 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 4px auto !important;
    max-width: 280px !important;
  }
  .footer-address__label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  .footer-enquiry-wrap {
    order: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin: 4px 0 !important;
  }
  .footer-enquiry-heading {
    font-size: 12px !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }
  .footer-enquiry-email {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
  }
  .footer-socials {
    order: 7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 4px 0 !important;
  }
  .footer-social {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  .footer-social svg {
    width: 18px !important;
    height: 18px !important;
  }
  .footer-bottom-bar {
    order: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    width: 100% !important;
  }
  .footer-copyright {
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    justify-self: center !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
  }
  .footer-signature {
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    justify-self: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;
  }
  .footer-privacy,
  .footer-enquiry-privacy {
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    justify-self: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: underline !important;
    margin: 0 !important;
  }
  .footer-bottom-divider {
    display: none !important;
  }

  /* P2: ABOUT RED ECLIPSE MOBILE */
  .about-eclipse__clip,
  .eclipse-wrap {
    display: none !important;
  }
  .about-eclipse-mobile {
    display: block !important;
    background: #FF5931 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    color: #FFFFFF !important;
    margin: 0 16px 14px !important;
    box-sizing: border-box !important;
  }
  .about-eclipse-mobile p {
    margin: 0 !important;
    font-family: 'Geist', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #FFFFFF !important;
  }
  .about-eclipse-section {
    min-height: auto !important;
    height: auto !important;
    padding: 36px 16px 36px !important;
  }
  .about-content {
    padding: 0 16px !important;
  }
  .about-lead,
  .about-duplicate-text {
    display: none !important;
  }
  .about-lead br,
  .about-sub br {
    display: none !important;
  }
  .about-sub {
    font-size: 14px !important;
    margin-top: 0 !important;
    line-height: 1.5 !important;
  }
  .about-btn-wrap {
    position: static !important;
    transform: none !important;
    margin: 20px auto 0 !important;
    text-align: center !important;
  }
  /* About Stats Mobile: Compact 2x2 Grid */
  .about-stats {
    padding: 32px 20px !important;
    min-height: auto !important;
    height: auto !important;
  }
  .about-stats__container {
    padding: 0 8px !important;
    max-width: 100% !important;
  }
  .about-stats__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .stat-col {
    padding: 0 !important;
    text-align: left !important;
  }
  .stat-num,
  .about-stats__value {
    font-size: 28px !important;
    line-height: 1 !important;
  }
  .stat-divider {
    margin: 8px 0 !important;
  }
  .stat-label,
  .about-stats__label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .stat-desc {
    font-size: 10px !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
  }
  .marquee-locked-title {
    display: none !important;
  }

  /* P3: CREATORS COVERFLOW MOBILE */
  .creators-section {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 0 32px 0 !important;
  }
  .creators-container {
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  .creators-title {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }
  .creators-divider {
    margin-bottom: 24px !important;
  }
  .creators-carousel-wrap {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .coverflow-frame {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 12.5vw !important;
    gap: 0 !important;
    padding: 0 !important;
    height: 310px !important;
    width: 100% !important;
    perspective: none !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
  }
  .coverflow-frame::-webkit-scrollbar {
    display: none !important;
  }
  .coverflow-stage {
    display: flex !important;
    flex-direction: row !important;
    width: max-content !important;
    gap: 16px !important;
    padding: 0 12.5vw !important;
    position: static !important;
    transform: none !important;
    transform-style: flat !important;
    box-sizing: border-box !important;
  }
  .creator-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    min-width: 75vw !important;
    max-width: 75vw !important;
    width: 75vw !important;
    height: 300px !important;
    scroll-snap-align: center !important;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    touch-action: pan-x pan-y !important;
    pointer-events: auto !important;
  }
  .creator-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    display: block !important;
  }
  .creator-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    background: #0A0A0A !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    color: #FFFFFF !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 25 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .creator-nav-btn--prev {
    left: 8px !important;
  }
  .creator-nav-btn--next {
    right: 8px !important;
  }
  .creators-caption {
    position: static !important;
    min-height: auto !important;
    margin-top: 14px !important;
  }
  .caption-name {
    font-size: 22px !important;
  }
  .caption-alias {
    font-size: 13px !important;
  }
  .caption-stats {
    margin-top: 10px !important;
    width: 160px !important;
  }
  .view-all-btn {
    margin-top: 14px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
  }

  /* Esports Section Mobile */
  .esports-section {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    padding: 40px 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .esports-section::after {
    height: 60px !important;
  }
  .esports-section__card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 20px 16px !important;
    border-radius: 24px !important;
  }
  .esports-section__card__header {
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
  }
  .esports-section__card__title {
    font-size: 28px !important;
  }
  .esports-section__card__body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    min-height: auto !important;
  }
  .esports-section__text-col {
    padding-right: 0 !important;
  }
  .esports-section__text-col__about {
    font-size: 20px !important;
    margin: 0 0 12px 0 !important;
  }
  .esports-section__text-col__p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
  }
  .esports-section__cta-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  .esports-section__cta {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }
  .esports-section__cta span {
    padding-bottom: 2px !important;
  }
  .esports-section__cta svg {
    width: 9px !important;
    height: 14px !important;
    top: -1px !important;
    left: 0 !important;
  }
  .esports-section__image-col {
    transform: none !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  .esports-section__image-col__img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
  }
  .esports-section__image-col__glow {
    inset: -28px !important;
  }

  /* 8BIT Columns Mobile Layout */
  .hero-8bit-bg {
    grid-template-columns: repeat(40, 1fr) !important;
  }
  .esports-section__bg {
    grid-template-columns: repeat(40, 1fr) !important;
  }
}

/* ============================================================
   Formspree Success and Error Containers
   ============================================================ */
.form-success,
.form-error {
  padding: 32px;
  border-radius: 14px;
  margin-top: 24px;
  background: #0A0A0A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.form-success h3,
.form-error h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 12px 0;
  color: #FFFFFF;
}

.form-success p,
.form-error p {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
  color: rgba(255, 255, 255, 0.85);
}

.form-success a,
.form-error a {
  color: #FFFFFF;
  text-decoration: underline;
}

.form-success-dismiss,
.form-error-dismiss {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 200ms ease;
}

.form-success-dismiss:hover,
.form-error-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
}

.form-success[hidden],
.form-error[hidden] {
  display: none !important;
}

/* === SCROLL-INTERACTION FIX — preserve pointer events during scroll === */
body, html {
  pointer-events: auto !important;
}
a, button, [role="button"], input, textarea, select,
.creator-card, .case-item-link, .founder-card, .stat-link,
.btn-primary, .btn-secondary, .btn-about, .know-more-btn,
.show-all-link, .underline, .esports-section__cta,
.footer-social, .footer-nav__link, .footer-wordmark,
.eclipse-char-item, .eclipse-physics-char, .coverflow-frame, .coverflow-card {
  pointer-events: auto !important;
}
/* === END SCROLL-INTERACTION FIX === */