*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FBFBFD;color:#15151A;font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(10,108,255,.16);color:#0a0a0f}
a{color:inherit;text-decoration:none}

/* ---- keyframes (marketing) ---- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulsedot{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
@keyframes blink{0%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes spinslow{to{transform:rotate(360deg)}}
@keyframes driftgrid{to{background-position:60px 60px}}
@keyframes radar{0%{transform:translate(-50%,-50%) scale(.32);opacity:.6}80%{opacity:0}100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}}
@keyframes flowdown{0%{transform:translateY(-14px);opacity:0}11%{opacity:1}38%{opacity:1}56%{opacity:0}100%{transform:translateY(72px);opacity:0}}
@keyframes flipcard{0%,40%{transform:rotateY(0deg)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes shuttle{0%{left:16%}50%{left:84%}100%{left:16%}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes blip{0%,100%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1)}45%{opacity:1}70%{opacity:0;transform:scale(1)}}

/* ---- keyframes (privacy) ---- */
@keyframes flowx{to{stroke-dashoffset:-24}}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---- hover / active interaction states (real CSS) ---- */
.navlink{transition:color .2s}
.navlink:hover{color:#15151A}

.nav-download{transition:transform .2s ease,background .2s ease}
.nav-download:hover{transform:translateY(-1px);background:#000}

.btn-primary{transition:transform .2s ease,filter .2s ease}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07)}

.btn-ghost{transition:transform .2s ease,border-color .2s ease}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(20,20,30,.28)}

.clip-tilt{transition:transform .25s ease,box-shadow .25s ease}
.clip-tilt:hover{box-shadow:0 8px 20px rgba(20,30,60,.1)}

.copy-btn{transition:transform .15s ease,filter .2s ease}
.copy-btn:hover{filter:brightness(1.06)}
.copy-btn:active{transform:scale(.98)}

.reset-btn{transition:color .2s}
.reset-btn:hover{color:#5c5c66}

.step-tile{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.step-tile:hover{transform:rotate(-10deg) scale(1.07)}

.shield-tile{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.shield-tile:hover{transform:rotate(-8deg) scale(1.05)}

.dl-primary{transition:transform .2s ease,filter .2s ease}
.dl-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}

.dl-ghost{transition:background .2s ease,border-color .2s ease}
.dl-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}

.privacy-readlink{transition:color .2s;color:#0A6CFF;font-weight:500}
.privacy-readlink:hover{color:#0a4fbf}