
.jnl-topbar{
  position:sticky;
  top:0;
  z-index:1200;
  backdrop-filter:blur(18px);
  background:rgba(6,10,20,.78);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.jnl-container{
  max-width:1320px;
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:18px;
}
.jnl-brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}
.jnl-brand:hover{color:#fff}
.jnl-brand img{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.jnl-brand-meta{display:flex;flex-direction:column;line-height:1.04;min-width:0}
.jnl-brand-meta > span{font-size:1.04rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.jnl-brand-meta small{font-size:.74rem;font-weight:700;color:rgba(226,232,240,.72);letter-spacing:.02em;white-space:nowrap}
.jnl-nav-toggle{
  margin-left:auto;
  width:46px;
  height:46px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
}
.jnl-nav-toggle:hover{background:rgba(255,255,255,.10)}
.jnl-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.jnl-pill,.jnl-dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:.56rem;
  min-height:46px;
  padding:.52rem .92rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:transform .14s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.jnl-pill:hover,.jnl-pill:focus,.jnl-dropdown-toggle:hover,.jnl-dropdown-toggle:focus{
  transform:translateY(-1px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 26px rgba(0,0,0,.16);
  color:#fff;
}
.jnl-pill-cta{
  background:linear-gradient(180deg, rgba(56,189,248,.18), rgba(14,116,144,.18));
  border-color:rgba(56,189,248,.28);
}
.jnl-pill-soft{
  background:linear-gradient(180deg, rgba(45,212,191,.18), rgba(56,189,248,.12));
  border-color:rgba(45,212,191,.28);
}
.jnl-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.jnl-dot.blue{background:#38bdf8}
.jnl-dot.green{background:#2dd4bf}
.jnl-dot.purple{background:#a78bfa}
.jnl-dot.orange{background:#f59e0b}
.jnl-dot.teal{background:#14b8a6}
.jnl-dropdown{position:relative}
.jnl-dropdown-toggle{
  appearance:none;
  -webkit-appearance:none;
}
.jnl-dropdown-toggle::after{
  content:'';
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  margin-left:.1rem;
  opacity:.9;
}
.jnl-dropdown-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:260px;
  padding:.6rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,13,24,.98);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.jnl-dropdown:hover .jnl-dropdown-menu,
.jnl-dropdown.open .jnl-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.jnl-dropdown-menu a{
  display:block;
  padding:.72rem .82rem;
  border-radius:12px;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-weight:600;
}
.jnl-dropdown-menu a:hover,
.jnl-dropdown-menu a:focus{background:rgba(255,255,255,.08);color:#fff}
.jnl-dropdown-menu a.active{background:rgba(45,212,191,.14);color:#fff}
@media (max-width: 1120px){
  .jnl-container{flex-wrap:wrap}
  .jnl-nav-toggle{display:inline-flex}
  .jnl-nav{
    display:none;
    width:100%;
    margin:8px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.10);
    flex-direction:column;
    align-items:stretch;
  }
  .jnl-nav.open{display:flex}
  .jnl-pill,.jnl-dropdown-toggle{width:100%;justify-content:flex-start;border-radius:18px;padding:.84rem 1rem}
  .jnl-dropdown{width:100%}
  .jnl-dropdown-menu{
    position:static;
    min-width:0;
    margin-top:10px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .jnl-dropdown.open .jnl-dropdown-menu{display:block}
}
@media (max-width: 640px){
  .jnl-container{padding:12px 14px}
  .jnl-brand img{width:42px;height:42px;border-radius:14px}
  .jnl-brand-meta > span{font-size:.98rem}
  .jnl-brand-meta small{font-size:.68rem}
}


/* ===== Ultra elegant navigation pass ===== */
.jnl-container{max-width:1280px;padding:12px 18px;gap:14px}
.jnl-brand img{width:44px;height:44px;border-radius:14px}
.jnl-brand-meta > span{font-size:.96rem;font-weight:760}
.jnl-brand-meta small{font-size:.68rem}
.jnl-nav{gap:8px}
.jnl-pill,.jnl-dropdown-toggle{
  min-height:42px;
  padding:.46rem .8rem;
  font-size:.84rem;
  font-weight:650;
}
.jnl-dropdown-menu{min-width:240px}
@media (max-width: 1120px){
  .jnl-pill,.jnl-dropdown-toggle{padding:.76rem .92rem}
}
@media (max-width: 640px){
  .jnl-container{padding:11px 14px}
  .jnl-brand img{width:40px;height:40px}
  .jnl-brand-meta > span{font-size:.9rem}
  .jnl-brand-meta small{font-size:.64rem}
}


/* ===== JNL Software nav refresh ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap');
.jnl-topbar{
  background:rgba(7,14,28,.78);
  border-bottom:1px solid rgba(184,208,224,.10);
  backdrop-filter:blur(22px);
}
.jnl-brand img{width:44px;height:44px;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.jnl-brand-meta > span{font-family:'Manrope','Inter',sans-serif;font-size:.98rem;font-weight:800}
.jnl-brand-meta small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#b8c9d7}
.jnl-pill,.jnl-dropdown-toggle{border-color:rgba(184,208,224,.10);background:rgba(255,255,255,.045)}
.jnl-pill-cta{background:linear-gradient(180deg, rgba(12,55,99,.34), rgba(9,35,65,.24));border-color:rgba(31,181,184,.20)}
.jnl-pill-soft{background:linear-gradient(180deg, rgba(31,181,184,.16), rgba(12,55,99,.16));border-color:rgba(31,181,184,.22)}


/* ===== Final polish v4 ===== */
.jnl-topbar{
  background:rgba(7,14,26,.82);
  border-bottom:1px solid rgba(194,211,225,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.jnl-container{max-width:1380px;padding:12px 18px;gap:14px}
.jnl-brand img{width:42px;height:42px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.14))}
.jnl-brand-meta > span{font-size:.98rem;font-weight:800}
.jnl-brand-meta small{font-size:.64rem;letter-spacing:.1em;color:#b6c6d3}
.jnl-pill,.jnl-dropdown-toggle{
  min-height:40px;
  padding:.46rem .82rem;
  font-size:.82rem;
  font-weight:700;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(194,211,225,.09);
  box-shadow:none;
}
.jnl-pill:hover,.jnl-pill:focus,.jnl-dropdown-toggle:hover,.jnl-dropdown-toggle:focus{
  background:rgba(255,255,255,.055);
  border-color:rgba(194,211,225,.15);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.jnl-pill-cta{background:linear-gradient(180deg, rgba(20,63,108,.34), rgba(11,35,58,.28));border-color:rgba(33,174,176,.18)}
.jnl-pill-soft{background:linear-gradient(180deg, rgba(33,174,176,.12), rgba(20,63,108,.12));border-color:rgba(33,174,176,.18)}
.jnl-dropdown-menu{
  border-radius:16px;
  border:1px solid rgba(194,211,225,.10);
  background:rgba(8,15,27,.98);
  box-shadow:0 18px 40px rgba(0,0,0,.26);
}
.jnl-dropdown-menu a{font-size:.86rem}
@media (max-width:640px){
  .jnl-container{padding:11px 14px}
  .jnl-brand img{width:40px;height:40px}
}


/* ===== Navigation safety fix v6 ===== */
@media (max-width: 1560px){
  .jnl-container{max-width:1380px;gap:12px}
  .jnl-brand-meta small{display:none}
  .jnl-nav{gap:7px}
  .jnl-pill,.jnl-dropdown-toggle{
    min-height:38px;
    padding:.42rem .72rem;
    font-size:.78rem;
  }
}
@media (max-width: 1480px){
  .jnl-container{flex-wrap:wrap}
  .jnl-nav-toggle{display:inline-flex}
  .jnl-nav{
    display:none;
    width:100%;
    margin:8px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.10);
    flex-direction:column;
    align-items:stretch;
  }
  .jnl-nav.open{display:flex}
  .jnl-pill,.jnl-dropdown-toggle{
    width:100%;
    justify-content:flex-start;
    border-radius:18px;
    padding:.84rem 1rem;
  }
}


/* ===== Typography polish v7 ===== */
:root{
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.jnl-topbar,
.jnl-topbar *{
  font-family:var(--font-ui);
}
.jnl-brand-meta > span,
.jnl-brand-meta small,
.jnl-pill,
.jnl-dropdown-toggle,
.jnl-dropdown-menu,
.jnl-dropdown-menu a{
  font-family:var(--font-ui) !important;
}
.jnl-brand-meta > span{letter-spacing:-.018em;}
