:root {
  --purple-light: #a45ee8;
  --purple-mid: #7b22c4;
  --purple-dark: #6812a7;
  --cyan: #00d7b7;
  --white: #fff;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--purple-dark);
  color: var(--white);
  font-family: "Montserrat", Arial, sans-serif;
}

.domain-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 34% 43%, rgb(194 109 255 / 28%), transparent 35%),
    linear-gradient(110deg, var(--purple-light) 0%, var(--purple-mid) 54%, var(--purple-dark) 100%);
}

.layer { position: absolute; inset: 0; }

.layer--glow {
  z-index: -3;
  background: linear-gradient(135deg, rgb(255 255 255 / 7%), transparent 45%);
}

.layer--pattern {
  z-index: -2;
  opacity: .12;
}

.ghost-x,
.ghost-x::after {
  position: absolute;
  display: block;
  width: clamp(19rem, 35vw, 36rem);
  height: clamp(4.2rem, 7vw, 6.6rem);
  border-radius: 999px;
  background: #b778eb;
  content: "";
}

.ghost-x::after { transform: rotate(90deg); }
.ghost-x--one { top: 8%; left: -8%; transform: rotate(45deg); }
.ghost-x--two { top: 47%; left: -9%; transform: rotate(-45deg); }
.ghost-x--three { top: 46%; left: 20%; transform: rotate(45deg); }

.layer--content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
  text-align: center;
  transform: translateY(-2.5%);
}

.nexape-logo {
  display: block;
  width: clamp(15rem, 31vw, 27.5rem);
  height: auto;
  object-fit: contain;
}

.logo-link {
  position: relative;
  isolation: isolate;
  display: block;
  margin-bottom: clamp(2.1rem, 4vw, 3.2rem);
  transition: transform 180ms ease;
}

.logo-link:hover { transform: translateY(-3px); }
.logo-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: .45rem; }

.logo-link::before,
.logo-link::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("nexape-logo.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

.logo-link::before {
  clip-path: inset(18% 0 54% 0);
  filter: drop-shadow(-5px 0 #00e9c5);
  animation: glitch-upper 3.8s steps(1, end) infinite;
}

.logo-link::after {
  clip-path: inset(62% 0 12% 0);
  filter: drop-shadow(5px 0 #ff27b7);
  animation: glitch-lower 3.8s steps(1, end) infinite;
}

.nexape-logo {
  animation: glitch-core 3.8s steps(1, end) infinite;
}

@keyframes glitch-upper {
  0%, 84%, 100% { opacity: 0; transform: translate(0); }
  85% { opacity: .9; transform: translate(-9px, 1px); }
  87% { opacity: .65; transform: translate(7px, -1px); }
  89% { opacity: 0; transform: translate(0); }
  92% { opacity: .75; transform: translate(-5px, 0); }
  94% { opacity: 0; transform: translate(0); }
}

@keyframes glitch-lower {
  0%, 83%, 100% { opacity: 0; transform: translate(0); }
  84% { opacity: .75; transform: translate(8px, -1px); }
  86% { opacity: 0; transform: translate(0); }
  90% { opacity: .8; transform: translate(-7px, 1px); }
  93% { opacity: .55; transform: translate(4px, 0); }
  95% { opacity: 0; transform: translate(0); }
}

@keyframes glitch-core {
  0%, 84%, 88%, 91%, 95%, 100% { transform: translate(0); }
  85% { transform: translate(2px, -1px) skewX(1deg); }
  86% { transform: translate(-2px, 1px) skewX(-1deg); }
  92% { transform: translate(1px, 0); }
}

h1,
.offer {
  max-width: 18ch;
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.4vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.offer { margin-top: .14em; }

.email {
  margin-top: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--white);
  font-size: clamp(1rem, 2.3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -.035em;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.email:hover { color: var(--cyan); transform: translateY(-2px); }

.email:focus-visible {
  border-radius: .2em;
  outline: 3px solid var(--cyan);
  outline-offset: .35em;
}

.layer--accent {
  z-index: 1;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(34vw, 34rem);
  height: min(43vw, 32rem);
  pointer-events: none;
}

.accent {
  position: absolute;
  display: block;
  width: 130%;
  height: clamp(2.5rem, 5vw, 4.7rem);
  border-radius: 999px;
  background: var(--cyan);
}

.accent--left { right: 22%; bottom: 4%; transform: rotate(45deg); }
.accent--top { right: -24%; bottom: 46%; transform: rotate(-45deg); }
.accent--right { right: -34%; bottom: -1%; transform: rotate(-45deg); }

.visit-counter {
  position: fixed;
  z-index: 5;
  right: clamp(1rem, 2.2vw, 2rem);
  bottom: clamp(1rem, 2.2vw, 2rem);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  background: rgb(63 9 105 / 58%);
  box-shadow: 0 .5rem 2rem rgb(38 0 66 / 18%);
  color: var(--white);
  font-size: clamp(.7rem, 1vw, .82rem);
  backdrop-filter: blur(8px);
}

.visit-counter__dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 .8rem var(--cyan);
}

@media (max-width: 720px) {
  .layer--content { padding: 2rem 1.3rem 7rem; transform: none; }
  .logo-link { margin-bottom: 2rem; }
  h1, .offer { font-size: clamp(2rem, 11vw, 3.4rem); }
  .email { font-size: clamp(.9rem, 4.5vw, 1.2rem); }
  .layer--accent { width: 48vw; height: 42vw; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .email, .logo-link { transition: none; }
  .nexape-logo, .logo-link::before, .logo-link::after { animation: none; }
}