:root{
  --paper:#FAFAF8; --ink:#14151A; --ink-soft:#3A3C44; --card:#FFFFFF; --muted:#6B6E76; --line:#E7E6E1;
  --accent:#3A46E0; --accent-ink:#2A34B0; --accent-wash:#EEF0FD;
  --good:#0F8F6C; --good-wash:#E1F4EC; --warn:#B45309; --danger:#DC2626;
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Work Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.16,.8,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.6; font-size:16px;
}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
::selection{background:var(--accent-wash); color:var(--ink);}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; font-weight:650; letter-spacing:-0.015em;}

/* Reveal-on-scroll + load-in choreography (shared across marketing pages) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.load-in{opacity:0; animation:fadeUp .8s var(--ease) forwards;}
.load-in.d1{animation-delay:.05s;}
.load-in.d2{animation-delay:.16s;}
.load-in.d3{animation-delay:.27s;}
.load-in.d4{animation-delay:.38s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important;}
}

/* Nav */
nav.site{
  background:rgba(250,250,248,0.7); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20; border-bottom:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
nav.site.scrolled{
  background:rgba(250,250,248,0.94); border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(20,21,26,0.05);
}
nav.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo{
  width:30px; height:30px; border-radius:9px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:15px; color:#fff; flex-shrink:0;
}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);}
.nav-links{display:flex; align-items:center; gap:30px; font-size:14.5px;}
.nav-links a{text-decoration:none; color:var(--muted); transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
/* Injected by nav.js only for visitors who arrived via a paid landing page
   (e.g. /agency-pilot) that isn't in this nav by design — gives them a way
   back after clicking the logo/another nav link, instead of losing the page
   entirely. Accent-colored so it doesn't read as just another nav item. */
.nav-links a.nav-back-link{color:var(--accent-ink); font-weight:600;}
.nav-links a.nav-back-link:hover{color:var(--accent);}
.nav-toggle{display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); padding:4px 6px;}
.nav-login-mobile{display:none;}

/* Buttons */
.btn{
  border:none; border-radius:999px; padding:12px 22px; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--font-body);
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,21,26,0.18);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn-lg{padding:15px 28px; font-size:15px;}

/* Footer (marketing) */
footer.site-footer{border-top:1px solid var(--line); padding:52px 0 30px; color:var(--muted); font-size:13.5px;}
.footer-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:36px;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:0 0 14px; font-weight:500;}
.footer-col a{display:block; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:10px; transition:color .15s;}
.footer-col a:hover{color:var(--accent-ink);}
.footer-bottom{border-top:1px solid var(--line); padding-top:22px; font-size:12.5px;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  #navLoginBtn{display:none;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--card); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:6px 28px 12px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-login-mobile{display:block;}
}