:root{
  --omb-bg:#0b1220;
  --omb-text:#ffffff;
  --omb-hover:#60a5fa;
  --omb-active:#93c5fd;
  --omb-height:64px;
  --omb-radius:12px;
  --omb-gap:14px;
  --omb-pad-x:16px;
  --omb-pad-y:10px;
}

.omb-navbar{ position:relative; background: var(--omb-bg); color: var(--omb-text); border-radius: var(--omb-radius); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.omb-container{ max-width:1200px; margin:0 auto; padding:0 16px; min-height:var(--omb-height); display:flex; align-items:center; }
.omb-flex{ width:100%; display:flex; align-items:center; gap:var(--omb-gap); justify-content:flex-start; }
.omb-logo img{ display:block; height:auto; max-height: calc(var(--omb-height) - 22px); width:auto; }

.omb-toggle{ margin-inline-start:auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:transparent; border:0; cursor:pointer; }

.omb-nav-wrap{ width:100%; }
.omb-nav{ list-style:none; margin:0; padding:0; display:none; }
.omb-nav > li{ position:relative; }
.omb-link{ display:inline-flex; align-items:center; gap:8px; padding: var(--omb-pad-y) var(--omb-pad-x); color:inherit; text-decoration:none; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.omb-link:hover{ color: var(--omb-hover); }

/* Desktop baseline: JS will override per instance (bp) */
@media (min-width: 992px){
  .omb-toggle{ display:none; }
  .omb-nav{ display:flex; }
}

/* Variants */
.omb-style-pill .omb-link{ border-radius:999px; }
.omb-style-boxed .omb-link{ background: rgba(255,255,255,.06); border-radius:8px; }
.omb-style-ghost .omb-link:hover{ outline:1px solid color-mix(in oklab, var(--omb-hover) 35%, transparent); }

/* Underline */
.omb-style-underline .omb-link{ position:relative; }
.omb-style-underline .omb-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(0); transform-origin:center; transition: transform .18s ease; }
.omb-style-underline .omb-link:hover::after,
.omb-style-underline .current-menu-item > .omb-link::after{ transform: scaleX(1); }

/* Indicators (Active) */
.omb-ind-underline .current-menu-item > .omb-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(1); }
.omb-ind-overline .current-menu-item > .omb-link::before{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; top:6px; height:2px; background: currentColor; }
.omb-ind-border-b .current-menu-item > .omb-link{ box-shadow: inset 0 -3px 0 var(--omb-active); }
.omb-ind-pill-active .current-menu-item > .omb-link{ background: color-mix(in oklab, var(--omb-hover) 18%, transparent); border-radius:999px; }
.omb-ind-dot .current-menu-item > .omb-link::before{ content:''; width:6px; height:6px; border-radius:999px; background: currentColor; position:absolute; inset-inline-start:8px; top:50%; transform: translateY(-50%); }
.omb-ind-caret .current-menu-item > .omb-link::after{ content:'▾'; margin-inline-start:6px; }
.omb-ind-marker .current-menu-item > .omb-link{ box-shadow: inset 0 -8px 0 color-mix(in oklab, var(--omb-hover) 25%, transparent); }
.omb-ind-gradient-ul .current-menu-item > .omb-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:3px; background: linear-gradient(90deg, var(--omb-hover), var(--omb-active)); }

/* Hover Effects */
.omb-hover-underline-slide .omb-link{ position:relative; }
.omb-hover-underline-slide .omb-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(0); transition: transform .2s ease; }
.omb-hover-underline-slide .omb-link:hover::after{ transform: scaleX(1); }
.omb-hover-lift .omb-link{ transition: transform .2s ease; }
.omb-hover-lift .omb-link:hover{ transform: translateY(-2px); }
.omb-hover-border-grow .omb-link{ transition: box-shadow .2s ease; }
.omb-hover-border-grow .omb-link:hover{ box-shadow: inset 0 -3px 0 currentColor; }

/* Mobile open state */
.omb-open .omb-nav{ display:block; }