/* The floating header on the home, pricing and grant pages (the legal pages
   keep their own). One filled button, Start free; everything else in the bar
   is a word or an icon. Below 1040px the links fold into a menu under the bar.
   Colours come from each page's theme tokens; behaviour is in /nav.js. */

nav.top{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;
  padding:8px 8px 8px 28px;
  width:min(1040px, calc(100vw - 32px));
  background:rgba(15,12,26,0.55);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:100px;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(124,58,237,0.1),
    0 0 0 1px rgba(0,0,0,0.2);
  transition:background .3s,border-color .3s;
}
[data-theme="light"] nav.top{
  background:rgba(255,255,255,0.68);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 8px 40px rgba(124,58,237,0.12), inset 0 1px 0 rgba(255,255,255,0.95), 0 0 0 1px rgba(0,0,0,0.04);
}
.nav-logo a{display:block;line-height:0;border-radius:8px;}
.nav-logo a:focus-visible{outline:2px solid var(--purple);outline-offset:4px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{
  font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;
  text-decoration:none;padding:10px 18px;border-radius:100px;transition:all .2s;
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.1);}
.nav-link[aria-current="page"]{color:var(--text);}
/* AI Grant: the one campaign link, marked by a dot rather than a pill. */
.nav-grant{display:inline-flex;align-items:center;gap:8px;color:var(--text2);font-weight:600;}
.nav-grant::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--cyan));}
.nav-links .nav-only-menu{display:none;}
.nav-right{display:flex;align-items:center;gap:8px;}

/* Theme: one icon, showing where it goes — a moon on light, a sun on dark. */
.theme-toggle,.nav-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--muted);cursor:pointer;transition:all .2s;
}
.theme-toggle:hover,.nav-burger:hover{color:var(--text);background:var(--card2);}
.theme-toggle svg,.nav-burger svg,.nav-theme-row svg{width:18px;height:18px;flex-shrink:0;}
.i-sun{display:none;}
[data-theme="dark"] .i-sun{display:block;}
[data-theme="dark"] .i-moon{display:none;}

/* Sign in: an outline beside Start free, so the two read as a pair. */
.nav-signin{
  font-size:14px;font-weight:600;color:var(--text2);white-space:nowrap;
  text-decoration:none;padding:12px 22px;border-radius:100px;
  border:1px solid rgba(255,255,255,0.22);transition:all .2s;
}
[data-theme="light"] .nav-signin{border-color:rgba(124,58,237,0.32);}
.nav-signin:hover{color:var(--text);border-color:var(--purple2);background:var(--card);}
.nav-cta{
  display:inline-block;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--purple) 0%,var(--purple2) 100%);
  color:#fff;font-size:13px;font-weight:700;
  padding:13px 26px;border-radius:100px;cursor:pointer;
  transition:all .25s;letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(124,58,237,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.18);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(124,58,237,0.6), inset 0 1px 0 rgba(255,255,255,0.3);}
.nav-burger{display:none;color:var(--text);}
.nav-burger .i-close{display:none;}
nav.top.open .nav-burger .i-open{display:none;}
nav.top.open .nav-burger .i-close{display:block;}
.nav-link:focus-visible,.theme-toggle:focus-visible,.nav-burger:focus-visible,
.nav-signin:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}

/* Six links fit from 1180px; below that they tighten, and below 1040px they
   move into the menu (at 960px, with Blog added, Sign in and Start free
   wrapped onto two lines). */
@media(max-width:1180px){.nav-link{padding:10px 12px;}.nav-links{gap:0;}}
@media(max-width:1040px){
  nav.top{padding:8px 8px 8px 20px;}
  .nav-burger{display:inline-flex;}
  .nav-links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    background:#160f2a;
    border:1px solid rgba(255,255,255,0.12);border-radius:24px;
    box-shadow:0 16px 48px rgba(0,0,0,0.35);
    max-height:calc(100dvh - 100px);overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }
  [data-theme="light"] .nav-links{
    background:#fff;border-color:rgba(0,0,0,0.06);
    box-shadow:0 16px 48px rgba(124,58,237,0.16);
  }
  nav.top.open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .2s ease;}
  .nav-link{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;font-size:16px;color:var(--text);}
  .nav-link:hover{background:var(--card2);}
  .nav-link[aria-current="page"]{color:var(--purple);}
  [data-theme="dark"] .nav-link[aria-current="page"]{color:#c084fc;}
  .nav-theme-row{border:0;background:none;font:inherit;font-size:15px;color:var(--muted);cursor:pointer;text-align:left;}
  .nav-menu-sep{height:1px;margin:6px 16px;background:var(--line2);}
}
@media(max-width:600px){
  nav.top{top:12px;width:calc(100vw - 24px);padding:6px 6px 6px 16px;}
  .nav-logo img{height:26px!important;}
  .nav-right{gap:2px;}
  .nav-right .theme-toggle,.nav-signin{display:none;}
  .nav-links .nav-only-menu{display:flex;}
  .nav-cta{padding:11px 18px;}
}