@font-face {
  font-family: "Inter";
  src: url("assets/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #00183e;
  --ink: #051124;
  --cyan: #35f5ff;
  --violet: #8c56ff;
  --headline-violet: #be56ff;
  --muted: #9fa3ff;
  --content-bottom: clamp(24px, 12.933svh, 97px);
  --action-gap: clamp(48px, 13.333svh, 100px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--navy);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--navy);
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
}

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, #123a9b 0, transparent 42%),
    var(--navy);
}

.landing__background,
.landing__shade {
  position: absolute;
  inset: 0;
}

.landing__background {
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.landing__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(1.04);
  user-select: none;
}

.landing__shade {
  background: linear-gradient(
    180deg,
    var(--navy) 5.2885%,
    rgba(0, 24, 62, 0) 20.192%,
    rgba(0, 24, 62, 0) 70.939%,
    var(--navy) 89.669%
  );
}

.landing__content {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(var(--content-bottom), env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.hero-copy {
  width: min(100%, 279px);
  margin: auto auto var(--action-gap);
  text-align: center;
}

.hero-copy__title {
  display: flex;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-copy__kicker {
  color: #fff;
  font-size: clamp(18px, 5.556vw, 20px);
  font-weight: 600;
  line-height: 1;
}

.hero-copy__headline {
  background-image:
    linear-gradient(
      175.083deg,
      var(--cyan) 17.308%,
      var(--headline-violet) 88.942%
    ),
    linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  color: transparent;
  font-size: clamp(22px, 7.222vw, 26px);
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
  -webkit-background-clip: text;
}

.hero-copy__description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  opacity: 0.8;
}

.hero-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-button {
  position: relative;
  display: inline-flex;
  width: min(280px, calc(100vw - 64px));
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(
    168.69deg,
    #fff 0%,
    var(--cyan) 45%,
    var(--violet) 100%
  );
  box-shadow:
    0 16px 17px rgba(17, 168, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.download-button:hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

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

.download-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow:
    0 16px 17px rgba(17, 168, 255, 0.34),
    0 0 0 7px rgba(53, 245, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.download-button__icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.download-button__label {
  display: block;
  min-width: 186px;
  font-family: "Arial Black", "Inter", "Arial", sans-serif;
  font-size: clamp(15px, 4.722vw, 17px);
  font-weight: 900;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .landing__art {
    position: absolute;
    top: clamp(18px, 5.733svh, 43px);
    left: 0;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}

@media (max-width: 599px) and (max-height: 650px) {
  :root {
    --content-bottom: 24px;
    --action-gap: 38px;
  }
}

@media (min-width: 768px) {
  :root {
    --content-bottom: clamp(44px, 11svh, 104px);
    --action-gap: clamp(52px, 10svh, 96px);
  }

  .landing__content {
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
  }

  .hero-copy {
    width: min(100%, 640px);
  }

  .hero-copy__title {
    gap: 10px;
  }

  .hero-copy__kicker {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.1;
  }

  .hero-copy__headline {
    font-size: clamp(34px, 3.75vw, 52px);
    line-height: 1.08;
  }

  .hero-copy__description {
    margin-top: 12px;
    font-size: clamp(13px, 1.15vw, 17px);
    line-height: 1.35;
  }

  .download-button {
    width: clamp(280px, 28vw, 360px);
    height: 60px;
    gap: 11px;
  }

  .download-button__icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .download-button__label {
    min-width: auto;
    font-size: clamp(17px, 1.45vw, 20px);
  }
}

@media (min-width: 1000px) {
  .landing__art {
    object-position: center 46%;
  }
}

@media (min-width: 768px) and (max-height: 720px) {
  .landing__art {
    object-position: center 50%;
  }

  :root {
    --content-bottom: 32px;
    --action-gap: 40px;
  }

  .hero-copy__kicker {
    font-size: 20px;
  }

  .hero-copy__headline {
    font-size: 34px;
  }

  .download-button {
    height: 56px;
  }
}

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

  .download-button:hover,
  .download-button:active {
    transform: none;
  }
}