/* Shared top bar: loaded by the home page, Convexa and the try-on so all three render the same header. */
header.nav{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;font-weight:400;text-align:left}
header.nav .wrap{max-width:var(--max,1080px);margin:0 auto;padding:0 20px}
@media (min-width:720px){header.nav{font-size:18px}header.nav .wrap{padding:0 32px}}
header.nav a:focus-visible,header.nav button:focus-visible{outline:3px solid #A78BFA;outline-offset:3px;border-radius:6px}
  /* nav: floats transparent over the full-bleed hero, turns solid after it */
  header.nav{--nv-ink:#fff;--nv-mut:rgba(255,255,255,.82);--nv-grad:linear-gradient(120deg,#FF8FB8,#B69CFF);position:fixed;top:0;left:0;right:0;z-index:10;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
  header.nav.solid{--nv-ink:var(--ink);--nv-mut:var(--mut);--nv-grad:var(--grad);background:rgba(255,251,248,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.01em;text-decoration:none;color:var(--nv-ink)}
  .brand span{background:var(--nv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  header.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
  header.nav nav a{text-decoration:none;color:var(--nv-mut)}
  header.nav nav a:hover{color:var(--nv-ink)}
  @media (max-width:420px){header.nav ul{gap:18px;font-size:14px}.brand{font-size:22px}}


/* Projects dropdown in the top bar: opens on hover (mouse), focus (keyboard) or tap (phones, via nav.js) */
.nav-in{position:relative}
.has-menu{position:static}
.menu-btn{font:inherit;font-weight:500;color:var(--nv-mut);background:none;border:0;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu-btn:hover,.has-menu.open .menu-btn,.menu-btn.cur{color:var(--nv-ink)}
.menu-btn svg{width:10px;height:10px;transition:transform .2s ease}
.has-menu.open .menu-btn svg{transform:rotate(180deg)}
.menu{display:none;position:absolute;top:100%;right:16px;padding-top:8px;z-index:12;width:min(300px,calc(100vw - 32px))}
.has-menu.open .menu{display:block}
.menu-in{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 24px 50px -20px rgba(36,23,38,.4)}
header.nav .menu a,header.nav .menu a:hover{display:block;color:var(--ink);padding:12px 14px;border-radius:12px;line-height:1.3}
header.nav .menu a:hover,header.nav .menu a:focus-visible{background:rgba(124,58,237,.08)}
.menu a b{display:block;font-size:15.5px;font-weight:600}
.menu a span{display:block;font-size:13px;color:var(--mut);font-weight:400;margin-top:2px}
.menu a[aria-current="page"]{background:rgba(214,38,106,.07)}
@media (min-width:720px){
  .has-menu{position:relative}
  .menu{right:auto;left:-18px;width:300px}
}
@media (hover:hover){
  .has-menu:hover .menu{display:block}
  .has-menu:hover .menu-btn{color:var(--nv-ink)}
  .has-menu:hover .menu-btn svg{transform:rotate(180deg)}
}