/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.5rem var(--side,clamp(1.25rem,4vw,3.5rem));
  border-bottom:1px solid var(--hair);
  transition:background-color .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
/* On scroll the bar goes solid black (its white logo/links/buttons stay as-is) and keeps that black
   for every section — no colour flipping. At the very top it stays transparent (its default look). */
.nav.scrolled{background:oklch(0.15 0 0);border-bottom-color:oklch(1 0 0 / .08);}
.brand{display:inline-flex;align-items:center;}
.brand img{
  display:block;height:2rem;width:auto;
}
.nav-links{display:flex;align-items:center;gap:clamp(1.125rem,2.4vw,2.25rem);}
.nav-link{
  color:oklch(1 0 0 / .88);text-decoration:none;
  font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap;transition:color .15s;
}
.nav-link:hover{color:#fff;}
/* platform dropdown */
.nav-drop{position:relative;}
.nav-trigger{
  display:inline-flex;align-items:center;gap:.375rem;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;
}
.nav-trigger svg{
  width:.8125rem;height:.8125rem;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.nav-drop.open .nav-trigger{color:#fff;}
.nav-drop.open .nav-trigger svg{transform:rotate(180deg);}

.nav-menu{
  position:absolute;top:calc(100% + 1.25rem);left:-1rem;
  z-index:40;min-width:17rem;
  display:flex;flex-direction:column;gap:.125rem;
  padding:.5rem;border-radius:var(--r-3xl);
  background:var(--card);
  border:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  box-shadow:0 20px 40px -14px oklch(0 0 0 / .35);
  opacity:0;transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
/* bridges the gap so the pointer can travel to the menu */
.nav-menu::before{
  content:"";position:absolute;left:0;right:0;top:-1.25rem;height:1.25rem;
}
.nav-drop.open .nav-menu{opacity:1;transform:none;pointer-events:auto;}

.nav-item{
  display:block;padding:.6875rem .875rem;
  border-radius:var(--r-2xl);text-decoration:none;
  transition:background .2s;
}
.nav-item:hover,.nav-item:focus-visible{
  background:var(--secondary);outline:none;
}
.nav-item-t{
  display:block;color:var(--foreground);
  font-size:.875rem;font-weight:600;letter-spacing:-.01em;
}
.nav-item-s{
  display:block;margin-top:.1875rem;
  color:var(--muted-foreground);
  font-size:.75rem;line-height:1.4;
}

@media (prefers-reduced-motion:reduce){
  .nav-menu{transition:none;}
  .nav-trigger svg{transition:none;}
}
.nav-actions{display:flex;align-items:center;gap:.5rem;}

/* ---------- mobile nav (hamburger, <=1040px) ---------- */
.nav-burger{display:none;}
@media (max-width:1040px){
  .nav{flex-wrap:wrap;gap:0 1rem;}
  /* the open burger menu is a solid dark panel */
  .nav.open{background:oklch(0.15 0 0);max-height:100svh;overflow-y:auto;}
  .brand{order:1;}
  .nav-burger{
    display:flex;order:2;margin-left:auto;
    flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:2.75rem;height:2.75rem;padding:0;background:none;border:0;cursor:pointer;
  }
  .nav-burger span{
    display:block;height:2px;width:1.375rem;border-radius:2px;background:oklch(1 0 0 / .9);
    transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s;
  }
  .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .nav-burger span:nth-child(2){opacity:0;}
  .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-links,.nav-actions{flex-basis:100%;display:none;}
  .nav-links{order:3;}
  .nav-actions{order:4;}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:.125rem;
    margin-top:1rem;padding:.75rem;
    background:oklch(0.17 0 0);border-radius:var(--r-3xl) var(--r-3xl) 0 0;
  }
  .nav.open .nav-actions{
    display:flex;flex-direction:column;align-items:stretch;gap:.625rem;
    padding:.75rem;margin-bottom:.75rem;
    background:oklch(0.17 0 0);border-radius:0 0 var(--r-3xl) var(--r-3xl);
  }
  .nav.open .nav-actions .luma-btn{width:100%;height:2.875rem;}

  .nav.open .nav-link,.nav.open .nav-item{padding:.8125rem .875rem;border-radius:var(--r-2xl);}
  .nav.open .nav-link:hover,.nav.open .nav-link[aria-current="page"],.nav.open .nav-item:hover{background:oklch(1 0 0 / .06);color:#fff;}

  /* Platform dropdown flattened: hide the trigger, show Features + Use Cases inline */
  .nav.open .nav-drop{display:flex;flex-direction:column;}
  .nav.open .nav-trigger{display:none;}
  .nav.open .nav-menu{
    position:static;min-width:0;display:flex;
    opacity:1;transform:none;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:0;margin:0;gap:.125rem;
  }
  .nav.open .nav-item-t{color:oklch(1 0 0 / .88);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:.8125rem;}
  .nav.open .nav-item-s{display:none;}
}