*{box-sizing:border-box}
body{margin:0;background:#fbfaf7;font-family:'Instrument Sans',sans-serif;color:#141414}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#141414;color:#fbfaf7;
  padding:12px 20px;border-radius:0 0 9px 0;font:600 14px/1 'Instrument Sans',sans-serif}
.skip:focus{left:0}

:focus-visible{outline:2px solid #2f6df6;outline-offset:3px;border-radius:3px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

.media{position:relative;overflow:hidden}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#eef0ee 0%,#e6e9e6 100%);color:rgba(20,20,20,.42);
  font:500 12px/1.4 'JetBrains Mono',monospace;text-align:center;padding:20px;overflow:hidden}
.img-ph::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 3.4s ease-in-out infinite}
@keyframes shimmer{0%{background-position:140% 0}60%,100%{background-position:-40% 0}}
.img-ph svg{width:30px;height:30px;opacity:.5;position:relative}
.img-ph span{position:relative}
.img-ph.circle{border-radius:50%}

.card{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1),border-color .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -30px rgba(20,20,20,.4);border-color:rgba(47,109,246,.35)}
.btn{transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,filter .25s,background-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-dark:hover{box-shadow:0 14px 26px -14px rgba(20,20,20,.6)}
.btn-blue:hover{filter:brightness(1.06);box-shadow:0 14px 26px -14px rgba(110,168,255,.65)}
.btn-ghost:hover{background:rgba(20,20,20,.04)}
.btn-ghost-d:hover{background:rgba(255,255,255,.08)}
.navlink{position:relative;transition:color .2s}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:#141414;transition:right .28s cubic-bezier(.22,.61,.36,1)}
.navlink:hover{color:#141414}
.navlink:hover::after{right:0}
.chip{transition:transform .25s,background-color .25s,color .25s,border-color .25s}
.chip:hover{transform:translateY(-2px)}
.tool{transition:transform .25s,border-color .25s,background-color .25s}
.tool:hover{transform:translateY(-2px);border-color:rgba(110,168,255,.5);background:rgba(255,255,255,.09)}
.footlink{transition:color .2s}
.footlink:hover{color:#e8ecf1}

.dot{width:6px;height:6px;border-radius:50%;background:#3fae5e;box-shadow:0 0 0 0 rgba(63,174,94,.5);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,174,94,.5)}70%{box-shadow:0 0 0 8px rgba(63,174,94,0)}100%{box-shadow:0 0 0 0 rgba(63,174,94,0)}}
.scrollcue{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:920px){
  .grid-3{grid-template-columns:repeat(2,1fr)!important}
  .feature{grid-template-columns:1fr!important}
  .feature .media{min-height:0!important}
  h1{font-size:50px!important}
}

@media (max-width:600px){

  .grid-2,.grid-3,.feature{grid-template-columns:1fr!important}
  .feature .media{min-height:0!important;padding:26px 22px!important}
  .feature>div:nth-child(2){padding:30px 24px!important}

  h1{font-size:33px!important;letter-spacing:-1px!important}
  h2{font-size:27px!important;letter-spacing:-.7px!important}

  .navrow{padding-left:20px!important;padding-right:20px!important}
  .navlinks{gap:12px!important;font-size:12.5px!important}
  .navlinks .btn{padding-left:12px!important;padding-right:12px!important}
  .brand{font-size:15px!important}

  .stats{gap:20px!important;flex-wrap:wrap!important;justify-content:center!important}

  .wr-fig{height:150px!important}

  .hero-sub br{display:none}
}