:root {
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --ink: #0a0a0a;
  --muted: #4b4d51;
  --brand: #0c7be9;
  --field-bg: #f1f2f3;
  --slide-x: 336px;
  --slide-delay: 3.8s;
  --slide-duration: 1.45s;
  --screen-swap-delay: 4.35s;
  --screen-swap-duration: 0.12s;
  --copy-delay: 5.5s;
  --type-line-1-delay: 5.95s;
  --type-line-1-end: 7.81s;
  --type-line-2-delay: 6.89s;
  --type-line-2-end: 9.37s;
}

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.brand {
  position: absolute;
  top: clamp(1.1rem, 2.6vw, 2.3rem);
  left: clamp(1.1rem, 2.8vw, 2.8rem);
  z-index: 6;
  display: inline-flex;
}

.brand img {
  width: 60px;
  height: auto;
  display: block;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(4.8rem, 8vw, 6.2rem) clamp(1rem, 4vw, 4rem);
}

.stage {
  position: relative;
  width: min(1380px, 100%);
  height: min(900px, 92vh);
}

.device-cluster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(300px, 35vw, 352px);
  aspect-ratio: 300 / 600;
  transform: translate(-50%, -50%);
  animation: slide-device var(--slide-duration) cubic-bezier(0.22, 0.81, 0.22, 1) var(--slide-delay) forwards;
}

.device-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.device-layer.start {
  opacity: 1;
  background-image: url("assets/start.svg");
  animation: hide-start var(--screen-swap-duration) steps(1, end) var(--screen-swap-delay) forwards;
}

.device-layer.end {
  opacity: 0;
  background-image: url("assets/end.svg");
  animation: show-end var(--screen-swap-duration) steps(1, end) var(--screen-swap-delay) forwards;
}

.content-panel {
  position: absolute;
  top: 50%;
  right: clamp(0rem, 2vw, 1rem);
  width: min(560px, 46vw);
  transform: translateY(-50%) translateX(32px);
  opacity: 0;
  animation: reveal-content 0.82s ease var(--copy-delay) forwards;
}

#hero-title {
  margin: 0;
  text-transform: uppercase;
  font-family: "Anton", "Impact", Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2rem, 4.7vw, 4.35rem);
font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.015em;
  display: grid;
  gap: 0.05em;
}

.type-line {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--ink);
}

.line-1 {
  animation:
    type-line-1 0.78s steps(18, end) var(--type-line-1-delay) forwards,
    caret-blink 0.62s step-end var(--type-line-1-delay) 3,
    caret-off 0.001s linear var(--type-line-1-end) forwards;
}

.line-2 {
  animation:
    type-line-2 0.64s steps(13, end) var(--type-line-2-delay) forwards,
    caret-blink 0.62s step-end var(--type-line-2-delay) 4,
    caret-off 0.001s linear var(--type-line-2-end) forwards;
}

.signup-form {
  margin-top: clamp(1.3rem, 3.7vh, 2.3rem);
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.signup-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(3rem, 7.1vh, 4rem);
  border: 2.3px solid rgba(9, 10, 12, 0.92);
  border-radius: 999px;
  background: var(--field-bg);
  padding: 0 1.2rem;
  color: var(--ink);
  font-size: clamp(0.95rem, 1.35vw, 1.4rem);
  font-family: inherit;
  outline: none;
}

.signup-form input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(12, 123, 233, 0.16);
}

.signup-form input::placeholder {
  color: rgba(10, 10, 10, 0.75);
}

.signup-form button {
  height: clamp(3rem, 7.1vh, 4rem);
  border: 0;
  border-radius: 999px;
  padding: 0 clamp(1.1rem, 2.1vw, 1.7rem);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.93rem, 1.1vw, 1.15rem);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.signup-form button:hover {
  transform: translateY(-2px);
  background: #0568cc;
  box-shadow: 0 12px 20px rgba(12, 123, 233, 0.24);
}

.content-panel p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.96vw, 0.94rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  padding: 0;
  white-space: nowrap;
}

@keyframes slide-device {
  0%,
  24% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(calc(-50% - var(--slide-x)), -50%);
  }
}

@keyframes show-end {
  to {
    opacity: 1;
  }
}

@keyframes hide-start {
  to {
    opacity: 0;
  }
}

@keyframes reveal-content {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes type-line-1 {
  to {
    width: 18ch;
  }
}

@keyframes type-line-2 {
  to {
    width: 13ch;
  }
}

@keyframes caret-blink {
  0%,
  49% {
    border-right-color: var(--ink);
  }
  50%,
  100% {
    border-right-color: transparent;
  }
}

@keyframes caret-off {
  to {
    border-right-color: transparent;
  }
}

@media (max-width: 1120px) {
  :root {
    --slide-x: 280px;
  }

  .content-panel {
    width: min(500px, 48vw);
  }
}

@media (max-width: 930px) {
  .stage {
    height: max(830px, 100vh);
  }

  .device-cluster {
    top: 42%;
    width: clamp(304px, 69vw, 448px);
    animation: slide-device-mobile 1.38s cubic-bezier(0.22, 0.81, 0.22, 1) var(--slide-delay) forwards;
  }

  .content-panel {
    top: auto;
    right: auto;
    left: 50%;
    bottom: clamp(2rem, 5vh, 3.5rem);
    width: min(640px, 92vw);
    transform: translateX(-50%) translateY(34px);
    text-align: center;
    animation: reveal-mobile 0.8s ease var(--copy-delay) forwards;
  }

  #hero-title {
    font-size: clamp(1.7rem, 8.4vw, 3.3rem);
    justify-items: center;
  }

  .signup-form {
    margin-top: 1.3rem;
    gap: 0.65rem;
  }

  @keyframes slide-device-mobile {
    0%,
    24% {
      transform: translate(-50%, -50%);
    }
    100% {
      transform: translate(-50%, -60%);
    }
  }

  @keyframes reveal-mobile {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(34px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
}

@media (max-width: 620px) {
  #hero-title {
    font-size: clamp(1.45rem, 9.2vw, 2.6rem);
  }

  .type-line {
    border-right-width: 2px;
  }

  .signup-form {
    flex-direction: column;
  }

  .signup-form input,
  .signup-form button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-cluster,
  .device-layer.start,
  .device-layer.end,
  .content-panel,
  .line-1,
  .line-2 {
    animation: none !important;
  }

  .device-cluster {
    transform: translate(calc(-50% - var(--slide-x)), -50%);
  }

  .device-layer.start {
    opacity: 0;
  }

  .device-layer.end {
    opacity: 1;
  }

  .content-panel {
    opacity: 1;
    transform: translateY(-50%);
  }

  .type-line {
    width: auto;
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 930px) {
  .device-cluster {
    transform: translate(-50%, -60%);
  }

  .content-panel {
    transform: translateX(-50%);
  }
}