:root {
  --bg: #020208;
  --text-main: #f2f4ff;
  --text-muted: #b8bccd;
  --violet: #7158ff;
  --violet-soft: #937efc;
  --magenta: #ff4fa8;
  --cyan: #53cbff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  color: var(--text-main);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 3.5rem 1.25rem 7.5rem;
  isolation: isolate;
  background:
    radial-gradient(
      1100px 420px at 50% -12%,
      rgba(57, 61, 124, 0.3),
      transparent 68%
    ),
    radial-gradient(
      560px 180px at 50% 47%,
      rgba(104, 86, 255, 0.22),
      transparent 74%
    ),
    var(--bg);
  background-size:
    130% 130%,
    125% 125%,
    auto;
  background-position:
    50% 0%,
    50% 47%,
    0 0;
  animation: nebula-shift 11s ease-in-out infinite alternate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -15% -20% auto;
  height: 60vh;
  pointer-events: none;
  z-index: -3;
}

.hero::before {
  background:
    radial-gradient(
      ellipse at 30% 22%,
      rgba(255, 88, 170, 0.15),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 70% 26%,
      rgba(88, 162, 255, 0.16),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 52% 48%,
      rgba(132, 98, 255, 0.2),
      transparent 62%
    );
  filter: blur(22px);
  opacity: 0.9;
  animation: field-float-1 8s ease-in-out infinite alternate;
}

.hero::after {
  background:
    radial-gradient(
      ellipse at 46% 16%,
      rgba(255, 255, 255, 0.09),
      transparent 52%
    ),
    radial-gradient(
      ellipse at 20% 38%,
      rgba(89, 139, 255, 0.1),
      transparent 56%
    ),
    radial-gradient(
      ellipse at 82% 36%,
      rgba(255, 112, 198, 0.11),
      transparent 58%
    );
  filter: blur(34px);
  opacity: 0.72;
  animation: field-float-2 10s ease-in-out infinite alternate;
}

.hero__glow {
  position: absolute;
  inset: 38% -8% auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 70, 164, 0),
    rgba(255, 108, 193, 0.8),
    rgba(83, 203, 255, 0.8),
    rgba(113, 88, 255, 0)
  );
  filter: blur(0.4px);
  opacity: 0.74;
  z-index: -1;
  animation: line-sweep 5.4s ease-in-out infinite alternate;
}

.hero__content {
  text-align: center;
  width: min(1060px, 100%);
  margin-top: 4vh;
  animation: fade-up 850ms ease-out both;
}

.hero__meta {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: clamp(0.88rem, 1.2vw, 1.15rem);
  color: rgba(235, 237, 255, 0.78);
}

.hero__title {
  margin: 1.15rem 0 1rem;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(2.25rem, 5.6vw, 5.25rem);
  text-wrap: balance;
}

.hero__description {
  margin: 0 auto;
  max-width: 1220px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 2rem);
  line-height: 1.45;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.1rem;
  padding: 0.92rem 2.05rem;
  border-radius: 999px;
  color: #f5f5ff;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.32rem);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--violet-soft), var(--violet));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 14px 28px rgba(64, 48, 168, 0.46),
    0 0 28px rgba(113, 88, 255, 0.38);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.hero__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 20px 34px rgba(64, 48, 168, 0.56),
    0 0 34px rgba(140, 95, 255, 0.56);
}

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

.hero__horizon {
  position: absolute;
  left: 50%;
  width: 132%;
  max-width: 2400px;
  bottom: -16vh;
  height: 78vh;
  border-radius: 100% 100% 0 0 / 58% 58% 0 0;
  background: radial-gradient(
    ellipse at center top,
    rgba(7, 10, 26, 0.16),
    rgba(0, 0, 0, 0.98) 64%
  );
  transform: translateX(-50%) perspective(1000px) rotateX(62deg) translateZ(0);
  animation: horizon-breathe 6.8s ease-in-out infinite alternate;
  z-index: -2;
}

.beam {
  position: absolute;
  left: 50%;
  top: 10%;
  transform-origin: 50% 6%;
  width: clamp(220px, 31vw, 510px);
  height: clamp(54px, 9.5vw, 134px);
  border-radius: 999px;
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.92;
  animation: drift 4.8s ease-in-out infinite;
}

.beam::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(12px);
}

.beam--1 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(189, 217, 255, 0.93),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-36%, 110px) rotate(-17deg);
}

.beam--2 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 95, 169, 0.84),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-86%, 178px) rotate(-13deg);
  animation-delay: -1.2s;
}

.beam--3 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(115, 97, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-6%, 220px) rotate(12deg);
  animation-delay: -2.2s;
}

.beam--4 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(194, 169, 255, 0.95),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-60%, 260px) rotate(-4deg);
  animation-delay: -3s;
}

.beam--5 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(96, 171, 255, 0.85),
    rgba(255, 255, 255, 0)
  );
  transform: translate(8%, 310px) rotate(6deg);
  animation-delay: -3.8s;
}

.beam--6 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 145, 196, 0.78),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-90%, 350px) rotate(2deg);
  animation-delay: -4.8s;
}

.beam--7 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(124, 196, 255, 0.72),
    rgba(255, 255, 255, 0)
  );
  transform: translate(24%, 395px) rotate(-2deg);
  animation-delay: -5.8s;
}

.beam--8 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(235, 242, 255, 0.95),
    rgba(255, 255, 255, 0)
  );
  transform: translate(-38%, 450px) rotate(14deg);
  animation-delay: -6.6s;
}

.beam--9 {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(101, 131, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
  transform: translate(18%, 500px) rotate(-10deg);
  animation-delay: -7.3s;
}

@keyframes drift {
  0%,
  100% {
    margin-left: 0;
    opacity: 0.85;
  }

  50% {
    margin-left: 56px;
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nebula-shift {
  0% {
    background-position:
      44% -4%,
      46% 44%,
      0 0;
  }

  100% {
    background-position:
      58% 7%,
      56% 54%,
      0 0;
  }
}

@keyframes field-float-1 {
  0% {
    transform: translate3d(-4.5%, -1.2%, 0) scale(0.98);
  }

  100% {
    transform: translate3d(4.5%, 3.5%, 0) scale(1.08);
  }
}

@keyframes field-float-2 {
  0% {
    transform: translate3d(4%, -2.5%, 0) scale(1.07);
  }

  100% {
    transform: translate3d(-3.5%, 3%, 0) scale(0.96);
  }
}

@keyframes horizon-breathe {
  0% {
    transform: translateX(-50%) perspective(1000px) rotateX(62deg) translateY(0)
      scale(0.985);
    filter: saturate(1) brightness(0.96);
  }

  100% {
    transform: translateX(-50%) perspective(1000px) rotateX(62deg)
      translateY(-3.2%) scale(1.04);
    filter: saturate(1.2) brightness(1.08);
  }
}

@keyframes line-sweep {
  0% {
    opacity: 0.58;
    transform: translateX(-2%) scaleX(0.98);
  }

  100% {
    opacity: 0.92;
    transform: translateX(2%) scaleX(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::before,
  .hero::after,
  .beam,
  .hero__content {
    animation: none !important;
  }
}

@media (max-width: 1000px) {
  .hero {
    padding-bottom: 5.7rem;
    min-height: 100dvh;
  }

  .hero__content {
    margin-top: 0;
  }

  .hero__description {
    max-width: 840px;
  }

  .hero__horizon {
    width: 150%;
    bottom: -12vh;
    height: 70vh;
  }
}

@media (max-width: 680px) {
  .hero {
    padding: 2.4rem 1rem 4.5rem;
  }

  .hero__meta {
    font-size: 0.84rem;
  }

  .hero__title {
    line-height: 1.04;
    margin-top: 0.95rem;
  }

  .hero__description {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 38ch;
  }

  .hero__cta {
    width: min(92vw, 360px);
    margin-top: 1.6rem;
  }

  .hero__horizon {
    bottom: -5vh;
    height: 62vh;
  }

  .beam {
    filter: blur(5px);
  }
}