:root{
  --nav-bg:rgba(7,17,31,.82);
  --nav-border:rgba(135,196,255,.14);
  --nav-text:#e6f1ff;
  --nav-muted:#9fb1cc;
  --nav-primary:#57e6ff;
  --nav-primary-2:#2bb7ff;
  --nav-accent:#8b5cf6;
  --nav-shadow:0 10px 40px rgba(0,0,0,.32);
}

/* ── Navbar ── */
.oc-nav{
  position:sticky;top:0;z-index:40;
  background:var(--nav-bg);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--nav-border);
}
.oc-nav-inner{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;
}
.oc-brand{display:flex;align-items:center;gap:10px;color:var(--nav-text);text-decoration:none;min-width:0}
.oc-brand-badge{
  width:40px;height:40px;border-radius:13px;
  background:linear-gradient(135deg,var(--nav-primary),var(--nav-accent));
  display:grid;place-items:center;color:#04101d;font-weight:800;flex-shrink:0;
}
.oc-brand-text{display:flex;flex-direction:column;min-width:0}
.oc-brand-text strong{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-brand-text span{font-size:.78rem;color:var(--nav-muted)}

/* ── Nav right section ── */
.oc-nav-right{display:flex;align-items:center;gap:10px}

/* ── Links container ── */
.oc-nav-links{display:flex;align-items:center;gap:10px}

/* ── Link / CTA buttons ── */
.oc-nav-link,.oc-nav-cta,.oc-nav-menu-btn,.oc-lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:12px;
  text-decoration:none;font-weight:700;transition:.2s ease;
  border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:.92rem;
}
.oc-nav-link{color:var(--nav-text);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.oc-nav-cta{color:#04101d;background:linear-gradient(135deg,var(--nav-primary),var(--nav-primary-2));box-shadow:0 8px 24px rgba(43,183,255,.22)}
.oc-nav-menu-btn{display:none;color:var(--nav-text);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);font-size:1.2rem;padding:11px 13px}
.oc-nav-user{color:var(--nav-text);background:rgba(87,230,255,.10);border-color:rgba(87,230,255,.18)}

/* ── Language toggle ── */
.oc-lang-toggle{
  color:var(--nav-text);background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.22);
  font-size:.86rem;padding:9px 12px;border-radius:10px;
}
.oc-lang-toggle:hover{background:rgba(139,92,246,.18)}

/* ── Hover ── */
.oc-nav-link:hover,.oc-nav-cta:hover,.oc-nav-menu-btn:hover{transform:translateY(-1px)}

/* ── Mobile hamburger ── */
@media(max-width:767px){
  .oc-nav-inner{padding:12px 0;flex-wrap:nowrap}
  .oc-brand-text span{display:none}
  .oc-nav-right{gap:8px}
  .oc-nav-menu-btn{display:inline-flex;order:2}
  .oc-lang-toggle{order:1}
  .oc-nav-links{
    display:none;position:absolute;top:100%;left:12px;right:12px;
    flex-direction:column;align-items:stretch;
    padding:14px;border-radius:18px;
    background:rgba(7,17,31,.97);border:1px solid var(--nav-border);
    box-shadow:var(--nav-shadow);z-index:50;
    gap:8px;
  }
  .oc-nav-links.open{display:flex}
  .oc-nav-link,.oc-nav-cta,.oc-nav-user{width:100%;text-align:center}
  .oc-nav-links .oc-lang-toggle{display:flex;width:100%;justify-content:center}
}

/* ── Footer ── */
.oc-footer{
  padding:28px 0;
  color:var(--nav-muted);font-size:.9rem;
  border-top:1px solid var(--nav-border);
  margin-top:40px;
}
.oc-footer-inner{
  width:min(1180px,calc(100% - 32px));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.oc-footer a{color:var(--nav-primary);text-decoration:none}
.oc-footer a:hover{text-decoration:underline}
.oc-footer .oc-lang-toggle{font-size:.82rem;padding:7px 10px}