.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(calc(100vh - 92px), 820px);
  padding: var(--gap-8) var(--gap-5) var(--gap-7);
  overflow: hidden;
  text-align: center;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1200px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(239, 91, 253, 0.18) 0%, rgba(239, 91, 253, 0) 62%);
  pointer-events: none;
  z-index: 1;
}

.canopy {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(1920px, 118vw);
  transform: translateX(-50%);
  pointer-events: none;
  image-rendering: pixelated;
  max-width: none;
  will-change: transform;
}

.canopy-l3 { z-index: 2; }
.canopy-l2 { z-index: 3; }
.canopy-l1 { z-index: 4; }

.hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
  max-width: 900px;
  margin-top: 6vh;
}

.hero-logo {
  width: clamp(112px, 13vw, 176px);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 26px rgba(239, 91, 253, 0.34));
}

.hero-title {
  margin: 0;
  font-size: clamp(40px, 7.4vw, 90px);
  line-height: 1.1;
  letter-spacing: 0;
}

.hero-tag {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 27px);
}

.hero-ips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-3);
  margin-top: var(--gap-3);
}

.ip {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  align-items: flex-start;
  padding: 10px 20px;
  text-align: left;
  background: rgba(16, 0, 16, 0.72);
  box-shadow:
    inset 2px 2px 0 0 #46236b,
    inset -2px -2px 0 0 #1c0c2c,
    2px 2px 0 0 rgba(0, 0, 0, 0.5);
  transition: transform 90ms steps(2), background 90ms steps(2);
}

.ip:hover {
  transform: translateY(-3px);
  background: rgba(36, 10, 44, 0.9);
  box-shadow:
    inset 2px 2px 0 0 #a83ec4,
    inset -2px -2px 0 0 #1c0c2c,
    2px 2px 0 0 rgba(0, 0, 0, 0.5);
}

.ip:active {
  transform: translateY(0);
}

.ip-label {
  font-size: 18px;
}

.ip-value {
  font-size: var(--fs-md);
}

.ip.is-copied .ip-label {
  color: var(--c-green);
  --sh: var(--c-green-sh);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-3);
  margin-top: var(--gap-3);
}

.hero-status {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin: var(--gap-3) 0 0;
  font-size: var(--fs-sm);
}

.hero-status.is-hidden {
  display: none;
}

.hero-dot {
  width: 10px;
  height: 10px;
  background: var(--c-green);
  box-shadow: 0 0 10px rgba(0, 255, 33, 0.7);
}

.hero-note {
  margin: var(--gap-2) 0 0;
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding: var(--gap-7) var(--gap-4) var(--gap-6);
  }

  .hero-inner {
    margin-top: 2vh;
    gap: var(--gap-3);
  }

  .canopy {
    width: max(1200px, 190vw);
  }
}

@media (max-width: 720px) {
  .nav {
    padding: var(--gap-3) var(--gap-4);
  }

  .nav-links {
    gap: var(--gap-3);
  }

  .nav-logo {
    width: 32px;
    height: 32px;
  }

  .nav-wordmark,
  .nav-secondary {
    display: none;
  }

  .ip-value {
    font-size: var(--fs-sm);
  }
}