/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ba4xq-accent);outline-offset:2px;border-radius:2px}

/* tokens */
:root{
  /* font families: Syne = geometric display for headings; Onest = neutral humanist-geometric body; Spline Sans Mono = data/code accent */
  --ba4xq-font-display:"Syne",system-ui,sans-serif;
  --ba4xq-font-body:"Onest",system-ui,sans-serif;
  --ba4xq-font-mono:"Spline Sans Mono","SFMono-Regular",monospace;

  /* color */
  --ba4xq-ink:#0B1A33;
  --ba4xq-ink-2:#0E2245;
  --ba4xq-text:#111827;
  --ba4xq-muted:#5B6472;
  --ba4xq-bg:#F7F9FC;
  --ba4xq-surface:#FFFFFF;
  --ba4xq-accent:#2F6BFF;
  --ba4xq-accent-2:#00C2FF;
  --ba4xq-success:#16A34A;
  --ba4xq-border:#E5E9F0;
  --ba4xq-dark-text:#E8EEF8;
  --ba4xq-dark-muted:#93A4C0;
  --ba4xq-dark-border:rgba(255,255,255,.12);

  /* spacing */
  --ba4xq-s1:.4rem;
  --ba4xq-s2:.8rem;
  --ba4xq-s3:1.2rem;
  --ba4xq-s4:1.8rem;
  --ba4xq-s5:2.6rem;
  --ba4xq-s6:3.6rem;
  --ba4xq-s7:5rem;
  --ba4xq-s8:7rem;
  --ba4xq-maxw:1180px;
  --ba4xq-maxw-narrow:760px;

  /* radius */
  --ba4xq-r-sm:8px;
  --ba4xq-r-md:14px;
  --ba4xq-r-lg:22px;
  --ba4xq-r-pill:999px;

  /* shadow */
  --ba4xq-sh-sm:0 1px 2px rgba(11,26,51,.06),0 2px 8px rgba(11,26,51,.05);
  --ba4xq-sh-md:0 8px 28px rgba(11,26,51,.10);
  --ba4xq-sh-lg:0 24px 60px rgba(11,26,51,.16);
  --ba4xq-sh-glow:0 0 0 1px rgba(47,107,255,.25),0 14px 40px rgba(47,107,255,.20);

  /* transition */
  --ba4xq-t-fast:140ms cubic-bezier(.4,0,.2,1);
  --ba4xq-t:240ms cubic-bezier(.4,0,.2,1);
  --ba4xq-t-slow:520ms cubic-bezier(.16,1,.3,1);

  /* z-index */
  --ba4xq-z-header:100;
  --ba4xq-z-menu:120;
  --ba4xq-z-totop:90;
  --ba4xq-z-cookie:140;

  /* framework-mandated tokens (verbatim) */
  --header-h:68px;
  --logo-w:188px;
  --logo-h:34px;
}

/* base */
body{font-family:var(--ba4xq-font-body);background:var(--ba4xq-bg);color:var(--ba4xq-text);font-size:1.02rem}
h1,h2,h3,h4{font-family:var(--ba4xq-font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ba4xq-ink)}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
h4{font-size:1.05rem}
p{color:var(--ba4xq-text)}
.ba4xq-mono{font-family:var(--ba4xq-font-mono);font-size:.86em;letter-spacing:-.01em}
.ba4xq-muted{color:var(--ba4xq-muted)}
.ba4xq-eyebrow{font-family:var(--ba4xq-font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ba4xq-accent);display:inline-flex;align-items:center;gap:var(--ba4xq-s2)}
.ba4xq-eyebrow::before{content:"";width:26px;height:1px;background:var(--ba4xq-accent);display:inline-block}
strong{font-weight:700}
::selection{background:var(--ba4xq-accent);color:#fff}

main{padding-top:var(--header-h)}

.container{width:100%;max-width:var(--ba4xq-maxw);margin-inline:auto;padding-inline:var(--ba4xq-s4)}

.ba4xq-section{padding-block:var(--ba4xq-s8)}
.ba4xq-section--tight{padding-block:var(--ba4xq-s6)}
.ba4xq-dark{background:var(--ba4xq-ink);color:var(--ba4xq-dark-text)}
.ba4xq-dark h1,.ba4xq-dark h2,.ba4xq-dark h3,.ba4xq-dark h4{color:#fff}
.ba4xq-dark p{color:var(--ba4xq-dark-muted)}
.ba4xq-dark .ba4xq-eyebrow{color:var(--ba4xq-accent-2)}
.ba4xq-dark .ba4xq-eyebrow::before{background:var(--ba4xq-accent-2)}

.ba4xq-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ba4xq-muted);max-width:60ch}
.ba4xq-dark .ba4xq-lead{color:var(--ba4xq-dark-muted)}

.ba4xq-section-head{display:flex;flex-direction:column;gap:var(--ba4xq-s3);max-width:64ch;margin-bottom:var(--ba4xq-s6)}

/* buttons */
.ba4xq-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ba4xq-s2);font-family:var(--ba4xq-font-body);font-weight:600;font-size:.96rem;padding:.78em 1.5em;border-radius:var(--ba4xq-r-pill);transition:transform var(--ba4xq-t-fast),box-shadow var(--ba4xq-t),background var(--ba4xq-t);white-space:nowrap;border:1px solid transparent}
.ba4xq-btn:hover{transform:translateY(-2px)}
.ba4xq-btn--primary{background:var(--ba4xq-accent);color:#fff;box-shadow:var(--ba4xq-sh-glow)}
.ba4xq-btn--primary:hover{background:#1e58ec}
.ba4xq-btn--ghost{background:transparent;color:var(--ba4xq-ink);border-color:var(--ba4xq-border)}
.ba4xq-btn--ghost:hover{border-color:var(--ba4xq-accent);color:var(--ba4xq-accent)}
.ba4xq-dark .ba4xq-btn--ghost{color:#fff;border-color:var(--ba4xq-dark-border)}
.ba4xq-dark .ba4xq-btn--ghost:hover{border-color:var(--ba4xq-accent-2);color:var(--ba4xq-accent-2)}
.ba4xq-btn-row{display:flex;flex-wrap:wrap;gap:var(--ba4xq-s3);align-items:center}

.ba4xq-link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:600;color:var(--ba4xq-accent);font-size:.95rem}
.ba4xq-link-arrow svg{width:16px;height:16px;transition:transform var(--ba4xq-t)}
.ba4xq-link-arrow:hover svg{transform:translateX(4px)}
.ba4xq-dark .ba4xq-link-arrow{color:var(--ba4xq-accent-2)}

/* animations */
@keyframes ba4xq-fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes ba4xq-flow{0%{transform:translateX(-120%)}100%{transform:translateX(420%)}}
@keyframes ba4xq-flow-rev{0%{transform:translateX(420%)}100%{transform:translateX(-120%)}}
@keyframes ba4xq-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes ba4xq-slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}

.ba4xq-reveal{opacity:0}
.ba4xq-reveal.ba4xq-in{animation:ba4xq-fadeup var(--ba4xq-t-slow) forwards}
.ba4xq-reveal.ba4xq-d1{animation-delay:.08s}
.ba4xq-reveal.ba4xq-d2{animation-delay:.16s}
.ba4xq-reveal.ba4xq-d3{animation-delay:.24s}

/* responsive */
@media (max-width:760px){
  :root{--ba4xq-s8:4.4rem;--ba4xq-s7:3.4rem}
  .container{padding-inline:var(--ba4xq-s3)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ba4xq-reveal{opacity:1!important}
}