@import url('/_next/static/css/index.CHljFGbO.css');

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_next/static/_vinext_fonts/roboto-6510cfeb0b42/roboto-d2c1b6aa.woff2') format('woff2');
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgb(0 0 0 / 52%);
  opacity: 0;
  transition: opacity 420ms ease;
}
.menu-overlay.is-open { opacity: 1; }
.menu-sheet {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  min-height: min(72svh, 620px);
  padding: calc(max(84px, env(safe-area-inset-top) + 70px)) 26px 36px;
  background: #090b0a;
  box-shadow: 0 30px 80px rgb(0 0 0 / 60%);
  transform: translateY(-105%);
  opacity: 0;
  visibility: hidden;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 360ms ease, visibility 520ms;
}
.menu-sheet.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.transition-picker {
  position: fixed;
  z-index: 68;
  top: max(78px, calc(env(safe-area-inset-top) + 68px));
  left: 50%;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(0 0 0 / 66%);
  box-shadow: 0 8px 30px rgb(0 0 0 / 30%);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.transition-picker button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aeb5b0;
  font: 700 11px/1 'Roboto', Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
.transition-picker button.is-active { background: #eef3ef; color: #070908; }

.hero {
  position: relative;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.hero-image {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  background-position: 58% 34%;
  transform: scale(1.01);
}
.hero-transition {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.hero-transition::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 33%;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 5%) 18%,
    rgb(0 0 0 / 26%) 43%,
    rgb(0 0 0 / 68%) 73%,
    #000 100%
  );
  transition: height 500ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease;
}
.hero-copy {
  position: absolute;
  z-index: 3;
  inset: auto 22px max(48px, calc(env(safe-area-inset-bottom) + 26px));
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  clip-path: none;
  will-change: transform, opacity;
}
.hero-copy h1 {
  width: min(100%, 700px);
  margin: 0 0 26px;
  color: #f3f7f4;
  font-size: clamp(3.4rem, 15vw, 6.4rem);
  line-height: .91;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgb(0 0 0 / 52%);
}
.hero .primary-action { max-width: 430px; }

body.transition-ai .hero-transition {
  background:
    radial-gradient(75% 35% at 18% 88%, rgb(32 255 132 / 35%) 0%, rgb(17 187 104 / 16%) 38%, transparent 72%),
    radial-gradient(74% 36% at 88% 83%, rgb(48 195 255 / 28%) 0%, rgb(36 151 209 / 13%) 42%, transparent 74%);
}
body.transition-ai .hero-transition::after {
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgb(1 9 6 / 5%) 12%,
    rgb(2 20 13 / 34%) 40%,
    rgb(0 9 6 / 81%) 76%,
    #000 100%
  );
}
body.transition-ai .hero-copy h1 {
  text-shadow: 0 0 30px rgb(55 238 143 / 12%), 0 3px 24px rgb(0 0 0 / 55%);
}

@media (max-width: 759px) {
  .proof-device {
    width: calc(100% - 40px);
  }
}

@media (min-width: 760px) {
  .hero-image { background-position: center 35%; }
  .hero-copy { inset: auto 6vw 8vh; }
  .hero-copy h1 { max-width: 780px; }
  .transition-picker { top: 26px; }
}