:root{--black: #0a0a0a;--gray: #6b6b6b;--line: #e8e8e8;--accent-shadow: 0 12px 40px rgba(0, 0, 0, .16)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Grotesk,-apple-system,sans-serif;background:#fff;color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden}main{max-width:680px;margin:0 auto;padding:0 24px}.hero{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:96px 0 48px}.cards-logo{display:flex;align-items:center;gap:14px;height:108px;margin-bottom:16px}.rect{width:66px;height:auto;will-change:transform}.title{font-size:44px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}.claim{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.4;max-width:520px;color:#2a2a2a}.claim .line{display:block}.cta{display:flex;gap:12px;justify-content:center;margin-top:32px}.download{background:var(--black);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:0 32px;display:flex;align-items:center;height:48px;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease}.download:hover{transform:translateY(-2px);box-shadow:var(--accent-shadow)}.star{display:inline-flex;gap:8px;color:var(--black);text-decoration:none;font-weight:700;font-size:15px;padding:0 24px;border:2px solid var(--black);height:48px;display:flex;align-items:center;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease}.star:hover{transform:translateY(-2px);box-shadow:var(--accent-shadow)}.meta{margin-top:18px;font-size:12px;color:var(--gray)}.demo{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:48px 0;gap:48px}.demo-frame{will-change:transform}.demo-frame img,.demo-frame video{width:100%;border-radius:14px;box-shadow:0 24px 80px #0000002e;display:block}.how{padding:48px 0 96px;text-align:center}h2{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}.reveal{opacity:0;transform:translateY(22px)}.pad-stage{margin:auto;width:280px;position:relative}.cards{display:flex;justify-content:center;align-items:center;gap:16px;height:68px;margin-bottom:24px}.card{width:56px;height:38px;border-radius:8px;background:var(--black);opacity:0;transform:translateY(14px) scale(.9);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.9,.3,1.2)}[data-phase="2"] .card,[data-phase="3"] .card,[data-phase="4"] .card{opacity:.25;transform:translateY(0) scale(1)}.card.focused{opacity:1!important;transform:translateY(0) scale(1.28)!important}[data-phase="4"] .card.focused{animation:confirm .5s ease both}.trackpad{width:280px;height:176px;border:2px solid var(--line);border-radius:20px;position:relative;background:#fbfbfb}.finger{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--black);opacity:0;transition:opacity .3s ease,transform .7s cubic-bezier(.3,.7,.3,1)}.f1{left:88px;top:78px}.f2{left:126px;top:70px}.f3{left:164px;top:78px}[data-phase="1"] .finger{opacity:1}[data-phase="1"] .finger:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid var(--black);animation:hold-pulse 1s ease-out infinite}[data-phase="2"] .finger,[data-phase="3"] .finger{opacity:1}[data-phase="3"] .finger{transform:translate(68px)}.steps{list-style:none;margin:56px auto auto;max-width:400px;text-align:left;display:grid;gap:8px}.steps li{font-size:15px;line-height:1.4;padding-left:16px;border-left:3px solid var(--line);transition:border-color .3s ease}.steps li.active{border-color:var(--black)}.note{max-width:440px;font-size:14px;line-height:1.55;color:var(--gray);margin:auto}footer{border-top:1px solid var(--line);padding:32px 0 56px;text-align:center;font-size:13px}footer a{color:var(--black);font-weight:700;text-decoration:none;margin-left:12px}footer a:hover{text-decoration:underline}.license{margin-top:10px;color:var(--gray);font-size:12px}.license a{margin-left:0;font-weight:500;color:var(--gray);text-decoration:underline}@keyframes hold-pulse{0%{transform:scale(.6);opacity:.9}to{transform:scale(1.5);opacity:0}}@keyframes confirm{0%{transform:translateY(0) scale(1.28)}45%{transform:translateY(-6px) scale(1.38)}to{transform:translateY(0) scale(1.28)}}@media(max-width:520px){.claim{font-size:22px}.cta{flex-direction:column;align-items:center}.rect{width:52px}}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}