@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Roboto:wght@400;500;700&display=swap");

:root {
  color-scheme: dark;
  --accent: #d43de7;
  --accent-bright: #f076ff;
  --ink: #ffffff;
  --surface: #08030c;
  --pointer-x: 0;
  --pointer-y: 0;
  --scroll-y: 0;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: var(--ink);
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #09040d;
}

.hero__image {
  position: absolute;
  z-index: -5;
  inset: -5%;
  background-image: url("myhitbet-hero-clean.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.03) contrast(1.015);
  transform: translate3d(
      calc(var(--pointer-x) * -10px),
      calc((var(--pointer-y) * -7px) + (var(--scroll-y) * 0.04px)),
      0
    )
    scale(1.065);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.hero__veil {
  position: absolute;
  z-index: -4;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 0, 5, 0.08), transparent 56%);
}

.hero__aura {
  position: absolute;
  z-index: -3;
  top: 48%;
  left: 64%;
  width: min(54vw, 64rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(237, 77, 255, 0.3) 0%, rgba(184, 40, 224, 0.15) 31%, transparent 67%),
    conic-gradient(from 0deg, transparent 0 9%, rgba(239, 92, 255, 0.23) 14%, transparent 23% 54%, rgba(152, 35, 218, 0.2) 63%, transparent 73% 100%);
  filter: blur(12px) saturate(1.2);
  mix-blend-mode: screen;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  animation: aura-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}

.hero__aura::before,
.hero__aura::after {
  position: absolute;
  content: "";
  border-radius: inherit;
}

.hero__aura::before {
  inset: 10%;
  border: 1px solid rgba(240, 106, 255, 0.18);
  border-right-color: transparent;
  border-bottom-color: rgba(172, 45, 230, 0.06);
  box-shadow: 0 0 55px rgba(219, 64, 242, 0.15) inset;
  animation: aura-spin 13s linear infinite;
}

.hero__aura::after {
  inset: 24%;
  background: radial-gradient(circle, rgba(242, 134, 255, 0.24), rgba(157, 33, 216, 0.08) 47%, transparent 71%);
  filter: blur(24px);
  animation: aura-pulse 3.3s ease-in-out infinite alternate;
}

.hero__light-sweep {
  position: absolute;
  z-index: -2;
  top: -24%;
  left: 61%;
  width: 7rem;
  height: 150%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(240, 122, 255, 0.18), transparent);
  filter: blur(18px);
  mix-blend-mode: screen;
  transform: rotate(18deg);
  animation: light-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(43rem, 47vw);
  margin-top: 25vh;
  margin-left: clamp(2rem, 7.55vw, 9.1rem);
  padding: 0;
  transform: translate3d(
    calc(var(--pointer-x) * 4px),
    calc(var(--pointer-y) * 3px),
    0
  );
  transition: transform 200ms ease-out;
}

.brand {
  display: block;
  width: clamp(12.5rem, 16.4vw, 19.75rem);
  height: auto;
  margin-bottom: clamp(2.5rem, 5.7vh, 3.85rem);
  filter: drop-shadow(0 0 18px rgba(205, 58, 230, 0.18));
}

h1 {
  margin: 0;
  font-family: Montserrat, Arial Black, sans-serif;
  font-size: clamp(4.75rem, 7.2vw, 8.65rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.065em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 38px rgba(212, 61, 231, 0.14);
}

h1 span {
  color: var(--accent);
  background: linear-gradient(125deg, #b62bd0 4%, #e657f2 57%, #f181fb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__content > p {
  margin: clamp(1.75rem, 3.9vh, 2.65rem) 0 clamp(2.8rem, 7.1vh, 4.8rem);
  font-size: clamp(1.5rem, 2.45vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.download-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 1.3vw, 1.3rem);
  min-height: clamp(3.8rem, 8vh, 5.45rem);
  padding: 0.55rem 1.2rem 0.55rem 2.05rem;
  overflow: hidden;
  border: 1px solid rgba(255, 196, 255, 0.76);
  border-radius: 0.75rem;
  background: linear-gradient(105deg, #be3bce 0%, #da58e6 58%, #ef7cf5 100%);
  box-shadow:
    0 0 0 1px rgba(244, 123, 255, 0.16) inset,
    0 0 30px rgba(206, 50, 226, 0.48),
    0 16px 50px rgba(98, 11, 112, 0.42);
  color: #0d0611;
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.55rem, 2.35vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.download-button::before {
  position: absolute;
  inset: -80% auto -80% -28%;
  width: 28%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  transform: rotate(18deg) translateX(-250%);
  animation: button-shine 3.8s ease-in-out infinite;
}

.download-button:hover {
  filter: brightness(1.09) saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 226, 255, 0.3) inset,
    0 0 42px rgba(226, 68, 244, 0.72),
    0 18px 54px rgba(98, 11, 112, 0.5);
  transform: translateY(-3px) scale(1.015);
}

.download-button:active {
  transform: translateY(1px) scale(0.99);
}

.download-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.download-button svg {
  width: clamp(2.3rem, 2.8vw, 3.25rem);
  height: clamp(2.3rem, 2.8vw, 3.25rem);
  padding: 0.38rem;
  border-radius: 0.4rem;
  background: #180a1d;
  stroke: #ed70f6;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkle {
  position: absolute;
  z-index: 2;
  width: var(--spark-size);
  height: var(--spark-size);
  opacity: 0;
  pointer-events: none;
  animation: sparkle var(--spark-duration) ease-in-out var(--spark-delay) infinite;
  will-change: transform, opacity;
}

.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkle::before,
.sparkle::after {
  position: absolute;
  inset: 50% auto auto 50%;
  content: "";
  border-radius: 999px;
  background: #ffd9ff;
  box-shadow: 0 0 9px #f665ff, 0 0 20px #d632ea;
  transform: translate(-50%, -50%);
}

.sparkle::before {
  width: 100%;
  height: 1px;
}

.sparkle::after {
  width: 1px;
  height: 100%;
}

@keyframes button-shine {
  0%, 58% { transform: rotate(18deg) translateX(-250%); }
  78%, 100% { transform: rotate(18deg) translateX(610%); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.25) rotate(0); }
  25% { opacity: 0.82; }
  55% { opacity: 0.2; transform: translate3d(var(--spark-drift), -14px, 0) scale(1) rotate(75deg); }
}

@keyframes aura-breathe {
  0%, 100% { opacity: 0.48; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.83; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

@keyframes aura-pulse {
  from { opacity: 0.35; transform: scale(0.82); }
  to { opacity: 0.92; transform: scale(1.12); }
}

@keyframes light-sweep {
  0%, 16%, 100% { opacity: 0; transform: translateX(-12vw) rotate(18deg); }
  40% { opacity: 0.68; }
  68% { opacity: 0; transform: translateX(23vw) rotate(18deg); }
}

@media (max-width: 900px) {
  .hero {
    align-items: end;
    height: 100svh;
    min-height: 100svh;
  }

  .hero__image {
    inset: -3% 0 21%;
    background-position: 80% center;
    transform: translate3d(
        calc(var(--pointer-x) * -6px),
        calc((var(--pointer-y) * -5px) + (var(--scroll-y) * 0.025px)),
        0
      )
      scale(1.08);
  }

  .hero__aura {
    top: 37%;
    left: 50%;
    width: min(118vw, 48rem);
    opacity: 0.78;
    filter: blur(9px) saturate(1.3);
  }

  .hero__light-sweep {
    left: 45%;
    height: 120%;
  }

  .hero__veil {
    background:
      linear-gradient(0deg, #08030c 0%, rgba(8, 3, 12, 0.98) 27%, rgba(8, 3, 12, 0.36) 53%, rgba(8, 3, 12, 0.02) 78%),
      linear-gradient(90deg, rgba(7, 2, 10, 0.32), transparent 65%);
  }

  .hero__grid {
    opacity: 0.17;
    mask-image: linear-gradient(0deg, black, transparent 70%);
  }

  .hero__content {
    width: 100%;
    margin: 0;
    padding: 4rem 1.35rem max(2rem, env(safe-area-inset-bottom));
    text-align: center;
    transform: none;
  }

  .brand {
    margin-bottom: 1.2rem;
    width: clamp(9.5rem, 43vw, 12rem);
    margin-inline: auto;
  }

  h1 {
    font-size: clamp(3.5rem, 16vw, 6rem);
    line-height: 0.88;
  }

  .hero__content > p {
    margin: 1rem 0 1.55rem;
    font-size: clamp(1.15rem, 5vw, 1.6rem);
  }

  .download-button {
    width: min(100%, 25rem);
    min-height: 4.45rem;
    justify-content: center;
    padding: 0.7rem 1rem 0.7rem 1.35rem;
    font-size: clamp(1.3rem, 5.8vw, 1.75rem);
  }

  .download-button svg {
    width: 2.85rem;
    height: 2.85rem;
  }

}

@media (max-width: 600px) {
  .hero__image {
    inset: -2% 0 20%;
    background-position: 68% center;
  }

  .hero__aura {
    top: 34%;
    width: 132vw;
  }
}

@media (max-width: 380px) {
  .hero__image {
    inset-right: -52%;
  }

  .hero__content {
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .hero__content,
  .download-button {
    transition: none;
    transform: none;
  }

  .sparkle,
  .download-button::before,
  .hero__aura::before {
    animation: none;
  }

  .hero__aura {
    animation: aura-breathe 10s ease-in-out infinite;
  }

  .hero__aura::after {
    animation: aura-pulse 8s ease-in-out infinite alternate;
  }

  .hero__light-sweep {
    animation: light-sweep 15s ease-in-out infinite;
  }
}