.nav {
  position: relative;
  z-index: 10;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(242, 155, 216, .2));
}

.brand span,
.footer-brand span {
  font-family: "Chakra Petch", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .19em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .18s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-solid);
  position: relative;
}

.menu-button span {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 1px;
  background: var(--text);
  top: 16px;
  transition: top .18s ease, transform .18s ease;
}

.menu-button span:last-child {
  top: 23px;
}

.menu-button.is-open span:first-child {
  top: 19px;
  transform: rotate(45deg);
}

.menu-button.is-open span:last-child {
  top: 19px;
  transform: rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  z-index: 30;
  left: 16px;
  right: 16px;
  top: 76px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(11, 10, 18, .98);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

.mobile-nav a {
  display: block;
  padding: 12px 13px;
  border-radius: 8px;
  color: var(--muted-strong);
  font-size: 13px;
}

.mobile-nav a:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.hero {
  position: relative;
  z-index: 4;
  min-height: 720px;
  padding: 72px 24px 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-mark {
  width: clamp(118px, 10vw, 150px);
  height: auto;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 30px rgba(140, 92, 255, .28));
  animation: markFloat 6s ease-in-out infinite;
}

.hero-badge {
  min-height: 30px;
  padding: 0 13px;
  margin-bottom: 30px;
  border: 1px solid rgba(140, 92, 255, .28);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(140, 92, 255, .07);
  color: #b89aff;
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
}

.hero-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: 0 0 11px rgba(242, 155, 216, .7);
}

.hero-title {
  margin: 0;
  position: relative;
  isolation: isolate;
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(72px, 14vw, 176px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow: 0 0 38px rgba(255, 255, 255, .11), 0 0 88px rgba(140, 92, 255, .18);
}

.hero-title span {
  position: relative;
  z-index: 2;
}

.hero-title::before,
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero-title::before {
  color: var(--blue);
  text-shadow: -5px 0 rgba(81, 191, 243, .72);
  animation: titleGlitchBlue 4.1s steps(1, end) infinite;
}

.hero-title::after {
  color: var(--pink);
  text-shadow: 5px 0 rgba(241, 155, 216, .72);
  animation: titleGlitchPink 4.9s steps(1, end) infinite .35s;
}

.hero-subtitle {
  margin: 31px 0 0;
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 500;
  letter-spacing: -.025em;
}

.hero-description {
  max-width: 610px;
  margin: 14px 0 0;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.7;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.hero-facts {
  width: min(760px, 100%);
  margin-top: 42px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hero-facts div {
  min-height: 72px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-right: 1px solid var(--border);
}

.hero-facts div:last-child {
  border-right: 0;
}

.hero-facts strong {
  font-family: "Chakra Petch", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.hero-facts span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.features {
  position: relative;
  z-index: 4;
  padding: 88px 0 84px;
}

.section-head {
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.section-head h2 {
  margin: 0;
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -.035em;
}

.section-head p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.access {
  position: relative;
  z-index: 4;
  min-height: 108px;
  margin: 14px auto 74px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(110deg, rgba(140, 92, 255, .08), rgba(242, 155, 216, .025) 50%, rgba(81, 191, 243, .03)), rgba(13, 12, 20, .7);
  backdrop-filter: blur(14px);
}

.access-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.access-copy img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.access-copy div {
  display: grid;
  gap: 4px;
}

.access-copy strong {
  font-family: "Chakra Petch", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.access-copy span {
  color: var(--muted);
  font-size: 11px;
}

.footer {
  position: relative;
  z-index: 4;
  min-height: 118px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  color: var(--muted);
  font-size: 10px;
}

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

.footer-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.footer-brand span {
  font-size: 12px;
}

.footer p {
  margin: 0;
  text-align: center;
}

.footer > a {
  color: var(--muted-strong);
}

@keyframes markFloat {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes titleGlitchBlue {
  0%, 64%, 69%, 79%, 84%, 92%, 96%, 100% {
    opacity: 0;
    transform: translate(0);
    clip-path: inset(0);
    color: #00eaff;
    text-shadow: none;
  }

  65% {
    opacity: .92;
    transform: translate(-10px, -1px) skewX(-5deg);
    clip-path: inset(8% 0 70%);
    color: #00eaff;
    text-shadow: 9px 0 #ff00d4, -5px 0 #ff2a2a;
  }

  66% {
    opacity: .72;
    transform: translate(12px, 1px) skewX(3deg);
    clip-path: inset(53% 0 19%);
    color: #39ff14;
    text-shadow: -8px 0 #00eaff, 5px 0 #ffffff;
  }

  67% {
    opacity: .86;
    transform: translate(-6px, 0);
    clip-path: inset(30% 0 46%);
    color: #ffffff;
    text-shadow: 10px 0 #ff00d4, -10px 0 #39ff14;
  }

  68% {
    opacity: .48;
    transform: translate(5px, -1px);
    clip-path: inset(74% 0 5%);
    color: #ff2a2a;
    text-shadow: -6px 0 #00eaff, 4px 0 #ffffff;
  }

  80% {
    opacity: .78;
    transform: translate(9px, 0) skewX(4deg);
    clip-path: inset(16% 0 63%);
    color: #ff00d4;
    text-shadow: -9px 0 #39ff14, 6px 0 #00eaff;
  }

  81% {
    opacity: .58;
    transform: translate(-12px, 1px);
    clip-path: inset(61% 0 17%);
    color: #00eaff;
    text-shadow: 8px 0 #ff2a2a, -4px 0 #ffffff;
  }

  82% {
    opacity: .82;
    transform: translate(5px, -1px);
    clip-path: inset(39% 0 37%);
    color: #39ff14;
    text-shadow: -7px 0 #ff00d4, 8px 0 #ffffff;
  }

  83% {
    opacity: .38;
    transform: translate(-4px, 0);
    clip-path: inset(80% 0 2%);
    color: #ffffff;
    text-shadow: 5px 0 #ff2a2a;
  }

  93% {
    opacity: .82;
    transform: translate(-8px, 0);
    clip-path: inset(23% 0 55%);
    color: #ff2a2a;
    text-shadow: 9px 0 #00eaff, -7px 0 #39ff14;
  }

  94% {
    opacity: .62;
    transform: translate(11px, -1px);
    clip-path: inset(68% 0 10%);
    color: #ff00d4;
    text-shadow: -9px 0 #ffffff, 4px 0 #00eaff;
  }

  95% {
    opacity: .42;
    transform: translate(-3px, 1px);
    clip-path: inset(45% 0 31%);
    color: #39ff14;
    text-shadow: 6px 0 #ff2a2a;
  }
}

@keyframes titleGlitchPink {
  0%, 47%, 53%, 71%, 76%, 87%, 91%, 100% {
    opacity: 0;
    transform: translate(0);
    clip-path: inset(0);
    color: #ff00d4;
    text-shadow: none;
  }

  48% {
    opacity: .88;
    transform: translate(11px, 1px) skewX(5deg);
    clip-path: inset(66% 0 8%);
    color: #ff00d4;
    text-shadow: -10px 0 #00eaff, 5px 0 #39ff14;
  }

  49% {
    opacity: .67;
    transform: translate(-9px, -1px);
    clip-path: inset(15% 0 64%);
    color: #ff2a2a;
    text-shadow: 8px 0 #ffffff, -5px 0 #00eaff;
  }

  50% {
    opacity: .84;
    transform: translate(6px, 0);
    clip-path: inset(43% 0 33%);
    color: #39ff14;
    text-shadow: -8px 0 #ff00d4, 9px 0 #ffffff;
  }

  51% {
    opacity: .54;
    transform: translate(-4px, 1px);
    clip-path: inset(79% 0 3%);
    color: #00eaff;
    text-shadow: 5px 0 #ff2a2a;
  }

  52% {
    opacity: .3;
    transform: translate(3px, 0);
    clip-path: inset(27% 0 52%);
    color: #ffffff;
  }

  72% {
    opacity: .9;
    transform: translate(-12px, -1px) skewX(-4deg);
    clip-path: inset(10% 0 70%);
    color: #00eaff;
    text-shadow: 10px 0 #ff00d4, -7px 0 #39ff14;
  }

  73% {
    opacity: .62;
    transform: translate(10px, 1px);
    clip-path: inset(57% 0 20%);
    color: #ffffff;
    text-shadow: -9px 0 #ff2a2a, 6px 0 #00eaff;
  }

  74% {
    opacity: .78;
    transform: translate(-5px, 0);
    clip-path: inset(34% 0 43%);
    color: #ff2a2a;
    text-shadow: 7px 0 #39ff14, -6px 0 #ff00d4;
  }

  75% {
    opacity: .42;
    transform: translate(4px, -1px);
    clip-path: inset(82% 0 2%);
    color: #39ff14;
  }

  88% {
    opacity: .82;
    transform: translate(9px, 0);
    clip-path: inset(18% 0 61%);
    color: #ff00d4;
    text-shadow: -9px 0 #00eaff, 7px 0 #ffffff;
  }

  89% {
    opacity: .58;
    transform: translate(-11px, 1px);
    clip-path: inset(63% 0 14%);
    color: #39ff14;
    text-shadow: 8px 0 #ff2a2a;
  }

  90% {
    opacity: .37;
    transform: translate(3px, -1px);
    clip-path: inset(41% 0 36%);
    color: #ffffff;
    text-shadow: -5px 0 #00eaff;
  }
}