.btn:active{transform:translateY(0) scale(.97)}
.nav-links a{position:relative;transition:color .18s ease}
.nav-links a:hover{color:#fff}
/* Underline grows from the left on hover - small, but it makes the nav feel
   built rather than assembled. */
.nav-links a:after{
  content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;
  border-radius:2px;background:var(--r-blue);transition:width .22s ease;
}
.nav-links a:hover:after{width:100%}
.nav-logo-box{transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s ease}
.nav-logo:hover .nav-logo-box{transform:rotate(-8deg) scale(1.06);box-shadow:0 8px 22px rgba(47,128,237,.5)}

/* ── Scroll reveal ──
   Sections fade up as they enter the viewport. .reveal is applied by
   marketing.js, which also adds .in - so with JS off, nothing is ever hidden. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ── Forms & focus ──
   Consistent focus treatment with the app, and visible for keyboard users. */
.form-input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.form-input:hover{border-color:#31527a}
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--r-blue-light);outline-offset:3px;border-radius:10px;
}

/* Stat figures deserve the display treatment - they're a headline, not body copy. */
.hero-stat-n{letter-spacing:-.04em;
  background:linear-gradient(160deg,#fff,#a9cbf5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}