/* =====================================================
   RESET + BASE
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0B0F14;
  color: #E5E7EB;
  padding-top: 88px;
  overflow-x: hidden;
}

/* =====================================================
   BACKGROUND V2 — FRACTIONAL ORBS (FRAMER STYLE)
===================================================== */

.bg-base {
  position: fixed;
  inset: 0;
  background: #0B0F14;
  z-index: -5;
}

/* =====================================================
   NAVIGATION (CLEAN, NO UNDERLINES EVER)
===================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 1000;
  --mobile-nav-open-bg: rgba(14, 18, 27, 0.96);
  --scrolled-nav-bg: linear-gradient(180deg, rgba(14, 18, 27, 0.96), rgba(20, 26, 38, 0.96));
  background: transparent;
  transition: background 280ms ease, height 280ms ease;
}

.nav.scrolled {
  height: 64px;
  background: var(--scrolled-nav-bg) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Inner layout */
.nav-inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* ===============================
   BRAND
================================ */

.nav-brand {
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  position: relative;
  z-index: 1003;
  padding-right: 8px;
}

.nav-logo {
  width: 50px;
  height: auto;
  display: block;
}

.nav-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: transform .28s ease, opacity .28s ease;
}

/* slide-left & disappear */
.nav.scrolled .nav-name {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

/* ===============================
   CENTER (HERO ONLY)
================================ */

.nav-center {
  display: flex;
  justify-content: center;
  transform: translateX(-80px);
  position: relative;
  z-index: 1001;
}

.nav-pill {
  display: flex;
  gap: 22px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
}

.nav-pill a {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

/* hide center on scroll */
.nav.scrolled .nav-center {
  display: none;
}

/* ===============================
   RIGHT (SCROLL + MOBILE)
================================ */

.nav-right {
  justify-self: end;
  transform: translateX(-20px);
}

.nav-right {
  display: none;
  gap: 28px;
}

.nav-right a {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.nav-right a:hover {
  color: #fff;
}
@media (min-width: 901px) {
  .nav.scrolled .nav-right {
    display: flex;
  }
}

/* ===============================
   HAMBURGER
================================ */
.nav-toggle {
  display: none;
  justify-self: end;
  width: 44px;
  height: 56px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1002;
  transition: transform 200ms ease;
}

.nav-toggle span {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: #E5E7EB;
  position: absolute;
  transition: transform 260ms cubic-bezier(.4,0,.2,1), opacity 180ms ease, width 220ms ease;
}

.nav-toggle span:nth-child(1) {
  transform: translateY(-6px);
}

.nav-toggle span:nth-child(3) {
  transform: translateY(6px);
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  body {
    padding-top: 60px;
  }

  .nav {
    height: 60px;
    transition: background 220ms ease;
    background: var(--scrolled-nav-bg) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  .nav.menu-open {
    background: var(--scrolled-nav-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(16px) !important;
  }

  .nav.scrolled {
    height: 64px;
  }

  .nav-inner {
    padding: 0 20px;
  }

  .nav-logo {
    width: 38px;
  }

  .nav-name {
    font-size: 15px;
  }

  /* no pill on mobile */
  .nav-center {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    height: 48px;
  }

  .nav-toggle.active {
    transform: rotate(90deg);
    background: none;
    box-shadow: none;
  }

  /* mobile menu - clean solid panel */
  .nav-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 0 0 22px 22px;
    background: var(--mobile-nav-open-bg);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 220ms ease;
    z-index: 1001;
  }

  .nav.scrolled .nav-right {
    top: 100%;
  }

  .nav-right.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-right a {
    display: block;
    padding: 16px 20px;
    color: #fff;
    background: var(--mobile-nav-open-bg);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateX(14px);
    transition: color 180ms ease, background 180ms ease, padding-left 180ms ease, opacity 260ms ease, transform 280ms cubic-bezier(.2,.9,.2,1);
  }

  .nav-right a:hover {
    background: var(--mobile-nav-open-bg);
    color: #fff;
    padding-left: 24px;
  }

  .nav-right a:last-child {
    border-bottom: none;
  }

  .nav-right.open a {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-right.open a:nth-child(1) { transition-delay: 30ms; }
  .nav-right.open a:nth-child(2) { transition-delay: 70ms; }
  .nav-right.open a:nth-child(3) { transition-delay: 110ms; }
  .nav-right.open a:nth-child(4) { transition-delay: 150ms; }
  .nav-right.open a:nth-child(5) { transition-delay: 190ms; }

  /* Do not kill brand on scroll */
  .nav.scrolled .nav-name {
    opacity: 1;
    transform: none;
  }

  /* Ensure nav is visible on scroll */
  .nav.scrolled {
    background: var(--scrolled-nav-bg) !important;
  }
}

/* =====================================================
   HERO (ALIGNMENT FIXED PERMANENTLY)
===================================================== */
.hero {
  position: relative;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      800px 500px at 50% 40%,
      rgba(151,65,235,0.35),
      rgba(20,15,30,0.85) 55%,
      #0B0F14 75%
    );
}

.hero-new {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 60px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hero-new {
    padding-top: 150px;
    align-items: flex-start;
  }
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-filters {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero,
.inner-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
}


.hero-content h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
}

.hero-content h1 span {
  color: #9741EB;
}

.hero-content p {
  margin-top: 24px;
  font-size: 18px;
  color: #9CA3AF;
}


/* CTA — SLIDING INNER MOTION */
.hero-cta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 20px;
  transform: translateX(-2px);
}
@media (max-width: 900px) {
  .hero-cta {
    transform: none;
  }
}

.cta-pill {
  position: relative;
  padding: 4px;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
}

.cta-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#5A00B2,#8B5CF6,#5A00B2);
  background-size: 200% 100%;
  transition: background-position .6s ease;
}

.cta-pill:hover::before {
  background-position: 100% 0;
}

.cta-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  transition: transform .45s ease;
}

.cta-pill:hover .cta-inner {
  transform: translateX(8px);
}

.cta-text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.cta-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .45s ease, color .45s ease;
}

.cta-pill:hover .cta-arrow {
  background: #fff;
  color: #000;
}

/* =====================================================
   FOOTER
===================================================== */

.scroll-toggle-wrap {
  position: fixed;
  left: 8px;
  bottom: 16px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scroll-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(9, 12, 19, 0.78);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}

.scroll-toggle-btn:hover,
.scroll-toggle-btn:focus-visible {
  background: rgba(22, 28, 40, 0.9);
  border-color: rgba(151,65,235,0.58);
  transform: translateY(-2px);
}

.scroll-toggle-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(8, 11, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}

.scroll-toggle-btn:hover::after,
.scroll-toggle-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.scroll-toggle-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-toggle-wrap.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-toggle-btn.is-hidden-btn {
  display: none;
}

.scroll-toggle-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 1fr));
  gap: 28px;
  align-items: start;
}

.footer-brand,
.footer-section {
  min-width: 0;
}

.footer-brand p,
.footer-links a,
.footer-bottom span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.footer-section h4 {
  margin-bottom: 8px;
  font-size: 18px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  transition: color .16s ease;
}

.footer-links a:hover,
.footer-links a:focus { color: #9741EB; }

.footer-social-icons {
  display: flex;
  gap: 12px;
}

.footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social-icons a:hover {
  background: rgba(151,65,235,0.25);
}

/* Social icons: inherit color so all icons respond uniformly */
.footer-social-icons a { color: #fff; transition: color .18s ease, background .18s ease; }
.footer-social-icons a:hover { color: #9741EB; background: rgba(151,65,235,0.12); }
.footer-social-icons svg { fill: currentColor; }

/* Footer link and logo color normalization to prevent browser default/pseudo-state colors */
.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #9741EB;
  text-decoration: none;
  outline: none;
}

.site-footer a:active,
.site-footer a:visited {
  color: #fff;
}

/* Ensure logo text and image don't change color on click */
.footer-brand .footer-logo img { filter: none; }
.footer-brand .footer-logo span { color: #fff; font-weight: 700; }

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand .footer-logo img { width: 30px; height: auto; }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.03);
  font-size: 14px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
  }

  .footer-bottom {
    gap: 10px 20px;
  }
}

.site-footer {
  margin-top: auto;                 
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.96), rgba(21, 27, 39, 0.96));
}

.privacy-page #footer,
.terms-page #footer,
.disclaimer-page #footer,
.cookie-policy-page #footer {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.privacy-page .site-footer,
.terms-page .site-footer,
.disclaimer-page .site-footer,
.cookie-policy-page .site-footer {
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.96), rgba(21, 27, 39, 0.96)) !important;
  border-top: 1px solid rgba(151, 65, 235, 0.16);
}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 768px) {
  .scroll-toggle-btn {
    width: 30px;
    height: 30px;
  }

  .scroll-toggle-wrap {
    left: 6px;
    bottom: 12px;
    gap: 6px;
  }

  .scroll-toggle-btn::after {
    font-size: 11px;
    padding: 5px 8px;
  }

  .preview-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .preview-right {
    justify-content: center;
  }

  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 8px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
/* ===== FOOTER TONE FIX ===== */

.site-footer {
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.96), rgba(21, 27, 39, 0.96));
}

.footer-social-icons a {
  background: rgba(255,255,255,0.06);
}

.footer-social-icons a:hover {
  background: rgba(255,255,255,0.12); /* no purple glow */
}
/* Final footer color override: ensure platform/legal links and social icons turn purple on hover */
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus,
.site-footer .footer-links a:active,
.site-footer a:hover,
.site-footer a:focus,
.footer-social-icons a:hover {
  color: #9741EB !important;
}
.footer-social-icons a:hover svg { fill: #9741EB !important; }


/* =====================================================
   GLOBAL SURFACE SYSTEM (ALL INNER PAGES)
===================================================== */
@media (min-width: 1500px) {
  .nav-inner {
    max-width: 1600px;
    padding: 0 clamp(48px, 4vw, 72px);
  }

  .footer-inner,
  .footer-bottom {
    max-width: 1600px;
  }

  .footer-inner {
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding: 28px clamp(32px, 4vw, 56px) 18px;
  }

  .footer-bottom {
    padding: 16px clamp(32px, 4vw, 56px) 28px;
  }
}

.page-surface {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(
      1200px 600px at 50% -10%,
      rgba(151, 65, 235, 0.14),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 80% 30%,
      rgba(90, 0, 178, 0.12),
      transparent 65%
    ),
    #0B0F14;
}

/* Soft surface panels (NOT cards) */
.surface-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 24px;
  position: relative;
}

/* Section container feel (like Framer) */
.surface-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.02);
  border-radius: 28px;
  z-index: -1;
}

/* ===============================
   INNER PAGE HERO
================================ */

.inner-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.inner-hero h1 {
  font-size: 56px;
  font-weight: 900;
}

.inner-hero p {
  margin-top: 14px;
  font-size: 18px;
  color: #9CA3AF;
}

.roadmap {
  position: relative;
  margin-top: 48px;
  height: 520px;
}

.roadmap svg {
  position: absolute;
  inset: 0;
}

.roadmap-node {
  position: absolute;
  width: 260px;
  padding: 16px 18px;
  border-radius: 18px;
  text-align: center;
}

/* =========================================
   GLOBAL PURPLE GLOW SYSTEM
   (ALL PANELS / CARDS / BOXES)
========================================= */

.glow-surface {
  position: relative;
  border-radius: 28px;
  background: rgba(15, 15, 25, 0.78);
  backdrop-filter: blur(16px);

  box-shadow:
    0 0 0 1px rgba(151, 65, 235, 0.55) inset,
    0 0 32px rgba(151, 65, 235, 0.35);
}

/* Stronger glow on focus / active */
.glow-surface.active {
  box-shadow:
    0 0 0 1px rgba(151, 65, 235, 0.9) inset,
    0 0 48px rgba(151, 65, 235, 0.6);
}

/* Hover enhancement (desktop only) */
@media (hover: hover) {
  .glow-surface:hover {
    box-shadow:
      0 0 0 1px rgba(151, 65, 235, 0.85) inset,
      0 0 56px rgba(151, 65, 235, 0.55);
  }

}

  /* =====================================================
     ROADMAP-FIXED (CLICK BASED)
     Floating thread, node buttons, content switches
  ===================================================== */
  .roadmap-fixed {
    position: relative;
    height: 100vh;
    /* stronger themed background for the whole roadmap section */
    background:
      radial-gradient(1000px 480px at 50% 35%, rgba(151,65,235,0.12), transparent 35%),
      radial-gradient(700px 320px at 85% 20%, rgba(90,0,178,0.08), transparent 45%),
      linear-gradient(180deg,#030512,#06102a);
    overflow: hidden;
    color: #fff;
  }

  /* removed ::before overlay — tint is applied via the section background above */

  .roadmap-svg {
    position: absolute;
    inset: 0;
  }

  /* lit nodes: subtle stroke + drop shadow to make dots pop */
  .roadmap-fixed .node {
    fill: #000; /* keep the dot solid */
    stroke: #ffffff;
    stroke-width: 2px;
    cursor: pointer;
    filter: drop-shadow(0 8px 18px rgba(151,65,235,0.22));
    transition: transform 0.25s ease, filter 0.25s ease, stroke-width 160ms ease;
  }

  .roadmap-fixed .node.active {
    transform: scale(1.5);
    stroke-width: 3px;
    filter: drop-shadow(0 12px 28px rgba(151,65,235,0.28));
  }
  .roadmap-content {
    position: absolute;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 320px;
    color: #fff;
    pointer-events: none;
  }

  .roadmap-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .roadmap-fixed .bg-number {
    position: absolute;
    font-size: 240px;
    font-weight: 700;
    opacity: 0.04;
    color: #fff;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .roadmap-fixed .bg-number.active { opacity: 0.08; }

  /* static number positions (match node layout) */
  .roadmap-fixed .bg-number[data-step="0"] { left: 60px;  bottom: 40px; }
  .roadmap-fixed .bg-number[data-step="1"] { left: 340px; top: 200px; }
  .roadmap-fixed .bg-number[data-step="2"] { right: 200px; top: 120px; }
  .roadmap-fixed .bg-number[data-step="3"] { right: 80px;  top: 20px; }

  /* Roadmap placement helpers to avoid overlap */
  #roadmap-fixed {
    height: 100vh;
    position: relative;
    z-index: 2;
  }

  /* make the roadmap thread slightly more visible (thin line) */
  #roadmap-base { stroke: rgba(255,255,255,0.20); }
  /* restore a visible glow hint and allow stronger glow when animated */
  #roadmap-glow {
    stroke: rgba(255,255,255,0.95);
    stroke-opacity: 0.36;
    filter: url(#glow);
    transition: stroke-opacity 220ms ease, stroke-width 220ms ease, filter 220ms ease;
  }

  /* active tap glow — briefly brighten the glow and thicken the stroke */
  #roadmap-glow.active {
    stroke-opacity: 1;
    stroke-width: 5;
    filter: url(#glow);
  }

  .features-section {
    position: relative;
    z-index: 1;
  }

/* =====================================================
   ROADMAP FIXED — INSERTED BY USER
===================================================== */

/* Hard-lock roadmap height to prevent extra vertical space */
#roadmap-fixed {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.roadmap-svg {
  position: absolute;
  inset: 0;
  z-index: 2; /* ensure SVG sits above background numbers */
}

.node {
  fill: #aaa;
  cursor: pointer;
  transition: transform 0.25s ease, fill 0.25s ease;
}

.node.active {
  fill: #fff;
  transform: scale(1.4);
}

#roadmap-content {
  position: absolute;
  max-width: 320px;
  display: block; /* ensure single content box behaves as block */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3; /* on top of SVG */
}

#roadmap-content.show {
  opacity: 1;
  transform: translateY(0);
}

.roadmap-title {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font-size: 44px;
  opacity: 0.18;
  pointer-events: none;
}

/* DEBUG: outline sections to find empty space (remove after inspection) */
/* debug outline removed */

/* Background numbers (always present, subtle) */
.bg-number {
  position: absolute;
  font-size: 180px;
  font-weight: 700;
  color: white;
  opacity: 0.035;
  pointer-events: none;
  z-index: 1; /* behind SVG */
  user-select: none;
}

.bg-number.active { opacity: 0.08; }

/* safer static positions, keep numbers off the path */
.bg-number.n1 { left: 40px;  bottom: 20px; }
.bg-number.n2 { left: 280px; top: 260px; }
.bg-number.n3 { right: 320px; top: 180px; }
.bg-number.n4 { right: 120px; top: 80px; }

/* ===============================
   SCROLL STORY CORE
================================ */

.scroll-story {
  position: relative;
}

.scroll-spacer {
  height: 300vh; 
}

.scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}

.story-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.story-card.active {
  opacity: 1;
  pointer-events: auto;
}

.story-box {
  max-width: 880px;
  padding: 64px 72px;
  border-radius: 28px;
  text-align: center;
}

.story-box h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 28px;
}

.story-box p {
  font-size: 18px;
  color: #D1D5DB;
  line-height: 1.7;
  margin-bottom: 18px;
}
/* =====================================
   EXPLORE HERO DEPTH
===================================== */

.explore-hero {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
}

.explore-hero .grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.25;
}

.explore-hero .hero-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(151,65,235,0.28) 0%,
    rgba(151,65,235,0.12) 35%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(80px);
  z-index: 1;
}

.explore-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* =====================================
   EXPLORE PAGE — FINAL
===================================== */

.explore-page {
  padding: 120px 24px 160px;
}

/* GRID */
.explore-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.explore-row-center {
  grid-column: 1 / -1; /* full width */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

/* TILE */
.explore-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 40px 44px;
  min-height: 220px;

  border-radius: 28px;
  background: rgba(255,255,255,0.03);

  border: 1px solid rgba(151,65,235,0.35);
  box-shadow:
    0 0 0 1px rgba(151,65,235,0.25),
    0 24px 60px rgba(151,65,235,0.25);

  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.explore-tile:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(151,65,235,0.6),
    0 30px 80px rgba(151,65,235,0.45);
}

/* TEXT */
.explore-tile h3 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.explore-tile p {
  font-size: 16px;
  line-height: 1.65;
  color: #D1D5DB;
}

.explore-tile span {
  margin-top: 24px;
  font-weight: 600;
  color: #C084FC;
}

/* MOBILE */
@media (max-width: 900px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }

  .explore-grid .explore-tile {
    grid-column: auto !important;
  }
}


.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      700px 400px at 50% 40%,
      rgba(151, 65, 235, 0.25),
      transparent 60%
    );
  pointer-events: none;
  z-index: 2;
}

.inner-hero .hero-content {
  position: relative;
  z-index: 1;
}


/* Highlight roster card slightly */
.highlight-card {
  box-shadow:
    0 0 0 1px rgba(151,65,235,0.8),
    0 0 80px rgba(151,65,235,0.25);
}

/* ===============================
   NEWS PAGE
================================ */

.news-page {
  padding: 96px 24px 140px;
}

.news-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Filters */
.news-filters {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.filter-pill {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: #D1D5DB;
  border: 1px solid rgba(151,65,235,0.35);
  cursor: pointer;
}

.filter-pill.active {
  background: rgba(151,65,235,0.35);
  box-shadow: inset 0 0 0 1px rgba(151,65,235,0.8);
  color: #fff;
}

/* News card */
.news-card {
  padding: 32px;
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.news-card.muted {
  opacity: 0.7;
}

.news-tag {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #E9D5FF;
  background: rgba(151,65,235,0.25);
  padding: 6px 12px;
  border-radius: 999px;
}

.news-card h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.3;
}

.news-meta {
  font-size: 13px;
  color: #9CA3AF;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.news-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #D1D5DB;
  margin-bottom: 18px;
}

.news-link {
  font-weight: 600;
  color: #A78BFA;
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}
/* ===============================
   TOURNAMENT LISTING
================================ */

.filter-row {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tournaments-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 140px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

.tournament-card {
  background: rgba(255,255,255,0.035);
  border-radius: 22px;
  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}

.tournament-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(151,65,235,0.55),
    0 26px 60px rgba(151,65,235,0.25);
}

.tournament-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #9CA3AF;
  margin-bottom: 10px;
}

.tournament-meta div {
  line-height: 1.6;
  font-size: 14px;
  color: #9CA3AF;
}

.tournament-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

.tournament-info {
  font-size: 14px;
  color: #D1D5DB;
  line-height: 1.6;
}

.tournament-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 14px;
}
.badge.upcoming {
  background: rgba(151,65,235,0.18);
  color: #C4B5FD;
}

.badge.ongoing {
  background: rgba(34,197,94,0.18);
  color: #86EFAC;
}

.badge.completed {
  background: rgba(255,255,255,0.12);
  color: #D1D5DB;
}
/* Status colors */
.tournament-status.upcoming {
  background: rgba(151,65,235,0.22);
  color: #C4B5FD;
}

.tournament-status.completed {
  background: rgba(255,255,255,0.14);
  color: #D1D5DB;
}

.tournament-status.ongoing {
  background: rgba(34,197,94,0.2);
  color: #86EFAC;
}
.tournaments-landing {
  position: relative;
  background:
    radial-gradient(
      800px 500px at 50% 20%,
      rgba(151,65,235,0.22),
      transparent 65%
    ),
    #0B0F14;
  overflow: hidden;
}

.tournaments-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
  pointer-events: none;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.game-tag {
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
}
/* Status colors */
.status-badge {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.status-badge.upcoming {
  background: rgba(151,65,235,0.22);
  color: #C4B5FD;
}

.status-badge.completed {
  background: rgba(255,255,255,0.14);
  color: #D1D5DB;
}

.status-badge.ongoing {
  background: rgba(34,197,94,0.2);
  color: #86EFAC;
}
/* =====================================================
   TABLE HEADERS – DESKTOP DEFAULT
===================================================== */
.results-header,
.points-header,
.mvp-detailed-header,
.mvp-header {
  display: grid;
}

.results-card {
  position: relative;
  padding-top: 56px;
  overflow-x: auto;
}

.result-row {
  position: relative;
  z-index: 1;
}

/* =====================================================
   MOBILE: HIDE TABLE HEADERS
===================================================== */
@media (max-width: 768px) {
  .results-header,
  .points-header,
  .mvp-detailed-header,
  .mvp-header {
    display: none;
  }
}

/* =====================================================
   MOBILE: TABLE ROW LAYOUT
   (ONE TEAM / PLAYER = ONE ROW)
===================================================== */
@media (max-width: 768px) {

  .result-row,
  .mvp-row,
  .points-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 0;
  }

  /* Text safety – NO vertical letter breaking */
  .result-row span,
  .mvp-row span,
  .points-row span {
    font-size: 13px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Primary identity (team / player) */
  .result-row .team,
  .mvp-row .mvp-player {
    flex: 1 1 100%;
    font-weight: 600;
  }

  /* Stats stay inline */
  .result-row .finish,
  .result-row .position,
  .result-row .wwcd,
  .result-row .total,
  .mvp-row .mvp-points,
  .mvp-row .mvp-matches {
    flex: 0 0 auto;
  }

  /* Emphasis */
  .result-row .total {
    font-weight: 700;
  }
}

/* =====================================================
   POINTS TABLE – MOBILE TWEAK
===================================================== */
@media (max-width: 768px) {
  .points-row span:only-child {
    flex: 1 1 100%;
    font-weight: 600;
  }
}
/* =====================================================
   BACKGROUND V2 — FRACTIONAL ORBS (FRAMER STYLE)
===================================================== */
.cookie-card {
    width: min(248px, calc(100vw - 32px));
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    gap: 10px;
    position: fixed;
    bottom: 14px;
    right: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    animation: slideInRight 0.5s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#cookieSvg {
    width: 40px;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce 2.4s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

#cookieSvg g path {
    fill: #9741EB;
}

.cookieHeading {
    font-size: 1.05rem;
    font-weight: 800;
    color: rgb(26, 26, 26);
    margin: 0;
}

.cookieDescription {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgb(99, 99, 99);
    line-height: 1.45;
    margin: 0;
}

.cookieDescription a {
    color: var(--primary-color, #7b57ff);
    text-decoration: none;
    font-weight: 700;
}

.cookieDescription a:hover {
    text-decoration: underline;
}

.buttonContainer {
    display: flex;
    gap: 8px;
    flex-direction: row;
    width: 100%;
}

.acceptButton {
    flex: 1;
    height: 42px;
    background-color: var(--primary-color, #7b57ff);
    transition: all 0.3s ease;
    border: none;
    color: rgb(241, 241, 241);
    cursor: pointer;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(123, 87, 255, 0.5), 0 2px 4px -1px rgba(123, 87, 255, 0.5);
    font-size: 13px;
}

.acceptButton:hover {
    background-color: var(--primary-hover, #9173ff);
    box-shadow: 0 10px 15px -3px rgba(123, 87, 255, 0.5), 0 4px 6px -2px rgba(123, 87, 255, 0.5);
    transform: translateY(-2px);
}

.declineButton {
    flex: 1;
    height: 42px;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
    color: rgb(80, 80, 80);
    border: 2px solid #e0e0e0;
    cursor: pointer;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 13px;
}

.declineButton:hover {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Mobile Responsive for Cookie Banner */
@media (max-width: 768px) {
    .cookie-card {
        width: min(236px, calc(100vw - 24px));
        bottom: 12px;
        right: 12px;
        left: auto;
        padding: 14px 14px 12px;
        gap: 8px;
    }

    .buttonContainer {
        gap: 8px;
        flex-direction: row;
    }

    .cookieHeading {
        font-size: 1rem;
    }

    .cookieDescription {
        font-size: 0.76rem;
    }

    .acceptButton,
    .declineButton {
        width: auto;
        max-width: none;
        height: 40px;
    }
}
/* ============================================= */
/* SITE DISCLAIMER BANNER CSS */
/* Add this to your main CSS file (style.css) */
/* ============================================= */

.disclaimer-banner {
    width: min(300px, calc(100vw - 40px));
    background: #000;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 12px;
    padding: 14px 16px;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 9998;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
    animation: slideInRight 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.disclaimer-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.disclaimer-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.disclaimer-text {
    flex: 1;
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    line-height: 1.5;
}

.disclaimer-text strong {
    color: #a78bfa;
    font-weight: 600;
}

.disclaimer-close {
    background: rgba(139, 92, 246, 0.2);
    border: 2px solid rgba(139, 92, 246, 0.4);
    color: #a78bfa;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.disclaimer-close:hover {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    transform: rotate(90deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .disclaimer-banner {
        width: min(224px, calc(100vw - 24px));
        left: auto;
        right: 12px;
        bottom: 12px;
        padding: 12px;
    }
    
    .disclaimer-content {
        gap: 10px;
    }
    
    .disclaimer-icon {
        font-size: 18px;
    }
    
    .disclaimer-text {
        font-size: 11px;
    }
    
    .disclaimer-close {
        margin-left: 0;
    }
}

/* =====================================================
   GLOBAL PYRAMID PAGE LOADER
===================================================== */
body.rt-page-loading {
  overflow: hidden;
}

.rt-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.16), #0a0a0f 62%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.rt-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rt-section-loader-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 220px;
}

.rt-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.rt-pyramid-loader {
  position: relative;
  width: 100px;
  height: 100px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
  margin: 0 auto;
}

.rt-pyramid-loader .rt-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rtSpin 4s linear infinite;
}

@keyframes rtSpin {
  100% {
    transform: rotateY(360deg);
  }
}

.rt-pyramid-loader .rt-wrapper .rt-side {
  width: 70px;
  height: 70px;
  position: absolute;
  inset: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.rt-pyramid-loader .rt-wrapper .rt-side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient(#a78bfa, #8b5cf6, #6d28d9, #a78bfa);
}

.rt-pyramid-loader .rt-wrapper .rt-side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient(#6d28d9, #a78bfa, #8b5cf6, #6d28d9);
}

.rt-pyramid-loader .rt-wrapper .rt-side3 {
  transform: rotateX(30deg);
  background: conic-gradient(#8b5cf6, #a78bfa, #6d28d9, #8b5cf6);
}

.rt-pyramid-loader .rt-wrapper .rt-side4 {
  transform: rotateX(-30deg);
  background: conic-gradient(#a78bfa, #6d28d9, #8b5cf6, #a78bfa);
}

.rt-pyramid-loader .rt-wrapper .rt-shadow {
  width: 60px;
  height: 60px;
  background: #8b5cf6;
  position: absolute;
  inset: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
  opacity: 0.8;
}

.rt-loading-container p {
  color: #a78bfa;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1.75rem;
  animation: rtLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes rtLoadingPulse {
  0%, 100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}