:root {
  --blue-950: #061338;
  --blue-900: #08205d;
  --blue-800: #0c3d91;
  --blue-700: #0d61d8;
  --cyan-300: #57dbff;
  --cyan-500: #13a9ff;
  --orange-600: #ff5a16;
  --orange-500: #ff7a1f;
  --orange-300: #ffc14d;
  --white: #ffffff;
  --shadow-blue: rgba(0, 16, 56, 0.36);
  --shadow-orange: rgba(131, 38, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--blue-950);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Sora, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 5%, rgba(87, 219, 255, 0.28), transparent 24rem),
    radial-gradient(circle at 18% 72%, rgba(13, 97, 216, 0.34), transparent 23rem),
    radial-gradient(circle at 86% 28%, rgba(255, 122, 31, 0.13), transparent 19rem),
    linear-gradient(155deg, var(--blue-950) 0%, var(--blue-900) 48%, #071947 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 74%);
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

a {
  color: inherit;
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px) 18px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vh, 28px);
}

.landing-stack {
  align-self: center;
  display: grid;
  justify-items: center;
  width: 100%;
  gap: clamp(18px, 3vh, 30px);
}

.brand-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo {
  display: block;
  width: min(58vw, 280px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 10, 38, 0.38));
}

.hero {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(22px, 4vw, 34px);
}

.video-frame {
  width: min(100%, 940px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(87, 219, 255, 0.42);
  border-radius: 8px;
  overflow: hidden;
  background: #02091f;
  box-shadow:
    0 26px 70px rgba(0, 11, 43, 0.56),
    0 0 0 8px rgba(87, 219, 255, 0.055),
    0 0 42px rgba(19, 169, 255, 0.24);
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.platform-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  width: min(100%, 360px);
  padding: 0 28px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  color: var(--white);
  background:
    linear-gradient(180deg, var(--orange-300) 0%, var(--orange-500) 34%, var(--orange-600) 100%);
  box-shadow:
    0 9px 0 #b83705,
    0 20px 36px var(--shadow-orange),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(0.94rem, 2.4vw, 1.08rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.platform-button:hover {
  filter: saturate(1.06) brightness(1.04);
  transform: translateY(-2px);
  box-shadow:
    0 11px 0 #b83705,
    0 24px 40px var(--shadow-orange),
    inset 0 2px 0 rgba(255, 255, 255, 0.48);
}

.platform-button:active {
  transform: translateY(6px);
  box-shadow:
    0 3px 0 #b83705,
    0 12px 24px var(--shadow-orange),
    inset 0 2px 0 rgba(255, 255, 255, 0.36);
}

.platform-button:focus-visible {
  outline: 4px solid var(--cyan-300);
  outline-offset: 5px;
}

.button-shine {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.34) 32%, transparent 42% 100%);
  transform: translateX(-38%);
  transition: transform 380ms ease;
}

.platform-button:hover .button-shine {
  transform: translateX(38%);
}

.button-text {
  text-shadow: 0 2px 0 rgba(104, 30, 0, 0.38);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
}

.legal-links a {
  text-decoration: none;
  text-underline-offset: 4px;
}

.legal-links a:hover,
.legal-links a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

.legal-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(18px, 5vw, 44px);
  display: grid;
  align-content: start;
  gap: 32px;
}

.legal-logo-link {
  justify-self: center;
  display: block;
  width: min(64vw, 250px);
  filter: drop-shadow(0 18px 28px rgba(0, 10, 38, 0.38));
}

.legal-logo-link img {
  display: block;
  width: 100%;
  height: auto;
}

.legal-content {
  color: var(--white);
}

.legal-content h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
}

.legal-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .page-shell {
    gap: 18px;
    padding-top: 18px;
  }

  .landing-stack {
    gap: 16px;
  }

  .brand-logo {
    width: min(72vw, 230px);
  }

  .video-frame {
    box-shadow:
      0 18px 42px rgba(0, 11, 43, 0.56),
      0 0 0 5px rgba(87, 219, 255, 0.055),
      0 0 30px rgba(19, 169, 255, 0.2);
  }

  .platform-button {
    min-height: 58px;
    padding: 0 20px;
    box-shadow:
      0 7px 0 #b83705,
      0 16px 30px var(--shadow-orange),
      inset 0 2px 0 rgba(255, 255, 255, 0.45);
  }
}