*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#030505 radial-gradient(ellipse at 70% 50%,#1a1a1b 0%,#111112 35%,#060707 75%,#030505 100%) fixed;color:#f2f2f2;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:2rem;padding:4vw 6vw}
.eyebrow{color:#4fe3ff;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;margin-bottom:1rem}
h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.05;margin-bottom:1.2rem}
.sub{font-size:1.15rem;line-height:1.6;color:#b8bcc2;max-width:32rem;margin-bottom:2rem}
.buttons{display:flex;flex-wrap:wrap;gap:.8rem}
.pill{display:inline-block;padding:.75rem 1.5rem;border:1.5px solid #f2f2f2;border-radius:999px;color:#f2f2f2;text-decoration:none;font-weight:600;transition:background .25s,color .25s}
.pill:hover,.pill:focus-visible{background:#f2f2f2;color:#0b0b0c}
.robot{position:relative}
.robot video{width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%);
          mask-image:radial-gradient(ellipse at center,#000 55%,transparent 75%)}
@media (max-width:800px){
  .hero{grid-template-columns:1fr;text-align:center;padding:8vw 5vw}
  .robot{order:-1}
  .sub{margin-left:auto;margin-right:auto}
  .buttons{justify-content:center}
}