/* Usign marketing site — shared tokens, base, keyframes.
   Layout is always inline-styled; this file only carries CSS that
   cannot be inline: design tokens, @keyframes, base resets. */

:root{
  --ink:#0E0F13; --ink-2:#16181E; --paper:#FAF9F6; --surface:#FFFFFF;
  --accent:#0d0de6; --accent-600:#0a0ab8; --signal:#535efc; --signed:#16A36A;
  --draft:#E0A21A; --pen:#ff4331; --muted:#6b6e76; --muted-2:#8a8d95;
  --line:#E6E3DC; --line-2:#efece5; --ease:cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Geist',sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
::selection{background:rgba(13,13,230,0.14);}
.mono{font-family:'Geist Mono',monospace;}

@keyframes heroCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes drawPath{to{stroke-dashoffset:0}}
@keyframes drawFrom{from{stroke-dashoffset:var(--sl)}to{stroke-dashoffset:0}}
@keyframes spinDash{to{stroke-dashoffset:0}}
@keyframes dotRun{0%{left:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(13,13,230,0)}50%{box-shadow:0 0 0 7px rgba(13,13,230,0.12)}}
@keyframes meterFill{from{width:0}to{width:var(--mw)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-8deg)}70%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes lifecycleWave{0%{background:#e9e6df;transform:scale(.5);opacity:0}18%{opacity:1;transform:scale(1)}30%{background:var(--draft)}58%{background:var(--accent)}88%,100%{background:var(--signed)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  [data-play]{animation:none !important;}
}